RED-8748 - added CdkDropList to be able to reorder component log values

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html

@@ -21,8 +21,8 @@
 
 <ng-template #editValue>
     <form [formGroup]="form" (submit)="save()">
-        <ng-container *ngFor="let control of form.controls | keyvalue">
-            <div class="editing-value">
+        <div cdkDropList (cdkDropListDropped)="drop($event)">
+            <div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag>
                 <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
                 <div class="iqser-input-group w-full">
                     <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
@@ -34,7 +34,7 @@
                     icon="iqser:trash"
                 ></iqser-circle-button>
             </div>
-        </ng-container>
+        </div>
         <div class="editing-actions">
             <iqser-icon-button
                 [disabled]="disabled"

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss

@@ -146,3 +146,23 @@
         transform: scale(1.2);
     }
 }
+
+/* .cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+} */

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts

@@ -1,14 +1,32 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
-import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
-import { BaseFormComponent, IqserDialog } from '@iqser/common-ui';
+import { FormBuilder, FormControl, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui';
 import { FilterService } from '@common-ui/filtering';
 import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
     styleUrls: ['/editable-structured-component-value.component.scss'],
+    standalone: true,
+    imports: [
+        CircleButtonComponent,
+        NgClass,
+        TranslateModule,
+        KeyValuePipe,
+        CdkDropList,
+        MatIcon,
+        ReactiveFormsModule,
+        IconButtonComponent,
+        CdkDrag,
+        NgIf,
+        NgForOf,
+    ],
 })
 export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
     @Input() entry: ComponentLogEntry;
@@ -74,6 +92,11 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         this.form.addControl(key, new FormControl(''));
     }
 
+    drop(event: CdkDragDrop<string>) {
+        moveItemInArray(this.entry.componentValues, event.previousIndex, event.currentIndex);
+        this.form = this.#getForm();
+    }
+
     #getForm() {
         const form = this._formBuilder.group({});
         this.entry.componentValues.forEach((value, index) => {

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -128,7 +128,6 @@ const components = [
     FileHeaderComponent,
     DocumineExportComponent,
     StructuredComponentManagementComponent,
-    EditableStructuredComponentValueComponent,
 ];
 
 @NgModule({
@@ -164,6 +163,7 @@ const components = [
         DisableStopPropagationDirective,
         SelectedAnnotationsTableComponent,
         SelectedAnnotationsListComponent,
+        EditableStructuredComponentValueComponent,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
 })