argos/dmp-frontend/src/app/projects/listing/project-listing.component.html

<div>
	<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>

	<mat-card class="mat-card">
		<mat-card-header>
			<!-- <mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar> -->
		</mat-card-header>
		<mat-card-content>
			<div class="row">
				<app-projects-criteria-component class="col-md-12"></app-projects-criteria-component>
				<mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">

					<ng-container cdkColumnDef="avatar">
						<mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row">
							<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
						</mat-cell>
					</ng-container>
					<!-- Column Definition: Name -->
					<ng-container cdkColumnDef="name">
						<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
					</ng-container>

					<!-- Column Definition: Αbbreviation -->
					<ng-container cdkColumnDef="abbreviation">
						<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
							translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
					</ng-container>

					<!-- Column Definition: Start -->
					<ng-container cdkColumnDef="start">
						<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
					</ng-container>

					<!-- Column Definition: End -->
					<ng-container cdkColumnDef="end">
						<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
					</ng-container>

					<!-- Column Definition: End -->
					<ng-container cdkColumnDef="dmps">
						<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
						<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
							<app-url-listing [items]="row.dmps" [urlLimit]="5" [parameters]="{ projectLabel: row.label }"></app-url-listing>
						</mat-cell>
					</ng-container>


					<!-- Column Definition: Submission Time -->
					<!-- <ng-container cdkColumnDef="actions">
				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
				<mat-cell *matCellDef="let row"></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>
			</div>
		</mat-card-content>
	</mat-card>

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