MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

more description template changes

This commit is contained in:
Diamantis Tziotzios 2024-02-01 17:14:03 +02:00
parent cba0741149
commit fde91b6677
5 changed files with 53 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss
View File

@ -1,40 +1,11 @@
$scroller-height: 3em; $scroller-height: 3em;
.scroll-container { .scroll-container {
// overflow-y: auto;
max-height: 60vh; max-height: 60vh;
overflow-y: scroll; overflow-y: scroll;
padding-left: .2em; padding-left: .2em;
padding-right: 1em; 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 #tocentrytable::-webkit-scrollbar-track
{ {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@ -52,7 +23,7 @@ $scroller-height: 3em;
{ {
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -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; position: relative;
} }
.table-scroller{ .table-scroller{
// background-color: #5cf7f221;
position: absolute; position: absolute;
width: 95%; width: 95%;
height: $scroller-height; height: $scroller-height;

15
dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts
View File

@ -24,7 +24,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
@Output() itemClick = new EventEmitter<ToCEntry>(); @Output() itemClick = new EventEmitter<ToCEntry>();
// @Output() newEntry = new EventEmitter<ToCEntry>();
@Output() removeEntry = new EventEmitter<ToCEntry>(); @Output() removeEntry = new EventEmitter<ToCEntry>();
@Output() createEntry = new EventEmitter<NewEntryType>(); @Output() createEntry = new EventEmitter<NewEntryType>();
@Output() dataNeedsRefresh = new EventEmitter<TableUpdateInfo>(); @Output() dataNeedsRefresh = new EventEmitter<TableUpdateInfo>();
@ -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 => { targetSections.controls.filter(control => control.get('ordinal').value >= targetOrdinal).forEach(control => {
const ordinal = control.get('ordinal'); const ordinal = control.get('ordinal');
const updatedOrdinalVal = ordinal.value + 1; const updatedOrdinalVal = ordinal.value + 1;
ordinal.setValue(updatedOrdinalVal); ordinal.setValue(updatedOrdinalVal);
}); });
// }
} else { } else {
console.info('no siblings found'); console.info('no siblings found');
@ -262,7 +258,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
targetSections.insert(targetOrdinal, elementSectionForm); targetSections.insert(targetOrdinal, elementSectionForm);
} else if (targetContainer.type === ToCEntryType.Page) { } else if (targetContainer.type === ToCEntryType.Page) {
// const pageId = targetContainer.form.get('id').value;
const rootform = targetContainer.form.root; const rootform = targetContainer.form.root;
const sectionForm = element.form; const sectionForm = element.form;
@ -428,12 +423,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
// console.log('drag fired'); // console.log('drag fired');
this.isDragging = true; this.isDragging = true;
this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, ''); 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) => { drake.on('over', (el, container, source) => {
try { try {
@ -570,9 +559,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
this.itemClick.emit(item); this.itemClick.emit(item);
} }
// addNewEntry(tce: ToCEntry){
// this.newEntry.emit(tce);
// }
deleteEntry(currentLink: ToCEntry) { deleteEntry(currentLink: ToCEntry) {
this.removeEntry.emit(currentLink); this.removeEntry.emit(currentLink);
} }
@ -597,7 +583,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
const aValue = a.get('ordinal').value as number; const aValue = a.get('ordinal').value as number;
const bValue = b.get('ordinal').value as number; const bValue = b.get('ordinal').value as number;
// if(!aValue || !bValue) return 0;
return aValue - bValue; return aValue - bValue;
} }

143
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
View File

@ -1,35 +1,6 @@
<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" *ngIf="!(parentLink.type == undefined)" >
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
<span class="mat-button" (click)="deleteEntry(parentLink)" *ngIf="itemSelected?.id == parentLink?.id"><mat-icon>delete</mat-icon></span>
</span> -->
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)"> <div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
<div class="col link-info" <div class="col link-info">
> <span class="table-label-element" [ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id, 'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries))}" (click)="itemClicked(parentLink)" [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}" [id]="'TABLE_ENTRY'+parentLink.id">
<!-- [ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}" -->
<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" >
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
</span> -->
<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
[matBadge]="parentLink.subEntries?.length"
matBadgeOverlap="false"
[matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
matBadgePosition="before"
matBadgeColor="accent"
matBadgeSize="small"
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
> -->
<span class="table-label-element"
[ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id, 'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries))}"
(click)="itemClicked(parentLink)"
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
[id]="'TABLE_ENTRY'+parentLink.id"
>
<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + ' '+ ( (parentLink.type ===tocEntryType.Page? ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate) : (parentLink.type === tocEntryType.Section? ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate) : '') ) | lowercase )}} -->
{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
<ng-container *ngIf="!parentLink.form.get('title').value" [ngSwitch]="parentLink.type"> <ng-container *ngIf="!parentLink.form.get('title').value" [ngSwitch]="parentLink.type">
<ng-container *ngSwitchCase="tocEntryType.FieldSet"> <ng-container *ngSwitchCase="tocEntryType.FieldSet">
@ -43,104 +14,45 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : parentLink.id}} -->
</span> </span>
</div> </div>
<div class="col-auto d-flex align-items-center" > <div class="col-auto d-flex align-items-center">
<ng-container *ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id ||isDragging)"> <ng-container *ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id ||isDragging)">
<!-- <mat-icon class="text-danger" style="font-size: 1.4em;" *ngIf="!colorError() && parentLink?.form.invalid && colorizeInvalid && allFieldsAreTouched(parentLink?.form)">priority_high</mat-icon> --> <span class="badge-ball">
<span class="badge-ball"
>
{{parentLink.subEntries?.length}} {{parentLink.subEntries?.length}}
</span> </span>
</ng-container> </ng-container>
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)" <span style="cursor: pointer;" (click)="deleteEntry(parentLink)" [hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))">
[hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))"
>
<mat-icon style="font-size: 1.4em;">delete</mat-icon> <mat-icon style="font-size: 1.4em;">delete</mat-icon>
</span> </span>
</div> </div>
</div> </div>
<!-- When item is not selected then show only the pages (first level) --> <!-- When item is not selected then show only the pages (first level) -->
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> --> <div dragula="TABLEDRAG" class="ml-2" [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" [hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id ||isDragging)" class="cdk-link-list" [id]="parentLink.id" [ngStyle]="{'border': overContainerId === parentLink?.id? '1px solid #129D99': '', 'min-height': ((!links?.length||(links.length ==1) ) && (parentLink?.type != tocEntryType.FieldSet) && (isDragging) && (draggingItemId != parentLink?.id)) ? '3em':'inherit'}">
<!-- [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" -->
<div dragula="TABLEDRAG" class="ml-2"
[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id ||isDragging)"
class="cdk-link-list"
[id]="parentLink.id"
[ngStyle]="{'border': overContainerId === parentLink?.id? '1px solid #129D99': '', 'min-height': ((!links?.length||(links.length ==1) ) && (parentLink?.type != tocEntryType.FieldSet) && (isDragging) && (draggingItemId != parentLink?.id)) ? '3em':'inherit'}"
>
<ng-container *ngIf="draggingItemId != parentLink?.id"> <ng-container *ngIf="draggingItemId != parentLink?.id">
<div *ngFor="let link of links; last as isLast" <div *ngFor="let link of links; last as isLast" [ngClass]="{'mb-3': link.type === tocEntryType.Page}" [id]="DRAGULA_ITEM_ID_PREFIX + link.id">
[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
[id]="DRAGULA_ITEM_ID_PREFIX + link.id"
>
<div class="docs-link mt-0"> <div class="docs-link mt-0">
<!-- <div class="link-name"> -->
<!-- <div class="table-item row">
<div class="col link-info">
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
{{link.numbering}} {{link.label? link.label : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
</span>
</div>
<div class="table-item-actions col-auto" *ngIf="!viewOnly">
<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
</div>
</div> -->
<!-- For dev purposes -->
<!-- <ng-container [ngSwitch]="link.type">
<div *ngSwitchCase="tocEntryType.FieldSet">
<span style="background-color: yellow;"> Fieldset</span>
</div>
<div *ngSwitchCase="tocEntryType.Page">
<span style="background-color: lightblue;"> Page</span>
</div>
<div *ngSwitchCase="tocEntryType.Section">
<span style="background-color: lightgreen;"> Section</span>
</div>
</ng-container> -->
<!-- </div> -->
<!-- <button cdkDragHandle>drab</button> -->
<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }"> <div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
<app-description-template-table-of-contents-internal-section <app-description-template-table-of-contents-internal-section [links]="link.subEntries" (itemClick)="itemClicked($event)" (removeEntry)="deleteEntry($event)" [parentLink]="link" [itemSelected]="itemSelected" (createFooEntry)="createNewEntry($event)" [viewOnly]="viewOnly" (dataNeedsRefresh)="onDataNeedsRefresh()" [DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX" [overContainerId]="overContainerId" [isDragging]="isDragging" [draggingItemId]="draggingItemId" [parentRootId]="parentRootId" [colorizeInvalid]="colorizeInvalid">
[links]="link.subEntries"
(itemClick)="itemClicked($event)"
(removeEntry)="deleteEntry($event)"
[parentLink]="link"
[itemSelected] = "itemSelected"
(createFooEntry)="createNewEntry($event)"
[viewOnly]="viewOnly"
(dataNeedsRefresh)="onDataNeedsRefresh()"
[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
[overContainerId]="overContainerId"
[isDragging]="isDragging"
[draggingItemId]="draggingItemId"
[parentRootId]="parentRootId"
[colorizeInvalid]="colorizeInvalid">
</app-description-template-table-of-contents-internal-section> </app-description-template-table-of-contents-internal-section>
<ng-container *ngIf="!isDragging"> <ng-container *ngIf="!isDragging">
<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " > -->
<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly)"> <ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly)">
<button mat-button class="add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})"> <button mat-button class="add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
<!-- <mat-icon>add</mat-icon> -->
<ng-container [ngSwitch]="link.type"> <ng-container [ngSwitch]="link.type">
<ng-container *ngSwitchCase="tocEntryType.Section"> <ng-container *ngSwitchCase="tocEntryType.Section">
<div class="d-flex" style="align-items: center;" > <div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon> <mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection --> <!-- Create new subsection -->
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
@ -149,9 +61,6 @@
<!-- Subsection + --> <!-- Subsection + -->
</ng-container> </ng-container>
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
Section
</ng-container> -->
<ng-container *ngSwitchCase="tocEntryType.FieldSet"> <ng-container *ngSwitchCase="tocEntryType.FieldSet">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon"> <img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
@ -160,7 +69,6 @@
</ng-container> </ng-container>
</button> </button>
</ng-container> </ng-container>
<!-- </div> -->
</ng-container> </ng-container>
</div> </div>
</div> </div>
@ -169,10 +77,10 @@
</ng-container> </ng-container>
</div> </div>
<ng-container *ngIf="!isDragging"> <ng-container *ngIf="!isDragging">
@ -188,10 +96,9 @@
<!-- Give option to generate section --> <!-- Give option to generate section -->
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})"> <button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<!-- <mat-icon>add</mat-icon> -->
<!-- Subsection + --> <!-- Subsection + -->
<div class="d-flex" style="align-items: center;" > <div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon> <mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection --> <!-- Create new subsection -->
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
@ -207,33 +114,13 @@
</div> </div>
<!-- BUILD TYPE OF SAME LEVEL AS LINK OF LINKS --> <!-- BUILD TYPE OF SAME LEVEL AS LINK OF LINKS -->
<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " >
<ng-container >
<button class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})">
<mat-icon>add</mat-icon>
<ng-container [ngSwitch]="parentLink?.subEntriesType">
<ng-container *ngSwitchCase="tocEntryType.Section">
Subsection
</ng-container>
<ng-container *ngSwitchCase="tocEntryType.Page">
Section
</ng-container>
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
Fieldset
</ng-container>
</ng-container>
</button>
</ng-container>
</div> -->
<!-- </ng-container> -->
<!-- Only for the page --> <!-- Only for the page -->
<!-- style="margin-left: -0.5em;" --> <!-- style="margin-left: -0.5em;" -->
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly" > <div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
<button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px"> <button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
<!-- <mat-icon>add</mat-icon> --> <!-- <mat-icon>add</mat-icon> -->
<div class="d-flex" style="align-items: center;" > <div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon> <mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<ng-container *ngIf="!links?.length else createsection"> <ng-container *ngIf="!links?.length else createsection">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}}
@ -245,8 +132,6 @@
</ng-template> </ng-template>
</div> </div>
</button> </button>
<!-- <button (click)="showDroplists()">show droplist</button>
<button (click)="showStructs()">structs</button> -->
</div> </div>
</ng-container> </ng-container>

