From c6b8ad563947df49fd6bb29045e9d99eca7dcd52 Mon Sep 17 00:00:00 2001 From: Kristan Ntavidi Date: Wed, 14 Apr 2021 09:57:30 +0300 Subject: [PATCH] Adrim template editor. Save and discard buttons on the left side. --- ...ofile-editor-section-fieldset.component.ts | 103 +------- .../dataset-profile-editor.component.html | 243 +++++++----------- .../dataset-profile-editor.component.scss | 49 +++- .../dataset-profile-editor.component.ts | 28 +- 4 files changed, 152 insertions(+), 271 deletions(-) diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts index ea6b8089f..153305388 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts @@ -152,7 +152,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC setTimeout(() => { const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id); if(el){ - el.scrollIntoView({behavior: "smooth"}); + el.scrollIntoView({behavior: "smooth", block:'end'}); } }, 700); } @@ -169,57 +169,8 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC } ngOnInit() { - // console.log('<-- element created'); - // this.initialize(); - - - - //TODO - // this.form.root.get('pages').valueChanges - // .pipe(takeUntil(this._destroyed)) - // .subscribe(x => - // this.keepPageSelectionValid(x) - // ); } - drop(event: CdkDragDrop) { - // if(!this.links || !this.links.length) return; - - if(event.container === event.previousContainer){ - // moveItemInArray(this.links, event.previousIndex, event.currentIndex); - - let arrayToUpdate: FormArray = this.form.get('fieldSets') as FormArray; - // if(this.parentLink && this.parentLink.form){ - // switch(this.parentLink.subEntriesType){ - // case this.tocEntryType.Field: - // arrayToUpdate = (this.parentLink.form.get('fields') as FormArray); - // break; - // case this.tocEntryType.FieldSet: - // arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray); - // break; - // case this.tocEntryType.Section: - // arrayToUpdate = (this.parentLink.form.get('sections') as FormArray); - // break - // } - - // } - if(arrayToUpdate.controls){ - moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex); - //update ordinality - arrayToUpdate.controls.forEach((element,idx ) => { - element.get('ordinal').setValue(idx); - element.updateValueAndValidity(); - }); - } - - this.dataNeedsRefresh.emit(); - }else{ - console.log('not same container'); - } - - } - - onRemoveFieldSet(fieldsetId: string){ this.removeFieldSet.emit(fieldsetId); } @@ -231,58 +182,6 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC this.addNewFieldSet.emit(this.form); } - - // addField() { - // const fieldSet: FieldSetEditorModel = new FieldSetEditorModel(); - // fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length; - - // const field: FieldEditorModel = new FieldEditorModel(); - // field.id = Guid.create().toString(); - // field.ordinal = 0;//first field in fields - // fieldSet.fields.push(field); - // // if (this.dataModel.fieldSets) { - // fieldSet.id = Guid.create().toString(); - // //this.dataModel.fieldSets.push(fieldSet); - // //} - // const fieldsetsArray = this.form.get('fieldSets') as FormArray; - // fieldsetsArray.push(fieldSet.buildForm()); - - // const fieldSetForm = fieldsetsArray.at(fieldsetsArray.length-1); - // //emit id inserted - // if(fieldSetForm){ - // const id: string = fieldSetForm.get('id').value; - // this.fieldsetAdded.emit(id); - // } - // } - - // addSectioninSection() { - // const section: SectionEditorModel = new SectionEditorModel(); - // //this.dataModel.sections.push(section); - // (this.form.get('sections')).push(section.buildForm()); - // } - - // DeleteSectionInSection(index) { - // //this.dataModel.sections.splice(index, 1); - // (this.form.get('sections')).removeAt(index); - // } - - // deleteFieldSet(index) { - // //this.dataModel.fieldSets.splice(index, 1); - // (this.form.get('fieldSets')).removeAt(index); - // } - - // keepPageSelectionValid(pagesJson: Array) { - // const selectedPage = this.form.get('page').value as String; - // // const pages: Array = JsonSerializer.fromJSONArray(pagesJson, Page); - // if (pagesJson.find(elem => elem.id === selectedPage) === undefined) { - // this.form.get('page').reset(); - // } - // } - - // getFieldTile(formGroup: FormGroup, index: number) { - // if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; } - // return "Field " + (index + 1); - // } private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{ if(!tocentries){ return null; 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 2870b764d..515959dc0 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 @@ -8,11 +8,10 @@ +
+
-
- -
-
+

{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}

{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}} @@ -25,10 +24,11 @@

{{form.get('label').value}}

