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"> <div class="main-content">
<mat-form-field class="full-width"> <div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
<input matInput formControlName="label" [disabled]="newVersionId" <mat-form-field class="full-width">
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required> <input matInput formControlName="label" [disabled]="newVersionId"
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
</mat-error> <mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-form-field> </mat-error>
<div class="row" *ngIf="form.get('status').value==1"> </mat-form-field>
<div class="col"></div> <div class="row" *ngIf="form.get('status').value==1">
<button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();" <div class="col"></div>
type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button> <button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();"
</div> type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | 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 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> </div>
<div class="col"></div> <mat-horizontal-stepper [linear]="true" #stepper>
<!-- DELETE BUTTON --> <mat-step>
<div class="col-auto" *ngIf="!isNew"> <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
<button mat-raised-button color="primary" (click)="delete()"> <div class="row">
<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}} <app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
</button> [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> </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"> <div class="main-content">
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3> <div class="container-fluid">
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component> <app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
<mat-card class="mat-card"> <mat-card class="row mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> <mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name --> <!-- Column Definition: Name -->
<ng-container cdkColumnDef="label"> <ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header="label">
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell> {{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Description --> <!-- Column Definition: Description -->
<ng-container cdkColumnDef="description"> <ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell> </mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Created --> <!-- Column Definition: Created -->
<ng-container cdkColumnDef="created"> <ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' | <mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell> translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell> <mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container> </ng-container>
<!-- Column Definition: Submission Time --> <!-- Column Definition: Submission Time -->
<ng-container cdkColumnDef="actions"> <ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()"> </mat-header-cell>
<mat-menu #actionsMenu="matMenu"> <mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<button mat-menu-item (click)="newVersion(row.id, row.label)"> <mat-menu #actionsMenu="matMenu">
<mat-icon>queue</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.NEW-VERSION' | translate}} <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>
<button mat-menu-item (click)="clone(row.id)"> </mat-cell>
<mat-icon>filter_none</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.CLONE' | translate}} </ng-container>
</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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
<!-- (click)="rowClick(row.id)" --> <!-- (click)="rowClick(row.id)" -->
</mat-table> </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"> <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator> </mat-paginator>
</mat-card> </mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']"> <div class="row justify-content-end pr-2">
<mat-icon class="mat-24">add</mat-icon> <button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
</button> <mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</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 { .mat-table {
margin: 24px; margin: 24px;
} }
.mat-fab-bottom-right { .mat-fab-bottom-right {
// top: auto !important; // top: auto !important;
// right: 20px !important; // right: 20px !important;
// bottom: 10px !important; // bottom: 10px !important;
// left: auto !important; // left: auto !important;
// position: fixed !important; // position: fixed !important;
float: right; float: right;
z-index: 5; z-index: 5;
} }
.full-width { .full-width {
width: 100%; width: 100%;
} }
.mat-card { .mat-card {
margin: 16px 0; margin: 16px 0;
} }
.mat-row { .mat-row {
cursor: pointer; cursor: pointer;
} }
mat-row:hover { mat-row:hover {
background-color: lightgray; background-color: lightgray;
} }
// mat-row:nth-child(even){ // mat-row:nth-child(even){
// background-color:red; // background-color:red;
// } // }
mat-row:nth-child(odd){ mat-row:nth-child(odd) {
background-color:#eef0fb; 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"> <div class="main-content">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"> <div class="container-fluid dmp-profile-editor">
<mat-card> <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card-header> <h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
<mat-card-title *ngIf="isNew"> <h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4> <mat-card>
</mat-card-title> <!-- <mat-card-header>
<mat-card-title *ngIf="!isNew"> <mat-card-title *ngIf="isNew">
<h4>{{formGroup.get('label').value}}</h4> <h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
</mat-card-title> </mat-card-title>
</mat-card-header> <mat-card-title *ngIf="!isNew">
<mat-card-content> <h4>{{formGroup.get('label').value}}</h4>
<div class="row"> </mat-card-title>
<mat-form-field class="col-12"> </mat-card-header> -->
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" <mat-card-content>
name="label" formControlName="label" required> <div class="row pl-5">
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> <mat-form-field class="col-10">
{{formGroup.get('label').getError('backendError').message}}</mat-error> <input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
<mat-error *ngIf="formGroup.get('label').hasError('required')"> name="label" formControlName="label" required>
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
</mat-form-field> {{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="col-12"> <div class="row"
<div class="row" *ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index"> <div class="col-10">
<mat-form-field class="col"> <div class="row">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" <mat-form-field class="col">
type="text" name="label" [formControl]="fieldFormGroup.get('label')" required> <input matInput
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')"> placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> type="text" name="label" [formControl]="fieldFormGroup.get('label')"
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')"> required>
{{fieldFormGroup.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
</mat-form-field> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-form-field class="col"> <mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" {{fieldFormGroup.get('label').getError('backendError').message}}
[formControl]="fieldFormGroup.get('type')" required> </mat-error>
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" </mat-form-field>
[value]="fieldType">{{ <mat-form-field class="col">
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option> <mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
</mat-select> [formControl]="fieldFormGroup.get('type')" required>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')"> <mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> [value]="fieldType">{{
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')"> getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
{{fieldFormGroup.get('type').getError('backendError').message}}</mat-error> </mat-select>
</mat-form-field> <mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
<mat-form-field class="col"> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" <mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
[formControl]="fieldFormGroup.get('dataType')" required> {{fieldFormGroup.get('type').getError('backendError').message}}
<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" </mat-error>
[value]="fieldDataType">{{ </mat-form-field>
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option> <mat-form-field class="col">
</mat-select> <mat-select
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')"> placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> [formControl]="fieldFormGroup.get('dataType')" required>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')"> <mat-option
{{fieldFormGroup.get('dataType').getError('backendError').message}}</mat-error> *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
</mat-form-field> [value]="fieldDataType">{{
<div class="centered-row-item col-auto"> getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
<mat-checkbox [formControl]="fieldFormGroup.get('required')"> </mat-select>
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox> <mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
</div> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<div class="centered-row-item col-auto"><button mat-icon-button type="button" <mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
(click)="removeField(i)" [disabled]="viewOnly"> {{fieldFormGroup.get('dataType').getError('backendError').message}}
<mat-icon class="mat-24">delete</mat-icon> </mat-error>
</button> </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>
</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> <div class="row mt-4 pl-5 pr-4">
<div class="col-12">
<div class="row">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()" <div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div> type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col"></div> <div class="col"></div>
<div class="col-auto" *ngIf="!isNew"><button mat-raised-button color="primary" type="button" <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" <button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto"
color="primary" (click)="finalize()" [disabled]="!formGroup.valid" color="primary" (click)="finalize()" [disabled]="!formGroup.valid"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button> type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto" <button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto"
color="primary" (click)="downloadXML()" color="primary" (click)="downloadXML()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button> type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<div class="col-auto" *ngIf="!viewOnly"><button mat-raised-button color="primary" <div class="col-auto" *ngIf="!viewOnly">
type="submit">{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button></div> <button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> </form>
</form> </div>
</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 { .dmp-profile-editor {
.centered-row-item { .centered-row-item {
align-items: center; align-items: center;
display: flex; 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 { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -71,6 +71,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileModel = new DmpProfileEditorModel(); this.dmpProfileModel = new DmpProfileEditorModel();
setTimeout(() => { setTimeout(() => {
this.formGroup = this.dmpProfileModel.buildForm(); this.formGroup = this.dmpProfileModel.buildForm();
this.addField();
}); });
this.breadCrumbs = Observable.of([{ this.breadCrumbs = Observable.of([{
parentComponentName: 'DmpProfileListingComponent', parentComponentName: 'DmpProfileListingComponent',
@ -95,8 +96,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value) this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => this.onCallbackSuccess(), complete => this.onCallbackSuccess(),
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
} }
@ -198,8 +199,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value) this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => this.onCallbackSuccess(), complete => this.onCallbackSuccess(),
error => this.onCallbackError(error) 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"> <div class="main-content">
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3> <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> <app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
<mat-card class="mat-card"> <mat-card class="row mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> <mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name --> <!-- Column Definition: Name -->
<ng-container cdkColumnDef="label"> <ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header="label">
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell> {{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: status --> <!-- Column Definition: status -->
<ng-container cdkColumnDef="status"> <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header="status">
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell> {{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
</ng-container> <mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
</ng-container>
<!-- Column Definition: Created --> <!-- Column Definition: Created -->
<ng-container cdkColumnDef="created"> <ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header="created">
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell> {{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
</ng-container> <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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" --> <!-- (click)="rowClick(row.id)" -->
</mat-table> </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"> <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator> </mat-paginator>
</mat-card> </mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] "> <div class="row justify-content-end pr-2">
<mat-icon class="mat-24">add</mat-icon> <button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
</button> <mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</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-table {
margin: 24px;
.mat-row { }
cursor: pointer;
} .dmp-profile-listing {
.mat-row {
.mat-card { cursor: pointer;
margin: 1em 0; }
}
.mat-card {
mat-row:hover { margin: 1em 0;
background-color: lightgray; }
}
mat-row:hover {
mat-row:nth-child(odd) { background-color: lightgray;
background-color: #eef0fb; }
}
mat-row:nth-child(odd) {
.mat-fab-bottom-right { background-color: #eef0fb;
// top: auto !important; }
// right: 20px !important;
// bottom: 10px !important; .mat-fab-bottom-right {
// left: auto !important; // top: auto !important;
// position: fixed !important; // right: 20px !important;
float: right; // bottom: 10px !important;
z-index: 5; // 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-form-field class="roles-width-80">
<mat-select formControlName="appRoles" multiple required> <mat-select formControlName="appRoles" multiple required>
<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option> <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"> <div class="main-content">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3> <div class="container-fluid user-listing">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<app-user-criteria-component></app-user-criteria-component> <app-user-criteria-component></app-user-criteria-component>
<mat-card class="mat-card"> <mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Column Definition: Label --> <!-- Column Definition: Label -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell> <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
</ng-container> </ng-container>
<ng-container cdkColumnDef="email"> <ng-container cdkColumnDef="email">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell> <mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
</ng-container> </ng-container>
<ng-container cdkColumnDef="lastloggedin"> <ng-container cdkColumnDef="lastloggedin">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell> <mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
</ng-container> </ng-container>
<!-- Column Definition: Roles --> <!-- Column Definition: Roles -->
<ng-container cdkColumnDef="roles"> <ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> <mat-cell *matCellDef="let row">
<app-user-role-editor-component [item]="row"></app-user-role-editor-component> <app-user-role-editor-component [item]="row"></app-user-role-editor-component>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table> </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"> <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator> </mat-paginator>
</mat-card> </mat-card>
</div>
</div> </div>

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

@ -1,14 +1,48 @@
.user-listing { .mat-table {
margin: 24px;
.mat-card { }
margin: 1em 0;
} .user-listing {
.mat-card {
mat-row:hover { margin: 1em 0;
background-color: lightgray; }
}
mat-row:hover {
mat-row:nth-child(odd) { background-color: lightgray;
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;
} }