fix: handle remove

Kong · Feb 11, 2025 · 1674048 · 1674048
1 parent c1da971
commit 1674048
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
@@ -66,7 +66,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "512KB"
+    "errorLimit": "600KB"
   },
   "peerDependencies": {
     "@kong-ui-public/analytics-chart": "workspace:^",

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -407,6 +407,9 @@ const addTile = () => {
 
 const onRemoveTile = (tile: GridTile<TileDefinition>) => {
   console.log('@remove-tile', tile)
+  console.log('before:', dashboardConfig.value.tiles.length)
+  dashboardConfig.value.tiles = dashboardConfig.value.tiles.filter((_, i) => i !== tile.id)
+  console.log('after:', dashboardConfig.value.tiles.length)
 }
 </script>
 

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -27,7 +27,7 @@
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
-import type { GridStackElement, GridStackNode } from 'gridstack'
+import type { GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
@@ -106,14 +106,8 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
     })
     grid.load(nodesToAdd)
   } else if (newLen < oldLen && grid) {
-    const tileToRemove = props.tiles.slice(newLen)
-    const elementsToRemove = tileToRemove.map(e => {
-      return gridContainer.value?.querySelector(`[data-id="${e.id}"]`) as GridStackElement
-    })
-    elementsToRemove.forEach(e => {
-      grid?.removeWidget(e)
-    })
-
+    await nextTick()
+    grid.compact()
   }
 })
 </script>