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

Fixes Layouts on Admin Pages

This commit is contained in:
apapachristou 2019-06-05 17:07:36 +03:00
parent fb1dd376fc
commit c5d2ebe8f8
11 changed files with 502 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -1,76 +1,77 @@
<div class="container" *ngIf="form" [formGroup]='form' class="dataset-profile-editor">
<mat-form-field class="full-width">
<input matInput formControlName="label" [disabled]="newVersionId"
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<div class="row" *ngIf="form.get('status').value==1">
<div class="col"></div>
<button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();"
type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
<div class="row">
<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
<div class="col-12">
<button mat-button class="full-width" (click)="addPage()"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
</div>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
<div class="row">
<mat-accordion class="col-12" [multi]="true">
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
<mat-expansion-panel-header>
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
</mat-panel-title>
<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</mat-expansion-panel-header>
<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
<app-dataset-profile-editor-section-component class="col-12"
[form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"
[viewOnly]="viewOnly"></app-dataset-profile-editor-section-component>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="col-12">
<button mat-button (click)="addSection()" class="full-width"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
</div>
</div>
</mat-step>
<!-- <mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE.PREVIEW' | translate}}</ng-template>
<div *ngIf='this.isStepActive(2)'>
<app-dynamic-form *ngIf="dataWizardModel && previewerFormGroup" [form]="this.previewerFormGroup" [dataModel]="dataWizardModel"></app-dynamic-form>
</div>
</mat-step> -->
</mat-horizontal-stepper>
<div class="row">
<!-- SAVE BUTTON -->
<div class="col-auto" *ngIf="!viewOnly">
<div class="row">
<button mat-raised-button color="primary" type="button col-auto" (click)='onSubmit()'
[disabled]="!form.valid">Save</button>
<div class="col-1"></div>
<button mat-raised-button color="primary" type="button col-auto" (click)='finalize()'
[disabled]="!form.valid">Finalize</button>
</div>
<div class="main-content">
<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
<mat-form-field class="full-width">
<input matInput formControlName="label" [disabled]="newVersionId"
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<div class="row" *ngIf="form.get('status').value==1">
<div class="col"></div>
<button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();"
type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<div class="col"></div>
<!-- DELETE BUTTON -->
<div class="col-auto" *ngIf="!isNew">
<button mat-raised-button color="primary" (click)="delete()">
<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
<div class="row">
<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
<div class="col-12">
<button mat-button class="full-width" (click)="addPage()"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
</div>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
<div class="row">
<mat-accordion class="col-12" [multi]="true">
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
<mat-expansion-panel-header>
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
</mat-panel-title>
<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</mat-expansion-panel-header>
<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
<app-dataset-profile-editor-section-component class="col-12"
[form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"
[viewOnly]="viewOnly">
</app-dataset-profile-editor-section-component>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="col-12">
<button mat-button (click)="addSection()" class="full-width"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
</div>
</div>
</mat-step>
<!-- <mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE.PREVIEW' | translate}}</ng-template>
<div *ngIf='this.isStepActive(2)'>
<app-dynamic-form *ngIf="dataWizardModel && previewerFormGroup" [form]="this.previewerFormGroup" [dataModel]="dataWizardModel"></app-dynamic-form>
</div>
</mat-step> -->
</mat-horizontal-stepper>
<div>
<!-- SAVE BUTTON -->
<div class="col-6" *ngIf="!viewOnly">
<div class="row mt-4">
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='onSubmit()'
[disabled]="!form.valid">Save</button>
<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()'
[disabled]="!form.valid">Finalize</button>
</div>
</div>
<!-- DELETE BUTTON -->
<div class="col-6" *ngIf="!isNew">
<button mat-raised-button color="primary" (click)="delete()">
<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
</div>
</div>
</div>

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

@ -1,61 +1,69 @@
<div class="container-fluid">
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
<div class="main-content">
<div class="container-fluid">
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
<mat-card class="row mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">
{{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Submission Time -->
<ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(row.id, row.label)">
<mat-icon>queue</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.NEW-VERSION' | translate}}
<!-- Column Definition: Submission Time -->
<ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}
</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(row.id, row.label)">
<mat-icon>queue</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.NEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="clone(row.id)">
<mat-icon>filter_none</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.CLONE' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
<mat-icon>library_books</mat-icon>
{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
</button>
<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-menu-item (click)="clone(row.id)">
<mat-icon>filter_none</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.CLONE' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
<mat-icon>library_books</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
</button>
<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-cell>
</ng-container>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
<!-- (click)="rowClick(row.id)" -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
<mat-icon class="mat-24">add</mat-icon>
</button>
<div class="row justify-content-end pr-2">
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div>

60
dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss
View File

@ -1,38 +1,68 @@
.mat-table {
margin: 24px;
margin: 24px;
}
.mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
.full-width {
width: 100%;
width: 100%;
}
.mat-card {
margin: 16px 0;
margin: 16px 0;
}
.mat-row {
cursor: pointer;
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
background-color: lightgray;
}
// mat-row:nth-child(even){
// background-color:red;
// }
mat-row:nth-child(odd){
background-color:#eef0fb;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
background-color: #f6f6f6;
height: 30px;
min-height: 30px !important;
}
::ng-deep .mat-paginator-page-size {
height: 43px;
}
::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important;
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
}
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}

197
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html
View File

@ -1,95 +1,134 @@
<div class="dmp-profile-editor">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<mat-card-title *ngIf="isNew">
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h4>{{formGroup.get('label').value}}</h4>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<mat-form-field class="col-12">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
name="label" formControlName="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 class="main-content">
<div class="container-fluid dmp-profile-editor">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
<mat-card>
<!-- <mat-card-header>
<mat-card-title *ngIf="isNew">
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h4>{{formGroup.get('label').value}}</h4>
</mat-card-title>
</mat-card-header> -->
<mat-card-content>
<div class="row pl-5">
<mat-form-field class="col-10">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
name="label" formControlName="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>
<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
<div class="col-12">
<div class="row"
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
<mat-form-field class="col">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
type="text" name="label" [formControl]="fieldFormGroup.get('label')" required>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
{{fieldFormGroup.get('label').getError('backendError').message}}</mat-error>
</mat-form-field>
<mat-form-field class="col">
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
[formControl]="fieldFormGroup.get('type')" required>
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
[value]="fieldType">{{
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
</mat-select>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
{{fieldFormGroup.get('type').getError('backendError').message}}</mat-error>
</mat-form-field>
<mat-form-field class="col">
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
[formControl]="fieldFormGroup.get('dataType')" required>
<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
[value]="fieldDataType">{{
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
</mat-select>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
{{fieldFormGroup.get('dataType').getError('backendError').message}}</mat-error>
</mat-form-field>
<div class="centered-row-item col-auto">
<mat-checkbox [formControl]="fieldFormGroup.get('required')">
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox>
</div>
<div class="centered-row-item col-auto"><button mat-icon-button type="button"
(click)="removeField(i)" [disabled]="viewOnly">
<mat-icon class="mat-24">delete</mat-icon>
</button>
<div class="col-12">
<div class="row"
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
<div class="col-10">
<div class="row">
<mat-form-field class="col">
<input matInput
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
type="text" name="label" [formControl]="fieldFormGroup.get('label')"
required>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
{{fieldFormGroup.get('label').getError('backendError').message}}
</mat-error>
</mat-form-field>
<mat-form-field class="col">
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
[formControl]="fieldFormGroup.get('type')" required>
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
[value]="fieldType">{{
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
</mat-select>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
{{fieldFormGroup.get('type').getError('backendError').message}}
</mat-error>
</mat-form-field>
<mat-form-field class="col">
<mat-select
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
[formControl]="fieldFormGroup.get('dataType')" required>
<mat-option
*ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
[value]="fieldDataType">{{
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
</mat-select>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
{{fieldFormGroup.get('dataType').getError('backendError').message}}
</mat-error>
</mat-form-field>
<div class="centered-row-item col-auto">
<mat-checkbox [formControl]="fieldFormGroup.get('required')">
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox>
</div>
</div>
</div>
<div class="col-2">
<div class="row">
<div class="col-auto" *ngIf="!isNew">
<button mat-icon-button type="button"
(click)="removeField(i)" [disabled]="viewOnly">
<mat-icon class="mat-24">delete</mat-icon>
</button>
</div>
<div class="col-auto"
*ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
<button mat-mini-fab color="primary" type="button" (click)="addField()"
[disabled]="viewOnly">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
<div class="col-auto" *ngIf="isNew && i != 0">
<button mat-mini-fab class="remove" type="button"
(click)="removeField(i)">
<mat-icon class="mat-24">remove</mat-icon>
</button>
</div>
<div class="col-auto"
*ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
<button mat-mini-fab color="primary" type="button" (click)="addField()"
[disabled]="viewOnly">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<button mat-icon-button class="col-auto" color="primary" type="button" (click)="addField()"
[disabled]="viewOnly">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="row mt-4 pl-5 pr-4">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col"></div>
<div class="col-auto" *ngIf="!isNew"><button mat-raised-button color="primary" type="button"
(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
</div>
<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto"
color="primary" (click)="finalize()" [disabled]="!formGroup.valid"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto"
color="primary" (click)="downloadXML()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<div class="col-auto" *ngIf="!viewOnly"><button mat-raised-button color="primary"
type="submit">{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
<div class="col-auto" *ngIf="!viewOnly">
<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</mat-card-content>
</mat-card>
</form>
</div>
</div>

26
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss
View File

@ -1,6 +1,24 @@
.dmp-profile-editor {
.centered-row-item {
align-items: center;
display: flex;
}
.centered-row-item {
align-items: center;
display: flex;
}
.remove {
background-color: white;
color: black;
}
.add {
background-color: white;
color: #009700;
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #0070c0;
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

11
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component } from '@angular/core';
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
@ -71,6 +71,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileModel = new DmpProfileEditorModel();
setTimeout(() => {
this.formGroup = this.dmpProfileModel.buildForm();
this.addField();
});
this.breadCrumbs = Observable.of([{
parentComponentName: 'DmpProfileListingComponent',
@ -95,8 +96,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}
@ -198,8 +199,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}

69
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html
View File

@ -1,40 +1,47 @@
<div class="dmp-profile-listing">
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
<div class="main-content">
<div class="container-fluid dmp-profile-listing">
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
<mat-card class="row mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">
{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: status -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
</ng-container>
<!-- Column Definition: status -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status">
{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Submission Time -->
<!-- Column Definition: Submission Time -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<div class="row justify-content-end pr-2">
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div>

88
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
View File

@ -1,28 +1,62 @@
.dmp-profile-listing {
.mat-row {
cursor: pointer;
}
.mat-card {
margin: 1em 0;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
.mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
.mat-table {
margin: 24px;
}
.dmp-profile-listing {
.mat-row {
cursor: pointer;
}
.mat-card {
margin: 1em 0;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
.mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
background-color: #f6f6f6;
height: 30px;
min-height: 30px !important;
}
::ng-deep .mat-paginator-page-size {
height: 43px;
}
::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important;
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
}
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}

2
dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
View File

@ -1,4 +1,4 @@
<form class="user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<mat-form-field class="roles-width-80">
<mat-select formControlName="appRoles" multiple required>
<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>

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

@ -1,39 +1,41 @@
<div class="user-listing">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<div class="main-content">
<div class="container-fluid user-listing">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<app-user-criteria-component></app-user-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort>
<app-user-criteria-component></app-user-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort>
<!-- Column Definition: Label -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
</ng-container>
<!-- Column Definition: Label -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="email">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="email">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="lastloggedin">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="lastloggedin">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Roles -->
<ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
</mat-cell>
</ng-container>
<!-- Column Definition: Roles -->
<ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</div>
</div>

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

@ -1,14 +1,48 @@
.user-listing {
.mat-card {
margin: 1em 0;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
.mat-table {
margin: 24px;
}
.user-listing {
.mat-card {
margin: 1em 0;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
background-color: #f6f6f6;
height: 30px;
min-height: 30px !important;
}
::ng-deep .mat-paginator-page-size {
height: 43px;
}
::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important;
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
}
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}