Merge branch 'ui-refactoring' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring

This commit is contained in:
Diamantis Tziotzios 2019-01-29 18:34:50 +02:00
commit ce223994ae
18 changed files with 274 additions and 91 deletions

View File

@ -57,11 +57,6 @@ export class FieldEditorModel extends BaseFormModel {
page: [this.page],
ordinal: [this.ordinal]
});
let valid = ValidationType.None;
if (this.validations && this.validations[0] === 1) { valid = ValidationType.Required; }
const arr = new FormArray([
new FormControl(valid)
]);
// formGroup.addControl("multiplicity", this.multiplicity.buildForm());
formGroup.addControl('validations', new FormControl(this.validations));

View File

@ -1,4 +1,4 @@
import { FormGroup } from '@angular/forms';
import { FormGroup, Validators } from '@angular/forms';
import { Page } from '../../../../core/model/admin/dataset-profile/dataset-profile';
import { BaseFormModel } from '../../../../core/model/base-form-model';
import { Guid } from '../../../../common/types/guid';
@ -23,8 +23,8 @@ export class PageEditorModel extends BaseFormModel {
buildForm(): FormGroup {
const formGroup = this.formBuilder.group({
title: [this.title],
id: [this.id],
title: [this.title, [Validators.required]],
id: [this.id, [Validators.required]],
ordinal: [this.ordinal]
});
return formGroup;

View File

@ -3,6 +3,7 @@ import { CommonFormsModule } from '../../../common/forms/common-forms.module';
import { CommonUiModule } from '../../../common/ui/common-ui.module';
import { FormattingModule } from '../../../core/formatting.module';
import { DatasetProfileRoutingModule } from './dataset-profile.routing';
import { DatasetProfileEditorDefaultValueComponent } from './editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component';
import { DatasetProfileEditorCompositeFieldComponent } from './editor/components/composite-field/dataset-profile-editor-composite-field.component';
import { DatasetProfileEditorAutoCompleteFieldComponent } from './editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component';
import { DatasetProfileEditorBooleanDecisionFieldComponent } from './editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component';
@ -43,7 +44,9 @@ import { DatasetProfileListingComponent } from './listing/dataset-profile-listin
DatasetProfileEditorFreeTextFieldComponent,
DatasetProfileEditorRadioBoxFieldComponent,
DatasetProfileEditorTextAreaFieldComponent,
DatasetProfileEditorWordListFieldComponent
DatasetProfileEditorWordListFieldComponent,
DatasetProfileEditorDefaultValueComponent
],
entryComponents: [
]

View File

@ -1,41 +1,61 @@
<div class="row">
<h4 *ngIf="isComposite" style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}</h4>
<h4 *ngIf="!isComposite" style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE' | translate}}</h4>
<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
<mat-checkbox class="col-auto" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}</mat-checkbox>
<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}</mat-checkbox>
<h4 *ngIf="isComposite" style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE'
| translate}}</h4>
<h4 *ngIf="!isComposite" style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE'
| translate}}</h4>
<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX'
| translate}}</mat-checkbox>
<mat-checkbox class="col-auto" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX'
| translate}}</mat-checkbox>
<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX'
| translate}}</mat-checkbox>
</div>
<div class="row">
<mat-form-field *ngIf="isComposite" class="col">
<input matInput type="string" placeholder="Id" [formControl]="this.form.get('id')">
<input matInput type="string" placeholder="Id" [formControl]="form.get('id')" required>
<mat-error *ngIf="form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isComposite" class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}" [formControl]="this.form.get('title')">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}"
[formControl]="this.form.get('title')">
</mat-form-field>
<mat-form-field *ngIf="!isComposite" class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}" [formControl]="this.form.get('title')">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}"
[formControl]="this.form.get('title')">
</mat-form-field>
<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}" type="number" [formControl]="this.form.get('multiplicity').get('min')">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
type="number" [formControl]="form.get('multiplicity').get('min')" required>
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}" type="number" [formControl]="this.form.get('multiplicity').get('max')">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
[formControl]="this.form.get('ordinal')">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-6">
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}" [formControl]="this.form.get('description')"></textarea>
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
[formControl]="this.form.get('description')"></textarea>
</mat-form-field>
<mat-form-field class="col-md-6">
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}" [formControl]="this.form.get('extendedDescription')"></textarea>
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
[formControl]="this.form.get('extendedDescription')"></textarea>
</mat-form-field>
<app-dataset-profile-editor-field-component class="col-12" *ngIf="!isComposite" [form]="form.get('fields').get(''+0)" [showOrdinal]="false" [showMultiplicity]="false" [indexPath]="indexPath + 'f' + 0"></app-dataset-profile-editor-field-component>
<app-dataset-profile-editor-field-component class="col-12" *ngIf="!isComposite" [form]="form.get('fields').get(''+0)"
[showOrdinal]="false" [showMultiplicity]="false" [indexPath]="indexPath + 'f' + 0"></app-dataset-profile-editor-field-component>
</div>
<div *ngIf="isComposite" class="row">
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}</h4>
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' |
translate}}</h4>
<div class="col-12">
<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel>
<mat-expansion-panel-header>
@ -51,5 +71,6 @@
</div>
</mat-expansion-panel>
</div>
<div class="col-12"><button mat-button class="full-width" (click)="addNewField()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button></div>
</div>
<div class="col-12"><button mat-button class="full-width" (click)="addNewField()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD'
| translate}}</button></div>
</div>

