connect-admin/src/app/pages/zenodo-communities/manage-zenodo-communities.component.html

<div page-content>
  <div actions>
    <div class="uk-section-xsmall uk-margin-top">
      <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid>
        <div search-input [expandable]="true" [searchControl]="filterForm" searchInputClass="outer"
             placeholder="Search Zenodo Community" [disabled]="searchUtils.status === errorCodes.LOADING"
             class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
        <div>
          <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="addNew()"
                  uk-tooltip="title:<div class='uk-text-bold'> Search and add more Zenodo Communities</div><div>The research results of a Zenodo community specified here will be automatically linked to your community dashboard.</div>"
                  [disabled]="searchUtils.status === errorCodes.LOADING"
                  [class.uk-disabled]="searchUtils.status === errorCodes.LOADING">
            <icon name="add" [flex]="true"></icon>
            <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">New Zenodo Community</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div inner>
    <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
      <div *ngIf="searchUtils.status == errorCodes.LOADING" class="uk-position-center">
        <loading></loading>
      </div>
      <div *ngIf="searchUtils.status !== errorCodes.LOADING">
        <div *ngIf="previewCommunities.length == 0"
             class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
          <div>No zenodo communities
            <span *ngIf="selectedCommunities.length == 0; else: notFound">for {{community.shortTitle}}</span>
            <ng-template #notFound>found</ng-template>
          </div>
        </div>
        <div *ngIf="previewCommunities.length > 0">
          <no-load-paging [type]="'Zenodo communities'"
                          (pageChange)="updatePage($event)"
                          [page]="page" [pageSize]="size"
                          [totalResults]="previewCommunities.length">
          </no-load-paging>
<!--          <ul class="uk-margin-medium-top uk-margin-bottom uk-list uk-list-xlarge">-->
          <div class="uk-grid uk-grid-large uk-child-width-1-1 uk-margin-medium-top uk-margin-bottom" uk-grid>
            <div *ngFor="let item of previewCommunities.slice((this.page - 1)*this.size, this.page*this.size); let i=index">
              <div class="uk-card uk-card-default">
                <div class="uk-card-body">
                  <preview-zenodo-community [item]="item" [master]="masterCommunity && item.id==masterCommunity.id"></preview-zenodo-community>
                </div>
                <div *ngIf="!masterCommunity || item.id!==masterCommunity.id" class="uk-card-footer uk-padding-remove-vertical">
                  <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
                    <div>
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <button class="uk-button uk-button-link uk-flex uk-flex-middle"
                                (click)="removeCommunity(item)">
                          <icon name="remove" [flex]="true"></icon>
                          <span class="uk-margin-xsmall-left">Remove</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
<!--          </ul>-->
          <div class="uk-margin-small-top">
            <paging-no-load  [currentPage]="page"
                             [totalResults]="previewCommunities.length" [size]="size"
                             (pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
            </paging-no-load>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteCommunity($event)" [overflowBody]="false"></modal-alert>