MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling changes 

*changed sizing for editors and listings
This commit is contained in:
Sofia Papacharalampous 2024-03-29 14:41:19 +02:00
parent 21e6015f89
commit f8b7bfc96c
45 changed files with 1793 additions and 1744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
dmp-frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
View File

@ -1,38 +1,38 @@
<div class="row description-template-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row description-template-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="col">
<h4>{{'DESCRIPTION-TEMPLATE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb />
<div class="row mb-4 mt-3"> </div>
<div class="col"> <div class="col-auto">
<h4>{{'DESCRIPTION-TEMPLATE-LISTING.TITLE' | translate}}</h4> <button mat-raised-button class="import-btn" (click)="import()">
<app-navigation-breadcrumb /> <span class="button-text">
{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
</span>
</button>
</div>
</div> <div class="col-auto">
<div class="col-auto"> <button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="['/description-templates/new']">
<button mat-raised-button class="import-btn" (click)="import()"> <mat-icon>add</mat-icon>
<span class="button-text"> {{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}} </button>
</span> </div>
</button>
</div> </div>
<div class="col-auto"> <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, '/description-templates')" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)" (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="['/description-templates/new']">
<mat-icon>add</mat-icon> <app-description-template-listing-filters hybrid-listing-filters [(filter)]="lookup" (filterChange)="filterChanged($event)" />
{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
</button> <app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup" (onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings" user-preference-settings />
</div> <!-- <button mat-icon-button download-listing-report>
<mat-icon>download</mat-icon>
</button> -->
</app-hybrid-listing>
</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, '/description-templates')" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)" (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-description-template-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>
</div> </div>

6
dmp-frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.scss
View File

@ -4,9 +4,9 @@
} }
.description-template-listing { .description-template-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;

108
dmp-frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
View File

@ -1,58 +1,60 @@
<div class="row description-template-type-editor"> <div class="container-fluid">
<div class="col-md-8 offset-md-2 colums-gapped"> <div class="row description-template-type-editor">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row justify-content-between align-items-center"> <div class="row justify-content-between align-items-center mb-4 mt-4">
<div class="col"> <div class="col">
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button (click)="delete()" class="action-btn" type="button">
<mat-icon>delete</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canFinalize">
<button mat-button class="action-btn" (click)="finalize(); formSubmit()">
<mat-icon>save</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="save(); formSubmit()">
<mat-icon>save</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto"> <mat-card appearance="outlined">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button> <mat-card-header>
</div> <mat-card-title *ngIf="isNew">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.NEW' | translate}}</mat-card-title>
<div class="col-auto" *ngIf="canDelete"> </mat-card-header>
<button mat-button (click)="delete()" class="action-btn" type="button"> <mat-card-content>
<mat-icon>delete</mat-icon> <form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}} <div class="row">
</button> <div class="col-12 pt-1 pb-1">
</div> <span>
<div class="col-auto" *ngIf="canFinalize"> {{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}
<button mat-button class="action-btn" (click)="finalize(); formSubmit()"> </span>
<mat-icon>save</mat-icon> </div>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}} <div class="col-12 mt-1">
</button> <mat-form-field class="w-100">
</div> <input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required>
<div class="col-auto" *ngIf="canSave"> <mat-error *ngIf="formGroup.get('name').hasError('backendError')">
<button mat-button class="action-btn" (click)="save(); formSubmit()"> {{formGroup.get('name').getError('backendError').message}}</mat-error>
<mat-icon>save</mat-icon> <mat-error *ngIf="formGroup.get('name').hasError('required')">
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</button> </mat-form-field>
</div> </div>
</div>
</form>
</mat-card-content>
</mat-card>
</div> </div>
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title *ngIf="isNew">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
<div class="info-grid">
<div class="info-grid-label">
<span>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}
</span>
</div>
<div class="info-grid-value">
<mat-form-field class="col-lg-6">
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required>
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">
{{formGroup.get('name').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('name').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
</div> </div>
</div> </div>

2
dmp-frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss
View File

@ -1,5 +1,5 @@
.description-template-type-editor { .description-template-type-editor {
padding-top: 1em; // padding-top: 1em;
.editor-actions { .editor-actions {
margin-top: 30px; margin-top: 30px;

67
dmp-frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
View File

@ -1,42 +1,43 @@
<div class="row description-template-type-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row description-template-type-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="col">
<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb />
<div class="row mb-4 mt-3"> </div>
<div class="col"> <div class="col-auto">
<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.TITLE' | translate}}</h4> <button mat-raised-button class="create-btn"
<app-navigation-breadcrumb /> *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
[routerLink]="['/description-template-type/new']">
<mat-icon>add</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.CREATE-TYPE' | translate}}
</button>
</div>
</div>
</div> <app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
<div class="col-auto"> [count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
<button mat-raised-button class="create-btn" [defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
[routerLink]="['/description-template-type/new']"> (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<mat-icon>add</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.CREATE-TYPE' | translate}} <app-description-template-type-listing-filters hybrid-listing-filters [(filter)]="lookup"
</button> (filterChange)="filterChanged($event)" />
</div>
<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>
<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-description-template-type-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>
</div> </div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected"> <ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">

6
dmp-frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.scss
View File

@ -1,7 +1,7 @@
.description-template-type-listing { .description-template-type-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;

579
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
View File

@ -1,345 +1,338 @@
<!-- <div class="main-content"> --> <div class="container-fluid">
<div class="container-fluid dmp-blueprint-editor d-flex flex-column"> <div class="row dmp-blueprint-editor">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="col-md-10 offset-md-1">
<div class="col-auto"> <div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<h3 *ngIf="!isFinalized && !isNewVersion && isNew">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3> <div class="col-md col-12">
<h3 *ngIf="!isClone && !isNewVersion && !isNew">{{formGroup.get('label').value}}</h3> <h3 *ngIf="!isFinalized && !isNewVersion && isNew">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3>
<h3 *ngIf="isClone"> <h3 *ngIf="!isClone && !isNewVersion && !isNew">{{formGroup.get('label').value}}</h3>
<span>{{'DMP-BLUEPRINT-EDITOR.TITLE.CLONE' | translate}}</span> <h3 *ngIf="isClone">
{{formGroup.get('label').value}} <span>{{'DMP-BLUEPRINT-EDITOR.TITLE.CLONE' | translate}}</span>
</h3> {{formGroup.get('label').value}}
<h3 *ngIf="isNewVersion"> </h3>
<span>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW-VERSION' | translate}}</span> <h3 *ngIf="isNewVersion">
{{formGroup.get('label').value}} <span>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW-VERSION' | translate}}</span>
</h3> {{formGroup.get('label').value}}
</div> </h3>
<div class="col"></div> </div>
<div class="col-auto" *ngIf="!isNew"> <div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="!isNew">
<button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()"> <button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}} {{'DMP-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
</button> </button>
</div> </div>
<div class="col-auto" *ngIf="formGroup.get('status').value==1"> <div class="col-md-auto col-12" *ngIf="formGroup.get('status').value==1">
<button mat-button class="finalize-btn" (click)="downloadXML()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button> <button mat-button class="finalize-btn" (click)="downloadXML()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div> </div>
<div *ngIf="formGroup.get('status').value!=1" class="col-auto"> <div *ngIf="formGroup.get('status').value!=1" class="col-auto">
<button mat-button class="finalize-btn" (click)="finalize()" [disabled]="!this.isFormValid()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button> <button mat-button class="finalize-btn" (click)="finalize()" [disabled]="!this.isFormValid()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
</div> </div>
</div> </div>
<div class=""> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <mat-card class="pt-3 pb-3">
<mat-card class="pt-3 pb-3"> <mat-card-content>
<!-- <mat-card-header> <div class="row">
<mat-card-title *ngIf="isNew"> <div class="col-6">
<h4>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h4> <mat-form-field class="w-100">
</mat-card-title> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<mat-card-title *ngIf="!isNew"> <input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
<h4>{{formGroup.get('label').value}}</h4> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
</mat-card-title> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-card-header> --> </mat-form-field>
<mat-card-content> </div>
<div class="row"> <h4 class="col-12">{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}</h4>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<h4 class="col-12">{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}</h4>
<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)"> <div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled"> <div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
<div class="col-12"> <div class="col-12">
<mat-card class="pt-3 pb-3"> <mat-card class="pt-3 pb-3">
<mat-card-header> <mat-card-header>
<div class="row mb-3 d-flex align-items-center"> <div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<mat-card-title>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title> <mat-card-title>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title>
</div> </div>
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div> <div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div>
</div> </div>
</div> </mat-card-header>
</mat-card-header> <mat-card-content>
<mat-card-content> <div class="row">
<div class="row"> <div class="col-6">
<div class="col-6"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-NAME' | translate}}</mat-label>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-NAME' | translate}}</mat-label> <input matInput type="text" name="label" [formControl]="section.get('label')" required>
<input matInput type="text" name="label" [formControl]="section.get('label')" required> <mat-error *ngIf="section.get('label').hasError('backendError')">{{section.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('label').hasError('backendError')">{{section.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="section.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field> </div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="section.get('description')">
<mat-error *ngIf="section.get('description').hasError('backendError')">{{section.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto mb-3">
<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div> </div>
<div class="col-6"> <div class="row">
<mat-form-field class="w-100"> <div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-DESCRIPTION' | translate}}</mat-label> <div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<input matInput type="text" name="description" [formControl]="section.get('description')"> <div class="col-auto section-options-vertical">
<mat-error *ngIf="section.get('description').hasError('backendError')">{{section.get('description').getError('backendError').message}}</mat-error> <div class="row justify-content-center">
<mat-error *ngIf="section.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <div class="col-auto">
</mat-form-field> <span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div>
<div class="col-auto">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-auto pr-0 section-options-horizontal">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col">
<div class="row">
<div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')">
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="col-12 col-xl-auto">
<div class="row">
<div class="col-auto section-field" *ngIf="field.get('category').value != null">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div [hidden]="viewOnly" class="col-auto section-options-horizontal">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
</div>
</div> </div>
<div class="col-auto mb-3">
<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> <div class="row">
<div class="col-12">
<div class="row d-flex flex-column">
<div class="col-auto">
<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
</mat-checkbox>
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
</div>
</div>
</div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)"> <div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()"> <div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
<div class="col-auto section-options-vertical"> <div class="col-auto section-options-vertical">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-auto"> <div class="col-auto">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span> <span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon> <mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto pr-0 section-options-horizontal"> <div class="col-auto pr-0 section-options-horizontal">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span> <span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 col-xl-3">
<div class="col-12 col-xl-4"> <mat-form-field class="w-100 mt-3">
<mat-form-field class="mt-3 w-100"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label> <app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)"> <mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option> <mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-select>
<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System"> <div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled"> <input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option> <mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
</mat-select> <mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra"> <div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')"> <input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType"> <mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}} <mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType"> <div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete> <input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error> <mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-xl-auto"> <div class="col-12 col-xl-auto section-options-horizontal">
<div class="row"> <div class="row">
<div class="col-auto section-field" *ngIf="field.get('category').value != null"> <div class="col-auto">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div [hidden]="viewOnly" class="col-auto section-options-horizontal">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row d-flex flex-column">
<div class="col-auto">
<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
</mat-checkbox>
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
</div> </div>
<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
</div> </div>
</div> </div>
</div> <div class="row">
<div *ngIf="section.get('hasTemplates').value == true" class="col-lg-6 col-12">
<div class="row"> <mat-form-field class="w-100 mt-3">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()"> <app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
<div class="col-auto section-options-vertical"> </mat-form-field>
<div class="row justify-content-center">
<div class="col-auto">
<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div>
<div class="col-auto">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-auto pr-0 section-options-horizontal">
<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col">
<div class="row">
<div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-lg-6 col-xl-3">
<mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="col-12 col-xl-auto section-options-horizontal">
<div class="row">
<div class="col-auto">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div> </div>
<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
</div> </div>
</div>
<div class="row">
<div *ngIf="section.get('hasTemplates').value == true" class="col-lg-6 col-12">
<mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div>
</div> </div>
</div> </div>
</div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button> <button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row mt-4">
<div class="row mt-4"> <div class="col-auto">
<div class="col-auto"> <button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button> </div>
<div class="col"></div>
<div class="col-auto">
<button mat-button class="action-btn" [disabled]="!canSave" type="submit">
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col"></div> </mat-card-content>
<div class="col-auto"> </mat-card>
<button mat-button class="action-btn" [disabled]="!canSave" type="submit"> </form>
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}} </div>
</button>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div> </div>
</div> </div>

59
dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/dmp-blueprint-listing.component.html
View File

@ -1,38 +1,39 @@
<div class="row dmp-blueprint-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row dmp-blueprint-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="row mb-4 mt-3"> <div class="col">
<div class="col"> <h4>{{'DMP-BLUEPRINT-LISTING.TITLE' | translate}}</h4>
<h4>{{'DMP-BLUEPRINT-LISTING.TITLE' | translate}}</h4> <app-navigation-breadcrumb />
<app-navigation-breadcrumb />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-raised-button class="import-btn" (click)="import()"> <button mat-raised-button class="import-btn" (click)="import()">
<span class="button-text"> <span class="button-text">
{{'DMP-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}} {{'DMP-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}}
</span> </span>
</button> </button>
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="['/dmp-blueprints/new']">
<mat-icon>add</mat-icon>
{{'DMP-BLUEPRINT-LISTING.CREATE-DMP-BLUEPRINT' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto"> <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, '/dmp-blueprints')" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)" (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="['/dmp-blueprints/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, '/dmp-blueprints')" (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-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>
<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> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/dmp-blueprint-listing.component.scss
View File

@ -4,9 +4,9 @@
} }
.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;

45
dmp-frontend/src/app/ui/admin/entity-locks/lock-listing.component.html
View File

@ -1,31 +1,34 @@
<div class="row lock-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row lock-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'LOCK-LISTING.TITLE' | translate}}</h4> <h4>{{'LOCK-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
</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"
(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-lock-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 />
</app-hybrid-listing>
</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"
(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-lock-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected"> <ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">

6
dmp-frontend/src/app/ui/admin/entity-locks/lock-listing.component.scss
View File

@ -8,9 +8,9 @@
} }
.lock-listing { .lock-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;

20
dmp-frontend/src/app/ui/admin/index-managment/index-managment.component.html
View File

@ -1,9 +1,15 @@
<div class="row root"> <div class="container-fluid">
<mat-card class="col-md-3 offset-md-4"> <div class="row root">
<div> <div class="col-md-10 offset-md-1">
<div style="color: red;">Warning: Danger zone. It might delete Dataset tags if not careful</div> <div class="mt-4 mb-4"></div>
<button mat-raised-button color="primary" (click)="generateIndex($event)" class="lightblue-btn button">Generate Index</button> <mat-card class="p-2">
<button mat-raised-button color="primary" (click)="clearIndex($event)" class="lightblue-btn button">Clear Index</button> <div class="mt-2">
<div style="color: red;">Warning: Danger zone. It might delete Dataset tags if not careful</div>
<button mat-raised-button color="primary" (click)="generateIndex($event)" class="lightblue-btn button">Generate Index</button>
<button mat-raised-button color="primary" (click)="clearIndex($event)" class="lightblue-btn button">Clear Index</button>
</div>
</mat-card>
</div> </div>
</mat-card> </div>
</div> </div>

2
dmp-frontend/src/app/ui/admin/index-managment/index-managment.component.scss
View File

@ -1,5 +1,5 @@
.root { .root {
padding-bottom: 2em; // padding-bottom: 2em;
.button { .button {
margin: 5px; margin: 5px;

146
dmp-frontend/src/app/ui/admin/language/editor/language-editor.component.html
View File

@ -1,76 +1,78 @@
<div class="tenant-editor"> <div class="container-fluid">
<div class="col-md-8 offset-md-2 colums-gapped"> <div class="row tenant-editor">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="col-md-10 offset-md-1 colums-gapped">
<div class="col-auto"> <div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<h3 *ngIf="isNew && !isClone">{{'LANGUAGE-EDITOR.NEW' | translate}}</h3> <div class="col">
<app-navigation-breadcrumb /> <h3 *ngIf="isNew && !isClone">{{'LANGUAGE-EDITOR.NEW' | translate}}</h3>
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'LANGUAGE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'LANGUAGE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row">
<div class="col-4" *ngIf="isNew"> <div class="col-4" *ngIf="isNew">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="formGroup.get('code')" required> <input matInput type="text" name="code" [formControl]="formGroup.get('code')" required>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<div class="col-4" *ngIf="!isNew">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<mat-select (selectionChange)="selectedCodeChanged($event.value)" name= "code" [formControl]="formGroup.get('code')">
<mat-option *ngFor="let languageCode of availableLanguageCodes" [value]="languageCode">
{{languageCode}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.ORDINAL' | translate}}</mat-label>
<input matInput type="text" name="ordinal" [formControl]="formGroup.get('ordinal')" required>
<mat-error *ngIf="formGroup.get('ordinal').hasError('backendError')">{{formGroup.get('ordinal').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('ordinal').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.PAYLOAD' | translate}}</mat-label>
<input matInput type="text" name="payload" [formControl]="formGroup.get('payload')">
<mat-error *ngIf="formGroup.get('payload').hasError('backendError')">{{formGroup.get('payload').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('payload').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<h9 class="col-12">{{'LANGUAGE-EDITOR.FIELDS.OVERRIDE' | translate}}
<mat-checkbox (change)="overrideFromFile($event, formGroup.get('code').value)"></mat-checkbox>
</h9>
</div>
</div> </div>
<div class="col-4" *ngIf="!isNew"> </mat-card-content>
<mat-form-field class="w-100"> </mat-card>
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label> </form>
<mat-select (selectionChange)="selectedCodeChanged($event.value)" name= "code" [formControl]="formGroup.get('code')"> </div>
<mat-option *ngFor="let languageCode of availableLanguageCodes" [value]="languageCode">
{{languageCode}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.ORDINAL' | translate}}</mat-label>
<input matInput type="text" name="ordinal" [formControl]="formGroup.get('ordinal')" required>
<mat-error *ngIf="formGroup.get('ordinal').hasError('backendError')">{{formGroup.get('ordinal').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('ordinal').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.PAYLOAD' | translate}}</mat-label>
<input matInput type="text" name="payload" [formControl]="formGroup.get('payload')">
<mat-error *ngIf="formGroup.get('payload').hasError('backendError')">{{formGroup.get('payload').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('payload').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<h9 class="col-12">{{'LANGUAGE-EDITOR.FIELDS.OVERRIDE' | translate}}
<mat-checkbox (change)="overrideFromFile($event, formGroup.get('code').value)"></mat-checkbox>
</h9>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/language/editor/language-editor.component.scss
View File

@ -1,7 +1,7 @@
.tenant-editor { .tenant-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

61
dmp-frontend/src/app/ui/admin/language/listing/language-listing.component.html
View File

@ -1,36 +1,37 @@
<div class="row language-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row language-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="col">
<h4>{{'LANGUAGE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb />
<div class="row mb-4 mt-3"> </div>
<div class="col"> <div class="col-auto">
<h4>{{'LANGUAGE-LISTING.TITLE' | translate}}</h4> <button mat-raised-button class="create-btn"
<app-navigation-breadcrumb /> *ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
[routerLink]="['/languages/new']">
<mat-icon>add</mat-icon>
{{'LANGUAGE-LISTING.CREATE' | 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-language-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 />
</app-hybrid-listing>
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
[routerLink]="['/languages/new']">
<mat-icon>add</mat-icon>
{{'LANGUAGE-LISTING.CREATE' | translate}}
</button>
</div>
</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-language-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/language/listing/language-listing.component.scss
View File

@ -1,7 +1,7 @@
.language-listing { .language-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;

533
dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
View File

@ -1,277 +1,278 @@
<div class="notification-template-editor"> <div class="container-fluid">
<div class="col-md-10 offset-md-1 colums-gapped"> <div class="row notification-template-editor">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="col-md-10 offset-md-1 colums-gapped">
<div class="col-auto"> <div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<h3 *ngIf="isNew && !isClone">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</h3> <div class="col-auto">
<app-navigation-breadcrumb /> <h3 *ngIf="isNew && !isClone">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</h3>
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" > <form *ngIf="formGroup" (ngSubmit)="formSubmit()" >
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="d-flex flex-wrap mt-4"> <div class="d-flex flex-wrap mt-4">
<div class="col-md-12"> <div class="col-md-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required> <mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
<mat-option *ngFor="let type of notificationTypeEnum" [value]="type"> <mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
{{enumUtils.toNotificationTypeString(type)}} {{enumUtils.toNotificationTypeString(type)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('languageId')" name="language" required>
<mat-option *ngFor="let language of languages" [value]="language.id">
{{language.code}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('languageId').hasError('backendError')">{{formGroup.get('languageId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
<mat-select name="kind" [formControl]="formGroup.get('kind')" required>
<mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind">
{{enumUtils.toNotificationTemplateKindString(kind)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
<mat-select name="channel" [formControl]="formGroup.get('channel')" required>
<mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel">
{{enumUtils.toNotificationTemplateChannelString(channel)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div> </div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('languageId')" name="language" required>
<mat-option *ngFor="let language of languages" [value]="language.id">
{{language.code}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('languageId').hasError('backendError')">{{formGroup.get('languageId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
<mat-select name="kind" [formControl]="formGroup.get('kind')" required>
<mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind">
{{enumUtils.toNotificationTemplateKindString(kind)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
<mat-select name="channel" [formControl]="formGroup.get('channel')" required>
<mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel">
{{enumUtils.toNotificationTemplateChannelString(channel)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<!-- Subject --> <!-- Subject -->
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
<div class="col-md-6"> <div class="col-md-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('subjectText')"> <input matInput [formControl]="formGroup.get('value').get('subjectText')">
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('subjectKey')">
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div> </div>
<div class="col-md-6"> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
<mat-form-field class="w-100"> <mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label> </h4>
<input matInput [formControl]="formGroup.get('value').get('subjectKey')"> <ng-container *ngIf="subjectFieldOptionsEnabled == true">
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error> <app-notification-template-field-options-component
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> [form]="formGroup.get('value').get('subjectFieldOptions')"
</mat-form-field> [validationErrorModel]="editorModel.validationErrorModel"
</div> [validationRootPath]="'value.subjectFieldOptions.'"
</div> [mandatoryFields]="subjectMandatoryFields"
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}} [formatting]="subjectFormatting">
<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox> </app-notification-template-field-options-component>
</h4> </ng-container>
<ng-container *ngIf="subjectFieldOptionsEnabled == true">
<app-notification-template-field-options-component
[form]="formGroup.get('value').get('subjectFieldOptions')"
[validationErrorModel]="editorModel.validationErrorModel"
[validationRootPath]="'value.subjectFieldOptions.'"
[mandatoryFields]="subjectMandatoryFields"
[formatting]="subjectFormatting">
</app-notification-template-field-options-component>
</ng-container>
<!-- Body --> <!-- Body -->
<div>
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
<div class="col-md-6">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
<editor class="w-100 mt-2" [init]="{
base_url: '/tinymce',
suffix: '.min',
height: 800,
menubar: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor',
'searchreplace', 'visualblocks', 'fullpage',
'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss',
],
extended_valid_elements: '*[*]',
forced_root_block: '',
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
save_enablewhendirty: false,
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4>
<ng-container *ngIf="bodyFieldOptionsEnabled == true">
<app-notification-template-field-options-component
[form]="formGroup.get('value').get('bodyFieldOptions')"
[validationErrorModel]="editorModel.validationErrorModel"
[validationRootPath]="'value.bodyFieldOptions.'"
[bodyMandatoryFields]="subjectMandatoryFields"
[formatting]="bodyFormatting">
</app-notification-template-field-options-component>
</ng-container>
<!--Extra Options -->
<div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
<div> <div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}} <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
<mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox> <div class="col-md-6">
<mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error> <mat-form-field class="w-100">
</h4> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
<editor class="w-100 mt-2" [init]="{
base_url: '/tinymce',
suffix: '.min',
height: 800,
menubar: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor',
'searchreplace', 'visualblocks', 'fullpage',
'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss',
],
extended_valid_elements: '*[*]',
forced_root_block: '',
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
save_enablewhendirty: false,
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div> </div>
<div class="col-4"> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
<mat-form-field class="col-md-12"> <mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label> </h4>
<input matInput [formControl]="formGroup.get('value').get('priorityKey')"> <ng-container *ngIf="bodyFieldOptionsEnabled == true">
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error> <app-notification-template-field-options-component
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> [form]="formGroup.get('value').get('bodyFieldOptions')"
</mat-form-field> [validationErrorModel]="editorModel.validationErrorModel"
</div> [validationRootPath]="'value.bodyFieldOptions.'"
<div class="col-4" > [bodyMandatoryFields]="subjectMandatoryFields"
<mat-form-field class="chip-list"> [formatting]="bodyFormatting">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label> </app-notification-template-field-options-component>
<mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')"> </ng-container>
<mat-chip-row *ngFor="let field of ccValues" <!--Extra Options -->
(removed)="removeChipListValues('cc', field)" <div class="row">
[editable]="true" <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
(edited)="editChipListValues('cc', $event, field)"> <div>
{{field}} <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}}
<button matChipRemove> <mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox>
<mat-icon>cancel</mat-icon> <mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error>
</button> </h4>
</mat-chip-row> </div>
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" <div class="col-4">
[matChipInputFor]="cc" <mat-form-field class="col-md-12">
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label>
[matChipInputAddOnBlur]="true" <input matInput [formControl]="formGroup.get('value').get('priorityKey')">
(matChipInputTokenEnd)="addChipListValues('cc',$event)"/> <mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error>
</mat-chip-grid> <mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-4" >
<div class="col-4"> <mat-form-field class="chip-list">
<mat-form-field class="col-auto"> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label> <mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')">
<mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')"> <mat-chip-row *ngFor="let field of ccValues"
<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode"> (removed)="removeChipListValues('cc', field)"
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} [editable]="true"
</mat-option> (edited)="editChipListValues('cc', $event, field)">
</mat-select> {{field}}
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error> <button matChipRemove>
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-icon>cancel</mat-icon>
</mat-form-field> </button>
</div> </mat-chip-row>
<div class="col-4" > <input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
<mat-form-field class="chip-list"> [matChipInputFor]="cc"
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label> [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
<mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')"> [matChipInputAddOnBlur]="true"
<mat-chip-row *ngFor="let field of bccValues" (matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
(removed)="removeChipListValues('bcc', field)" </mat-chip-grid>
[editable]="true" <mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error>
(edited)="editChipListValues('bcc', $event, field)"> </mat-form-field>
{{field}} </div>
<button matChipRemove> <div class="col-4">
<mat-icon>cancel</mat-icon> <mat-form-field class="col-auto">
</button> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label>
</mat-chip-row> <mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')">
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" <mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
[matChipInputFor]="bcc" {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" </mat-option>
[matChipInputAddOnBlur]="true" </mat-select>
(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/> <mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error>
</mat-chip-grid> <mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-4" >
<div class="col-4"> <mat-form-field class="chip-list">
<mat-form-field class="col-auto"> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label> <mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')">
<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')"> <mat-chip-row *ngFor="let field of bccValues"
<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode"> (removed)="removeChipListValues('bcc', field)"
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} [editable]="true"
</mat-option> (edited)="editChipListValues('bcc', $event, field)">
</mat-select> {{field}}
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error> <button matChipRemove>
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-icon>cancel</mat-icon>
</mat-form-field> </button>
</div> </mat-chip-row>
<div class="col-4" > <input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
<mat-form-field class="chip-list"> [matChipInputFor]="bcc"
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label> [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
<mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')"> [matChipInputAddOnBlur]="true"
<mat-chip-row *ngFor="let field of extraDataKeys" (matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
(removed)="removeChipListValues('extraDataKeys', field)" </mat-chip-grid>
[editable]="true" <mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error>
(edited)="editChipListValues('extraDataKeys', $event, field)"> </mat-form-field>
{{field}} </div>
<button matChipRemove> <div class="col-4">
<mat-icon>cancel</mat-icon> <mat-form-field class="col-auto">
</button> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
</mat-chip-row> <mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" <mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
[matChipInputFor]="extraDataKeys" {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" </mat-option>
[matChipInputAddOnBlur]="true" </mat-select>
(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/> <mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error>
</mat-chip-grid> <mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-4" >
</div> <mat-form-field class="chip-list">
</mat-card-content> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
</mat-card> <mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')">
</form> <mat-chip-row *ngFor="let field of extraDataKeys"
(removed)="removeChipListValues('extraDataKeys', field)"
[editable]="true"
(edited)="editChipListValues('extraDataKeys', $event, field)">
{{field}}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
[matChipInputFor]="extraDataKeys"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
</mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.scss
View File

@ -1,7 +1,7 @@
.notification-template-editor { .notification-template-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

60
dmp-frontend/src/app/ui/admin/notification-template/listing/notification-template-listing.component.html
View File

@ -1,36 +1,38 @@
<div class="row notification-template-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row notification-template-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditNotificationTemplate)"
[routerLink]="['/notification-templates/new']">
<mat-icon>add</mat-icon>
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.CREATE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-raised-button class="create-btn" <app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
*ngIf="authService.hasPermission(authService.permissionEnum.EditNotificationTemplate)" [count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
[routerLink]="['/notification-templates/new']"> [defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
<mat-icon>add</mat-icon> (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.CREATE' | translate}} (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
</button>
</div> <app-notification-template-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 />
</app-hybrid-listing>
</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-notification-template-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/notification-template/listing/notification-template-listing.component.scss
View File

@ -1,7 +1,7 @@
.notification-template-listing { .notification-template-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;

46
dmp-frontend/src/app/ui/admin/notification/notification-listing.component.html
View File

@ -1,31 +1,33 @@
<div class="row notification-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row notification-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
</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"
(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-notification-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 />
</app-hybrid-listing>
</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"
(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-notification-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected"> <ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">

6
dmp-frontend/src/app/ui/admin/notification/notification-listing.component.scss
View File

@ -8,9 +8,9 @@
} }
.notification-listing { .notification-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;

250
dmp-frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
View File

@ -1,151 +1,153 @@
<div class="prefilling-source-editor"> <div class="container-fluid">
<div class="col-md-10 offset-md-1 colums-gapped" *ngIf="formGroup"> <div class="row prefilling-source-editor">
<div class="col-md-10 offset-md-1 colums-gapped" *ngIf="formGroup">
<div class="row justify-content-between align-items-center"> <div class="row justify-content-between align-items-center mt-4 mb-4">
<div class="col"> <div class="col">
<h3 *ngIf="isNew">{{'PREFILLING-SOURCE-EDITOR.NEW' | translate}}</h3> <h3 *ngIf="isNew">{{'PREFILLING-SOURCE-EDITOR.NEW' | translate}}</h3>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'PREFILLING-SOURCE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'PREFILLING-SOURCE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label> <mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required> <input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> <mat-card appearance="outlined">
<mat-card appearance="outlined"> <mat-card-header>
<mat-card-header> <mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIXED-VALUE-FIELDS' | translate}}</mat-card-title>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIXED-VALUE-FIELDS' | translate}}</mat-card-title> </mat-card-header>
</mat-card-header> <mat-card-content>
<mat-card-content> <div class="row">
<div class="row"> <!-- Fixed Value Fields -->
<!-- Fixed Value Fields --> <div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fixedValueFields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12">
<div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex">
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'PREFILLING-SOURCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeFixedValueField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<div class="row">
<div class="col-9">
<app-prefilling-source-field-component [form]="field"></app-prefilling-source-field-component>
</div>
<div class="col-3">
<mat-form-field class="w-100">
<mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIXED-VALUE' | translate}}</mat-label>
<input matInput type="text" name="fixedValue" [formControl]="field.get('fixedValue')">
<mat-error *ngIf="field.get('fixedValue').hasError('backendError')">{{field.get('fixedValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('fixedValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
<button mat-button class="action-btn" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELDS' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<!-- Fields -->
<div class="col-12"> <div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fixedValueFields').controls; let fieldIndex=index;" class="row mb-3"> <div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12"> <div class="col-12">
<div class="row mb-3 d-flex align-items-center"> <div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title> <mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title>
</div> </div>
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'PREFILLING-SOURCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeFixedValueField(fieldIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'PREFILLING-SOURCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-3">
<mat-form-field class="w-100">
<mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="field.get('code')">
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-9"> <div class="col-9">
<app-prefilling-source-field-component [form]="field"></app-prefilling-source-field-component> <app-prefilling-source-field-component [form]="field"></app-prefilling-source-field-component>
</div> </div>
<div class="col-3">
<mat-form-field class="w-100">
<mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIXED-VALUE' | translate}}</mat-label>
<input matInput type="text" name="fixedValue" [formControl]="field.get('fixedValue')">
<mat-error *ngIf="field.get('fixedValue').hasError('backendError')">{{field.get('fixedValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('fixedValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div> </div>
</div> </div>
</div> </div>
<button mat-button class="action-btn" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> <button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card>
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELDS' | translate}}</mat-card-title> <mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<!-- Fields --> <app-external-fetcher-source-component [formGroup]="formGroup.get('definition').get('searchConfiguration')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.searchConfiguration.'"></app-external-fetcher-source-component>
<div class="col-12"> <div>
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3"> <mat-checkbox [formControl]="formGroup.get('definition').get('getEnabled')" (change)="getEnabledChanged($event)">
<div class="col-12"> {{'PREFILLING-SOURCE-EDITOR.FIELDS.GET-SOURCE-CONFIGURATION' | translate}}
<div class="row mb-3 d-flex align-items-center"> <mat-error *ngIf="formGroup.get('definition').get('getEnabled').hasError('backendError')">{{formGroup.get('definition').get('getEnabled').getError('backendError').message}}</mat-error>
<div class="col-auto d-flex"> <mat-error *ngIf="formGroup.get('definition').get('getEnabled').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title> </mat-checkbox>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'PREFILLING-SOURCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<div class="row">
<div class="col-3">
<mat-form-field class="w-100">
<mat-label>{{'PREFILLING-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="field.get('code')">
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-9">
<app-prefilling-source-field-component [form]="field"></app-prefilling-source-field-component>
</div>
</div>
</div>
</div> </div>
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> </mat-card-content>
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button> </mat-card>
</div>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined"> <mat-card appearance="outlined" *ngIf="formGroup.get('definition').get('getEnabled').value == true">
<mat-card-header> <mat-card-header>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}}</mat-card-title> <mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.GET-SOURCE-CONFIGURATION' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<app-external-fetcher-source-component [formGroup]="formGroup.get('definition').get('searchConfiguration')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.searchConfiguration.'"></app-external-fetcher-source-component> <app-external-fetcher-source-component [formGroup]="formGroup.get('definition').get('getConfiguration')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.getConfiguration.'"></app-external-fetcher-source-component>
<div> </mat-card-content>
<mat-checkbox [formControl]="formGroup.get('definition').get('getEnabled')" (change)="getEnabledChanged($event)"> </mat-card>
{{'PREFILLING-SOURCE-EDITOR.FIELDS.GET-SOURCE-CONFIGURATION' | translate}} </form>
<mat-error *ngIf="formGroup.get('definition').get('getEnabled').hasError('backendError')">{{formGroup.get('definition').get('getEnabled').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('getEnabled').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-checkbox>
</div>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined" *ngIf="formGroup.get('definition').get('getEnabled').value == true">
<mat-card-header>
<mat-card-title>{{'PREFILLING-SOURCE-EDITOR.FIELDS.GET-SOURCE-CONFIGURATION' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-external-fetcher-source-component [formGroup]="formGroup.get('definition').get('getConfiguration')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.getConfiguration.'"></app-external-fetcher-source-component>
</mat-card-content>
</mat-card>
</form>
</div>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss
View File

@ -1,7 +1,7 @@
.prefilling-source-editor { .prefilling-source-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

60
dmp-frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
View File

@ -1,36 +1,38 @@
<div class="row prefilling-source-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row prefilling-source-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'PREFILLING-SOURCE-LISTING.TITLE' | translate}}</h4> <h4>{{'PREFILLING-SOURCE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
[routerLink]="['/prefilling-sources/new']">
<mat-icon>add</mat-icon>
{{'PREFILLING-SOURCE-LISTING.CREATE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-raised-button class="create-btn" <app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)" [count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
[routerLink]="['/prefilling-sources/new']"> [defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
<mat-icon>add</mat-icon> (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
{{'PREFILLING-SOURCE-LISTING.CREATE' | translate}} (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
</button>
</div> <app-prefilling-source-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 />
</app-hybrid-listing>
</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-prefilling-source-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.scss
View File

@ -4,9 +4,9 @@
} }
.prefilling-source-listing { .prefilling-source-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;

291
dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
View File

@ -1,150 +1,151 @@
<div class="reference-type-editor"> <div class="container-fluid">
<div class="col-md-8 offset-md-2 colums-gapped"> <div class="row reference-type-editor">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row justify-content-between align-items-center">
<div class="col">
<h3 *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</h3>
<app-navigation-breadcrumb />
</div>
<div class="row justify-content-between align-items-center"> <div class="col-auto">
<div class="col"> <button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<h3 *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</h3> </div>
<app-navigation-breadcrumb /> <div class="col-auto" *ngIf="canDelete">
<button mat-button (click)="delete()" class="action-btn" type="button">
<mat-icon>delete</mat-icon>
{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto"> <mat-card appearance="outlined">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button> <mat-card-header>
</div> <mat-card-title *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</mat-card-title>
<div class="col-auto" *ngIf="canDelete"> </mat-card-header>
<button mat-button (click)="delete()" class="action-btn" type="button"> <mat-card-content>
<mat-icon>delete</mat-icon> <form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}} <div class="row">
</button> <div class="col-6">
</div> <mat-form-field class="w-100">
<div class="col-auto" *ngIf="canSave"> <mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<button mat-button class="action-btn" (click)="formSubmit()"> <input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
<mat-icon>save</mat-icon> <mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}} <mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</button> </mat-form-field>
</div> </div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.get('code')" required>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
</div>
<!-- FIELDS -->
<div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12">
<div class="row d-flex align-items-center">
<div class="col-auto pb-3 d-flex">
<span>{{fieldIndex + 1}}</span>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')" required>
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="field.get('code')" required>
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select name="dataType" [formControl]="field.get('dataType')">
<mat-option *ngFor="let fieldDataType of referenceFieldDataTypeEnum" [value]="fieldDataType">
{{enumUtils.toReferenceFieldDataTypeString(fieldDataType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto pb-3 d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
</div>
</div>
</div>
<div class="col-12">
<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row">
<div class="col-12">
<div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex">
<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}} {{sourceIndex + 1}}</mat-card-title>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-SOURCE' | translate}}" (click)="removeSource(sourceIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<app-external-fetcher-source-component [formGroup]="source" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.sources[' + sourceIndex + '].'" [referenceTypeSourceIndex]="sourceIndex" [referenceTypes]="referenceTypes" [sourceKeysMap]="sourceKeysMap">
</app-external-fetcher-source-component>
</div>
</div>
<mat-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
</div> </div>
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
<div class="row">
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.get('code')" required>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
</div>
<!-- FIELDS -->
<div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12">
<div class="row d-flex align-items-center">
<div class="col-auto pb-3 d-flex">
<span>{{fieldIndex + 1}}</span>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')" required>
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="field.get('code')" required>
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select name="dataType" [formControl]="field.get('dataType')">
<mat-option *ngFor="let fieldDataType of referenceFieldDataTypeEnum" [value]="fieldDataType">
{{enumUtils.toReferenceFieldDataTypeString(fieldDataType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto pb-3 d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
</div>
</div>
</div>
<div class="col-12">
<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row">
<div class="col-12">
<div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex">
<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}} {{sourceIndex + 1}}</mat-card-title>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-SOURCE' | translate}}" (click)="removeSource(sourceIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<app-external-fetcher-source-component [formGroup]="source" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.sources[' + sourceIndex + '].'" [referenceTypeSourceIndex]="sourceIndex" [referenceTypes]="referenceTypes" [sourceKeysMap]="sourceKeysMap">
</app-external-fetcher-source-component>
</div>
</div>
<mat-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss
View File

@ -1,7 +1,7 @@
.reference-type-editor { .reference-type-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

67
dmp-frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
View File

@ -1,42 +1,45 @@
<div class="row reference-type-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row reference-type-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'REFERENCE-TYPE-LISTING.TITLE' | translate}}</h4> <h4>{{'REFERENCE-TYPE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-raised-button class="create-btn" <button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)" *ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
[routerLink]="['/reference-type/new']"> [routerLink]="['/reference-type/new']">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
{{'REFERENCE-TYPE-LISTING.CREATE-TYPE' | translate}} {{'REFERENCE-TYPE-LISTING.CREATE-TYPE' | translate}}
</button> </button>
</div>
</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-reference-type-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>
<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-reference-type-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>
</div> </div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected"> <ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">

6
dmp-frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.scss
View File

@ -1,7 +1,7 @@
.reference-type-listing { .reference-type-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;

278
dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
View File

@ -1,148 +1,150 @@
<div class="reference-editor"> <div class="container-fluid">
<div class="col-md-8 offset-md-2 colums-gapped"> <div class="row reference-editor">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="col-md-10 offset-md-1 colums-gapped">
<div class="col-auto"> <div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<h3 *ngIf="isNew && !isClone">{{'REFERENCE-EDITOR.NEW' | translate}}</h3> <div class="col-auto">
<app-navigation-breadcrumb /> <h3 *ngIf="isNew && !isClone">{{'REFERENCE-EDITOR.NEW' | translate}}</h3>
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'REFERENCE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'REFERENCE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content class="pt-2"> <mat-card-content class="pt-2">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required> <input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.REFERENCE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.REFERENCE' | translate}}</mat-label>
<input matInput type="text" name="reference" [formControl]="formGroup.get('reference')" required> <input matInput type="text" name="reference" [formControl]="formGroup.get('reference')" required>
<mat-error *ngIf="formGroup.get('reference').hasError('backendError')">{{formGroup.get('reference').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('reference').hasError('backendError')">{{formGroup.get('reference').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
<app-single-auto-complete [required]="formGroup.get('typeId').required" [formControl]="formGroup.get('typeId')" placeholder="{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration"> <app-single-auto-complete [required]="formGroup.get('typeId').required" [formControl]="formGroup.get('typeId')" placeholder="{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="formGroup.get('typeId').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('typeId').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('typeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('typeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE' | translate}}</mat-label>
<input matInput type="text" name="source" [formControl]="formGroup.get('source')" required> <input matInput type="text" name="source" [formControl]="formGroup.get('source')" required>
<mat-error *ngIf="formGroup.get('source').hasError('backendError')">{{formGroup.get('source').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('source').hasError('backendError')">{{formGroup.get('source').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('source').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('source').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE-TYPE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE-TYPE' | translate}}</mat-label>
<mat-select name="type" [formControl]="formGroup.get('sourceType')" required> <mat-select name="type" [formControl]="formGroup.get('sourceType')" required>
<mat-option *ngFor="let sourceType of referenceSourceTypeEnum" [value]="sourceType"> <mat-option *ngFor="let sourceType of referenceSourceTypeEnum" [value]="sourceType">
{{enumUtils.toReferenceSourceTypeString(sourceType)}} {{enumUtils.toReferenceSourceTypeString(sourceType)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('sourceType').hasError('backendError')">{{formGroup.get('sourceType').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('sourceType').hasError('backendError')">{{formGroup.get('sourceType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('sourceType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('sourceType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.ABBREVIATION' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.ABBREVIATION' | translate}}</mat-label>
<input matInput type="text" name="abbreviation" [formControl]="formGroup.get('abbreviation')"> <input matInput type="text" name="abbreviation" [formControl]="formGroup.get('abbreviation')">
<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{formGroup.get('abbreviation').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{formGroup.get('abbreviation').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12"> <div class="col-12">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'REFERENCE-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'"> <rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'REFERENCE-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
</rich-text-editor-component> </rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper"> <div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error> <mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
</div>
</div> </div>
</div>
<!-- Fields --> <!-- Fields -->
<div class="col-12"> <div class="col-12">
<h3 class="mb-4"> <h3 class="mb-4">
{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}} {{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> <button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</h3> </h3>
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3"> <div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12"> <div class="col-12">
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">
<div class="col-auto pb-3 d-flex"> <div class="col-auto pb-3 d-flex">
<mat-card-title>{{fieldIndex + 1}}</mat-card-title> <mat-card-title>{{fieldIndex + 1}}</mat-card-title>
</div> </div>
<div class="col"> <div class="col">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="field.get('code')" required> <input matInput type="text" name="code" [formControl]="field.get('code')" required>
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error> <mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col"> <div class="col">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select name="type" [formControl]="field.get('dataType')" required> <mat-select name="type" [formControl]="field.get('dataType')" required>
<mat-option *ngFor="let dataType of referenceFieldDataTypeEnum" [value]="dataType"> <mat-option *ngFor="let dataType of referenceFieldDataTypeEnum" [value]="dataType">
{{enumUtils.toReferenceFieldDataTypeString(dataType)}} {{enumUtils.toReferenceFieldDataTypeString(dataType)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error> <mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col"> <div class="col">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'REFERENCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput type="text" name="value" [formControl]="field.get('value')"> <input matInput type="text" name="value" [formControl]="field.get('value')">
<mat-error *ngIf="field.get('value').hasError('backendError')">{{field.get('value').getError('backendError').message}}</mat-error> <mat-error *ngIf="field.get('value').hasError('backendError')">{{field.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto pb-3 d-flex"> <div class="col-auto pb-3 d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> </form>
</form> </div>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss
View File

@ -1,7 +1,7 @@
.reference-editor { .reference-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

10
dmp-frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
View File

@ -1,7 +1,8 @@
<div class="row tenant-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row mb-4 mt-3"> <div class="row">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'REFERENCE-LISTING.TITLE' | translate}}</h4> <h4>{{'REFERENCE-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
@ -33,6 +34,9 @@
</div> </div>
</div> </div>
</div>
<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected"> <ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">

160
dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
View File

@ -1,81 +1,85 @@
<div class="tenant-editor"> <div class="container-fluid">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="row">
<div class="col-auto"> <div class="col-md-10 offset-md-1 tenant-editor">
<h3 *ngIf="isNew && !isClone">{{'TENANT-EDITOR.NEW' | translate}}</h3> <div class="row align-items-center mb-4 mt-4" *ngIf="formGroup">
<app-navigation-breadcrumb /> <div class="col-auto">
</div> <h3 *ngIf="isNew && !isClone">{{'TENANT-EDITOR.NEW' | translate}}</h3>
<div class="col-auto"> <app-navigation-breadcrumb />
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button> </div>
</div> <div class="col-auto">
<div class="col-auto" *ngIf="!isNew"> <button mat-button class="action-btn" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="action-btn" type="button" (click)="delete()"> </div>
<mat-icon>delete</mat-icon> <div class="col-auto" *ngIf="!isNew">
{{'TENANT-EDITOR.ACTIONS.DELETE' | translate}} <button mat-button class="action-btn" type="button" (click)="delete()">
</button> <mat-icon>delete</mat-icon>
</div> {{'TENANT-EDITOR.ACTIONS.DELETE' | translate}}
<div class="col-auto" *ngIf="canSave"> </button>
<button mat-button class="action-btn" (click)="formSubmit()"> </div>
<mat-icon>save</mat-icon> <div class="col-auto" *ngIf="canSave">
{{'TENANT-EDITOR.ACTIONS.SAVE' | translate}} <button mat-button class="action-btn" (click)="formSubmit()">
</button> <mat-icon>save</mat-icon>
</div> {{'TENANT-EDITOR.ACTIONS.SAVE' | translate}}
</div> </button>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'TENANT-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'TENANT-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'TENANT-EDITOR.FIELDS.NAME' | translate}}</mat-label> <mat-label>{{'TENANT-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required> <input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'TENANT-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-label>{{'TENANT-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" name="code" [formControl]="formGroup.get('code')" required> <input matInput type="text" name="code" [formControl]="formGroup.get('code')" required>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12"> <div class="col-12">
<h3>{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3> <h3>{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
<div class="col-12"> <div class="col-12">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'TENANT-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'"> <rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'TENANT-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
</rich-text-editor-component> </rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper"> <div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error> <mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
</div>
</div>
</div>
<!-- Deposit -->
<div class="col-12">
<app-tenant-source-component
[form]="formGroup.get('config').get('deposit')"
[validationErrorModel]="editorModel.validationErrorModel"
[validationRootPath]="'config.deposit.'"
[codes]="depositCodes"
[label]="'TENANT-EDITOR.FIELDS.DEPOSIT' | translate">
</app-tenant-source-component>
</div>
<div class="col-12">
<app-tenant-source-component
[form]="formGroup.get('config').get('fileTransformers')"
[validationErrorModel]="editorModel.validationErrorModel"
[validationRootPath]="'config.fileTransformers.'"
[codes]="fileTransformersCodes"
[label]="'TENANT-EDITOR.FIELDS.FILE-TRANSFORMERS' | translate">
</app-tenant-source-component>
</div> </div>
</div> </div>
</div> </mat-card-content>
<!-- Deposit --> </mat-card>
<div class="col-12"> </form>
<app-tenant-source-component </div>
[form]="formGroup.get('config').get('deposit')" </div>
[validationErrorModel]="editorModel.validationErrorModel" </div>
[validationRootPath]="'config.deposit.'"
[codes]="depositCodes"
[label]="'TENANT-EDITOR.FIELDS.DEPOSIT' | translate">
</app-tenant-source-component>
</div>
<div class="col-12">
<app-tenant-source-component
[form]="formGroup.get('config').get('fileTransformers')"
[validationErrorModel]="editorModel.validationErrorModel"
[validationRootPath]="'config.fileTransformers.'"
[codes]="fileTransformersCodes"
[label]="'TENANT-EDITOR.FIELDS.FILE-TRANSFORMERS' | translate">
</app-tenant-source-component>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>

6
dmp-frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.scss
View File

@ -1,7 +1,7 @@
.tenant-editor { .tenant-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
.remove { .remove {
background-color: white; background-color: white;

60
dmp-frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
View File

@ -1,36 +1,38 @@
<div class="row tenant-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row tenant-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'TENANT-LISTING.TITLE' | translate}}</h4> <h4>{{'TENANT-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-raised-button class="create-btn"
*ngIf="authService.hasPermission(authService.permissionEnum.EditTenant)"
[routerLink]="['/tenants/new']">
<mat-icon>add</mat-icon>
{{'TENANT-LISTING.CREATE' | translate}}
</button>
</div>
</div> </div>
<div class="col-auto">
<button mat-raised-button class="create-btn" <app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
*ngIf="authService.hasPermission(authService.permissionEnum.EditTenant)" [count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
[routerLink]="['/tenants/new']"> [defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
<mat-icon>add</mat-icon> (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
{{'TENANT-LISTING.CREATE' | translate}} (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
</button>
</div> <app-tenant-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 />
</app-hybrid-listing>
</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-tenant-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

42
dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
View File

@ -1,27 +1,27 @@
<div class="row user-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row user-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-4">
<div class="col">
<h4>{{'USER-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb />
<div class="row mb-4 mt-3"> </div>
<div class="col"> <div class="col-auto">
<h4>{{'USER-LISTING.TITLE' | translate}}</h4> <button mat-raised-button class="create-btn" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
<app-navigation-breadcrumb /> <mat-icon>download</mat-icon>
{{'USER-LISTING.ACTIONS.EXPORT' | translate}}
</button>
</div>
</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)="onUserRowActivated($event)" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)" (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<div class="col-auto">
<button mat-raised-button class="create-btn" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)"> <app-user-listing-filters hybrid-listing-filters [(filter)]="lookup" (filterChange)="filterChanged($event)" />
<mat-icon>download</mat-icon>
{{'USER-LISTING.ACTIONS.EXPORT' | translate}} <app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup" (onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings" user-preference-settings />
</button> </app-hybrid-listing>
</div>
</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)="onUserRowActivated($event)" (pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)" (columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
<app-user-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
View File

@ -1,7 +1,7 @@
.user-listing { .user-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;

140
dmp-frontend/src/app/ui/description/listing/description-listing.component.html
View File

@ -1,77 +1,79 @@
<div class="main-content listing-main-container h-100"> <div class="container-fluid">
<div class="container-fluid"> <div class="row">
<div class="d-flex flex-direction-row"> <div class="col-md-10 offset-md-1">
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && !hasLikeCriteria()" class="card mt-0"> <div class="d-flex flex-direction-row mb-4 mt-4">
<!-- <div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> --> <div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && !hasLikeCriteria()" class="card mt-0">
<!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> --> <!-- <div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> -->
<div class="card-content info-text mb-0"> <!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
<p>{{'DESCRIPTION-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="['/explore-descriptions']">{{'DESCRIPTION-LISTING.LINK-PUBLIC-DATASETS' | translate}}</u> {{'DESCRIPTION-LISTING.TEXT-INFO-REST' | translate}}</p> <div class="card-content info-text mb-0">
<p class="mt-4 pt-2">{{'DESCRIPTION-LISTING.TEXT-INFO-PAR' | translate}} <p>{{'DESCRIPTION-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="['/explore-descriptions']">{{'DESCRIPTION-LISTING.LINK-PUBLIC-DATASETS' | translate}}</u> {{'DESCRIPTION-LISTING.TEXT-INFO-REST' | translate}}</p>
<div class="d-flex"> <p class="mt-4 pt-2">{{'DESCRIPTION-LISTING.TEXT-INFO-PAR' | translate}}
<button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()"> <div class="d-flex">
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}} <button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()">
</button> {{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png"> </button>
</div> <img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
</div>
</div>
<p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-auto header-title">{{(isPublic ? 'DESCRIPTION-LISTING.TITLE-EXPLORE' : 'DESCRIPTION-LISTING.TITLE') | translate}}</p>
<div *ngIf="listingItems && listingItems.length > 0 && !isPublic || this.lookup.like" class="ml-auto">
<div class="col-auto">
<button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()">
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
</button>
</div>
</div>
<!-- TODO: implement filters -->
<!-- <div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>
</button>
</div> -->
</div>
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto pr-0">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<div class="d-flex flex-row ml-auto">
<!-- Guided Tour -->
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">
{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
<!-- End of Guided Tour -->
<!-- Search Filter-->
<mat-form-field class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12 col-md-9"> <p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-auto header-title">{{(isPublic ? 'DESCRIPTION-LISTING.TITLE-EXPLORE' : 'DESCRIPTION-LISTING.TITLE') | translate}}</p>
<div *ngFor="let item of listingItems; let i = index"> <div *ngIf="listingItems && listingItems.length > 0 && !isPublic || this.lookup.like" class="ml-auto">
<app-description-listing-item-component [isPublic]="isPublic" [description]="item" [showDivider]="i != (listingItems.length - 1)"></app-description-listing-item-component> <div class="col-auto">
</div> <button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()">
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center"> {{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
<button type="button" class="btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button> </button>
</div> </div>
</div> </div>
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && this.lookup.like !== ''" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4"> <!-- TODO: implement filters -->
<span class="empty-list">{{'DESCRIPTION-LISTING.EMPTY-LIST' | translate}}</span> <!-- <div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>
</button>
</div> -->
</div>
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto pr-0">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<div class="d-flex flex-row ml-auto">
<!-- Guided Tour -->
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">
{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
<!-- End of Guided Tour -->
<!-- Search Filter-->
<mat-form-field class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-md-9">
<div *ngFor="let item of listingItems; let i = index">
<app-description-listing-item-component [isPublic]="isPublic" [description]="item" [showDivider]="i != (listingItems.length - 1)"></app-description-listing-item-component>
</div>
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && this.lookup.like !== ''" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<span class="empty-list">{{'DESCRIPTION-LISTING.EMPTY-LIST' | translate}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

110
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -1,63 +1,65 @@
<div class="main-content listing-main-container h-100">
<div class="container-fluid"> <div class="container-fluid">
<div class="d-flex flex-direction-row"> <div class="row">
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && !hasLikeCriteria()" class="card mt-0"> <div class="col-md-10 offset-md-1">
<div class="card-content info-text mb-0"> <div class="d-flex flex-direction-row mb-4 mt-4">
<p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p> <div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && !hasLikeCriteria()" class="card">
<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-dmp-cat/?page=1&size=20" target="_blank">{{'DMP-LISTING.LINK-ZENODO' | translate}}</a> {{'DMP-LISTING.GET-IDEA' | translate}}</p> <div class="card-content info-text mb-0">
<div class="d-flex"> <p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p>
<div *ngIf="!isPublic" class="col left-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div> <p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-dmp-cat/?page=1&size=20" target="_blank">{{'DMP-LISTING.LINK-ZENODO' | translate}}</a> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png"> <div class="d-flex">
</div> <div *ngIf="!isPublic" class="col left-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
</div> <img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
</div> </div>
<p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-auto header-title">{{(isPublic ? 'GENERAL.TITLES.EXPLORE-PLANS' : 'GENERAL.TITLES.PLANS') | translate}}</p>
<!-- TODO: implement filters -->
<!-- <div class="filter-btn" [style.right]="this.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar || this.dialog.getDialogById('filters') ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>
</button>
</div> -->
</div>
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
</mat-select>
</mat-form-field>
<div class="d-flex flex-row ml-auto">
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
<mat-form-field class="search-form ml-auto col-auto pr-0"
floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria"
[formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
</div> </div>
</div> </div>
<p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-auto header-title">{{(isPublic ? 'GENERAL.TITLES.EXPLORE-PLANS' : 'GENERAL.TITLES.PLANS') | translate}}</p>
<!-- TODO: implement filters -->
<!-- <div class="filter-btn" [style.right]="this.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar || this.dialog.getDialogById('filters') ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>
</button>
</div> -->
</div> </div>
<div class="col-md-12 col-sm-12 col-md-9"> <div>
<div *ngFor="let item of listingItems; let i = index"> <div class="listing row pb-2">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component> <div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
</mat-select>
</mat-form-field>
<div class="d-flex flex-row ml-auto">
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
<mat-form-field class="search-form ml-auto col-auto pr-0"
floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria"
[formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-md-9">
<div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>
</div>
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && this.lookup.like !== ''" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div>
</div> </div>
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && this.lookup.like !== ''" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>

44
dmp-frontend/src/app/ui/inapp-notification/listing/mine-inapp-notification-listing.component.html
View File

@ -1,28 +1,30 @@
<div class="row inapp-notification-listing"> <div class="container-fluid">
<div class="col-md-8 offset-md-2"> <div class="row inapp-notification-listing">
<div class="col-md-10 offset-md-1">
<div class="row mb-4 mt-3"> <div class="row mb-4 mt-4">
<div class="col"> <div class="col">
<h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.TITLE' | translate}}</h4>
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div>
</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-mine-inapp-notification-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 />
</app-hybrid-listing>
</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-mine-inapp-notification-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 />
</app-hybrid-listing>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/inapp-notification/listing/mine-inapp-notification-listing.component.scss
View File

@ -1,7 +1,7 @@
.inapp-notification-listing { .inapp-notification-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;

131
dmp-frontend/src/app/ui/supportive-material-editor/supportive-material-editor.component.html
View File

@ -1,63 +1,72 @@
<div class="supportive-material-editor"> <div class="container-fluid">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <div class="row supportive-material-editor">
<div> <div class="col-md-10 offset-md-1">
<mat-card class="col-md-8 offset-md-2 p-3"> <div class="mt-4"></div>
<div class="row"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<div class="col"> <div>
<mat-form-field class="w-100"> <mat-card class="p-1">
<mat-label>{{'SUPPORTIVE-MATERIAL-EDITOR.FIELDS.MATERIAL-TYPE' | translate}}</mat-label> <div class="container-fluid mt-3">
<mat-select (selectionChange)="selectedMaterialChanged($event.value)" name="type" [formControl]="formGroup.get('type')" required> <div class="row">
<mat-option *ngFor="let type of supportiveMaterialTypeEnum" [value]="type"> <div class="col">
{{enumUtils.toSupportiveMaterialTypeString(type)}} <mat-form-field class="w-100">
</mat-option> <mat-label>{{'SUPPORTIVE-MATERIAL-EDITOR.FIELDS.MATERIAL-TYPE' | translate}}</mat-label>
</mat-select> <mat-select (selectionChange)="selectedMaterialChanged($event.value)" name="type" [formControl]="formGroup.get('type')" required>
<mat-error *ngIf="formGroup.get('type').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error> <mat-option *ngFor="let type of supportiveMaterialTypeEnum" [value]="type">
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{enumUtils.toSupportiveMaterialTypeString(type)}}
</mat-form-field> </mat-option>
</div> </mat-select>
<div class="col"> <mat-error *ngIf="formGroup.get('type').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
<mat-form-field class="w-100"> <mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-label>{{'SUPPORTIVE-MATERIAL-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label> </mat-form-field>
<mat-select (selectionChange)="selectedLangChanged($event.value)" name="languageCode" [formControl]="formGroup.get('languageCode')"> </div>
<mat-option *ngFor="let languageCode of availableLanguageCodes" [value]="languageCode"> <div class="col">
{{languageCode}} <mat-form-field class="w-100">
</mat-option> <mat-label>{{'SUPPORTIVE-MATERIAL-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
</mat-select> <mat-select (selectionChange)="selectedLangChanged($event.value)" name="languageCode" [formControl]="formGroup.get('languageCode')">
<mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error> <mat-option *ngFor="let languageCode of availableLanguageCodes" [value]="languageCode">
<mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{languageCode}}
</mat-form-field> </mat-option>
</div> </mat-select>
<mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="formGroup.get('type').value != null && formGroup.get('languageCode').value">
<div class="col">
<editor class="w-100" [init]="{
base_url: '/tinymce',
suffix: '.min',
height: 800,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks fullscreen fullpage',
'insertdatetime media table paste code help wordcount importcss ',
'codesample toc visualchars'
],
extended_valid_elements: '*[*]',
forced_root_block: '',
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
save_enablewhendirty: false,
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code codesample | searchreplace | preview | removeformat | help'
}" [formControl]="formGroup.get('payload')"></editor>
<mat-error *ngIf="formGroup.get('payload').hasError('backendError')">{{formGroup.get('payload').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('payload').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
</mat-card>
<button mat-fab class="mat-fab-bottom-right save-btn" matTooltip="{{'SUPPORTIVE-MATERIAL-EDITOR.ACTIONS.SAVE' | translate}}" type="submit">
<mat-icon class="mat-24">save</mat-icon>
</button>
</div> </div>
<div class="row" *ngIf="formGroup.get('type').value != null && formGroup.get('languageCode').value"> </form>
<div class="col">
<editor class="w-100" [init]="{
base_url: '/tinymce',
suffix: '.min',
height: 800,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks fullscreen fullpage',
'insertdatetime media table paste code help wordcount importcss ',
'codesample toc visualchars'
],
extended_valid_elements: '*[*]',
forced_root_block: '',
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
save_enablewhendirty: false,
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code codesample | searchreplace | preview | removeformat | help'
}" [formControl]="formGroup.get('payload')"></editor>
<mat-error *ngIf="formGroup.get('payload').hasError('backendError')">{{formGroup.get('payload').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('payload').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</mat-card>
<button mat-fab class="mat-fab-bottom-right save-btn" matTooltip="{{'SUPPORTIVE-MATERIAL-EDITOR.ACTIONS.SAVE' | translate}}" type="submit">
<mat-icon class="mat-24">save</mat-icon>
</button>
</div> </div>
</form> </div>
</div> </div>

4
dmp-frontend/src/app/ui/supportive-material-editor/supportive-material-editor.component.scss
View File

@ -1,7 +1,7 @@
.supportive-material-editor { .supportive-material-editor {
//padding-top: 5em; //padding-top: 5em;
padding-bottom: 2em; // padding-bottom: 2em;
margin-top: 1em; // margin-top: 1em;
.material{ .material{
//width: 80px; //width: 80px;