argos/dmp-frontend/src/app/dmps/listing/dmp-listing.component.html

<div class="container-fluid">
  <h3>{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>

  <app-dmp-criteria-component [showProject]="showProject"></app-dmp-criteria-component>
  <mat-card class="mat-card">
    <mat-card-header>
      <mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
    </mat-card-header>
    <mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">


      <!-- Column Definition: Name -->
      <ng-container cdkColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
      </ng-container>

      <!-- Column Definition: Project -->
      <ng-container cdkColumnDef="project">
        <mat-header-cell *matHeaderCellDef mat-sort-header="|join|project:label">{{'DMP-LISTING.COLUMNS.PROJECT' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
      </ng-container>

      <!-- Column Definition: Profile -->
      <!-- <ng-container cdkColumnDef="profile">
                <mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.PROFILE' | translate}}</mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
            </ng-container> -->

      <!-- Column Definition: Researchers -->
      <ng-container cdkColumnDef="creationTime">
        <mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.creationTime | date:'shortDate'}} </mat-cell>
      </ng-container>

      <!-- Column Definition: Organisations -->
      <ng-container cdkColumnDef="organisations">
        <mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
      </ng-container>

      <!-- Column Definition: Version -->
      <ng-container cdkColumnDef="version">
        <mat-header-cell *matHeaderCellDef mat-sort-header="version">{{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.version}}</mat-cell>
      </ng-container>

      <!-- Column Definition: Datasets -->
      <ng-container cdkColumnDef="datasets">
        <mat-header-cell *matHeaderCellDef mat-sort-header="|count|dataset">{{'DMP-LISTING.COLUMNS.DATASETS' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
          <app-url-listing [items]="row.datasets" [urlLimit]="5" [parameters]="{ datasetLabel: row.label }"></app-url-listing>
        </mat-cell>
      </ng-container>

      <ng-container cdkColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
          <mat-menu #actionsMenu="matMenu">
            <button mat-menu-item (click)="openShareDialog(row.id,row.label)">
              <mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</button>
            <button mat-menu-item (click)="addDataset(row.id)">
              <mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}</button>
            <button mat-menu-item (click)="showDatasets(row.id, row.label)">
              <mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}</button>
            <button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
              <mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}</button>
          </mat-menu>
          <button mat-icon-button [matMenuTriggerFor]="actionsMenu">
            <mat-icon>more_vert</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>

    </mat-table>
    <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
    </mat-paginator>
  </mat-card>

  <button *ngIf="!this.projectId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
    <mat-icon class="mat-24">add</mat-icon>
  </button>
</div>