Fixes Layouts on Admin Pages

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

@@ -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="col-6" *ngIf="!viewOnly">
-			<div class="row">
+				<div class="row mt-4">
-				<button mat-raised-button color="primary" type="button col-auto" (click)='onSubmit()'
+					<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 class="col-auto" color="primary" type="button col-auto" (click)='finalize()'
-				<button mat-raised-button 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>

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

@@ -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>

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

@@ -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;
+}

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

@@ -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">
+					<div class="row pl-5">
-					<mat-form-field class="col-12">
+						<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}}"
+											<input matInput
-									type="text" name="label" [formControl]="fieldFormGroup.get('label')" required>
+												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>
-					<div class="row">
+							</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"
+						<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>
 				</mat-card-content>
 			</mat-card>
 		</form>
 	</div>
+</div>

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

@@ -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;
 }

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

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

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

@@ -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>

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

@@ -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;
+}

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

@@ -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>

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

@@ -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>

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

@@ -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;
+}