argos/dmp-frontend/src/app/ui/admin/description-types/listing/description-types.component...

51 lines
2.2 KiB
HTML

<div class="main-content">
<div class="container-fluid description-types-listing">
<div class="row align-items-center">
<div class="col-auto">
<h3>{{'DESCRIPTION-TYPES-LISTING.TITLE' | translate}}</h3>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['/description-types/new']">
<span class="button-text">
{{'DESCRIPTION-TYPES-LISTING.CREATE-TYPE' | translate}}
</span>
</button>
</div>
</div>
<!-- <app-dmp-profile-criteria-component></app-dmp-profile-criteria-component> -->
<div class="mat-elevation-z6">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">
{{'DESCRIPTION-TYPES-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DESCRIPTION-TYPES-LISTING.COLUMNS.STATUS' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> <div [ngClass]="['status-chip',getStatusClass(row.status)]">{{parseStatus(row.status) | translate}}</div></mat-cell>
</ng-container>
<ng-container cdkColumnDef="delete">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<button mat-icon-button (click)="deleteTemplate(row.id)">
<mat-icon [matTooltip]="('DESCRIPTION-TYPES-LISTING.ACTIONS.DELETE' | translate)" matTooltipPosition="right" class="dlt-btn">delete</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>
</div>
</div>
</div>