openaire-library/claims/claim-utils/claimContextSearchForm.component.html

    <div class="uk-grid uk-margin-top uk-animation-fade">
      <div class="uk-width-expand">
          <div  class="uk-display-inline-block">
              <advanced-search-input (searchEmitter)="$event">
                  <div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
                       [options]="showOptions.selectOptions"></div>
                  <div input type="text" [(value)]="keyword" [searchable]="true" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.COMMUNITIES + '...'"></div>
              </advanced-search-input>
          </div>
     
        <div *ngIf="communities" class=" uk-padding uk-grid uk-child-width-1-3 uk-grid-small uk-grid-match"
        uk-grid >
          <ng-container *ngFor="let community of filter()">
            <a class="uk-padding-small uk-link-reset community-card " (click)="select(community.id, community.label)">
            <div [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''" 
                 class="uk-card uk-card-default uk-card-hover uk-padding-small uk-text-center " >
              <div class="uk-text-right" >
                <a 
                  [class]="(this.results.length>=basketLimit)?'uk-icon-button uk-disabled disabled':'uk-icon-button enabled'" *ngIf="!isSelected(community.id)"
                   >
                        <span class="uk-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus"
                             ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17"
                                                                                            height="1"></rect></svg>
                     </span>
                </a>
                <a *ngIf="isSelected(community.id)" class="uk-icon-button selected " 
                   (click)="openModal()">
                     <span class="uk-icon" >
                      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
                     </span>
                </a>
              </div>
              <img *ngIf="communityLogos && communityLogos[community.id]  else 
              elseBlock" 
                   [src]="communityLogos[community.id] |logoUrl" 
                   class="uk-blend-multiply"
                   [alt]="((community.title)?community.title:(community.shortTitle?community.shortTitle:'')) + ' logo'" 
                   loading="lazy" style="max-height:70px">
              <ng-template #elseBlock>
                <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" 
                     class="uk-blend-multiply" style="max-height:70px">
              </ng-template>
             
              <div  class="uk-margin-small-top">
                {{community.label}}

              </div>
              
            </div>
            </a>
          </ng-container>
        
        </div>
        <ng-container *ngIf="filter().length == 0">
          <div class="uk-alert uk-alert-primary"
               role="alert">No Results found
          </div>
        </ng-container>
      </div>
    </div>
        <!-- Categories modal-->
        <modal-alert  #modal  large="true"  >
          
          <div class="uk-modal-body uk-height-min-medium uk-width-expand">
            <div class="uk-margin-bottom">
         
              <input 
                     [ngModel]="isSelected(selectedCommunityId)" type="checkbox"
                     (ngModelChange)="isSelected(selectedCommunityId)?removeById(selectedCommunityId):select(selectedCommunityId,
              selectedCommunityLabel);"
              >

              <span class="uk-margin-small-left">{{selectedCommunityLabel}}</span>
            </div>
            <div *ngIf="loading" class="uk-alert uk-alert-primary" role="alert">Loading communities information...</div>
            <div *ngIf="error" class="uk-alert uk-alert-warning"
                 role="alert">An error occured while loading communities...
            </div>

            <div class="uk-margin-small-top uk-text-small uk-text-meta" *ngIf="categories[selectedCommunityId] &&
            categories[selectedCommunityId].length > 0 ">
              Optionally, you can <span class="uk-text-bold">specify additional</span> Community's <span 
              class="uk-text-bold">paths</span> to link your 
              sources.
            </div>
            <div *ngIf="categories[selectedCommunityId] && categories[selectedCommunityId].length == 0 "
                 class="  uk-text-small uk-text-muted">
              No additional community paths found for this community.
            </div>
            <ul *ngIf="categories[selectedCommunityId] && categories[selectedCommunityId].length > 0 "
                class=" uk-list uk-margin-small-top  uk-margin-left uk-animation-fade uk-overflow-auto uk-height-medium">
              <li *ngFor="let category of categories[selectedCommunityId]">
                <div (click)="browseConcepts(category.id)">
                  <input [ngModel]="isSelected(category.id)" type="checkbox" 
                     (ngModelChange)="isSelected(category.id)?removeById(category.id):addNewContext(selectedCommunityLabel,category.label,{'id':category.id, 'label':category.label});"
                     >

               
                  <span class="uk-margin-small-left">{{category.label}} </span>
                  <span *ngIf="!conceptsClassDisplay[category.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
                  <span *ngIf="conceptsClassDisplay[category.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
                  </div>
                
                <div *ngIf="conceptsCategoryLoading[category.id]" class="uk-alert uk-alert-primary"
                     role="alert">Loading category information...
                </div>
                <div>
                  
                  <div
                    *ngIf="conceptsClass[category.id] && conceptsClass[category.id].length == 0 && conceptsClassDisplay[category.id]">No more paths found
                  </div>
                  <ul *ngIf="conceptsClass[category.id] && conceptsClassDisplay[category.id]"
                      class="uk-list  uk-animation-fade uk-margin-left  uk-margin-top" id="ul_{{category.id}}">
                    <li *ngFor="let concept1 of conceptsClass[category.id]">
                        <div (click)="displaySubcategory(concept1.id)">
                          <input [ngModel]="isSelected(concept1.id)" type="checkbox"
                                 (ngModelChange)="isSelected(concept1.id)?removeById(concept1.id):addNewContext(selectedCommunityLabel,category.label,concept1);">
                          <span class="uk-margin-small-left">{{concept1.label}}</span>
                          <span *ngIf="concept1.concepts && concept1.concepts.length==0">
                            <span *ngIf="!conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
                            <span *ngIf="conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
                          </span>
                         </div> 
                      <div>
                        <div
                          *ngIf="concept1.concepts && concept1.concepts.length==0 &&  conceptsClassDisplay[concept1.id]">No more paths found
                        </div>
                        <ul *ngIf="concept1.concepts &&  conceptsClassDisplay[concept1.id] " 
                            class="uk-list uk-animation-fade uk-margin-left  uk-margin-top">
                          <li *ngFor="let concept2 of concept1.concepts">
                            <div (click)="displaySubcategory(concept2.id)">
                              <input [ngModel]="isSelected(concept2.id)" type="checkbox"
                                     (ngModelChange)="isSelected(concept2.id)?removeById(concept2.id):addNewContext(selectedCommunityLabel,category.label,concept2);" >
                              <span *ngIf="concept2.concepts && concept2.concepts.length==0">
                                <span class="uk-margin-small-left">{{concept2.label}}</span><span *ngIf="!conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-down; ratio:0.7"></span>
                                <span *ngIf="conceptsClassDisplay[concept1.id]" uk-icon="icon:chevron-up; ratio:0.7"></span>
                              </span>
                            </div>
                            <ul *ngIf="concept2.concepts &&  conceptsClassDisplay[concept2.id] "
                                class="uk-list uk-animation-fade uk-margin-left  uk-margin-top">
                              <li *ngFor="let concept3 of concept2.concepts">
                                <input [ngModel]="isSelected(concept3.id)" type="checkbox"
                                       (ngModelChange)="isSelected(concept3.id)?removeById(concept2.id):addNewContext(selectedCommunityLabel,category.label,concept3);">
                                <span class="uk-margin-small-left">{{concept3.label}}</span>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>

            </ul>
          </div>
       
    
        <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
        <div *ngIf="infoMessage.length > 0" class="uk-alert uk-alert-primary" role="alert">{{infoMessage}}</div>
        </modal-alert>