D-Net

<div page-content>

  <div header>

    <community-info tab="projects"></community-info>

    <div [class.uk-invisible]="showLoading"

         class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>

      <div class="uk-flex-last@m">

        <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="addNew()"

           [attr.uk-tooltip]="(toggle? 'cls: uk-invisible; ' : 'cls: uk-active; ') +

                'title: <div class=\'uk-padding-small\'><div class=\'uk-margin-bottom uk-text-bold\'> Search and add more Projects</div><div>The research results linked to the projects specified here will be automatically linked to your community dashboard.</div></div>'">

          <button class="uk-icon-button large uk-button-secondary">

            <icon name="add"></icon>

          </button>

          <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add new project</button>

        </a>

      </div>

      <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"

           placeholder="Search Projects"

           [selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"

           [bordered]="true" colorClass="uk-text-secondary"

           class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>

    </div>

  </div>

  <div inner>

    <div *ngIf="showLoading" class="uk-margin-large-top">

      <loading></loading>

    </div>

    <div *ngIf="!showLoading">

      <div>

        <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-bottom" uk-grid>

          <div *ngIf="allOptions.length > 0"

               class="uk-grid uk-flex-middle uk-flex-left@m uk-flex-center uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-first-column">

            <span class="">Filter by: </span>

            <div class="uk-width-expand uk-padding-remove uk-margin-small-left" dashboard-input

                 [formInput]="filterForm.get('funder')"

                 placeholder="Search by funders"

                 type="chips" [options]="allOptions" chipLabel="label">

            </div>

          </div>

          <div *ngIf="previewCommunityProjects.length > 0"

               class="uk-width-expand@m uk-width-1-1">

            <div class="uk-flex-middle uk-flex-right@m uk-flex-center uk-grid">

              <span class="">Sort by: </span>

              <div class="uk-width-medium uk-padding-remove uk-margin-small-left" dashboard-input

                   [formInput]="filterForm.get('sort')"

                   type="select"

                   [options]="sortOptions">

              </div>

            </div>

          </div>

        </div>

        <no-load-paging *ngIf="previewCommunityProjects.length > 0" [type]="'projects'"

                        (pageChange)="updatePage($event)"

                        [page]="page" [pageSize]="resultsPerPage"

                        [totalResults]="previewCommunityProjects.length">

        </no-load-paging>

        <div class="uk-margin-medium-top 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 projects for {{name}}</div>

          </div>

          <div class="uk-card uk-card-default uk-text-small uk-margin-bottom"

               *ngFor="let item of previewCommunityProjects.slice((page - 1)*resultsPerPage, page*resultsPerPage)">

            <div class="uk-grid uk-grid-divider uk-padding" uk-grid>

              <div class="uk-width-expand@m uk-width-1-1">

                <div class="uk-padding-small uk-padding-remove-horizontal">

                  <h6 class="uk-margin-small-bottom">

                    <a *ngIf="item.openaireId || (item.grantId && item.funder)"

                       target="_blank"

                       [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>

                      <span class="custom-external custom-icon space"></span>

                    </a>

                    <span *ngIf="!item.openaireId && !(item.grantId && 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>

                    </span>

                  </h6>

                  <div *ngIf="item.grantId" class="uk-margin-small-bottom">

                    <span class="title">Grant ID: </span>

                    <span>{{item.grantId}}</span>

                  </div>

                  <div *ngIf="item.funder" class="uk-margin-small-bottom">

                    <span class="title">Funder: </span>

                    <span>{{item.funder}}</span>

                  </div>

                </div>

              </div>

              <div class="uk-width-auto@m uk-width-1-1">

                <div class="uk-flex uk-flex-middle uk-flex-center uk-height-1-1">

                  <div class="uk-padding-small uk-padding-remove-horizontal">

                    <a (click)="removeProject(item)" class="uk-button action uk-flex uk-flex-middle">

                      <icon name="remove_circle_outline"></icon>

                      <span class="uk-margin-small-left">Remove project</span>

                    </a>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

        <no-load-paging *ngIf="previewCommunityProjects.length > 0" [type]="'projects'"

                        (pageChange)="updatePage($event)"

                        [page]="page" [pageSize]="resultsPerPage"

                        [totalResults]="previewCommunityProjects.length">

        </no-load-paging>

      </div>

    </div>

    <modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteProject($event)"></modal-alert>

  </div>

</div>