more description template changes
This commit is contained in:
parent
cba0741149
commit
fde91b6677
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
|
|||
|
||||
|
||||
@Output() itemClick = new EventEmitter<ToCEntry>();
|
||||
// @Output() newEntry = new EventEmitter<ToCEntry>();
|
||||
@Output() removeEntry = new EventEmitter<ToCEntry>();
|
||||
@Output() createEntry = new EventEmitter<NewEntryType>();
|
||||
@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 => {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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="col link-info"
|
||||
>
|
||||
<!-- [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 )}} -->
|
||||
<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">
|
||||
{{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 *ngSwitchCase="tocEntryType.FieldSet">
|
||||
|
|
@ -43,136 +14,73 @@
|
|||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : parentLink.id}} -->
|
||||
</span>
|
||||
|
||||
|
||||
</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)">
|
||||
<!-- <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}}
|
||||
</span>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"
|
||||
[hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))"
|
||||
>
|
||||
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)" [hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))">
|
||||
<mat-icon style="font-size: 1.4em;">delete</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- When item is not selected then show only the pages (first level) -->
|
||||
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
|
||||
<!-- [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">
|
||||
<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">
|
||||
|
||||
<div *ngFor="let link of links; last as isLast"
|
||||
[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
|
||||
[id]="DRAGULA_ITEM_ID_PREFIX + link.id"
|
||||
>
|
||||
<div class="docs-link mt-0">
|
||||
<!-- <div class="link-name"> -->
|
||||
<div *ngFor="let link of links; last as isLast" [ngClass]="{'mb-3': link.type === tocEntryType.Page}" [id]="DRAGULA_ITEM_ID_PREFIX + link.id">
|
||||
<div class="docs-link mt-0">
|
||||
|
||||
<!-- <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 }">
|
||||
<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">
|
||||
</app-description-template-table-of-contents-internal-section>
|
||||
<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
|
||||
<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">
|
||||
</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)">
|
||||
<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 *ngSwitchCase="tocEntryType.Section">
|
||||
<div class="d-flex" style="align-items: center;" >
|
||||
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
|
||||
<!-- Create new subsection -->
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
|
||||
</div>
|
||||
<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})">
|
||||
<ng-container [ngSwitch]="link.type">
|
||||
<ng-container *ngSwitchCase="tocEntryType.Section">
|
||||
<div class="d-flex" style="align-items: center;">
|
||||
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
|
||||
<!-- Create new subsection -->
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Subsection + -->
|
||||
</ng-container>
|
||||
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
||||
Section
|
||||
</ng-container> -->
|
||||
<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">
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
|
||||
</ng-container>
|
||||
<!-- Subsection + -->
|
||||
</ng-container>
|
||||
<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">
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- </div> -->
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- END OF LOOP-->
|
||||
</div> <!-- END OF LOOP-->
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<ng-container *ngIf="!isDragging">
|
||||
<ng-container *ngIf="!isDragging">
|
||||
|
||||
|
||||
|
||||
|
|
@ -188,13 +96,12 @@
|
|||
|
||||
<!-- Give option to generate section -->
|
||||
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
||||
<!-- <mat-icon>add</mat-icon> -->
|
||||
<!-- 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>
|
||||
<!-- Create new subsection -->
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
|
||||
<!-- Create new subsection -->
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
|
@ -207,33 +114,13 @@
|
|||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<!-- 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">
|
||||
<!-- <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>
|
||||
<ng-container *ngIf="!links?.length else createsection">
|
||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}}
|
||||
|
|
@ -245,8 +132,6 @@
|
|||
</ng-template>
|
||||
</div>
|
||||
</button>
|
||||
<!-- <button (click)="showDroplists()">show droplist</button>
|
||||
<button (click)="showStructs()">structs</button> -->
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -32,13 +32,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
|
|||
@Input() colorizeInvalid: boolean = false;
|
||||
|
||||
@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(
|
||||
@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<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() {
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue