diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts index 08cef2311..c21924a45 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts @@ -48,9 +48,9 @@ import { DatasetProfileTableOfContentsInternalSection } from './table-of-content import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service'; import {DragDropModule} from '@angular/cdk/drag-drop'; - //matrial import {MatBadgeModule} from '@angular/material/badge'; +import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component'; @NgModule({ imports: [ @@ -102,7 +102,8 @@ import {MatBadgeModule} from '@angular/material/badge'; DatasetProfileEditorCurrencyFieldComponent, DatasetProfileEditorValidatorFieldComponent, DatasetProfileTableOfContents, - DatasetProfileTableOfContentsInternalSection + DatasetProfileTableOfContentsInternalSection, + DatasetProfileEditorSectionFieldSetComponent ], entryComponents: [ DialogConfirmationUploadDatasetProfiles diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 31b4751a9..811afbb14 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -58,53 +58,60 @@
-
+
-
+
{{numbering}}
+
-
- - - -
-
- - - -
-
- - - -
-
- - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - - - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - -
+ + +
+ + + +
+
+ + + +
+
+ + + +
+ +
+ + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + +
+ @@ -119,8 +126,10 @@
-
+
+ + -
+ + +

Input tools

- + folder Add Input - + visibility_off @@ -189,58 +198,48 @@ - + - + Extended Description - + Additional Information - - - - - - -

Input settings

- + - + {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}} - + {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}} - + - + Make it required - + - +

Other actions

- - - + delete Delete @@ -248,10 +247,127 @@
-
+
-->
+ + +
+
+
    + + + + +
  • + folder + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    • + + + +
  • + Comment Field +
    • +
  • + + multiplicity + +
    • +
  • + + more_vert + + + Description + Extended Description + Additional Information + +
    • +
+
+
+ + +
+
+
+
    +
  • + + Required + +
    • +
  • + visibility +
    • +
  • + delete +
    • + +
+
+
+
+ + + + + + + + +
+ +
+ + + + + + + + + + + drag_indicator + + + + + + + + + +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss new file mode 100644 index 000000000..533dad642 --- /dev/null +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss @@ -0,0 +1,43 @@ +$blue-color : #129D99; +$blue-color-light: #5cf7f2; + + +.field-container-active{ + border-radius: .3em; + border-left: 0.3em solid $blue-color; +} +.fieldset-actions-list li{ + cursor: pointer; +} + +//cdkDrag + + .cdk-drag-preview { + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + + .cdk-drag-placeholder { + opacity: 0; + // background-color: black; + } + + .cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + + .example-box:last-child { + border: none; + } + + .drop-list.cdk-drop-list-dragging { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + + #main-container{ + // max-height: 100vh; + // overflow: scroll; + } \ No newline at end of file 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 new file mode 100644 index 000000000..90d54d383 --- /dev/null +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts @@ -0,0 +1,184 @@ +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { FormArray, FormGroup } from '@angular/forms'; +import { FieldEditorModel } from '@app/ui/admin/dataset-profile/admin/field-editor-model'; +import { FieldSetEditorModel } from '@app/ui/admin/dataset-profile/admin/field-set-editor-model'; +import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-editor-model'; +import { BaseComponent } from '@common/base/base.component'; +import { Guid } from '@common/types/guid'; +import { takeUntil } from 'rxjs/operators'; +import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry'; + +@Component({ + selector: 'app-dataset-profile-editor-section-fieldset-component', + templateUrl: './dataset-profile-editor-section-fieldset.component.html', + styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss'] +}) + +export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent implements OnInit, OnChanges { + // @Input() form: FormGroup; + //@Input() dataModel: SectionEditorModel; + // @Input() indexPath: string; + @Input() viewOnly: boolean; + // @Input() numbering: string; + @Input() tocentry: ToCEntry; + + @Output() selectedEntryId = new EventEmitter(); + @Output() dataNeedsRefresh = new EventEmitter (); + + // @Output() fieldsetAdded = new EventEmitter(); //returns the id of the fieldset added + + constructor() { super(); } + ngOnChanges(changes: SimpleChanges): void { + this.initialize(); + } + + + form; + numbering; + + + + private _selectedFieldSetId: string = null; + get selectedFieldSetId(){ + return this._selectedFieldSetId; + } + set selectedFieldSetId(id: string){ + + if(id === this._selectedFieldSetId) return; + this._selectedFieldSetId = id; + this.selectedEntryId.emit(this._selectedFieldSetId); + } + + private _findParentSection():FormGroup{ + const parent = this.form.parent; + + return parent; + } + + + private initialize(){ + if(this.tocentry.type === ToCEntryType.Section){ + this.form = this.tocentry.form; + this.numbering = this.tocentry.numbering; + this._selectedFieldSetId = null; + }else if(this.tocentry.type === ToCEntryType.FieldSet){ + this.form = this.tocentry.form.parent.parent; + const numberingArray = this.tocentry.numbering.split('.'); + if(numberingArray.length){ + numberingArray.splice(numberingArray.length-1); + this.numbering = numberingArray.join('.'); + } + this.selectedFieldSetId = this.tocentry.id; + //scroll to fieldset + // setTimeout(() => { + // const element = document.getElementById(this.selectedFieldSetId); + // element.scrollTop = element.scrollHeight; + // }, 2000); + } + } + + ngOnInit() { + + 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'); + } + + } + + + + // 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); + // } +} diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html index cd0b3f5ef..74f55f3f0 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html @@ -59,11 +59,11 @@ --> - + 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 a7975e21b..8d6073ebf 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 @@ -118,106 +118,130 @@
- - + + +
+ + +
-
-
+
+ +
+ +
+
- -
-
-
- -
-
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *
-
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}
- - - + +
+ +
+ +
+
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *
+
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}
+ + + +
+ + +
- - - -
- - -
- - - - - - -
- - - - - - - +
+ +
+ - - + (selectedEntryId)="displayItem(_findTocEntryById($event, getTocEntries()))" + (dataNeedsRefresh)="onDataNeedsRefresh()" + > + + +
- + +
+ +
+
+ {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}} +
+ {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}} + + + + {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}} + + add + +
+
+ +
+ + + +
+
+ + + +

