From 19416d29e70e5694ad6cb5750a33b97f7a2d03d1 Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Thu, 14 Mar 2019 10:37:58 +0200
Subject: [PATCH] breadcrumb style fix. quick create dmp style fix

---
 .../misc/breadcrumb/breadcrumb.component.html |   4 +-
 .../form-field/form-field.component.html      |  55 ++++------
 .../dataset-editor-wizard.component.html      | 102 +++++++++---------
 3 files changed, 71 insertions(+), 90 deletions(-)

diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html
index 29340a7c2..cb68b40cf 100644
--- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html
+++ b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html
@@ -1,5 +1,5 @@
-<div class="row app-breadcrumb" *ngIf="buildBreadCrumb(this.activatedRoute) as items">
-	<div *ngFor="let breadcrumb of items | async ; let i = index; let length = count" class="col-auto">
+<div class="row" *ngIf="(buildBreadCrumb(this.activatedRoute) | async) as items" [class.app-breadcrumb]="items.length > 0">
+	<div *ngFor="let breadcrumb of items; let i = index; let length = count" class="col-auto">
 		<div class="row">
 			<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="link col-auto">
 				{{ breadcrumb.label }}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
index 429b7041c..2a99bad3b 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
@@ -1,37 +1,28 @@
-<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)"
-	[id]="this.form.get('id').value" [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle"
-	class="dynamic-form-field row">
+<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value" [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
 
 	<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
-	<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild"  matTooltip="{{this.form.get('additionalInformation').value}}" >info</mat-icon>
+	<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild" matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
 
 	<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
 	</h5>
 	<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
 		<i>{{this.form.get('extendedDescription').value}}</i></h5>
 	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
-		<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}"
-			[required]="form.get('validationRequired').value">
+		<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
 		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
 			| translate}}</mat-error>
 	</mat-form-field>
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
 		<div class="row">
