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

fixed sortable field 

*dmp-blueprint-editor>description-template
This commit is contained in:
Sofia Papacharalampous 2024-03-22 12:04:43 +02:00
parent 0d40d56484
commit aed0f9de8e
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -227,18 +227,13 @@
<div class="row"> <div class="row">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)"> <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"> <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 class="description-field-index">
<span style="font-size: 18px;">{{descriptionTemplateIndex + 1}}</span>
</div>
<div class="description-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-->
<div class="col-auto section-options-vertical"> <div class="col-auto section-options-vertical">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-auto"> <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;">{{descriptionTemplateIndex + 1}}</span> <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="isSectionSelected(fieldIndex)" [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': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
@ -248,8 +243,8 @@
</div> </div>
</div> </div>
<div class="col-auto pr-0 section-options-horizontal"> <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;">{{descriptionTemplateIndex + 1}}</span> <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="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
<div class="col"> <div class="col">
@ -322,7 +317,6 @@
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">

13
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
View File

@ -64,6 +64,7 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
showInactiveDetails = false; showInactiveDetails = false;
hoveredSectionIndex:number = -1; hoveredSectionIndex:number = -1;
hoveredDescriptionTemplateIndex:number = -1;
dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory; dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory;
dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType; dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType;
@ -395,6 +396,18 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
//Description Templates //Description Templates
isDescriptionTemplateSelected(descriptionTemplateId: number): boolean {
return this.hoveredDescriptionTemplateIndex === descriptionTemplateId;
}
onDescriptionTemplateHover(descriptionTemplateId: any): void {
this.hoveredDescriptionTemplateIndex = descriptionTemplateId;
}
clearHoveredDescriptionTemplate(): void {
this.hoveredDescriptionTemplateIndex = -1;
}
removeAllDescriptionTemplates(matCheckBox: MatCheckboxChange, sectionIndex: number) { removeAllDescriptionTemplates(matCheckBox: MatCheckboxChange, sectionIndex: number) {
if (matCheckBox.checked == false) { if (matCheckBox.checked == false) {
const descriptionTemplateSize = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('descriptionTemplates') as FormArray).length; const descriptionTemplateSize = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('descriptionTemplates') as FormArray).length;