From 87b79c20498818152f6eca3a96d004d73aa16e1a Mon Sep 17 00:00:00 2001 From: Kristan Ntavidi Date: Wed, 3 Mar 2021 12:10:11 +0200 Subject: [PATCH] Dataset profile editor. Minor ui visibility fixes. Table of contents can slide. --- .../field-data/field-data.ts | 2 +- .../organizations-data-editor-models.ts | 5 +- ...rofile-editor-composite-field.component.ts | 7 +- ...rofile-editor-default-value.component.html | 4 +- ...ataset-profile-editor-field.component.html | 11 ++- .../dataset-profile-editor-field.component.ts | 98 +++++++++---------- .../dataset-profile-editor.component.html | 2 +- .../dataset-profile-editor.component.scss | 50 +++++++++- .../table-of-contents-internal-section.html | 1 - .../table-of-contents-internal-section.ts | 22 ++--- .../table-of-contents/table-of-contents.html | 33 ------- .../table-of-contents/table-of-contents.ts | 58 ++++++----- .../form-field/form-field.component.ts | 3 +- 13 files changed, 160 insertions(+), 136 deletions(-) diff --git a/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts b/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts index 2a2e953f8..47adf26c8 100644 --- a/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts +++ b/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts @@ -94,7 +94,7 @@ export interface ResearchersFieldData extends FieldData { } -export interface OrganizationsFieldData extends FieldData { +export interface OrganizationsFieldData extends AutoCompleteFieldData { } diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts index 975abbe0b..92090f3fd 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts @@ -4,16 +4,19 @@ import { OrganizationsFieldData } from '../../../../../core/model/dataset-profil export class OrganizationsDataEditorModel extends FieldDataEditorModel { public label: string; + public multiAutoComplete: boolean = false; buildForm(disabled: boolean = false, skipDisable: Array = []): FormGroup { const formGroup = this.formBuilder.group({ - label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.label')) }] + label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.label')) }], + multiAutoComplete: [{ value: this.multiAutoComplete, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.multiAutoComplete')) }] }); return formGroup; } fromModel(item: OrganizationsFieldData): OrganizationsDataEditorModel { this.label = item.label; + this.multiAutoComplete = item.multiAutoComplete; return this; } } diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts index 15512ac83..5eec5bb38 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts @@ -30,6 +30,7 @@ import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-d import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/dataset-identifier-data-editor-models'; import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models'; import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models'; +import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service'; @Component({ selector: 'app-dataset-profile-editor-composite-field-component', @@ -61,7 +62,8 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh constructor( private dialog: MatDialog, private language: TranslateService, - public enumUtils: EnumUtils + public enumUtils: EnumUtils, + public datasetProfileService: DatasetProfileService ) { } ngOnChanges(){ @@ -358,6 +360,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh case this.viewTypeEnum.Other: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox) fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE + break; case this.viewTypeEnum.InternalDmpEntities: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities) @@ -407,7 +410,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh case this.viewTypeEnum.Organizations: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations) // this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()); - fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); + fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO break; case this.viewTypeEnum.DatasetIdentifier: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier) diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html index ca386a1f2..7a4d43997 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html @@ -26,10 +26,10 @@ - + {{placeHolder}} diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html index bb8d3ac52..1654a5b5f 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html @@ -5,14 +5,14 @@
  • - + {{'GENERAL.VALIDATION.REQUIRED' | translate}}
    • -
  • +
  • visibility
    • -
  • +
  • delete
    • @@ -71,7 +71,6 @@ {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}} {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}} @@ -215,4 +214,6 @@
