connect-admin/src/app/pages/projects/remove-projects.component.html

<div page-content>
  <div actions>
    <div class="uk-section-xsmall uk-margin-top">
      <div class="uk-flex uk-flex-middle">
        <div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-remove-left" uk-grid>
          <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer"
               placeholder="Search project" [disabled]="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()"
                    [attr.uk-tooltip]="('cls: uk-active; ') +
                    'title: <div class=\'uk-margin-bottom uk-text-bold\'> Search and add more '+openaireEntiites.PROJECTS+'</div>' +
                    '<div>The research results linked to the <span class=\'uk-text-lowercase\'>'+openaireEntiites.PROJECTS +
                    '</span> specified here will be automatically linked to your <span class=\'uk-text-lowercase\'>'+openaireEntiites.COMMUNITY+'</span> dashboard.</div>'"
                    [disabled]="loading" [class.uk-disabled]="loading">
              <icon name="add" [flex]="true"></icon>
              <span class="uk-margin-small-left">New {{openaireEntiites.PROJECT}}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div inner>
    <div class="uk-margin-top">
      <results-and-pages [type]="openaireEntiites.PROJECTS | lowercase" [page]="communitySearchUtils.page" [pageSize]="resultsPerPage"
                         [totalResults]="communitySearchUtils.totalResults"></results-and-pages>
    </div>
    <div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
      <div *ngIf="allFunderOptions.length > 0">
        <dropdown-filter #dropdownFilter dropdownClass="uk-width-medium uk-padding-small"
                         name="Filter by Funder" [count]="filterForm.get('funder').value?1:null">
          <h6 class="uk-margin-remove-bottom" title="Filter by Funder">Funder</h6>
          <ul class="uk-list uk-margin-remove-bottom">

            <li *ngFor="let option of previewFunderOptions">
              <a class="uk-link-text" >
                <label (click)="select(option, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
                  <input class="uk-checkbox"
                         type="checkbox" [checked]="isSelected(option.value.id)">
                  <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"
             [disabled]="previewCommunityProjects.length == 0"
             [formInput]="filterForm.get('sort')"
             type="select" [options]="sortOptions"
             class="uk-width-small">
        </div>
      </div>
<!--    </div>-->
      <div class="uk-width-expand@l uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
        <paging-no-load *ngIf="communitySearchUtils.totalResults> 0" [currentPage]="communitySearchUtils.page"
                        (pageChange)="updatePage($event)" [size]="resultsPerPage"
                        [totalResults]="communitySearchUtils.totalResults" customClasses="uk-flex-right">
        </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 class="uk-margin-medium-bottom">
            <div *ngIf="previewCommunityProjects.length == 0"
                 class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
              <div>No {{openaireEntiites.PROJECTS | lowercase}}
                <span *ngIf="communitySearchUtils.totalResults == 0; else: notFound">for {{community.shortTitle}}</span>
                <ng-template #notFound>found</ng-template>
              </div>
            </div>
            <div *ngIf="previewCommunityProjects.length > 0"
                 class="uk-grid uk-grid-large uk-child-width-1-1 uk-child-width-1-2@m uk-margin-bottom" uk-grid uk-height-match="target: .uk-card-body">
              <div *ngFor="let item of previewCommunityProjects; let i=index">
                <div class="uk-card uk-card-default">
                  <div class="uk-card-body">
                    <h6 class="uk-margin-bottom">
                      <a *ngIf="(item.openaireId || (item.grantId && item.funder)) && (!item['availableSince'] || !lastDBLoadDate || item['availableSince']<lastDBLoadDate)"
                         target="_blank" class="custom-external uk-link-text"
                         [href]="projectUrl+'?' + ((item.openaireId) ? 'projectId='+item.openaireId : 'grantId='+item.grantId+'&funder='+item.funder)">
                        <span *ngIf="item.name">{{item.name}}</span>
                        <span *ngIf="item.name && item.acronym"> (</span><span *ngIf="item.acronym">{{item.acronym}}</span><span *ngIf="item.name && item.acronym">)</span>
                        <span *ngIf="!item.name && !item.acronym">[no title available]</span>
                      </a>
                      <span *ngIf="(!item.openaireId && !(item.grantId && item.funder) || (item['availableSince'] && lastDBLoadDate && item['availableSince'] >= lastDBLoadDate))">
                        <span *ngIf="item.name">{{item.name}}</span>
                        <span *ngIf="item.name && item.acronym"> (</span><span *ngIf="item.acronym">{{item.acronym}}</span><span *ngIf="item.name && item.acronym">)</span>
                        <span *ngIf="!item.name && !item.acronym">[no title available]</span>
                      </span>
                    </h6>
                    <div class="uk-grid uk-child-width-1-2@l uk-text-small">
                      <div *ngIf="item.grantId">
                        <span class="uk-text-meta">Grant ID: </span>
                        <span>{{item.grantId}}</span>
                      </div>
                      <div *ngIf="item.funder">
                        <span class="uk-text-meta">Funder: </span>
                        <span>{{item.funder}}</span>
                      </div>
                    </div>
                  </div>
                  <div 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)="removeProject(item)">
                            <icon name="remove" [flex]="true"></icon>
                            <span class="uk-margin-xsmall-left">Remove</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="uk-margin-small-top">
              <paging-no-load  [currentPage]="page"
                               [totalResults]="communitySearchUtils.totalResults" [size]="resultsPerPage"
                               (pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
              </paging-no-load>
            </div>
          </div>
      </div>

      <modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteProject($event)" [overflowBody]="false"></modal-alert>
    </div>
  </div>
</div>