breadcrumb style fix. quick create dmp style fix

This commit is contained in:
Diamantis Tziotzios 2019-03-14 10:37:58 +02:00
parent 9dd2c606ed
commit 19416d29e7
3 changed files with 71 additions and 90 deletions

View File

@ -1,5 +1,5 @@
<div class="row app-breadcrumb" *ngIf="buildBreadCrumb(this.activatedRoute) as items"> <div class="row" *ngIf="(buildBreadCrumb(this.activatedRoute) | async) as items" [class.app-breadcrumb]="items.length > 0">
<div *ngFor="let breadcrumb of items | async ; let i = index; let length = count" class="col-auto"> <div *ngFor="let breadcrumb of items; let i = index; let length = count" class="col-auto">
<div class="row"> <div class="row">
<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="link col-auto"> <a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="link col-auto">
{{ breadcrumb.label }} {{ breadcrumb.label }}

View File

@ -1,37 +1,28 @@
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" <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">
[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> <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 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
</h5> </h5>
<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12"> <h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{this.form.get('extendedDescription').value}}</i></h5> <i>{{this.form.get('extendedDescription').value}}</i></h5>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12"> <mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" <input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
[required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error> | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
*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 placeholder="{{ form.get('data').value.label | translate }}"
[formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration"
[required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" <mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
class="col-md-12"> <mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value">
<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 *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
</mat-option> </mat-option>
</mat-select> </mat-select>
@ -47,11 +38,8 @@
</div> </div>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12"> <mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" <textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value" placeholder="{{ form.get('data').value.label | translate }}"></textarea>
matAutosizeMaxRows="10" [required]="form.get('validationRequired').value" <button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'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> <mat-icon>close</mat-icon>
</button> </button>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' <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"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value"> <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" <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>
class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</div> </div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12"> <mat-form-field *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')">
<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
[matDatepicker]="date" [required]="form.get('validationRequired').value" <mat-datepicker #date></mat-datepicker>
[formControl]="form.get('value')"> <mat-error *ngIf="form.get('value').hasError('required')">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle> {{'GENERAL.VALIDATION.REQUIRED' | translate}}
<mat-datepicker #date></mat-datepicker> </mat-error>
<mat-error *ngIf="form.get('value').hasError('required')"> </mat-form-field>
{{'GENERAL.VALIDATION.REQUIRED' | translate}} </div>
</mat-error>
</mat-form-field>
</div>
</div>

View File

@ -1,54 +1,52 @@
<div class="col row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.NEW-TITLE' | translate}} {{titlePrefix}}</h3> <h3>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.NEW-TITLE' | translate}} {{titlePrefix}}</h3>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<mat-button-toggle-group [ngModel]="_inputValue"> <mat-button-toggle-group [ngModel]="_inputValue">
<mat-button-toggle value="list" (change)="onValChange($event.value)"> <mat-button-toggle value="list" (change)="onValChange($event.value)">
<mat-icon>format_align_left</mat-icon> <mat-icon>format_align_left</mat-icon>
</mat-button-toggle> </mat-button-toggle>
<mat-button-toggle value="add" (change)="onValChange($event.value)"> <mat-button-toggle value="add" (change)="onValChange($event.value)">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</mat-button-toggle> </mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>
<div class="col-12"> <div class="col-12">
<div *ngIf="toggleButton=='0'" class="row"> <div *ngIf="toggleButton === 0" class="row">
<div class="col-12" <div class="col-12" *ngFor="let dataset of this.formGroup.get('datasets').get('datasetsList')['controls'] let i=index;">
*ngFor="let dataset of this.formGroup.get('datasets').get('datasetsList')['controls'] let i=index;"> <mat-card>
<mat-card> <mat-card-content>
<mat-card-content> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <h4>{{dataset.get('datasetLabel').value}}</h4>
<h4>{{dataset.get('datasetLabel').value}}</h4> </div>
</div> <div class="col-auto">
<div class="col-auto"> <button mat-icon-button type="button" (click)="editDataset(i);" [disabled]="viewOnly">
<button mat-icon-button type="button" (click)="editDataset(i);" [disabled]="viewOnly"> <mat-icon>edit</mat-icon>
<mat-icon>edit</mat-icon> </button>
</button> </div>
</div> <div class="col-auto">
<div class="col-auto"> <button mat-icon-button type="button" (click)="deleteDataset(i);" [disabled]="viewOnly">
<button mat-icon-button type="button" (click)="deleteDataset(i);" [disabled]="viewOnly"> <mat-icon>delete</mat-icon>
<mat-icon>delete</mat-icon> </button>
</button> </div>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> </div>
</div> <!-- <button mat-fab class="mat-fab-bottom-right" color="primary" (click)="listOrEditor()">
<!-- <button mat-fab class="mat-fab-bottom-right" color="primary" (click)="listOrEditor()">
<mat-icon class="mat-24">add</mat-icon> <mat-icon class="mat-24">add</mat-icon>
</button> --> </button> -->
</div> </div>
</div> </div>
<div *ngIf="toggleButton=='2' && editedDataset" class="col-12 row"> <div *ngIf="toggleButton === 2 && editedDataset" class="col-12">
<mat-form-field class="col-md-12"> <div class="row">
<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.DATASET-LABEL' | translate}}" type="string" name="datasetLabel" <mat-form-field class="col-md-12">
[formControl]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset].get('datasetLabel')" required> <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> </mat-form-field>
<app-dataset-description-form class="col-12" <app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]" [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value">
[form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]" </app-dataset-description-form>
[visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value"> </div>
</app-dataset-description-form> </div>
</div> </div>
</div>