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

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

@ -1,4 +1,5 @@
<div class="container" *ngIf="form" [formGroup]='form' class="dataset-profile-editor">
<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>
@ -37,7 +38,8 @@
<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>
[viewOnly]="viewOnly">
</app-dataset-profile-editor-section-component>
</div>
</mat-expansion-panel>
</mat-accordion>
@ -54,23 +56,22 @@
</div>
</mat-step> -->
</mat-horizontal-stepper>
<div class="row">
<div>
<!-- SAVE BUTTON -->
<div class="col-auto" *ngIf="!viewOnly">
<div class="row">
<button mat-raised-button color="primary" type="button col-auto" (click)='onSubmit()'
<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>
<div class="col-1"></div>
<button mat-raised-button color="primary" type="button col-auto" (click)='finalize()'
<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()'
[disabled]="!form.valid">Finalize</button>
</div>
</div>
<div class="col"></div>
<!-- DELETE BUTTON -->
<div class="col-auto" *ngIf="!isNew">
<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>

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

@ -1,19 +1,22 @@
<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-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-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-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
@ -26,7 +29,8 @@
<!-- Column Definition: Submission Time -->
<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-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(row.id, row.label)">
@ -36,7 +40,8 @@
<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}}
<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>
@ -55,7 +60,10 @@
</mat-paginator>
</mat-card>
<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>

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

@ -36,3 +36,33 @@ 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;
}

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

@ -1,17 +1,20 @@
<div class="dmp-profile-editor">
<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-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-header> -->
<mat-card-content>
<div class="row">
<mat-form-field class="col-12">
<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')">
@ -19,18 +22,23 @@
<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>
<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>
<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>
{{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}}"
@ -42,54 +50,85 @@
<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>
{{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}}"
<mat-select
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
[formControl]="fieldFormGroup.get('dataType')" required>
<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
<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>
{{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"
</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>
<button mat-icon-button class="col-auto" color="primary" type="button" (click)="addField()"
<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 class="col-12">
<div class="row">
</div>
</div>
</div>
</div>
<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>
</mat-card-content>
</mat-card>
</form>
</div>
</div>

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

@ -3,4 +3,22 @@
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;
}

3
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',

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

@ -1,25 +1,29 @@
<div class="dmp-profile-listing">
<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-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-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-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-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>
@ -34,7 +38,10 @@
</mat-paginator>
</mat-card>
<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>

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

@ -1,5 +1,8 @@
.dmp-profile-listing {
.mat-table {
margin: 24px;
}
.dmp-profile-listing {
.mat-row {
cursor: pointer;
}
@ -26,3 +29,34 @@
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>

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

@ -1,4 +1,5 @@
<div class="user-listing">
<div class="main-content">
<div class="container-fluid user-listing">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<app-user-criteria-component></app-user-criteria-component>
@ -37,3 +38,4 @@
</mat-paginator>
</mat-card>
</div>
</div>

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

@ -1,5 +1,8 @@
.user-listing {
.mat-table {
margin: 24px;
}
.user-listing {
.mat-card {
margin: 1em 0;
}
@ -12,3 +15,34 @@
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;
}