- \ No newline at end of file + + + \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts index 7b44cf852..ab43c4780 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts @@ -15,7 +15,7 @@ import { TextAreaFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admi import { WordListFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/word-list-field-data-editor-model'; import { RuleEditorModel } from '@app/ui/admin/dataset-profile/admin/rule-editor-model'; import { BaseComponent } from '@common/base/base.component'; -import { takeUntil } from 'rxjs/operators'; +import { debounce, debounceTime, takeUntil } from 'rxjs/operators'; import { ExternalDatasetEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model'; import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models'; import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models'; @@ -28,13 +28,14 @@ import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/exter import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models'; import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models'; import { DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model'; -import { Subscription } from 'rxjs'; +import { Subject, Subscription } from 'rxjs'; import { ViewStyleType } from './view-style-enum'; import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model'; import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode'; import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type'; import { Guid } from '@common/types/guid'; import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material'; +import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model'; @Component({ selector: 'app-dataset-profile-editor-field-component', @@ -48,11 +49,12 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements @Input() indexPath: string; validationTypeEnum = ValidationType; viewStyleEnum = DatasetProfileFieldViewStyle; - isFieldMultiplicityEnabled = false; + // isFieldMultiplicityEnabled = false; viewType: ViewStyleType; viewTypeEnum = ViewStyleType; - // matcher:MyErrorStateMatcher = new MyErrorStateMatcher(); + private subject$:Subject = new Subject(); + @Input() expandView: boolean = true; @@ -63,7 +65,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements constructor( public enumUtils: EnumUtils, public datasetProfileService: DatasetProfileService - ) { super(); } + ) { super(); + + } isErrorState(control: FormControl, form: FormGroupDirective | NgForm): boolean { @@ -74,12 +78,19 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements } ngOnInit() { + + this.subject$.pipe(takeUntil(this._destroyed)).pipe(debounceTime(600)).subscribe(model=>{ + this.previewForm = model.buildForm(); + }); + + + this.showPreview = true; - if (this.form.get('multiplicity')) { - if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) { - this.isFieldMultiplicityEnabled = true; - } - } + // if (this.form.get('multiplicity')) { + // if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) { + // this.isFieldMultiplicityEnabled = true; + // } + // } if(this.form.get('viewStyle').get('renderStyle').value){ @@ -262,12 +273,12 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements - onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) { - if (!isFieldMultiplicityEnabled) { - (this.form.get('multiplicity').get('min')).setValue(0); - (this.form.get('multiplicity').get('max')).setValue(0); - } - } + // onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) { + // if (!isFieldMultiplicityEnabled) { + // (this.form.get('multiplicity').get('min')).setValue(0); + // (this.form.get('multiplicity').get('max')).setValue(0); + // } + // } addNewRule() { const rule: RuleEditorModel = new RuleEditorModel(); @@ -328,7 +339,6 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements cssClass: null }; - fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue(); fieldEditorModel.value = this.form.get('defaultValue').get('value').value; fieldEditorModel.validationRequired = (this.form.get('validations').value as Array).includes(ValidationType.Required); @@ -341,14 +351,16 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements // } - const myTicket = Guid.create().toString(); - this.validTicket = myTicket; - setTimeout(() => { //TODO - //user hasnt make any new change to inputs /show preview - if(myTicket === this.validTicket){ - this.previewForm = fieldEditorModel.buildForm(); - } - }, 600); + // const myTicket = Guid.create().toString(); + // this.validTicket = myTicket; + // setTimeout(() => { //TODO + // //user hasnt make any new change to inputs /show preview + // if(myTicket === this.validTicket){ + // this.previewForm = fieldEditorModel.buildForm(); + // } + // }, 600); + + this.subject$.next(fieldEditorModel); // setTimeout(() => { @@ -356,7 +368,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements // }); }; - validTicket:string; + + + // validTicket:string; // generatePreview(){ // const fieldEditorModel = new DatasetDescriptionFieldEditorModel(); @@ -390,6 +404,11 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements if (this.form.get('data')) { this.form.removeControl('data'); } + + + this.form.removeControl('defaultValue'); + const defaultValueModel = new DefaultValueEditorModel(); + this.form.addControl('defaultValue',defaultValueModel.buildForm()); switch (x) { case this.viewTypeEnum.BooleanDecision: @@ -455,8 +474,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements break; case this.viewTypeEnum.Organizations: this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations) - // this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()); - this.form.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); + this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()); break; case this.viewTypeEnum.DatasetIdentifier: this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier) @@ -513,26 +531,4 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements this.delete.emit(); } -} - -// class MyErrorStateMatcher implements ErrorStateMatcher { - -// reference: AbstractControl; - -// setReference(acontrol: AbstractControl){ -// this.reference = acontrol; -// } - -// isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { - - -// if(this.reference){ - -// if(this.reference.valid) return false; - -// return this.reference.touched && this.reference.invalid; -// } - -// return true; -// } -// } \ No newline at end of file +} \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html index 38640a9eb..6c49dba05 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html @@ -147,7 +147,7 @@
-
+
element.id); - } + // get orderedListGroup(){ + // return this.dropListStruct.sort(this.compareFn).map(element=> element.id); + // } compareFn(a, b){ @@ -70,10 +70,10 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent // } // } - this.dropListStruct.push({ - id: this.parentLink.id, - depth: this.depth - }); + // this.dropListStruct.push({ + // id: this.parentLink.id, + // depth: this.depth + // }); // if(this.links){ // this.links.forEach(link=>{ diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html index 2703625f7..cbcfb374b 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html @@ -27,37 +27,4 @@ -->
- - - -
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts index c3494bd2c..f8adda7b8 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts @@ -8,6 +8,7 @@ import { SimpleChanges } from '@angular/core'; import { Foo, ToCEntry, ToCEntryType } from './table-of-contents-entry'; import { DragulaService } from 'ng2-dragula'; import { FormArray } from '@angular/forms'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material'; export interface Link { /* id of the section*/ @@ -66,7 +67,8 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn constructor( @Inject(DOCUMENT) private _document: Document, - private dragulaService: DragulaService + private dragulaService: DragulaService, + private snackbar: MatSnackBar ) { super(); @@ -75,28 +77,11 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn this.dragulaService.destroy('TABLEDRAG'); } - const dragula = this.dragulaService.createGroup('TABLEDRAG', { - invalid: (el,handle)=>{ - // const elid = el.id; - // if(!el.id) return true; - - // const elementId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX,''); - // const entry = this._findTocEntryById(elementId, this.links); - // if(!entry) return true; - // if(entry.type != this.tocEntryType.FieldSet) return true; - // console.log(el); - return false; - } - }); + const dragula = this.dragulaService.createGroup('TABLEDRAG', {}); const drake = dragula.drake; drake.on('drop', (el, target, source,sibling)=>{ - // console.log('el:', el); - // console.log('target:', target); - // console.log('source:', source); - // console.log('sibling:', el); - const elementId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX,''); const targetId = target.id as string; const sourceId = source.id as string; @@ -124,14 +109,18 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn switch(element.type){ case ToCEntryType.FieldSet: if(targetContainer.type != this.tocEntryType.Section){ - console.error('Fieldsets can only be childs of section'); + const message = 'Fieldset can only be child of Subsections'; + console.error(message); + this.notifyUser(message) this.dataNeedsRefresh.emit(); return; } //check if target container has no sections if((targetContainer.form.get('sections') as FormArray).length){ - console.error('Fieldsets can only be childs of section thas has no section children'); + const message = 'Cannot have inputs and sections on the same level'; + this.notifyUser(message); + console.error(message); this.dataNeedsRefresh.emit(); return; } @@ -204,7 +193,9 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn if(targetContainer.type == ToCEntryType.Section){ if((targetContainer.form.get('fieldSets')as FormArray).length){ - console.info('Target container must only contain section children'); + const message = 'Cannot have inputs and sections on the same level'; + this.notifyUser(message); + console.info(message); this.dataNeedsRefresh.emit(); return; } @@ -336,7 +327,9 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn targetSectionsArray.push(sectionForm); }else{ - console.info('Drag not support to specific container'); + const message = 'Drag not support to specific container'; + this.notifyUser(message); + console.info(message); this.dataNeedsRefresh.emit(); return; } @@ -347,7 +340,9 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn break; case ToCEntryType.Page: if(targetId != this.ROOT_ID){ - console.info('A page element can only be at top level'); + const message = 'A page element can only be at top level'; + this.notifyUser(message); + console.info(message); this.dataNeedsRefresh.emit(); return; } @@ -448,7 +443,6 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn }); - @@ -618,8 +612,22 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn onDataNeedsRefresh(){ this.dataNeedsRefresh.emit(); } + + notifyUser(message:string){ + this.snackbar.open(message, null, this._snackBarConfig); + } + + private _snackBarConfig: MatSnackBarConfig = { + duration:2000 + } + + + } + + + export interface LinkToScroll { page: number; section: number; diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts index 4268942a6..fe37effbd 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts @@ -34,7 +34,6 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes'; import { DatasetIdModel } from '@app/core/model/dataset/dataset-id.model'; import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model'; import { CurrencyService } from '@app/core/services/currency/currency.service'; -import { exception } from 'console'; @Component({ selector: 'app-form-field', @@ -287,7 +286,7 @@ export class FormFieldComponent extends BaseComponent implements OnInit { } else if (this.autocompleteOptions != null) { autocompleteRequestItem.criteria.autocompleteOptions = this.autocompleteOptions; } else { - throw exception("Could not load autocomplete options.") + throw "Could not load autocomplete options."; } autocompleteRequestItem.criteria.like = query; return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);