Added Field Groups drop functionality

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

@@ -1,16 +1,32 @@
-<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 -->
-      <app-admin-section-header
-        [(title)]="group.header"
-        (remove)="removeGroup(i)"
-      ></app-admin-section-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

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

@@ -200,6 +200,14 @@ export class AdminEntityFormComponent implements OnChanges {
     this.drop(event);
   }
 
+  dropGroup(event: CdkDragDrop<any>) {
+    moveItemInArray(
+      this.config.fieldGroups,
+      event.previousIndex,
+      event.currentIndex,
+    );
+  }
+
   removeGroup(i: number) {
     const [removedFieldGroup] = this.config.fieldGroups.splice(i, 1);
     this.initAvailableFields();