more frontend dmp blueprint listing changes

This commit is contained in:
Diamantis Tziotzios 2023-10-23 11:58:15 +03:00
parent 6d6a4e0341
commit 6a8cb2c853
10 changed files with 111 additions and 228 deletions

View File

@ -46,5 +46,6 @@ public final class Permission {
// UI Pages // UI Pages
public static String ViewDescriptionTemplateTypePage = "ViewDescriptionTemplateTypePage"; public static String ViewDescriptionTemplateTypePage = "ViewDescriptionTemplateTypePage";
public static String ViewDmpBlueprintPage = "ViewDmpBlueprintPage";
} }

View File

@ -33,7 +33,6 @@ import javax.management.InvalidApplicationException;
import java.util.*; import java.util.*;
@RestController @RestController
@CrossOrigin
@RequestMapping(path = "api/user-settings") @RequestMapping(path = "api/user-settings")
public class UserSettingsController { public class UserSettingsController {

View File

@ -82,8 +82,12 @@ const appRoutes: Routes = [
path: 'dmp-blueprints', path: 'dmp-blueprints',
loadChildren: () => import('./ui/admin/dmp-blueprint/dmp-blueprint.module').then(m => m.DmpBlueprintModule), loadChildren: () => import('./ui/admin/dmp-blueprint/dmp-blueprint.module').then(m => m.DmpBlueprintModule),
data: { data: {
breadcrumb: true, authContext: {
title: 'GENERAL.TITLES.DMP-BLUEPRINTS' permissions: [AppPermission.ViewDmpBlueprintPage]
},
...BreadcrumbService.generateRouteDataConfiguration({
title: 'BREADCRUMBS.DMP-BLUEPRINTS'
})
} }
}, },
{ {
@ -106,8 +110,6 @@ const appRoutes: Routes = [
path: 'description-template-type', path: 'description-template-type',
loadChildren: () => import('./ui/admin/description-types/description-template-type.module').then(m => m.DescriptionTemplateTypesModule), loadChildren: () => import('./ui/admin/description-types/description-template-type.module').then(m => m.DescriptionTemplateTypesModule),
data: { data: {
breadcrumb: true,
title: 'GENERAL.TITLES.DESCRIPTION-TEMPLATE-TYPES',
authContext: { authContext: {
permissions: [AppPermission.ViewDescriptionTemplateTypePage] permissions: [AppPermission.ViewDescriptionTemplateTypePage]
}, },

View File

@ -5,6 +5,7 @@ export enum AppPermission {
DeleteDescriptionTemplateType = "DeleteDescriptionTemplateType", DeleteDescriptionTemplateType = "DeleteDescriptionTemplateType",
// UI Pages // UI Pages
ViewDescriptionTemplateTypePage = "ViewDescriptionTemplateTypePage" ViewDescriptionTemplateTypePage = "ViewDescriptionTemplateTypePage",
ViewDmpBlueprintPage = "ViewDmpBlueprintPage"
} }

View File

@ -1,4 +1,4 @@
<div class="row description-template-type-listing-listing"> <div class="row description-template-type-listing">
<div class="col-md-8 offset-md-2"> <div class="col-md-8 offset-md-2">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-3">
@ -29,9 +29,9 @@
<app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup" <app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup"
(onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings" (onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings"
user-preference-settings /> user-preference-settings />
<button mat-icon-button download-listing-report> <!-- <button mat-icon-button download-listing-report>
<mat-icon>download</mat-icon> <mat-icon>download</mat-icon>
</button> </button> -->
</app-hybrid-listing> </app-hybrid-listing>
</div> </div>

View File

@ -98,11 +98,6 @@ export class DescriptionTemplateTypeListingComponent extends BaseListingComponen
languageName: 'DESCRIPTION-TEMPLATE-TYPE-LISTING.FIELDS.STATUS', languageName: 'DESCRIPTION-TEMPLATE-TYPE-LISTING.FIELDS.STATUS',
cellTemplate: this.descriptionTemplateTypeStatus cellTemplate: this.descriptionTemplateTypeStatus
}, },
// {
// prop: nameof<DescriptionTemplateType>(x => x.isExclude),
// languageName: 'DESCRIPTION-TEMPLATE-TYPE-LISTING.FIELDS.IS-EXCLUDE',
// pipe: this.pipeService.getPipe<IsExcludeTypePipe>(IsExcludeTypePipe)
// },
{ {
prop: nameof<DescriptionTemplateType>(x => x.createdAt), prop: nameof<DescriptionTemplateType>(x => x.createdAt),
sortable: true, sortable: true,
@ -151,8 +146,8 @@ export class DescriptionTemplateTypeListingComponent extends BaseListingComponen
public deleteType(id: Guid) { public deleteType(id: Guid) {
if (id) { if (id) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, { const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
data: { data: {
isDeleteConfirmation: true,
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'), confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL') cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')

View File

@ -1,4 +1,4 @@
<div class="row dmp-blueprint-listing-listing"> <div class="row dmp-blueprint-listing">
<div class="col-md-8 offset-md-2"> <div class="col-md-8 offset-md-2">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-3">
@ -29,9 +29,9 @@
<app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup" <app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup"
(onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings" (onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings"
user-preference-settings /> user-preference-settings />
<button mat-icon-button download-listing-report> <!-- <button mat-icon-button download-listing-report>
<mat-icon>download</mat-icon> <mat-icon>download</mat-icon>
</button> </button> -->
</app-hybrid-listing> </app-hybrid-listing>
</div> </div>
@ -51,7 +51,7 @@
<ng-container *ngIf="isColumnSelected('status')"> <ng-container *ngIf="isColumnSelected('status')">
<div class="col-auto"> <div class="col-auto">
<div class="status-chip" <div class="status-chip"
[ngClass]="{'status-chip-finalized': item.status === descriptionTemplateTypeStatuses.Finalized, 'status-chip-draft' : item.status === descriptionTemplateTypeStatuses.Draft}"> [ngClass]="{'status-chip-finalized': item.status === dmpBlueprintStatuses.Finalized, 'status-chip-draft' : item.status === dmpBlueprintStatuses.Draft}">
{{enumUtils.toDescriptionTemplateTypeStatusString(item.status) | nullifyValue}} {{enumUtils.toDescriptionTemplateTypeStatusString(item.status) | nullifyValue}}
</div> </div>
</div> </div>
@ -78,10 +78,10 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #descriptionTemplateTypeStatus let-row="row" let-item> <ng-template #dmpBlueprintStatus let-row="row" let-item>
<div class="row"> <div class="row">
<div class="col-auto status-chip" <div class="col-auto status-chip"
[ngClass]="{'status-chip-finalized': row.status === descriptionTemplateTypeStatuses.Finalized, 'status-chip-draft' : row.status === descriptionTemplateTypeStatuses.Draft}"> [ngClass]="{'status-chip-finalized': row.status === dmpBlueprintStatuses.Finalized, 'status-chip-draft' : row.status === dmpBlueprintStatuses.Draft}">
{{enumUtils.toDescriptionTemplateTypeStatusString(row.status) | nullifyValue}} {{enumUtils.toDescriptionTemplateTypeStatusString(row.status) | nullifyValue}}
</div> </div>
</div> </div>
@ -97,13 +97,13 @@
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]"> <button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]">
<mat-icon>edit</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}} <mat-icon>edit</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
</button> </button>
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]"> <button mat-menu-item [routerLink]="['/dmp-blueprint/clone/' + row.id]">
<mat-icon>edit</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}} <mat-icon>content_copy</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
</button> </button>
<button mat-menu-item [routerLink]="['/dmp-blueprint/' + row.id]"> <button mat-menu-item (click)="export(row.id)" [routerLink]="['/dmp-blueprint/' + row.id]">
<mat-icon>download</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.EXPORT' | translate}} <mat-icon>download</mat-icon>{{'DMP-BLUEPRINT-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button> </button>
<button mat-menu-item (click)="deleteType(row.id)"> <button mat-menu-item (click)="delete(row.id)">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
{{'DMP-BLUEPRINT-LISTING.ACTIONS.DELETE' | translate}} {{'DMP-BLUEPRINT-LISTING.ACTIONS.DELETE' | translate}}
</button> </button>
@ -112,118 +112,3 @@
</div> </div>
</div> </div>
</ng-template> </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> -->

View File

@ -2,14 +2,16 @@
margin-top: 47px; margin-top: 47px;
border-radius: 4px; border-radius: 4px;
} }
.dmp-blueprint-listing { .dmp-blueprint-listing {
margin-top: 1.3rem; margin-top: 1.3rem;
margin-left: 1rem; margin-left: 1rem;
margin-right: 2rem; margin-right: 2rem;
.mat-header-row{ .mat-header-row {
background: #f3f5f8; background: #f3f5f8;
} }
.mat-card { .mat-card {
margin: 16px 0; margin: 16px 0;
padding: 0px; padding: 0px;
@ -23,11 +25,13 @@
mat-row:hover { mat-row:hover {
background-color: #eef5f6; background-color: #eef5f6;
} }
.mat-fab-bottom-right { .mat-fab-bottom-right {
float: right; float: right;
z-index: 5; z-index: 5;
} }
} }
// PAGINATOR // PAGINATOR
:host ::ng-deep .mat-paginator-container { :host ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; flex-direction: row-reverse !important;
@ -35,6 +39,7 @@
background-color: #f6f6f6; background-color: #f6f6f6;
align-items: center; align-items: center;
} }
.create-btn { .create-btn {
border-radius: 30px; border-radius: 30px;
background-color: var(--secondary-color); background-color: var(--secondary-color);
@ -42,7 +47,7 @@
padding-right: 2em; padding-right: 2em;
// color: #000; // color: #000;
.button-text{ .button-text {
display: inline-block; display: inline-block;
} }
} }
@ -58,7 +63,8 @@
border: 1px solid #000; border: 1px solid #000;
} }
.status-chip{ .status-chip {
border-radius: 20px; border-radius: 20px;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
@ -66,12 +72,12 @@
font-size: .8em; font-size: .8em;
} }
.status-chip-finalized{ .status-chip-finalized {
color: #568b5a; color: #568b5a;
background: #9dd1a1 0% 0% no-repeat padding-box; background: #9dd1a1 0% 0% no-repeat padding-box;
} }
.status-chip-draft{ .status-chip-draft {
color: #00c4ff; color: #00c4ff;
background: #d3f5ff 0% 0% no-repeat padding-box; background: #d3f5ff 0% 0% no-repeat padding-box;
} }

View File

@ -8,6 +8,7 @@ import { DmpBlueprint } from '@app/core/model/dmp-blueprint/dmp-blueprint';
import { DmpBlueprintLookup } from '@app/core/query/dmp-blueprint.lookup'; import { DmpBlueprintLookup } from '@app/core/query/dmp-blueprint.lookup';
import { AuthService } from '@app/core/services/auth/auth.service'; import { AuthService } from '@app/core/services/auth/auth.service';
import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service'; import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { QueryParamsService } from '@app/core/services/utilities/query-params.service'; import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
@ -34,9 +35,9 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
publish = false; publish = false;
userSettingsKey = { key: 'DmpBlueprintListingUserSettings' }; userSettingsKey = { key: 'DmpBlueprintListingUserSettings' };
propertiesAvailableForOrder: ColumnDefinition[]; propertiesAvailableForOrder: ColumnDefinition[];
DmpBlueprintStatuses = DmpBlueprintStatus; dmpBlueprintStatuses = DmpBlueprintStatus;
@ViewChild('DmpBlueprintStatus', { static: true }) DmpBlueprintStatus?: TemplateRef<any>; @ViewChild('dmpBlueprintStatus', { static: true }) dmpBlueprintStatus?: TemplateRef<any>;
@ViewChild('actions', { static: true }) actions?: TemplateRef<any>; @ViewChild('actions', { static: true }) actions?: TemplateRef<any>;
@ViewChild(HybridListingComponent, { static: true }) hybridListingComponent: HybridListingComponent; @ViewChild(HybridListingComponent, { static: true }) hybridListingComponent: HybridListingComponent;
@ -61,6 +62,7 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
protected queryParamsService: QueryParamsService, protected queryParamsService: QueryParamsService,
private dmpBlueprintService: DmpBlueprintService, private dmpBlueprintService: DmpBlueprintService,
public authService: AuthService, public authService: AuthService,
private matomoService: MatomoService,
private pipeService: PipeService, private pipeService: PipeService,
public enumUtils: EnumUtils, public enumUtils: EnumUtils,
private language: TranslateService, private language: TranslateService,
@ -73,6 +75,7 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
} }
ngOnInit() { ngOnInit() {
this.matomoService.trackPageView('Admin: DMP Templates');
super.ngOnInit(); super.ngOnInit();
} }
@ -100,13 +103,8 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
prop: nameof<DmpBlueprint>(x => x.status), prop: nameof<DmpBlueprint>(x => x.status),
sortable: true, sortable: true,
languageName: 'DMP-BLUEPRINT-LISTING.FIELDS.STATUS', languageName: 'DMP-BLUEPRINT-LISTING.FIELDS.STATUS',
cellTemplate: this.DmpBlueprintStatus cellTemplate: this.dmpBlueprintStatus
}, },
// {
// prop: nameof<DmpBlueprint>(x => x.isExclude),
// languageName: 'DMP-BLUEPRINT-LISTING.FIELDS.IS-EXCLUDE',
// pipe: this.pipeService.getPipe<IsExcludeTypePipe>(IsExcludeTypePipe)
// },
{ {
prop: nameof<DmpBlueprint>(x => x.createdAt), prop: nameof<DmpBlueprint>(x => x.createdAt),
sortable: true, sortable: true,
@ -152,11 +150,11 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
return this.dmpBlueprintService.query(this.lookup); return this.dmpBlueprintService.query(this.lookup);
} }
public deleteType(id: Guid) { public delete(id: Guid) {
if (id) { if (id) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, { const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
data: { data: {
isDeleteConfirmation: true,
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'), confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL') cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
@ -178,25 +176,21 @@ export class DmpBlueprintListingComponent extends BaseListingComponent<DmpBluepr
this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success); this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success);
this.ngOnInit(); this.ngOnInit();
} }
export(id: Guid): void {
// this.dmpBlueprintService.downloadXML(dmpBlueprintId)
// .pipe(takeUntil(this._destroyed))
// .subscribe(response => {
// const blob = new Blob([response.body], { type: 'application/xml' });
// const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
// FileSaver.saveAs(blob, filename);
// });
}
} }
// ngOnInit() { // ngOnInit() {
// this.matomoService.trackPageView('Admin: DMP Templates');
// this.route.params
// .pipe(takeUntil(this._destroyed))
// .subscribe((params: Params) => {
// this.dmpId = params['dmpId'];
// this.criteria.setCriteria(this.getDefaultCriteria());
// this.refresh();
// this.criteria.setRefreshCallback(() => this.refresh());
// this.breadCrumbs = observableOf([{
// parentComponentName: null,
// label: this.languageService.instant('NAV-BAR.DMP-BLUEPRINTS-CAPS'),
// url: '/dmp-blueprints'
// }]);
// });
// }
// refresh() { // refresh() {
// this.dataSource = new DatasetDataSource(this.dmpBlueprintService, this._paginator, this.sort, this.criteria); // this.dataSource = new DatasetDataSource(this.dmpBlueprintService, this._paginator, this.sort, this.criteria);

View File

@ -233,7 +233,7 @@
"DESCRIPTION-TEMPLATE-TYPES": "Description Types", "DESCRIPTION-TEMPLATE-TYPES": "Description Types",
"NEW-DESCRIPTION-TEMPLATE-TYPE": "New", "NEW-DESCRIPTION-TEMPLATE-TYPE": "New",
"EDIT-DESCRIPTION-TEMPLATE-TYPE": "Edit", "EDIT-DESCRIPTION-TEMPLATE-TYPE": "Edit",
"DMP-BLUEPRINTS": "DMP Bluperints", "DMP-BLUEPRINTS": "DMP Blueprints",
"NEW-DMP-BLUEPRINT": "New", "NEW-DMP-BLUEPRINT": "New",
"EDIT-DMP-BLUEPRINT": "Edit" "EDIT-DMP-BLUEPRINT": "Edit"
}, },