137 lines
7.0 KiB
HTML
137 lines
7.0 KiB
HTML
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
|
|
<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">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION' | translate |lowercase}}
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="tocEntryType.Section">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate |lowercase}}
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="tocEntryType.Page">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate | lowercase}}
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
</span>
|
|
|
|
|
|
</div>
|
|
<div class="col-auto d-flex align-items-center">
|
|
|
|
<ng-container *ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id ||isDragging)">
|
|
<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))">
|
|
<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) -->
|
|
<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 [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="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.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>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- END OF LOOP-->
|
|
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
|
|
<ng-container *ngIf="!isDragging">
|
|
|
|
|
|
|
|
<!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
|
|
<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
|
|
<div class="ml-3">
|
|
|
|
<!-- Give option to generate fieldset (only if parent is section) -->
|
|
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
|
|
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
|
|
</button>
|
|
|
|
<!-- Give option to generate section -->
|
|
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
|
<!-- Subsection + -->
|
|
|
|
<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>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BUILD TYPE OF SAME LEVEL AS LINK OF LINKS -->
|
|
|
|
<!-- Only for the page -->
|
|
<!-- style="margin-left: -0.5em;" -->
|
|
<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;">
|
|
<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}}
|
|
<!-- Create the first section -->
|
|
</ng-container>
|
|
<ng-template #createsection>
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SECTION'| translate}}
|
|
<!-- Create new section -->
|
|
</ng-template>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
</ng-container> |