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">
    <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-section-xsmall">
          <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>
    <div [class.uk-padding]="actions" class="uk-padding-remove-vertical">
      <div class="uk-margin-medium-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-medium-top" uk-grid>
        <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>
          <ul class="uk-margin-small-top uk-list uk-list-xlarge">
            <li *ngFor="let claim of claims;  let i=index" class="uk-card uk-card-default">
              <div class="uk-card-body">
                <div class="uk-grid uk-grid-small" uk-grid>
                  <div class="uk-width-expand">
                    <div class="uk-margin-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-bottom">
                      <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label 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-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-small-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 uk-flex uk-flex-column uk-flex-center">
                    <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
                                  [externalPortalUrl]=externalPortalUrl></claim-entity>
                  </div>
                </div>
              </div>
              <div class="uk-card-footer uk-flex uk-flex-right">
                <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
                  <icon name="delete" [flex]="true"></icon>
                  <span class="uk-margin-xsmall-left">Delete</span>
                </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>
        </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>