General tools

+ + + folder + Add Input Set + + + folder + Add Input Set + + + + + file_copy + Clone + + + + delete + Delete + + +
- -
-
- {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}} -
- {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}} - - - - {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}} - - add - -
-
- +
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 d91264828..438e05b8e 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 @@ -25,7 +25,7 @@ padding: 0em; // padding-top: 0em; overflow: visible; - min-height: 30em; + // min-height: 30em; } .heading { @@ -92,4 +92,15 @@ background-color: #f7dd72; padding-left: 2em; padding-right: 2em; + } + + + $blue-color : #129D99; + $blue-color-light: #5cf7f2; + + .actions-list{ + border: 1px solid $blue-color; + border-radius: 3px; + padding-top: 1rem; + padding-bottom: 1rem; } \ No newline at end of file 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 96f7c5a08..937e6117a 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 @@ -2,7 +2,7 @@ import { of as observableOf, Observable } from 'rxjs'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core'; -import { Form, FormArray, FormControl, FormGroup } from '@angular/forms'; +import { Form, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { MatHorizontalStepper, MatStep } from '@angular/material/stepper'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; @@ -84,7 +84,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn private matomoService: MatomoService, private enumUtils: EnumUtils, private datasetWizardService: DatasetWizardService, - private visibilityRulesService: VisibilityRulesService + private visibilityRulesService: VisibilityRulesService, + private fb: FormBuilder ) { super(); // this.profileID = route.snapshot.params['id']; @@ -747,7 +748,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn const parentArray = parent.form.get('fieldSets') as FormArray; const addedFieldSet = parentArray.at(parentArray.length - 1); - this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries()); + // this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries()); break; @@ -1215,5 +1216,47 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn previewForm:FormGroup; onDataNeedsRefresh(){ this.refreshToCEntries(); + } + + cloneFieldSet(fieldset: FormGroup){ + //TODO + const values = fieldset.getRawValue(); + const parentArray = fieldset.parent as FormArray; + + values.id = Guid.create().toString(); + values.ordinal = parentArray.length; + + values.fields.forEach(element => { + element.id = Guid.create().toString() + }); + + + const clonedModel = new FieldSetEditorModel().fromModel(values); + const clonedForm = clonedModel.buildForm(); + parentArray.push(clonedForm); + + + this.refreshToCEntries(); + + + // //create one field form fieldset + // const field: FieldEditorModel = new FieldEditorModel(); //to ask + // field.id = Guid.create().toString(); + // field.ordinal = 0;//first filed in the fields list + // fieldSet.fields.push(field); + // // field.ordinal = fieldSet.fields.length-1; + + // //give fieldset id and ordinal + // fieldSet.id = Guid.create().toString(); + // fieldSet.ordinal = (parent.form.get('fieldSets') as FormArray).length; + + // (parent.form.get('fieldSets')).push(fieldSet.buildForm()); + + // // const parentArray = parent.form.get('fieldSets') as FormArray; + // const addedFieldSet = parentArray.at(parentArray.length - 1); + + + + } } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html index 768da1644..7ff54b063 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html @@ -3,7 +3,7 @@ delete --> -
+
@@ -11,7 +11,7 @@ {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} --> - --> + {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} +
-
- delete +
+ + {{parentLink.subEntries?.length}} + + + + + delete +
+ +
+ (dataNeedsRefresh)="onDataNeedsRefresh()" + [dropListGroup]="dropListGroup" + [dragHoveringOver]="dragHoveringOver" + [dropListStruct]="dropListStruct" + [depth]="depth+1"> - + +
@@ -118,14 +146,16 @@ - +
@@ -156,6 +186,9 @@
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss index 5872e6c41..53d3424d6 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss @@ -144,6 +144,7 @@ .cdk-drag-placeholder { opacity: 0; + // background-color: black; } .cdk-drag-animating { @@ -156,4 +157,18 @@ .cdk-link-list.cdk-drop-list-dragging .link-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + + +$blue-color : #129D99; +$blue-color-light: #5cf7f2; +$yellow: #f7dd72; +.badge-ball{ + display: inline-block; + border-radius: 50%; + background-color: #FFF; + font-size: small; + font-weight: bold; + min-width: 2em; + text-align: center; } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts index 16af6cb2d..621ba4fc5 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts @@ -1,6 +1,6 @@ -import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop'; import { DOCUMENT } from '@angular/common'; -import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; import { FormArray } from '@angular/forms'; import { BaseComponent } from '@common/base/base.component'; import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry'; @@ -27,6 +27,13 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent @Input() itemSelected: ToCEntry; @Input() viewOnly: boolean; + // @Input() dropListGroup: Set = new Set(); + @Input() dropListGroup: string[]; + + @Input() dragHoveringOver: boolean = false; + @Input() depth: number = 0; + + @Input() dropListStruct: { id: string, depth: number}[] = []; constructor( @Inject(DOCUMENT) private _document: Document) { @@ -35,14 +42,67 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent tocEntryType = ToCEntryType; - ngOnInit(): void { - + showStructs(){ + console.log(this.dropListStruct.sort(this.compareFn)); } + get orderedListGroup(){ + return this.dropListStruct.sort(this.compareFn).map(element=> element.id); + } + + + compareFn(a, b){ + if(a.depth> b.depth) return -1; + if(a.depth< b.depth) return 1; + + return 0; + } + + ngOnInit(): void { + // if(this.parentLink.id && this.dropListGroup){ + // if(!this.dropListGroup.includes(this.parentLink.id)){ + // this.dropListGroup.unshift(this.parentLink.id);//TODO + // } + // } + + this.dropListStruct.push({ + id: this.parentLink.id, + depth: this.depth + }); + + // if(this.links){ + // this.links.forEach(link=>{ + // this.dropListGroup.push(link.id); + // }) + // } + + + + // this.dropListGroup.add(this.parentLink.id) + } + + showDroplists(){ + console.log(this.dropListGroup); + } + + hoveroverEnter(){ + // console.log('user hovering drag over', this.parentLink.id, this.parentLink.label); + this.dragHoveringOver = true; + } + hoveroverLeft(){ + this.dragHoveringOver = false; + } + + fellowContainers(){ + return this.dropListGroup.filter(dl=> dl != this.parentLink.id); + } ngOnChanges(changes: SimpleChanges) { } + // get grouListIds(){ + // return Array.from(this.dropListGroup); + // } itemClicked(item: ToCEntry) { //leaf node this.itemClick.emit(item); @@ -86,41 +146,48 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent return false; } + // appendAndGetDroplists(dropList: CdkDropList){ + // this.dropListGroup.push(dropList); + // return this.dropListGroup; + // } drop(event: CdkDragDrop) { - if(!this.links || !this.links.length) return; + // if(!this.links || !this.links.length) return; - - moveItemInArray(this.links, event.previousIndex, event.currentIndex); - - let arrayToUpdate: FormArray = this.links[0].form.parent 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(); - }); + if(event.container === event.previousContainer){ + moveItemInArray(this.links, event.previousIndex, event.currentIndex); + + let arrayToUpdate: FormArray = this.links[0].form.parent 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'); } - this.dataNeedsRefresh.emit(); - // moveItemInArray(this.links, event.previousIndex, event.currentIndex); + console.log(event.container.id); - // console.log('dropped'); } onDataNeedsRefresh(){ 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 da670d299..d8faac803 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 @@ -9,10 +9,11 @@ +
\ No newline at end of file