View File

@ -0,0 +1,56 @@
<div class="row">
<!-- BooleanDecision -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.BooleanDecision">
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
<mat-option value="true">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' |
translate}}</mat-option>
<mat-option value="false">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.NO' |
translate}}</mat-option>
</mat-select>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- CheckBox -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.CheckBox">
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
<mat-option value="true">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.CHECKED' |
translate}}</mat-option>
<mat-option value="false">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.UNCHECKED' |
translate}}</mat-option>
</mat-select>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- ComboBox -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.Autocomplete">
<input matInput type=" text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
</mat-form-field>
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.WordList">
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
</mat-select>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- FreeText -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">
<input matInput type=" text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- RadioBox -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.RadioBox">
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
</mat-select>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- TextArea -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.TextArea">
<input matInput type=" text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>

View File

@ -0,0 +1,29 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
import { DatasetProfileComboBoxType } from '../../../../../../core/common/enum/dataset-profile-combo-box-type';
import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style';
@Component({
selector: 'app-component-profile-editor-default-value-component',
templateUrl: './component-profile-editor-default-value.component.html',
styleUrls: ['./component-profile-editor-default-value.component.scss']
})
export class DatasetProfileEditorDefaultValueComponent implements OnInit {
@Input() viewStyle: DatasetProfileFieldViewStyle;
@Input() form: FormControl;
@Input() formArrayOptions: FormArray;
@Input() comboBoxType: DatasetProfileComboBoxType;
@Input() placeHolder: String;
@Input() required: Boolean;
comboBoxTypeEnum = DatasetProfileComboBoxType;
viewStyleEnum = DatasetProfileFieldViewStyle;
constructor() { }
ngOnInit() {
}
}

View File

@ -8,12 +8,13 @@
<div class="col-12">
<div *ngFor="let option of form.get('data').get('options')['controls'] index as i" class="row">
<mat-form-field class="col-md-6">
<mat-form-field class="col">
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-LABEL' | translate}}" [formControl]="this.form.get('data').get('options').get(''+i).get('label')">
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-form-field class="col">
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}" [formControl]="this.form.get('data').get('options').get(''+i).get('value')">
</mat-form-field>
<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button"><mat-icon>delete</mat-icon></button>
</div>
</div>
<div class="col-auto">

View File

@ -22,4 +22,8 @@ export class DatasetProfileEditorRadioBoxFieldComponent implements OnInit {
if (!this.form.get('data').get('options')) { (<FormGroup>this.form.get('data')).addControl('options', new FormBuilder().array([])); }
(<FormArray>this.form.get('data').get('options')).push(radioListOptions.buildForm());
}
deleteRow(intex: number) {
if (this.form.get('data').get('options')) { (<FormArray>this.form.get('data').get('options')).removeAt(intex); }
}
}

View File

@ -1,8 +1,10 @@
<div class="row" *ngIf="form.get('data')">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-TITLE' | translate}}</h5>
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-TITLE'
| translate}}</h5>
<mat-form-field class="col-12">
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-PLACEHOLDER' | translate}}"
[formControl]="form.get('data').get('label')">
</mat-form-field>
</div>
</div>

View File

