fix(platform): table drag and drop bugs (#9351)

* fix(platform): table dnd bugs * fix: unit tests * fix: test, unreachable logic, redundant var --------- Co-authored-by: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>
SAP · Feb 15, 2023 · 5a77b7b · 5a77b7b
1 parent b9dd46e
commit 5a77b7b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 45 deletions.
diff --git a/libs/cdk/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.ts b/libs/cdk/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.ts
@@ -143,40 +143,38 @@ export class DndListDirective<T> implements AfterContentInit, OnDestroy {
         const replacedItemIndex = this._closestItemIndex;
         const draggedItem = items[draggedItemIndex];
 
-        if (!replacedItemIndex) {
-            return;
-        }
-
-        if (draggedItemIndex !== replacedItemIndex) {
-            if (draggedItemIndex < replacedItemIndex) {
-                for (let i = draggedItemIndex; i < replacedItemIndex; i++) {
-                    items[i] = items[i + 1];
-                }
-            } else {
-                for (let i = draggedItemIndex; i > replacedItemIndex; i--) {
-                    items[i] = items[i - 1];
+        if (replacedItemIndex || replacedItemIndex === 0) {
+            if (draggedItemIndex !== replacedItemIndex) {
+                if (draggedItemIndex < replacedItemIndex) {
+                    for (let i = draggedItemIndex; i < replacedItemIndex; i++) {
+                        items[i] = items[i + 1];
+                    }
+                } else {
+                    for (let i = draggedItemIndex; i > replacedItemIndex; i--) {
+                        items[i] = items[i - 1];
+                    }
                 }
-            }
 
-            /** Replacing items */
-            items[replacedItemIndex] = draggedItem;
+                /** Replacing items */
+                items[replacedItemIndex] = draggedItem;
 
-            this.itemsChange.emit(items);
-        }
+                this.itemsChange.emit(items);
+            }
 
-        this.itemDropped.emit({
-            replacedItemIndex,
-            draggedItemIndex,
-            items
-        });
+            this.itemDropped.emit({
+                replacedItemIndex,
+                draggedItemIndex,
+                items
+            });
 
-        this._removeAllLines();
-        this._removeAllReplaceIndicators();
+            this._removeAllLines();
+            this._removeAllReplaceIndicators();
 
-        /** Reset */
-        this._elementsCoordinates = [];
-        this._closestItemIndex = null;
-        this._closestItemPosition = null;
+            /** Reset */
+            this._elementsCoordinates = [];
+            this._closestItemIndex = null;
+            this._closestItemPosition = null;
+        }
     }
 
     /** @hidden */

diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
@@ -274,7 +274,7 @@ const ITEMS: ExampleItem[] = [
                 children: []
             },
             {
-                name: 'Other1',
+                name: 'Other 4',
                 children: [
                     {
                         name: 'Camcorder View',
@@ -300,10 +300,10 @@ const ITEMS: ExampleItem[] = [
                         verified: true
                     },
                     {
-                        name: 'Other 2',
+                        name: 'Other 5',
                         children: [
                             {
-                                name: 'Other 1',
+                                name: 'Other 6',
                                 children: [
                                     {
                                         name: 'Beam Breaker B-1',

diff --git a/libs/platform/src/lib/table/table.component.spec.ts b/libs/platform/src/lib/table/table.component.spec.ts
@@ -1215,8 +1215,8 @@ class TreeTableDataProviderMock extends TableDataProvider<SourceTreeItem> {
                 calculateTableElementsMetaData();
 
                 expect(tableComponent._tableRows[0].expanded).toBeTrue();
-                expect(tableComponent._tableRows[2].level).toEqual(0);
-                expect(tableComponent._tableRows[3].level).toEqual(1);
+                expect(tableComponent._tableRows[2].level).toEqual(1);
+                expect(tableComponent._tableRows[3].level).toEqual(2);
             });
 
             it('should prevent from dropping row inside itself', () => {
@@ -1332,7 +1332,7 @@ class TreeTableDataProviderMock extends TableDataProvider<SourceTreeItem> {
 
                 fixture.detectChanges();
 
-                expect(draggedRow).toEqual(tableComponent._tableRowsVisible[5]);
+                expect(draggedRow.parent).toEqual(tableComponent._tableRowsVisible[5]);
             });
         });
     });

diff --git a/libs/platform/src/lib/table/table.component.ts b/libs/platform/src/lib/table/table.component.ts
@@ -1602,8 +1602,8 @@ export class TableComponent<T = any> extends Table<T> implements AfterViewInit,
 
     /** @hidden */
     private _dragDropUpdateDropRowAttributes(dragRow: TableRow, dropRow: TableRow): void {
-        dragRow.parent = dropRow.parent;
-        dragRow.level = dropRow.level;
+        dragRow.parent = dropRow;
+        dragRow.level = dropRow.level + 1;
 
         if (!this._isTreeRow(dropRow)) {
             dropRow.type = TableRowType.TREE;
@@ -1618,8 +1618,6 @@ export class TableComponent<T = any> extends Table<T> implements AfterViewInit,
     /** @hidden */
     private _dragDropRearrangeTreeRows(dragRow: TableRow, dropRow: TableRow): void {
         const allRows = this._tableRows;
-        let rowsBefore: any;
-        let rowsAfter: any;
 
         const dragRowIndex = allRows.findIndex((row) => row === dragRow);
         const dragRowChildren = this._findRowChildren(dragRow);
@@ -1629,13 +1627,8 @@ export class TableComponent<T = any> extends Table<T> implements AfterViewInit,
         const dropRowIndex = allRows.findIndex((row) => row === dropRow);
         const dropRowChildren = this._findRowChildren(dropRow);
 
-        if (dragRowIndex > dropRowIndex) {
-            rowsBefore = allRows.slice(0, dropRowChildren.length + 1 - dropRowIndex);
-            rowsAfter = allRows.slice(dropRowChildren.length + 1 - dropRowIndex);
-        } else {
-            rowsBefore = allRows.slice(0, dropRowIndex + dropRowChildren.length + 1);
-            rowsAfter = allRows.slice(dropRowIndex + dropRowChildren.length + 1);
-        }
+        const rowsBefore = allRows.slice(0, dropRowIndex + dropRowChildren.length + 1);
+        const rowsAfter = allRows.slice(dropRowIndex + dropRowChildren.length + 1);
 
         this._tableRows = [...rowsBefore, ...rowsToMove, ...rowsAfter];
     }