argos/dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/dmp-blueprint-listing.compo...

229 lines
7.8 KiB
HTML

<div class="row dmp-blueprint-listing-listing">
<div class="col-md-8 offset-md-2">
<div class="row mb-4 mt-3">
<div class="col">
<h4>{{'DMP-BLUEPRINT-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
[routerLink]="['/dmp-blueprint/new']">
<mat-icon>add</mat-icon>
{{'DMP-BLUEPRINT-LISTING.CREATE-DMP-BLUEPRINT' | translate}}
</button>
</div>
</div>
<app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
[count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
[defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-dmp-blueprint-listing-filters hybrid-listing-filters [(filter)]="lookup"
(filterChange)="filterChanged($event)" />
<app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup"
(onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings"
user-preference-settings />
<button mat-icon-button download-listing-report>
<mat-icon>download</mat-icon>
</button>
</app-hybrid-listing>
</div>
</div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">
<div class="d-flex align-items-center p-3 gap-1-rem">
<div class="row">
<ng-container *ngIf="isColumnSelected('label')">
<a class="buttonLinkClass" [routerLink]="'./' + item?.id" class="col-12"
(click)="$event.stopPropagation()">{{item?.label | nullifyValue}}</a>
<br />
</ng-container>
<ng-container *ngIf="isColumnSelected('status')">
<div class="col-auto">
<div class="status-chip"
[ngClass]="{'status-chip-finalized': item.status === descriptionTemplateTypeStatuses.Finalized, 'status-chip-draft' : item.status === descriptionTemplateTypeStatuses.Draft}">
{{enumUtils.toDescriptionTemplateTypeStatusString(item.status) | nullifyValue}}
</div>
</div>
</ng-container>
<ng-container *ngIf="isColumnSelected('createdAt')">
<span class="col-12">
{{'DMP-BLUEPRINT-LISTING.FIELDS.CREATED-AT' | translate}}:
<small>
{{item?.createdAt | dateTimeFormatter : 'short' | nullifyValue}}
</small>
</span>
<br>
</ng-container>
<ng-container *ngIf="isColumnSelected('updatedAt')">
<span class="col-12">
{{'DMP-BLUEPRINT-LISTING.FIELDS.UPDATED-AT' | translate}}:
<small>
{{item?.updatedAt | dateTimeFormatter : 'short' | nullifyValue}}
</small>
</span>
</ng-container>
</div>
</div>
</ng-template>
<ng-template #descriptionTemplateTypeStatus let-row="row" let-item>
<div class="row">
<div class="col-auto status-chip"
[ngClass]="{'status-chip-finalized': row.status === descriptionTemplateTypeStatuses.Finalized, 'status-chip-draft' : row.status === descriptionTemplateTypeStatuses.Draft}">
{{enumUtils.toDescriptionTemplateTypeStatusString(row.status) | nullifyValue}}
</div>
</div>
</ng-template>
<ng-template #actions let-row="row" let-item>
<div class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]">
<mat-icon>edit</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
</button>
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]">
<mat-icon>edit</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
</button>
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]">
<mat-icon>download</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.EXPORT' | translate}}
</button>
<button mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
{{'DMP-BLUEPRINT-LISTING.ACTIONS.DELETE' | translate}}
</button>
<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
</mat-menu>
</div>
</div>
</ng-template>
<!--
<div class="main-content">
<div class="container-fluid dmp-blueprint-listing">
<div class="row align-items-center">
<div class="col-auto">
<h3>{{'DMP-BLUEPRINT-LISTING.TITLE' | translate}}</h3>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button class="import-btn">
<span class="button-text">
{{'DMP-BLUEPRINT-LISTING.UPLOAD.UPLOAD-XML' | translate}}
</span>
</button>
<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['/dmp-blueprints/new'] ">
<span class="button-text">
{{'DMP-BLUEPRINT-LISTING.CREATE-DMP-BLUEPRINT' | translate}}
</span>
</button>
</div>
</div>
<div class="row">
<div class="col-12 mt-5">
<app-dmp-blueprint-criteria-component></app-dmp-blueprint-criteria-component>
</div>
</div>
<app-hybrid-listing
[rows]="gridRows"
[columns]="gridColumns"
[visibleColumns]="visibleColumns"
[count]="totalElements"
[offset]="currentPageNumber"
[limit]="lookup.page.size"
[defaultSort]="lookup.order?.items"
[externalSorting]="true"
(rowActivated)="onRowActivated($event)"
(pageLoad)="alterPage($event)"
(columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)"
[listItemTemplate]="listItemTemplate"
>
<app-dmp-blueprint-listing-filters hybrid-listing-filters [(filter)]="lookup" (filterChange)="filterChanged($event)"/>
<app-user-settings-picker
[key]="userSettingsKey"
[userPreference]="lookup"
(onSettingSelected)="changeSetting($event)"
[autoSelectUserSettings]="autoSelectUserSettings"
user-preference-settings/>
<button mat-icon-button download-listing-report >
<mat-icon>download</mat-icon>
</button>
</app-hybrid-listing>
</div>
</div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">
<div class="d-flex align-items-center p-3 gap-1-rem">
<div>
<ng-container *ngIf="isColumnSelected('resource.name')">
<a class="buttonLinkClass" [routerLink]="'../people/' + item?.resource?.id" (click)="$event.stopPropagation()">{{item?.resource?.name | nullifyValue}}</a>
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('type.name')">
{{item.type.name | nullifyValue}}
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('dateFrom')">
{{item.dateFrom | nullifyValue}}
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('dateTo')">
{{item.dateTo | nullifyValue}}
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('patternDescribe')">
{{item.patternDescribe | nullifyValue}}
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('isExclude')">
{{enumUtils.toIsExcludeTypeString(item.isExclude) | nullifyValue}}
<br/>
</ng-container>
<ng-container *ngIf="isColumnSelected('createdAt')">
<span>
{{'DMP-BLUEPRINT-LISTING.FIELDS.CREATED-AT' | translate}}:
<small>
{{item?.createdAt | dateTimeFormatter : 'short' | nullifyValue}}
</small>
</span>
<br>
</ng-container>
<ng-container *ngIf="isColumnSelected('updatedAt')">
<span>
{{'DMP-BLUEPRINT-LISTING.FIELDS.UPDATED-AT' | translate}}:
<small>
{{item?.updatedAt | dateTimeFormatter : 'short' | nullifyValue}}
</small>
</span>
</ng-container>
</div>
</div>
</ng-template> -->