@ -1,10 +1,13 @@
<div class="row">
<mat-form-field class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text"
[formControl]="this.form.get('id')" required>
<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
required>
<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
@ -12,26 +15,36 @@
<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
</mat-select>
<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="showOrdinal" class="col">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}"
[formControl]="this.form.get('ordinal')">
</mat-form-field>
<!-- Default Value -->
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col"
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')"
[formArrayOptions]="this.form.get('data')?.get('options')" [comboBoxType]="this.form.get('data')?.get('type')?.value"
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-component-profile-editor-default-value-component>
<mat-form-field class="col">
<input matInput type=" text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" [formControl]="this.form.get('defaultValue').get('value')">
</mat-form-field>
<mat-form-field class="col">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')" multiple>
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
multiple>
<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="row">
<mat-checkbox class="col" *ngIf="showMultiplicity" [(ngModel)]="isFieldMultiplicityEnabled" (ngModelChange)="onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}</mat-checkbox>
<mat-checkbox class="col" *ngIf="showMultiplicity" [(ngModel)]="isFieldMultiplicityEnabled" (ngModelChange)="onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled)">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-CHECKBOX'
| translate}}</mat-checkbox>
<mat-form-field class="col" *ngIf="showMultiplicity && isFieldMultiplicityEnabled">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}" [formControl]="this.form.get('multiplicity').get('min')">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
[formControl]="this.form.get('multiplicity').get('min')">
</mat-form-field>
<mat-form-field class="col" *ngIf="showMultiplicity && isFieldMultiplicityEnabled">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}" [formControl]="this.form.get('multiplicity').get('max')">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
[formControl]="this.form.get('multiplicity').get('max')">
</mat-form-field>
</div>
<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
@ -39,11 +52,16 @@
<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12" [form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
</div>
<div class="row">
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')"></app-dataset-profile-editor-rule-component>
<div class="col-12"><button mat-button class="full-width" (click)="addNewRule()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button></div>
</div>
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' |
translate}}</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')"
[viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value" [formArrayOptionsForCheck]="this.form.get('data')?.get('options')"
[comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"></app-dataset-profile-editor-rule-component>
<div class="col-12"><button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE'
| translate}}</button></div>
</div>

View File

@ -2,10 +2,12 @@
<mat-card-title class="page-card-title">{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.PAGE-PREFIX' | translate}} {{i + 1}}</mat-card-title>
<div class="row">
<mat-form-field class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.PAGE-INPUT-TITLE' | translate}}" [formControl]="pageControl.get('title')">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.PAGE-INPUT-TITLE' | translate}}"
[formControl]="pageControl.get('title')" required>
</mat-form-field>
<mat-error *ngIf="pageControl.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button mat-icon-button type="button" class="col-auto" (click)="removePage(i)">
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-card>
</mat-card>

View File

@ -1,18 +1,24 @@
<div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
<span class="col-auto">{{i + 1}}</span>
<!-- <mat-form-field class="col">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-TYPE' | translate}}" formControlName="ruleType">
<mat-option>field value</mat-option>
</mat-select>
</mat-form-field> -->
<mat-form-field class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.TARGET' | translate}}" formControlName="target" (change)="targetValidation()">
</mat-form-field>
<mat-form-field class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.VALUE' | translate}}" formControlName="value">
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span>
<!-- Value -->
<app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
[formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RULES-VALUE' | translate}}"
required="true"></app-component-profile-editor-default-value-component>
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span>
<!-- Field Or Section ID -->
<mat-form-field class="col-auto">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.TARGET' | translate}}"
formControlName="target" (change)="targetValidation()" required>
<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-auto"><button mat-icon-button type="button" (click)="deleteRule(i);">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>

View File

@ -1,5 +1,7 @@
import { Component, Input } from '@angular/core';
import { FormArray } from '@angular/forms';
import { FormArray, FormControl } from '@angular/forms';
import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style';
import { DatasetProfileComboBoxType } from '../../../../../../core/common/enum/dataset-profile-combo-box-type';
@Component({
selector: 'app-dataset-profile-editor-rule-component',
@ -11,6 +13,12 @@ export class DatasetProfileEditorRuleComponent {
@Input() form: FormArray;
@Input() viewStyleForCheck: DatasetProfileFieldViewStyle;
@Input() formControlForCheck: FormControl;
@Input() formArrayOptionsForCheck: FormArray;
@Input() comboBoxTypeForCheck: DatasetProfileComboBoxType;
targetValidation() {
//TODO
}

View File

@ -2,18 +2,24 @@
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</h4>
<mat-form-field class="col-md-3">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ID' | translate}}" formControlName="id">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ID' | translate}}"
formControlName="id" required>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-3">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}" formControlName="title">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}"
formControlName="title">
</mat-form-field>
<mat-form-field class="col-md-3">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.PAGE' | translate}}" formControlName="page" required>
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.PAGE' | translate}}" formControlName="page"
required>
<mat-option *ngFor="let pageGroup of form.root.get('pages')['controls'];" [value]="pageGroup.get('id').value">{{pageGroup.get('title').value}}</mat-option>
</mat-select>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-3">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}" formControlName="ordinal">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
formControlName="ordinal">
</mat-form-field>
<!-- <div class="col-md-6">
<label>Default Visibility</label>
@ -22,7 +28,8 @@
<mat-radio-button [value]="false">false</mat-radio-button>
</mat-radio-group>
</div> -->
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' | translate}}</h4>
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
translate}}</h4>
<div class="col-12">
<mat-card class="field-card" *ngFor="let fieldControl of form.get('fieldSets')['controls'] let i=index;">
<div class="row">
@ -35,9 +42,11 @@
</div>
</mat-card>
</div>
<div class="col-12"><button mat-button class="full-width" (click)="addField()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD' | translate}}</button></div>
<div class="col-12"><button mat-button class="full-width" (click)="addField()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
| translate}}</button></div>
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' | translate}}</h4>
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
translate}}</h4>
<div *ngIf="dataModel.sections.length > 0" class="col-12">
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
<mat-expansion-panel-header>
@ -49,10 +58,12 @@
</div>
</mat-expansion-panel-header>
<div id="{{indexPath + 's' + i}}" *ngIf="panel.expanded" class="row">
<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="indexPath + 's' + i"></app-dataset-profile-editor-section-component>
<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section"
[indexPath]="indexPath + 's' + i"></app-dataset-profile-editor-section-component>
</div>
</mat-expansion-panel>
</div>
<div class="col-12"><button mat-button class="full-width" (click)="addSectioninSection()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-SUB-SECTION' | translate}}</button></div>
<div class="col-12"><button mat-button class="full-width" (click)="addSectioninSection()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-SUB-SECTION'
| translate}}</button></div>
</div>

