Added Field Groups drop functionality

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html

@@ -6,45 +6,69 @@
       *ngFor="let group of config.fieldGroups; let i = index"
       class="entity-form-cell admin-form-column section-container"
     >
-      <!-- GROUP HEADER -->
-      <app-admin-section-header
-        [(title)]="group.header"
-        (remove)="removeGroup(i)"
-      ></app-admin-section-header>
-
       <div
         cdkDropList
-        [cdkDropListData]="group.fields"
-        (cdkDropListDropped)="drop($event)"
-        class="fields-group-list drop-list"
+        [cdkDropListData]="{ group, index: i }"
+        (cdkDropListDropped)="dropGroup($event)"
+        [cdkDropListConnectedTo]="dropLists"
       >
-        <!-- 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)="openConfigDetails(field)"
-            i18n="Button label"
+        <div 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.fields"
+            (cdkDropListDropped)="drop($event)"
+            [cdkDropListConnectedTo]="dropLists"
+            class="fields-group-list drop-list"
           >
-            Edit Field
-          </button>
+            <!-- FIELD [start] -->
+            <div
+              *ngFor="let field of group.fields; let j = index"
+              class="admin-form-field flex-row align-center"
+              cdkDrag
+              [cdkDragData]="field"
+              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)="openConfigDetails(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 class="dummy-form-field">
+                <app-entity-field-edit
+                  [field]="field"
+                  [entity]="dummyEntity"
+                  [form]="dummyForm"
+                ></app-entity-field-edit>
+              </div>
+            </div>
+            <!-- FIELD [end]-->
           </div>
         </div>
-        <!-- FIELD [end]-->
       </div>
     </div>
 

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.scss

@@ -18,6 +18,8 @@ $toolbar-width: 300px;
 }
 
 .admin-grid-layout {
+  display: flex;
+  flex-wrap: wrap;
   @include grid-layout.adaptive(
     $min-block-width:
       calc(#{sizes.$form-group-min-width} + 28px + 2 * 2 *#{sizes.$small}),

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts

@@ -1,4 +1,12 @@
-import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChildren,
+  QueryList,
+  AfterViewInit,
+} 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";
@@ -9,14 +17,15 @@ import {
   DragDropModule,
   moveItemInArray,
   transferArrayItem,
+  CdkDropList,
 } from "@angular/cdk/drag-drop";
 import {
   ColumnConfig,
   FormFieldConfig,
   toFormFieldConfig,
 } from "../../../common-components/entity-form/FormConfig";
 import { AdminEntityService } from "../../admin-entity.service";
-import { lastValueFrom } from "rxjs";
+import { lastValueFrom, asapScheduler } from "rxjs";
 import { NgForOf, NgIf } from "@angular/common";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
 import { MatButtonModule } from "@angular/material/button";
@@ -52,11 +61,14 @@ import { AdminEditDescriptionOnlyFieldComponent } from "../admin-entity-field/ad
     NgIf,
   ],
 })
-export class AdminEntityFormComponent implements OnChanges {
+export class AdminEntityFormComponent implements OnChanges, AfterViewInit {
   @Input() entityType: EntityConstructor;
 
   @Input() config: FormConfig;
 
+  @ViewChildren(CdkDropList)
+  private dropListQuery: QueryList<CdkDropList>;
+  public dropLists: CdkDropList[] = [];
   dummyEntity: Entity;
   dummyForm: FormGroup;
 
@@ -105,6 +117,24 @@ export class AdminEntityFormComponent implements OnChanges {
     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
@@ -283,6 +313,14 @@ export class AdminEntityFormComponent implements OnChanges {
     this.drop(event);
   }
 
+  dropGroup(event: CdkDragDrop<any>) {
+    moveItemInArray(
+      this.config.fieldGroups,
+      event.previousContainer.data.index,
+      event.container.data.index,
+    );
+  }
+
   removeGroup(i: number) {
     const [removedFieldGroup] = this.config.fieldGroups.splice(i, 1);
     this.initAvailableFields();