67
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
View File

@ -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{ .link-info{
// display: inline-block; cursor: pointer;
// padding-top: .6em;
// padding-left: .6em;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -77,7 +18,6 @@
.cdk-link-list { .cdk-link-list {
display: block; display: block;
// background: white;
overflow: hidden; overflow: hidden;
} }
@ -98,18 +38,11 @@ $yellow: var(--secondary-color);
.table-label-element{ .table-label-element{
cursor: pointer; 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{ .table-label-element-active{
font-weight: bold; font-weight: bold;
// color: red;
} }
.add-input-icon{ .add-input-icon{
width: 20px; width: 20px;

103
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
View File

@ -32,13 +32,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
@Input() colorizeInvalid: boolean = false; @Input() colorizeInvalid: boolean = false;
@Input() viewOnly: boolean; @Input() viewOnly: boolean;
// @Input() dropListGroup: Set<string> = new Set<string>();
// @Input() dropListGroup: string[];
// @Input() dragHoveringOver: boolean = false;
// @Input() depth: number = 0;
// @Input() dropListStruct: { id: string, depth: number}[] = [];
constructor( constructor(
@Inject(DOCUMENT) private _document: Document) { @Inject(DOCUMENT) private _document: Document) {
@ -47,32 +40,13 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
tocEntryType = ToCEntryType; tocEntryType = ToCEntryType;
// compareFn(a, b){
// if(a.depth> b.depth) return -1;
// if(a.depth< b.depth) return 1;
// return 0;
// }
ngOnInit(): void { 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) { ngOnChanges(changes: SimpleChanges) {
} }
// get grouListIds(){
// return Array.from(this.dropListGroup);
// }
itemClicked(item: ToCEntry) { itemClicked(item: ToCEntry) {
//leaf node //leaf node
this.itemClick.emit(item); this.itemClick.emit(item);
@ -86,27 +60,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
this.createFooEntry.emit(foo); 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() { get selectedItemInLinks() {
if (!this.links || !this.itemSelected) return false; if (!this.links || !this.itemSelected) return false;
@ -116,63 +69,10 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
return false; return false;
} }
// appendAndGetDroplists(dropList: CdkDropList){
// this.dropListGroup.push(dropList);
// return this.dropListGroup;
// }
// drop(event: CdkDragDrop<string[]>) {
// // 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() { onDataNeedsRefresh() {
this.dataNeedsRefresh.emit(); 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 { public _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
if (!tocentries) { if (!tocentries) {
return null; return null;
@ -258,14 +158,11 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
areAllTouched = false; areAllTouched = false;
} }
}) })
// const areAllTouched = controlKeys.reduce((acc, key)=>acc && this._allFieldsAreTouched(aControl.get(key)), true);
return areAllTouched; return areAllTouched;
} else if (aControl instanceof UntypedFormArray) { } else if (aControl instanceof UntypedFormArray) {
const controls = (aControl as UntypedFormArray).controls; const controls = (aControl as UntypedFormArray).controls;
// const areAllTouched = controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true);
let areAllTouched = true; let areAllTouched = true;
// controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true);
controls.forEach(control => { controls.forEach(control => {
if (!this.allFieldsAreTouched(control)) { if (!this.allFieldsAreTouched(control)) {
areAllTouched = false; areAllTouched = false;