View File

@ -1,6 +1,7 @@
<div class="container" *ngIf="form" [formGroup]='form' class="dataset-profile-editor">
<mat-form-field class="full-width">
<input matInput formControlName="label" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
<input matInput formControlName="label" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}"
required>
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
@ -9,7 +10,8 @@
<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')"></app-dataset-profile-editor-page-component>
<div class="col-12"><button mat-button class="full-width" (click)="addPage()">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button></div>
<div class="col-12"><button mat-button class="full-width" (click)="addPage()">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE'
| translate}}</button></div>
</div>
</mat-step>
<mat-step>
@ -24,11 +26,13 @@
</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"></app-dataset-profile-editor-section-component>
<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section"
[indexPath]="'s' + i"></app-dataset-profile-editor-section-component>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="col-12"><button mat-button (click)="addSection()" class="full-width">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button></div>
<div class="col-12"><button mat-button (click)="addSection()" class="full-width">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION'
| translate}}</button></div>
</div>
</mat-step>
<!-- <mat-step>
@ -39,4 +43,4 @@
</mat-step> -->
</mat-horizontal-stepper>
<button mat-raised-button color="primary" type="button" (click)='onSubmit()' [disabled]="!form.valid">Save</button>
</div>
</div>

View File

@ -1,4 +1,5 @@
<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">{{this.form.get('title').value}}</h5>
@ -14,12 +15,14 @@
<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">
<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')" [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]="assignDropdownItem(opt)">{{opt.label}}</mat-option>
</mat-select>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -32,11 +35,14 @@
</div>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"></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 formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"
[required]="form.get('validationRequired').value"></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' | translate}}</mat-error>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
@ -49,7 +55,8 @@
<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>
</div>
</div>
</div>

View File

@ -2,7 +2,7 @@
"GENERAL": {
"VALIDATION": {
"REQUIRED": "Required",
"PROJECT-START-AFTER-END":"Project start date cannot be after the end date"
"PROJECT-START-AFTER-END": "Project start date cannot be after the end date"
},
"DELETE-CONFIRMATION": {
"TITLE": "Warning",
@ -29,12 +29,12 @@
"FINALISED": "Finalized"
},
"CONFIRMATION-DIALOG": {
"DELETE-ITEM": "Delete this item?",
"ACTIONS": {
"CONFIRM": "Yes",
"CANCEL": "No"
}
}
"DELETE-ITEM": "Delete this item?",
"ACTIONS": {
"CONFIRM": "Yes",
"CANCEL": "No"
}
}
},
"NAV-BAR": {
"TITLE": "OpenDMP",
@ -101,6 +101,7 @@
"FIELD": {
"FIELDS": {
"RULES-TITLE": "Visibility Rules",
"FIELD-RULES-VALUE": "Value",
"ID": "Section Unique Identifier",
"VIEW-STYLE": "Type",
"MULTIPLICITY-MIN": "Multiplicity Min",
@ -133,6 +134,16 @@
"FIELD-AUTOCOMPLETE-URL": "Url",
"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root"
},
"DEFAULT-VALUES": {
"BOOLEAN-DECISION": {
"YES": "YES",
"NO": "NO"
},
"CHECK-BOX": {
"CHECKED": "Checked",
"UNCHECKED": "Uncheck"
}
},
"ACTIONS": {
"ADD-RULE": "Add Visibility Rule +"
}
@ -141,7 +152,9 @@
"FIELDS": {
"RULE-TYPE": "Rule Type",
"TARGET": "Target Field Id",
"VALUE": "Required Value"
"VALUE": "Required Value",
"RULE-IF": "If Value is",
"RULE-THEN": "then show Field With Id"
}
}
}
@ -608,4 +621,4 @@
"AT-LEAST-ONE-DATASET-FINALISED": "You need to have at least one Dataset Finalized"
}
}
}
}