From fde91b6677756115fe6f106d0c238af4c6c179a5 Mon Sep 17 00:00:00 2001 From: Diamantis Tziotzios Date: Thu, 1 Feb 2024 17:14:03 +0200 Subject: [PATCH] more description template changes --- ...escription-template-table-of-contents.scss | 32 +-- .../description-template-table-of-contents.ts | 15 -- ...te-table-of-contents-internal-section.html | 219 +++++------------- ...te-table-of-contents-internal-section.scss | 67 ------ ...late-table-of-contents-internal-section.ts | 103 -------- 5 files changed, 53 insertions(+), 383 deletions(-) diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss index dc1e64f35..eb164a946 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss @@ -1,40 +1,11 @@ $scroller-height: 3em; .scroll-container { - // overflow-y: auto; max-height: 60vh; overflow-y: scroll; padding-left: .2em; padding-right: 1em; - // padding-top: $scroller-height; - // padding-bottom: $scroller-height; } -// #style-6::-webkit-scrollbar-track -// { -// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -// background-color: #F5F5F5; -// } - -// #style-6::-webkit-scrollbar -// { -// width: 6px; -// background-color: #F5F5F5; -// } - -// #style-6::-webkit-scrollbar-thumb -// { -// background-color: rgb(162, 163, 163); -// background-image: -webkit-linear-gradient(45deg, -// rgba(255, 255, 255, .2) 25%, -// transparent 25%, -// transparent 50%, -// rgba(255, 255, 255, .2) 50%, -// rgba(255, 255, 255, .2) 75%, -// transparent 75%, -// transparent) -// } - - #tocentrytable::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); @@ -52,7 +23,7 @@ $scroller-height: 3em; { border-radius: 2px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: rgb(158, 158, 158);// #FFF;//$blue-color-light;// rgb(162, 163, 163);// #D62929; + background-color: rgb(158, 158, 158); } @@ -67,7 +38,6 @@ $scroller-height: 3em; position: relative; } .table-scroller{ - // background-color: #5cf7f221; position: absolute; width: 95%; height: $scroller-height; diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts index 2bc4db504..66ea13348 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts @@ -24,7 +24,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements @Output() itemClick = new EventEmitter(); - // @Output() newEntry = new EventEmitter(); @Output() removeEntry = new EventEmitter(); @Output() createEntry = new EventEmitter(); @Output() dataNeedsRefresh = new EventEmitter(); @@ -246,14 +245,11 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements } }) - // if(targetOrdinal!=targetSections.length){//mporei na einai idio - // section.get('ordinal').setValue(i+1); targetSections.controls.filter(control => control.get('ordinal').value >= targetOrdinal).forEach(control => { const ordinal = control.get('ordinal'); const updatedOrdinalVal = ordinal.value + 1; ordinal.setValue(updatedOrdinalVal); }); - // } } else { console.info('no siblings found'); @@ -262,7 +258,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements targetSections.insert(targetOrdinal, elementSectionForm); } else if (targetContainer.type === ToCEntryType.Page) { - // const pageId = targetContainer.form.get('id').value; const rootform = targetContainer.form.root; const sectionForm = element.form; @@ -428,12 +423,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements // console.log('drag fired'); this.isDragging = true; this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, ''); - - // setTimeout(() => { - // if(this.isDragging){ - // this._scrollIntoDragginItem(this.draggingItemId); - // } - // }, this.VALID_DROP_TIME); }); drake.on('over', (el, container, source) => { try { @@ -570,9 +559,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements this.itemClick.emit(item); } - // addNewEntry(tce: ToCEntry){ - // this.newEntry.emit(tce); - // } deleteEntry(currentLink: ToCEntry) { this.removeEntry.emit(currentLink); } @@ -597,7 +583,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements const aValue = a.get('ordinal').value as number; const bValue = b.get('ordinal').value as number; - // if(!aValue || !bValue) return 0; return aValue - bValue; } diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html index 875a21b4a..233355c58 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html @@ -1,35 +1,6 @@ - - -
-
- - - - - - - - +
+
+ {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} @@ -43,197 +14,113 @@ -
-
+
- - + {{parentLink.subEntries?.length}} - + delete
- - -
- - -
-
- - - - - - - - - -
- - +
+ + +
+
+ +
+ + - + - - - + + + + + {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}} + + - + -
+
+
-
+
- - -
+ + +
- + + -
- + - + - - - - + + + +
- - -
+
-
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss index 3e4c13517..971e48b60 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss @@ -1,63 +1,4 @@ -// .docs-toc-container { -// width: 100%; -// padding: 5px 0 10px 0px; -// // cursor: pointer; -// // border-left: solid 4px #0c7489; - -// .scroll-container { -// overflow-y: auto; -// // calc(100vh - 250px) -// // height: calc(100vh - 250px); -// } - -// .docs-link { -// color: rgba(0, 0, 0, 0.54); -// // color: mat-color($app-blue-theme-foreground, secondary-text); -// transition: color 100ms; - -// &:hover, -// &.docs-active { -// .link-name { -// background-color: #ececec; -// border-radius: 6px; -// cursor: pointer;; -// // color: #0c7489; -// } -// // color: mat-color($primary, if($is-dark-theme, 200, default)); -// } -// } -// } - -// .docs-toc-heading { -// margin: 0; -// padding: 0; -// font-size: 13px; -// font-weight: bold; -// } - -// .table-item-actions{ -// // display: none; -// display: inline-block; -// visibility: hidden; -// } - -// .table-item:hover { -// .table-item-actions{ -// // display: inline-block; -// visibility: visible; -// } -// } - -// .table-item col{ -// text-overflow: ellipsis; -// overflow: hidden; -// white-space: nowrap; -// } - .link-info{ - // display: inline-block; cursor: pointer; - // padding-top: .6em; - // padding-left: .6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -77,7 +18,6 @@ .cdk-link-list { display: block; - // background: white; overflow: hidden; } @@ -98,18 +38,11 @@ $yellow: var(--secondary-color); .table-label-element{ cursor: pointer; - // font-weight: normal; - - // transition-property: font-weight; - // transition-duration: 160ms; - // transition-delay: 50ms; - // transition-timing-function: ease-in-out; } .table-label-element-active{ font-weight: bold; - // color: red; } .add-input-icon{ width: 20px; diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.ts b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.ts index 1ab901ec5..48bc0160d 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.ts +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.ts @@ -32,13 +32,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo @Input() colorizeInvalid: boolean = false; @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) { @@ -47,32 +40,13 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo tocEntryType = ToCEntryType; - - // compareFn(a, b){ - // if(a.depth> b.depth) return -1; - // if(a.depth< b.depth) return 1; - - // return 0; - // } - ngOnInit(): void { } - // hoveroverEnter(){ - // // console.log('user hovering drag over', this.parentLink.id, this.parentLink.label); - // this.dragHoveringOver = true; - // } - // hoveroverLeft(){ - // this.dragHoveringOver = false; - // } - ngOnChanges(changes: SimpleChanges) { } - // get grouListIds(){ - // return Array.from(this.dropListGroup); - // } itemClicked(item: ToCEntry) { //leaf node this.itemClick.emit(item); @@ -86,27 +60,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo this.createFooEntry.emit(foo); } - // tocEntryIsChildOf(testingChild: ToCEntry,parent: ToCEntry): boolean{ - - // if(!testingChild || !parent) return false; - - // if(testingChild.id == parent.id){return true;} - - // if(parent.subEntries){ - // let childFound:boolean = false; - - // parent.subEntries.forEach(subEntry=>{ - // if(this.tocEntryIsChildOf(testingChild, subEntry)){ - // childFound = true; - // return true; - // } - // }) - - // return childFound; - // } - // return false; - // } - get selectedItemInLinks() { if (!this.links || !this.itemSelected) return false; @@ -116,63 +69,10 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo return false; } - // appendAndGetDroplists(dropList: CdkDropList){ - // this.dropListGroup.push(dropList); - // return this.dropListGroup; - // } - - // 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.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'); - // } - - // console.log(event.container.id); - - // } - onDataNeedsRefresh() { this.dataNeedsRefresh.emit(); } - - // get hoveringOverParent(){ - // if(!this.overContainerId) return false; - // const child = this._findTocEntryById(this.overContainerId, this.parentLink.subEntries); - // if(!child) return false; - // return true; - // } - - public _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry { if (!tocentries) { return null; @@ -258,14 +158,11 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo areAllTouched = false; } }) - // const areAllTouched = controlKeys.reduce((acc, key)=>acc && this._allFieldsAreTouched(aControl.get(key)), true); return areAllTouched; } else if (aControl instanceof UntypedFormArray) { const controls = (aControl as UntypedFormArray).controls; - // const areAllTouched = controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true); let areAllTouched = true; - // controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true); controls.forEach(control => { if (!this.allFieldsAreTouched(control)) { areAllTouched = false;