-
+ + - -
+
-->
+
+ +
+ +
@@ -117,6 +120,9 @@
+
+ +
@@ -129,45 +135,53 @@
-
-
1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *
-
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}
- - - {{'GENERAL.VALIDATION.REQUIRED' | - translate}} - - -
-
-
1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *
- -
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}
- - - {{'GENERAL.VALIDATION.REQUIRED' - | translate}} - - -
+
+ + + +
+
+
+
1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *
+
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}
+ + + {{'GENERAL.VALIDATION.REQUIRED' | + translate}} + + +
+
+
1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *
+ +
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}
+ + + {{'GENERAL.VALIDATION.REQUIRED' + | translate}} + + +
+ +
+ +
1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *
+ + + + + {{ lang.name }} + + + {{'GENERAL.VALIDATION.REQUIRED' | + translate}} + + +
-
- -
1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *
- - - - - {{ lang.name }} - - - {{'GENERAL.VALIDATION.REQUIRED' | - translate}} - -
-
@@ -244,8 +247,9 @@
-
+
+ + +
@@ -342,102 +349,7 @@
- - - - - - - -
- -
+
+
- + + + +
+
+ + + +
+
-
+ + + + +
+ + +
+ diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss index 87715c7c2..dd73219f6 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss @@ -135,9 +135,23 @@ $blue-color-light: #5cf7f2; background: transparent; padding-left: 2em; padding-right: 2em; + height: 2.5em; box-shadow: 0px 3px 6px #1E202029; color: #129D99; flex: 0 0 auto; + &.save-btn{ + background-color: #f7dd72; + border: 1px solid transparent; + padding-left: 2em; + padding-right: 2em; + box-shadow: 0px 3px 6px #1E202029; + color: #212121; + + transition-property: background-color, color; + transition-duration: 200ms; + transition-delay: 50ms; + transition-timing-function: ease-in-out; + } &:disabled{ background-color: #CBCBCB; color: #FFF; @@ -304,4 +318,37 @@ $blue-color-light: #5cf7f2; position: fixed; bottom: 2em; right: 2em; -} \ No newline at end of file +} + + +#stepper-navigation-wrapper{ + z-index: 99; + width: 100%; + #stepper-navigation{ + background-color: #f4f4f4; + z-index: 99; + } +} + +.actions-template{ + align-self:flex-end; + display: flex; + justify-content: space-between; + width: 100%; + padding-left: 15px; + padding-right: 15px; +} +.stepper-navigation-outer-wrapper{ + padding: 2em; + margin-bottom: 1em; + background: #f4f4f4; + position: sticky; + top: 0.01em; + z-index: 99; +} + +#title-column{ + justify-content: space-between; + align-items: baseline; + padding-right: 15px; +} diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts index dc53a9aff..4091f2143 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts @@ -238,14 +238,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn // if(!this.userFormDisabled) this.inputUserState = 'untriggered'; }); - // combineLatest(this._inputUserButton$.asObservable(),this._inputUserField$.asObservable()) - // .pipe(takeUntil(this._destroyed)) - // .pipe(debounceTime(200)) - // .pipe(filter(_=> _[0] || _[1])) - // .subscribe(_=>{ - // // if(!this.userFormDisabled) - // this.inputUserState = 'triggered'; - // }); } private _initializeToCEntries(){ @@ -257,8 +249,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn this.selectedTocEntry = tocentries[0]; } setTimeout(() => { - const stepperNavigation = document.getElementById('stepper-navigation'); - if(stepperNavigation){ + // const stepperNavigation = document.getElementById('stepper-navigation'); + const titleColumn = document.getElementById('title-column'); + // const stepperNavigationWrapper = document.getElementById('stepper-navigation-wrapper'); + + if(titleColumn){ if(this.stepperNavigationObserver){ this.stepperNavigationObserver.disconnect(); this.stepperNavigationObserver = null; @@ -267,12 +262,16 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn e.forEach(_=>{ if(_.isIntersecting){ this.showScrollOnTopButton = false; + // stepperNavigation.classList.remove('fixed-navigation'); + // stepperNavigationWrapper.classList.remove('fixed-navigation'); }else{ this.showScrollOnTopButton = true; + // stepperNavigation.classList.add('fixed-navigation'); + // stepperNavigationWrapper.classList.add('fixed-navigation'); } }) - }, {root:null, rootMargin:'0px', threshold:1}); - this.stepperNavigationObserver.observe(stepperNavigation); + }, {root:null, rootMargin:'0px', threshold:0}); + this.stepperNavigationObserver.observe(titleColumn); }else{ console.log('Could not load scroll On Top Observer') } @@ -1987,6 +1986,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn } } + discardChanges(){ + this.router.navigate([ + 'dataset-profiles' + ]); + } }