From 5052084aefffcebd4d030d6acd58a2159168d6cc Mon Sep 17 00:00:00 2001
From: Sebastian Leidig <sebastian@aam-digital.com>
Date: Tue, 26 Mar 2024 16:58:07 +0100
Subject: [PATCH] simplified code

---
 .../admin-entity-form.component.html          | 106 +++++++++---------
 .../admin-entity-form.component.ts            |  40 +------
 2 files changed, 56 insertions(+), 90 deletions(-)

diff --git a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html
index 9a48a93fc2..9d18439824 100644
--- a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html
+++ b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html
@@ -1,71 +1,67 @@
-<div cdkDropListGroup class="overall-container flex-row">
+<div class="overall-container flex-row">
   <!-- FORM PREVIEW -->
-  <div class="flex-grow admin-grid-layout padding-right-regular">
+  <div
+    class="flex-grow admin-grid-layout padding-right-regular"
+    cdkDropList
+    cdkDropListOrientation="horizontal"
+    (cdkDropListDropped)="dropGroup($event)"
+    cdkDropListGroup
+  >
     <!-- FIELD GROUPS -->
     <div
       *ngFor="let group of config.fieldGroups; let i = index"
       class="entity-form-cell admin-form-column section-container"
+      cdkDrag
+      [cdkDragData]="group"
     >
+      <!-- GROUP HEADER -->
+      <div class="flex-row align-center">
+        <fa-icon
+          icon="grip-vertical"
+          size="xl"
+          class="drag-handle"
+          cdkDragHandle
+        ></fa-icon>
+        <app-admin-section-header
+          [(title)]="group.header"
+          (remove)="removeGroup(i)"
+        ></app-admin-section-header>
+      </div>
+
       <div
         cdkDropList
-        [cdkDropListData]="{ group, index: i }"
-        (cdkDropListDropped)="dropGroup($event)"
-        [cdkDropListConnectedTo]="dropLists"
+        [cdkDropListData]="group.fields"
+        (cdkDropListDropped)="drop($event)"
+        class="fields-group-list drop-list"
       >
-        <div cdkDrag>
-          <div class="flex-row align-center">
-            <fa-icon
-              icon="grip-vertical"
-              size="xl"
-              class="drag-handle"
-            ></fa-icon>
-            <!-- GROUP HEADER -->
-            <app-admin-section-header
-              [(title)]="group.header"
-              (remove)="removeGroup(i)"
-            ></app-admin-section-header>
-          </div>
-          <div
-            cdkDropList
-            [cdkDropListData]="group.fields"
-            (cdkDropListDropped)="drop($event)"
-            [cdkDropListConnectedTo]="dropLists"
-            class="fields-group-list drop-list"
-          >
-            <!-- FIELD [start] -->
-            <div
-              *ngFor="let field of group.fields; let j = index"
-              class="admin-form-field flex-row align-center"
-              cdkDrag
-              cdkDragBoundary=".overall-container"
-            >
-              <fa-icon
-                icon="grip-vertical"
-                size="xl"
-                class="drag-handle"
-              ></fa-icon>
+        <!-- FIELD [start] -->
+        <div
+          *ngFor="let field of group.fields"
+          class="admin-form-field flex-row align-center"
+          cdkDrag
+          cdkDragBoundary=".overall-container"
+        >
+          <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
 
-              <button
-                mat-stroked-button
-                color="accent"
-                class="field-edit-button"
-                (click)="openFieldConfig(field)"
-                i18n="Button label"
-              >
-                Edit Field
-              </button>
+          <button
+            mat-stroked-button
+            color="accent"
+            class="field-edit-button"
+            (click)="openFieldConfig(field)"
+            i18n="Button label"
+          >
+            Edit Field
+          </button>
 
-              <div class="dummy-form-field">
-                <app-entity-field-edit
-                  [field]="field"
-                  [entity]="dummyEntity"
-                  [form]="dummyForm"
-                ></app-entity-field-edit>
-              </div>
-            </div>
-            <!-- FIELD [end]-->
+          <div class="dummy-form-field">
+            <app-entity-field-edit
+              [field]="field"
+              [entity]="dummyEntity"
+              [form]="dummyForm"
+            ></app-entity-field-edit>
           </div>
         </div>
+        <!-- FIELD [end]-->
       </div>
     </div>
 
diff --git a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts
index cbfa2308c1..1942f7d287 100644
--- a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts
+++ b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts
@@ -1,12 +1,4 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  ViewChildren,
-  QueryList,
-  AfterViewInit,
-} from "@angular/core";
+import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
 import { Entity, EntityConstructor } from "../../../entity/model/entity";
 import { EntityFormService } from "../../../common-components/entity-form/entity-form.service";
 import { FormControl, FormGroup } from "@angular/forms";
@@ -17,7 +9,6 @@ import {
   DragDropModule,
   moveItemInArray,
   transferArrayItem,
-  CdkDropList,
 } from "@angular/cdk/drag-drop";
 import {
   ColumnConfig,
@@ -25,7 +16,7 @@ import {
   toFormFieldConfig,
 } from "../../../common-components/entity-form/FormConfig";
 import { AdminEntityService } from "../../admin-entity.service";
-import { lastValueFrom, asapScheduler } from "rxjs";
+import { lastValueFrom } from "rxjs";
 import { NgForOf, NgIf } from "@angular/common";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
 import { MatButtonModule } from "@angular/material/button";
@@ -60,14 +51,11 @@ import { FormConfig } from "../../../entity-details/form/form.component";
     NgIf,
   ],
 })
-export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
+export class AdminEntityFormComponent implements OnChanges {
   @Input() entityType: EntityConstructor;
 
   @Input() config: FormConfig;
 
-  @ViewChildren(CdkDropList)
-  private dropListQuery: QueryList<CdkDropList>;
-  public dropLists: CdkDropList[] = [];
   dummyEntity: Entity;
   dummyForm: FormGroup;
 
@@ -111,24 +99,6 @@ export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
     return config.fieldGroups.reduce((p, c) => p.concat(c.fields), []);
   }
 
-  ngAfterViewInit(): void {
-    let loadedDropLists: CdkDropList[] = [];
-    this.dropListQuery.forEach((dropList) => {
-      loadedDropLists.push(dropList);
-    });
-    loadedDropLists = loadedDropLists.reverse();
-    asapScheduler.schedule(() => {
-      this.dropLists = loadedDropLists;
-      // one array of siblings (shared for a whole tree)
-      const groupSiblings = this.dropLists.map((dl) => dl?._dropListRef);
-      // overwrite _getSiblingContainerFromPosition method
-      this.dropListQuery.forEach((dl) => {
-        dl._dropListRef._getSiblingContainerFromPosition = (item, x, y) =>
-          groupSiblings.find((sibling) => sibling._canReceive(item, x, y));
-      });
-    });
-  }
-
   /**
    * Load any fields from schema that are not already in the form, so that the user can drag them into the form.
    * @param config
@@ -233,8 +203,8 @@ export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
   dropGroup(event: CdkDragDrop<any>) {
     moveItemInArray(
       this.config.fieldGroups,
-      event.previousContainer.data.index,
-      event.container.data.index,
+      event.previousIndex,
+      event.currentIndex,
     );
   }