first draft for fixing drag&drop issues

src/app/shared/directives/drop-group/drop-group.directive.ts

@@ -52,10 +52,10 @@ export class DropGroupDirective implements OnInit {
     } else {
       switch (event.container.id) {
         case 'Exclusion':
-          this.moveCriterionInExclusion(event.previousIndex, event.currentIndex);
+          this.moveCriterionInExclusion(droppedCriterion, event.previousIndex, event.currentIndex);
           break;
         case 'Inclusion':
-          this.moveCriterionInInclusion(event.previousIndex, event.currentIndex);
+          this.moveCriterionInInclusion(droppedCriterion, event.previousIndex, event.currentIndex);
           break;
         default:
           break;
@@ -70,12 +70,12 @@ export class DropGroupDirective implements OnInit {
   }
   private addToInclusion(droppedCriterion: string, currentIndex: number): void {
     this.criteria = this.feasibilityQuery.getInclusionCriteria();
-    this.criteria.splice(currentIndex, 0, [droppedCriterion]);
+    this.addCriterionToInnerArray(this.criteria, droppedCriterion, currentIndex);
     this.queryProviderService.setInclusionCriteria(this.criteria);
   }
   private addToExclusion(droppedCriterion: string, currentIndex: number): void {
     this.criteria = this.feasibilityQuery.getExclusionCriteria();
-    this.criteria.splice(currentIndex, 0, [droppedCriterion]);
+    this.addCriterionToInnerArray(this.criteria, droppedCriterion, currentIndex);
     this.queryProviderService.setExclusionCriteria(this.criteria);
   }
 
@@ -95,23 +95,99 @@ export class DropGroupDirective implements OnInit {
   }
 
   private deleteCriterion(inexclusion: string[][], criterionID: string): string[][] {
-    inexclusion.forEach((idArray) => {
+    inexclusion.every((idArray) => {
       const index = idArray.indexOf(criterionID);
       if (index > -1) {
         idArray.splice(index, 1);
+        return false;
       }
+      return true;
     });
     inexclusion = inexclusion.filter((item) => item.length > 0);
     return inexclusion;
   }
-  private moveCriterionInInclusion(previousIndex: number, currentIndex: number): void {
+  private moveCriterionInInclusion(
+    criterionID: string,
+    previousIndex: number,
+    currentIndex: number
+  ): void {
     this.criteria = this.feasibilityQuery.getInclusionCriteria();
-    moveItemInArray(this.criteria, previousIndex, currentIndex);
+    this.moveCriterion(criterionID, previousIndex, currentIndex);
     this.queryProviderService.setInclusionCriteria(this.criteria);
   }
-  private moveCriterionInExclusion(previousIndex: number, currentIndex: number): void {
+  private moveCriterionInExclusion(
+    criterionID: string,
+    previousIndex: number,
+    currentIndex: number
+  ): void {
     this.criteria = this.feasibilityQuery.getExclusionCriteria();
-    moveItemInArray(this.criteria, previousIndex, currentIndex);
+    this.moveCriterion(criterionID, previousIndex, currentIndex);
     this.queryProviderService.setExclusionCriteria(this.criteria);
   }
+
+  private moveCriterion(criterionID: string, previousIndex: number, currentIndex: number): void {
+    const positionPrev = this.getPosition(this.criteria, previousIndex);
+    const positionCurr = this.getPosition(this.criteria, currentIndex);
+    let position = positionCurr;
+    if (previousIndex < currentIndex) {
+      if (positionPrev[0] < positionCurr[0]) {
+        position = [positionCurr[0] + 1, positionCurr[1]];
+      } else {
+        position = [positionCurr[0], positionCurr[1] + 1];
+      }
+      this.addCriterionToPosition(this.criteria, criterionID, position);
+      this.criteria = this.deleteCriterion(this.criteria, criterionID);
+    } else {
+      const addToInnerArray = positionPrev[1] > 0 || positionCurr[1] > 0;
+      this.criteria = this.deleteCriterion(this.criteria, criterionID);
+      this.addCriterionToPosition(this.criteria, criterionID, positionCurr, addToInnerArray);
+    }
+  }
+  private addCriterionToPosition(
+    criteria: string[][],
+    criterionID: string,
+    position: [number, number],
+    addToInnerArray?: boolean
+  ): void {
+    if (position[0] >= criteria.length) {
+      this.criteria.push([criterionID]);
+    } else {
+      if (criteria[position[0]]?.length > 1 || addToInnerArray) {
+        this.criteria[position[0]].splice(position[1], 0, criterionID);
+      } else {
+        this.criteria.splice(position[0], 0, [criterionID]);
+      }
+    }
+  }
+
+  private addCriterionToInnerArray(
+    criteria: string[][],
+    criterionID: string,
+    currentIndex: number
+  ): void {
+    const position = this.getPosition(criteria, currentIndex);
+    if (currentIndex >= criteria.length) {
+      this.criteria.push([criterionID]);
+    } else {
+      if (criteria[position[0]]?.length > 1) {
+        this.criteria[0].splice(position[1], 0, criterionID);
+      } else {
+        this.criteria.splice(position[0], 0, [criterionID]);
+      }
+    }
+  }
+
+  private getPosition(criteria: string[][], currentIndex: number): [number, number] {
+    let position: [number, number] = [0, 0];
+    let count = 0;
+    criteria.forEach((outer, outerIndex) => {
+      outer.forEach((inner, innerIndex) => {
+        if (count === currentIndex) {
+          position = [outerIndex, innerIndex];
+        }
+        count++;
+      });
+    });
+    return position;
+  }
 }