refactor: demo page

resources/js/pages/dashboards/demo.vue

@@ -10,8 +10,8 @@ import TasksTable from "./task.vue";
 import ResourcesTable from "./resource.vue";
 import GanttChart from './gantt.vue'
 
-
 const isEditMode = ref(false)
+const autoCompact = ref(true)
 let grid = null
 
 const handleEditModeChange = (event) => {
@@ -33,6 +33,9 @@ const handleDeleteCard = (cardId) => {
   const element = document.querySelector(`[data-card-id="${cardId}"]`)
   if (element && grid) {
     grid.removeWidget(element)
+    if (autoCompact.value) {
+      grid.compact()
+    }
   }
 }
 
@@ -45,6 +48,12 @@ onMounted(async () => {
     resizable: true,
     disableOneColumnMode: true,
     animate: true,
+    columnOpts: {
+      breakpoints: [
+        { w: 768, c: 1 },
+        { w: 992, c: 12 }
+      ]
+    }
   })
 
   grid.enableMove(false)
@@ -60,22 +69,6 @@ onUnmounted(() => {
   if (grid) {
     grid.destroy(false)
   }
-  
-  setTimeout(() => {
-    if (gridContainer.value) {
-      grid = GridStack.init({
-        column: 12,
-        cellHeight: 50,
-        float: true,
-        draggable: { 
-          handle: '.grid-stack-item-content' 
-        },
-        resizable: {
-          handles: 'e, se, s, sw, w'
-        }
-      }, gridContainer.value)
-    }
-  }, 100)
 })
 </script>
 
@@ -101,6 +94,16 @@ onUnmounted(() => {
               </p>
             </div>
           </div>
+          
+          <div class="banner-controls">
+            <VSwitch
+              v-model="autoCompact"
+              label="Auto Compact"
+              class="auto-compact-switch"
+              hide-details
+              inset
+            />
+          </div>
         </div>
 
         <div class="banner-decorations">
@@ -203,13 +206,13 @@ onUnmounted(() => {
       </div>
 
       <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
-        data-card-id="analysis">
+        data-card-id="analysis2">
         <div class="grid-stack-item-content">
-          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
+          <div v-if="isEditMode" class="drag-handle" title="Move analysis2">
             <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
           </div>
           <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
-            title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
+            title="Delete analysis2" @click.stop="handleDeleteCard('analysis2')">
             <VIcon icon="tabler-trash-x" size="16" class="me-1" />
             Delete
           </VBtn>
@@ -247,7 +250,7 @@ onUnmounted(() => {
         </div>
       </div>
 
-        <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
         data-card-id="gantt-chart">
         <div class="grid-stack-item-content">
           <div v-if="isEditMode" class="drag-handle" title="Move gantt-chart">