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

fix plan blueprint disabled drag handles, add strictly typed forms to description template editor(wip)

This commit is contained in:
mchouliara 2024-09-04 12:48:12 +03:00
parent 42390e6b64
commit 4d13fc5443
6 changed files with 152 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html
View File

@ -260,11 +260,22 @@
<li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
<mat-checkbox
class="fieldset-checkbox-action-description-template-editor"
[formControl]="this.form.get('hasCommentField')"
[matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate"
>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}
</mat-checkbox>
<mat-error *ngIf="form.get('hasCommentField').hasError('backendError')">{{form.get('hasCommentField').getError('backendError').message}}</mat-error>
</li>
<li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasMultiplicity')" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
<mat-checkbox
class="fieldset-checkbox-action-description-template-editor"
[formControl]="this.form.get('hasMultiplicity')"
(change)="onIsMultiplicityEnabledChange($event)"
[matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate"
>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
</mat-checkbox>
</li>
@ -272,9 +283,30 @@
<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
<mat-menu #menu="matMenu">
<!-- TODO to check -->
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
<mat-checkbox
class="mat-menu-item"
[disabled]="viewOnly"
(click)="$event.stopPropagation()"
[(ngModel)]="showDescription"
>
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.DESCRIPTION' | translate}}
</mat-checkbox>
<mat-checkbox
class="mat-menu-item"
[disabled]="viewOnly"
(click)="$event.stopPropagation()"
[(ngModel)]="showExtendedDescription"
>
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXTENDED-DESCRIPTION' | translate}}
</mat-checkbox>
<mat-checkbox
class="mat-menu-item"
[disabled]="viewOnly"
(click)="$event.stopPropagation()"
[(ngModel)]="showAdditionalInfo"
>
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.ADDITIONAL-INFORMATION' | translate}}
</mat-checkbox>
</mat-menu>
</li>
</ul>

2
frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.ts
View File

@ -22,7 +22,6 @@ import { DescriptionTemplateFieldSetPersist, DescriptionTemplateReferenceTypeFie
import { DescriptionEditorModel } from '@app/ui/description/editor/description-editor.model';
import { Description } from '@app/core/model/description/description';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
import { ReferenceType } from '@app/core/model/reference-type/reference-type';
@Component({
@ -66,7 +65,6 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
public descriptionTemplateService: DescriptionTemplateService,
private configurationService: ConfigurationService,
public visibilityRulesService: VisibilityRulesService,
private referenceTypeService: ReferenceTypeService,
) {
super();
}

4
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -136,7 +136,7 @@
</div>
</div>
</mat-step>
<mat-step [label]="fromStepperLabel" [completed]="formGroup.disabled || formGroup.valid">
<mat-step [label]="fromStepperLabel" [completed]="viewOnly || formGroup.valid">
<div class="row pr-4">
<!-- TABLE -->
@ -268,7 +268,7 @@
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
</button>
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
</button>

14
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.ts
View File

@ -38,7 +38,7 @@ import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { map, takeUntil } from 'rxjs/operators';
import { GENERAL_ANIMATIONS, STEPPER_ANIMATIONS } from './animations/animations';
import { DescriptionTemplateEditorModel, DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorModel, DescriptionTemplatePageEditorModel, DescriptionTemplateSectionEditorModel, UserDescriptionTemplateEditorModel } from './description-template-editor.model';
import { DescriptionTemplateEditorModel, DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorModel, DescriptionTemplateForm, DescriptionTemplatePageEditorModel, DescriptionTemplateSectionEditorModel, UserDescriptionTemplateEditorModel } from './description-template-editor.model';
import { DescriptionTemplateEditorResolver } from './description-template-editor.resolver';
import { DescriptionTemplateEditorService } from './description-template-editor.service';
import { NewEntryType, ToCEntry, ToCEntryType } from './table-of-contents/description-template-table-of-contents-entry';
@ -59,7 +59,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
@ViewChild('stepper') stepper: MatStepper;
formGroup: UntypedFormGroup = null;
formGroup: FormGroup<DescriptionTemplateForm> = null;
item: DescriptionTemplate;
showInactiveDetails = false;
finalized: DescriptionTemplateStatus.Finalized;
@ -260,7 +260,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
persistEntity(onSuccess?: (response) => void): void {
if (!this.isNewVersion) {
const formData = this.formService.getValue(this.formGroup.value) as DescriptionTemplatePersist;
const formData = JSON.parse(JSON.stringify(this.formGroup.value)) as DescriptionTemplatePersist;
formData.code = this.formGroup.get('code').getRawValue();
this.descriptionTemplateService.persist(formData)
@ -272,7 +272,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
}
);
} else if (this.isNewVersion == true && this.isNew == false && this.isClone == false) {
const formData = this.formService.getValue(this.formGroup.value) as NewVersionDescriptionTemplatePersist;
const formData = JSON.parse(JSON.stringify(this.formGroup.value)) as NewVersionDescriptionTemplatePersist;
this.descriptionTemplateService.newVersion(formData)
.pipe(takeUntil(this._destroyed)).subscribe(
@ -309,8 +309,8 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
}
public delete() {
const value = this.formGroup.value;
if (value.id) {
const id = this.formGroup.controls.id.value;
if (id) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
data: {
@ -321,7 +321,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.descriptionTemplateService.delete(value.id).pipe(takeUntil(this._destroyed))
this.descriptionTemplateService.delete(id).pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackDeleteSuccess(),
error => this.onCallbackError(error)

101
frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
View File

@ -1,4 +1,4 @@
import { FormArray, FormControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
import { FormArray, FormControl, FormGroup, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
import { DescriptionTemplateFieldDataExternalDatasetType } from "@app/core/common/enum/description-template-field-data-external-dataset-type";
import { DescriptionTemplateFieldType } from "@app/core/common/enum/description-template-field-type";
import { DescriptionTemplateFieldValidationType } from "@app/core/common/enum/description-template-field-validation-type";
@ -14,6 +14,20 @@ import { Validation, ValidationContext } from "@common/forms/validation/validati
import { Guid } from "@common/types/guid";
import { EditorCustomValidators } from "./custom-validators/editor-custom-validators";
export interface DescriptionTemplateForm {
id: FormControl<Guid>;
hash: FormControl<string>;
label: FormControl<string>;
code: FormControl<string>;
description: FormControl<string>;
language: FormControl<string>;
type: FormControl<Guid>;
status: FormControl<DescriptionTemplateStatus>;
definition: FormGroup<DescriptionTemplateDefinitionForm>;
users: FormArray<FormGroup<UserDescriptionTemplateForm>>
permissions: FormControl<string[]>;
}
export class DescriptionTemplateEditorModel extends BaseEditorModel implements DescriptionTemplatePersist {
label: string;
code: string;
@ -45,7 +59,7 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
return this;
}
buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
buildForm(context: ValidationContext = null, disabled: boolean = false): FormGroup<DescriptionTemplateForm> {
if (context == null) { context = this.createValidationContext(); }
return this.formBuilder.group({
@ -114,6 +128,10 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
}
export interface UserDescriptionTemplateForm {
userId: FormControl<Guid>;
role: FormControl<UserDescriptionTemplateRole>;
}
export class UserDescriptionTemplateEditorModel implements UserDescriptionTemplatePersist {
userId?: Guid;
role?: UserDescriptionTemplateRole;
@ -136,7 +154,7 @@ export class UserDescriptionTemplateEditorModel implements UserDescriptionTempla
context?: ValidationContext,
disabled?: boolean,
rootPath?: string
}): UntypedFormGroup {
}): FormGroup<UserDescriptionTemplateForm> {
let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) {
context = UserDescriptionTemplateEditorModel.createValidationContext({
@ -187,6 +205,11 @@ export class UserDescriptionTemplateEditorModel implements UserDescriptionTempla
}
export interface DescriptionTemplateDefinitionForm {
pages: FormArray<FormGroup<DescriptionTemplatePageForm>>;
}
export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemplateDefinitionPersist {
pages: DescriptionTemplatePageEditorModel[] = [];
@ -259,6 +282,13 @@ export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemp
}
export interface DescriptionTemplatePageForm{
id: FormControl<string>;
ordinal: FormControl<number>;
title: FormControl<string>;
sections: FormArray<FormGroup<DescriptionTemplateSectionForm>>;
}
export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePagePersist {
id: string;
ordinal: number;
@ -364,6 +394,14 @@ export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePa
}
export interface DescriptionTemplateSectionForm {
id: FormControl<string>;
ordinal: FormControl<number>;
title: FormControl<string>;
description: FormControl<string>;
sections: FormArray<FormGroup<DescriptionTemplateSectionForm>>;
fieldSets: FormArray<FormGroup<DescriptionTemplateFieldSetForm>>;
}
export class DescriptionTemplateSectionEditorModel implements DescriptionTemplateSectionPersist {
id: string;
ordinal: number;
@ -487,6 +525,18 @@ export class DescriptionTemplateSectionEditorModel implements DescriptionTemplat
}
export interface DescriptionTemplateFieldSetForm {
id: FormControl<string>;
ordinal: FormControl<number>;
title: FormControl<string>;
description: FormControl<string>;
extendedDescription: FormControl<string>;
additionalInformation: FormControl<string>;
multiplicity: FormGroup<DescriptionTemplateMultiplicityForm>;
hasMultiplicity: FormControl<boolean>;
hasCommentField: FormControl<boolean>;
fields: FormArray<FormGroup<DescriptionTemplateFieldForm>>;
}
export class DescriptionTemplateFieldSetEditorModel implements DescriptionTemplateFieldSetPersist {
id: string;
ordinal: number;
@ -615,6 +665,12 @@ export class DescriptionTemplateFieldSetEditorModel implements DescriptionTempla
}
}
export interface DescriptionTemplateMultiplicityForm {
min: FormControl<number>;
max: FormControl<number>;
placeholder: FormControl<string>;
tableView: FormControl<boolean>;
}
export class DescriptionTemplateMultiplicityEditorModel implements DescriptionTemplateMultiplicityPersist {
min: number;
max: number;
@ -700,6 +756,17 @@ export class DescriptionTemplateMultiplicityEditorModel implements DescriptionTe
// Field Editor Model
//
//
export interface DescriptionTemplateFieldForm {
id: FormControl<string>;
ordinal: FormControl<number>;
semantics: FormControl<string[]>;
defaultValue: FormGroup<DescriptionTemplateDefaultValueForm>;
visibilityRules: FormArray<FormGroup<DescriptionTemplateRuleForm>>;
validations: FormControl<DescriptionTemplateFieldValidationType[]>;
includeInExport: FormControl<boolean>;
data: FormGroup<DescriptionTemplateLabelDataForm>;
}
export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateFieldPersist {
id: string;
ordinal: number;
@ -892,6 +959,12 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
}
}
export interface DescriptionTemplateDefaultValueForm {
target: FormControl<string>;
textValue: FormControl<string>;
dateValue: FormControl<Date>;
booleanValue: FormControl<boolean>;
}
export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist {
target: string;
textValue: string;
@ -969,6 +1042,13 @@ export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTe
}
}
export interface DescriptionTemplateRuleForm {
target: FormControl<string>;
textValue: FormControl<string>;
dateValue: FormControl<Date>;
booleanValue: FormControl<boolean>;
}
export class DescriptionTemplateRuleEditorModel implements DescriptionTemplateRulePersist {
target: string;
textValue: string;
@ -1049,6 +1129,10 @@ export class DescriptionTemplateRuleEditorModel implements DescriptionTemplateRu
}
}
export interface DescriptionTemplateLabelDataForm {
label: FormControl<string>;
fieldType: FormControl<DescriptionTemplateFieldType>;
}
export class DescriptionTemplateLabelDataEditorModel implements DescriptionTemplateLabelDataPersist {
label: string;
fieldType: DescriptionTemplateFieldType;
@ -1470,6 +1554,7 @@ export class DescriptionTemplateRadioBoxOptionEditorModel implements Description
// Select Field
//
//
export class DescriptionTemplateSelectDataEditorModel extends DescriptionTemplateLabelDataEditorModel implements DescriptionTemplateSelectDataPersist {
options: DescriptionTemplateSelectOptionEditorModel[] = [];
multipleSelect: boolean = false;
@ -1625,6 +1710,10 @@ export class DescriptionTemplateSelectOptionEditorModel implements DescriptionTe
}
export interface DescriptionTemplateUploadDataForm {
types: FormArray<LabelValueForm>;
maxFileSizeInMB: FormControl<number>;
}
//
//
// Upload Field
@ -1714,6 +1803,7 @@ export class DescriptionTemplateUploadDataEditorModel extends DescriptionTemplat
}
}
export class DescriptionTemplateUploadOptionEditorModel implements DescriptionTemplateUploadOptionPersist {
label: string;
value: string;
@ -1784,3 +1874,8 @@ export class DescriptionTemplateUploadOptionEditorModel implements DescriptionTe
})
}
}
export interface LabelValueForm extends FormGroup<{
label: FormControl<string>;
value: FormControl<string>;
}>{}

16
frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
View File

@ -42,7 +42,7 @@
<mat-error *ngIf="formGroup?.get('definition')?.touched && formGroup.get('definition').get('sections').hasError('planBlueprintSystemFieldRequired')"> {{'PLAN-BLUEPRINT-EDITOR.SYSTEM-FIELDS-REQUIRED' | translate}} </mat-error>
</h4>
<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="hideEditActions">
<div class="col-12">
<mat-card class="pt-3 pb-3">
<mat-card-header>
@ -50,7 +50,7 @@
<div class="col-auto d-flex">
<mat-card-title>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title>
</div>
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto d-flex" *ngIf="!hideEditActions">
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)">
@ -83,12 +83,12 @@
</div>
<div class="row">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="hideEditActions" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<div class="col-auto section-options-vertical">
<div class="row justify-content-center">
<div class="col-auto">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div>
<div class="col-auto" *ngIf="!hideEditActions">
<button mat-icon-button matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)">
@ -99,7 +99,7 @@
</div>
<div class="col-auto pr-0 section-options-horizontal">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col">
<div class="row align-items-center">
@ -238,13 +238,13 @@
<div class="row">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="hideEditActions" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
<div class="col-auto section-options-vertical">
<div class="row justify-content-center">
<div class="col-auto">
<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div>
<div class="col-auto" *ngIf="!hideEditActions">
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)">
@ -255,7 +255,7 @@
</div>
<div class="col-auto pr-0 section-options-horizontal">
<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col">