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

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<div class="uk-grid">
  <div class="uk-width-expand uk-position-relative uk-margin-small-top">
    <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
            [texts]="pageContents['top']"></helper>
    <div *ngIf="filterForm" [id]="actions?'page_content_actions':null" [class.uk-blur-background]="actions" [attr.uk-sticky]="(actions)?'media: @m':null" [attr.offset]="offset">
      <div [class.uk-padding-small]="actions" class="uk-padding-remove-vertical">

          <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">
          <div search-input [disabled]="loading" [searchControl]="filterForm.controls.keyword" searchInputClass="outer"
               placeholder="Search links" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"
               (searchEmitter)="changeKeyword()" [expandable]="true"></div>
        </div>
      </div>
    </div>
    <div [class.uk-padding]="actions" class="uk-padding-remove-vertical">
      <div class="uk-margin-small-top">
        <results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size" [hasSearch]="true" [searchTerm]="keyword"
                           [totalResults]="resultsNum" customClasses="uk-margin-remove"></results-and-pages>
      </div>
      <div class="uk-grid uk-flex-middle uk-margin-small-top" uk-grid>
        <div *ngIf="fetchBy != 'User' && properties.environment == 'development'" >
          <input  [(ngModel)]="mine" [checked]="mine" (ngModelChange)="goTo(1)"   type="checkbox"   class="uk-checkbox"> Mine
        </div>
        <div>
          <dropdown-filter #dropdownFilter dropdownClass="uk-width-medium uk-padding-small"
                           name="Type of Entity" [disabled]="loading" [count]="entities.length">
            <h6 class="uk-margin-remove-bottom" title="Type of Entity">Type of Entity</h6>
            <ul class="uk-list uk-margin-remove-bottom">
              <li *ngFor="let option of allOptions">
                <a class="uk-link-text">
                  <label (click)="select(option.value, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
                    <input class="uk-checkbox"
                           type="checkbox" [checked]="isSelected(option.value)">
                    <span class="uk-margin-small-left">{{option.label}}</span>
                  </label>
                </a>
              </li>
            </ul>
          </dropdown-filter>
        </div>
        <div>
          <div input inputClass="flat x-small" placeholder="Sort by"
               [formInput]="filterForm.get('sort')" class="uk-width-small"
               type="select" [options]="sortOptions">
          </div>
        </div>

        <div class="uk-width-expand@l uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
          <paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
                          [loading]="false" (pageChange)="pageChange($event)"></paging-no-load>
        </div>
      </div>
      <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
        <div *ngIf="loading" class="uk-position-center">
          <loading></loading>
        </div>
        <div *ngIf="!loading">
          <div *ngIf="claims && claims.length == 0"  class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
            <div>No links found</div>
          </div>
          <ng-container *ngIf="claims && claims.length > 0">

            <div class="uk-flex uk-flex-middle uk-margin-top uk-margin-small-bottom uk-padding-small uk-padding-remove-horizontal">
              <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
                <label>
                  <input id="checkAll" type="checkbox" (click)="selectAll($event)" class="uk-checkbox" title="Select All"
                    [ngModel]="selected.length == claims.length"/>
                </label>
              </div>
              <button class="uk-button uk-button-link" [class.uk-disabled]="selected.length == 0" [disabled]="selected.length == 0"
                (click)="deleteOpen()">
                <span>Delete ({{selected.length}})</span>
              </button>
            </div>

            <ul class="uk-margin-small-top uk-list uk-list-striped">
              <li *ngFor="let claim of claims;  let i=index" class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-horizontal">
                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
                  <input type="checkbox" class="uk-checkbox"
                    [id]="claim.id" (click)="selectClaim(claim, $event)" [ngModel]="isSelectedClaim(claim.id)">
                </div>
                <div class="uk-width-expand">
                  <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
                    <div class="uk-width-expand">
                      <div class="uk-margin-small-bottom">
                        <claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
                                      [externalPortalUrl]=externalPortalUrl [source]="true" [linkAvailable]="isClaimAvailable(claim)"></claim-entity>
                      </div>
                      <div class="uk-margin-small-bottom">
                        <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-small uk-label-success"
                              [attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
                        <ng-template #notAvailable>
                          <span class="uk-label uk-label-small uk-label-danger"
                              [attr.uk-tooltip]="'title:The link information  will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
                        </ng-template>
                      </div>
                      <div class="uk-text-small">
                        <div *ngIf="showUserEmail" class="uk-margin-xsmall-bottom">
                          <span class="uk-text-meta">Claimed by:</span>
                          <span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
                        </div>
                        <div>
                          <span class="uk-text-meta">Claimed date:</span>
                          <span class="uk-margin-xsmall-left">{{claim.date}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="uk-visible@m">
                      <div class="claim-divider">
                        <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
                      </div>
                    </div>
                    <div class="uk-width-1-2@m uk-width-1-1">
                      <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
                                    [externalPortalUrl]=externalPortalUrl></claim-entity>
                    </div>
                  </div>
                </div>
                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
                  <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
                    <icon name="delete" [flex]="true"></icon>
                  </button>
                </div>
              </li>
            </ul>
            <div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
              <paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
                              (pageChange)="pageChange($event)"></paging-no-load>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
          [texts]="pageContents['right']" class="uk-width-1-5"></helper>
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
        [texts]="pageContents['bottom']"></helper>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="delete()">
</modal-alert>