-			<mat-form-field class="col-md-12"
-				*ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
-				<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}"
-					[formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration"
-					[required]="form.get('validationRequired').value">
+			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
+				<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
 				</app-single-auto-complete>
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 			</mat-form-field>
-			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList"
-				class="col-md-12">
-				<mat-select [formControl]="form.get('value')"
-					placeholder="{{ form.get('data').value.label | translate }}"
-					[required]="form.get('validationRequired').value">
+			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
+				<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value">
 					<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
 					</mat-option>
 				</mat-select>
@@ -47,11 +38,8 @@
 	</div>
 
 	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
-		<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2"
-			matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
-			placeholder="{{ form.get('data').value.label | translate }}"></textarea>
-		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix
-			aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
+		<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value" placeholder="{{ form.get('data').value.label | translate }}"></textarea>
+		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
 			<mat-icon>close</mat-icon>
 		</button>
 		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
@@ -71,23 +59,18 @@
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
 		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
-			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index"
-				class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
+			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
 		</mat-radio-group>
 		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 		</mat-error>
 	</div>
 
-	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
-		<mat-form-field class="col-12">
-			<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input"
-				[matDatepicker]="date" [required]="form.get('validationRequired').value"
-				[formControl]="form.get('value')">
-			<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-			<mat-datepicker #date></mat-datepicker>
-			<mat-error *ngIf="form.get('value').hasError('required')">
-				{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-			</mat-error>
-		</mat-form-field>
-	</div>
-</div>
\ No newline at end of file
+	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
+		<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value" [formControl]="form.get('value')">
+		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+		<mat-datepicker #date></mat-datepicker>
+		<mat-error *ngIf="form.get('value').hasError('required')">
+			{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+		</mat-error>
+	</mat-form-field>
+</div>
diff --git a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html
index db5c1e7f4..0d859eb8a 100644
--- a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html
+++ b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html
@@ -1,54 +1,52 @@
-<div class="col row">
-    <div class="col">
-        <h3>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.NEW-TITLE' | translate}} {{titlePrefix}}</h3>
-    </div>
-    <div class="col-auto">
-        <mat-button-toggle-group [ngModel]="_inputValue">
-            <mat-button-toggle value="list" (change)="onValChange($event.value)">
-                <mat-icon>format_align_left</mat-icon>
-            </mat-button-toggle>
-            <mat-button-toggle value="add" (change)="onValChange($event.value)">
-                <mat-icon>add</mat-icon>
-            </mat-button-toggle>
-        </mat-button-toggle-group>
-    </div>
-    <div class="col-12">
-        <div *ngIf="toggleButton=='0'" class="row">
-            <div class="col-12"
-                *ngFor="let dataset of this.formGroup.get('datasets').get('datasetsList')['controls'] let i=index;">
-                <mat-card>
-                    <mat-card-content>
-                        <div class="row">
-                            <div class="col">
-                                <h4>{{dataset.get('datasetLabel').value}}</h4>
-                            </div>
-                            <div class="col-auto">
-                                <button mat-icon-button type="button" (click)="editDataset(i);" [disabled]="viewOnly">
-                                    <mat-icon>edit</mat-icon>
-                                </button>
-                            </div>
-                            <div class="col-auto">
-                                <button mat-icon-button type="button" (click)="deleteDataset(i);" [disabled]="viewOnly">
-                                    <mat-icon>delete</mat-icon>
-                                </button>
-                            </div>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-            </div>
-            <!-- <button mat-fab class="mat-fab-bottom-right" color="primary" (click)="listOrEditor()">
+<div class="row">
+	<div class="col">
+		<h3>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.NEW-TITLE' | translate}} {{titlePrefix}}</h3>
+	</div>
+	<div class="col-auto">
+		<mat-button-toggle-group [ngModel]="_inputValue">
+			<mat-button-toggle value="list" (change)="onValChange($event.value)">
+				<mat-icon>format_align_left</mat-icon>
+			</mat-button-toggle>
+			<mat-button-toggle value="add" (change)="onValChange($event.value)">
+				<mat-icon>add</mat-icon>
+			</mat-button-toggle>
+		</mat-button-toggle-group>
+	</div>
+	<div class="col-12">
+		<div *ngIf="toggleButton === 0" class="row">
+			<div class="col-12" *ngFor="let dataset of this.formGroup.get('datasets').get('datasetsList')['controls'] let i=index;">
+				<mat-card>
+					<mat-card-content>
+						<div class="row">
+							<div class="col">
+								<h4>{{dataset.get('datasetLabel').value}}</h4>
+							</div>
+							<div class="col-auto">
+								<button mat-icon-button type="button" (click)="editDataset(i);" [disabled]="viewOnly">
+									<mat-icon>edit</mat-icon>
+								</button>
+							</div>
+							<div class="col-auto">
+								<button mat-icon-button type="button" (click)="deleteDataset(i);" [disabled]="viewOnly">
+									<mat-icon>delete</mat-icon>
+								</button>
+							</div>
+						</div>
+					</mat-card-content>
+				</mat-card>
+			</div>
+			<!-- <button mat-fab class="mat-fab-bottom-right" color="primary" (click)="listOrEditor()">
                 <mat-icon class="mat-24">add</mat-icon>
             </button> -->
-        </div>
-    </div>
-    <div *ngIf="toggleButton=='2' && editedDataset" class="col-12 row">
-            <mat-form-field class="col-md-12">
-                    <input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.DATASET-LABEL' | translate}}" type="string" name="datasetLabel"
-                    [formControl]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset].get('datasetLabel')" required>
-                </mat-form-field>
-        <app-dataset-description-form class="col-12"
-            [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
-            [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value">
-        </app-dataset-description-form>
-    </div>
-</div>
\ No newline at end of file
+		</div>
+	</div>
+	<div *ngIf="toggleButton === 2 && editedDataset" class="col-12">
+		<div class="row">
+			<mat-form-field class="col-md-12">
+				<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.DATASET-LABEL' | translate}}" type="string" name="datasetLabel" [formControl]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset].get('datasetLabel')" required>
+			</mat-form-field>
+			<app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]" [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value">
+			</app-dataset-description-form>
+		</div>
+	</div>
+</div>