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">

resources/js/pages/dashboards/wbs.vue

@@ -2,6 +2,22 @@
 import HC from "highcharts"
 import { ref, onMounted } from "vue"
 
+// Props for component reusability
+const props = defineProps({
+  title: {
+    type: String,
+    default: "The Germanic Language Tree"
+  },
+  backgroundColor: {
+    type: String,
+    default: ""
+  },
+  showBackground: {
+    type: Boolean,
+    default: true
+  }
+})
+
 const cssRGB = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim()
 const toHex = rgb => {
   const [r,g,b] = rgb.split(",").map(v => parseInt(v,10))
@@ -62,7 +78,7 @@ onMounted(() => {
 
 const chartOptions = ref({
   chart: { inverted: true, height: 1200, backgroundColor: 'transparent' },
-  title: { text: "The Germanic Language Tree" },
+  title: { text: props.title },
   accessibility: { point: { descriptionFormat: "{add index 1}. {toNode.id} comes from {fromNode.id}" } },
   tooltip: { outside: true },
   series: [{
@@ -133,7 +149,12 @@ const chartOptions = ref({
 </script>
 
 <template>
-  <div class="chart-container">
+  <div 
+    class="chart-container"
+    :style="{ 
+      backgroundColor: showBackground ? backgroundColor : 'transparent' 
+    }"
+  >
     <highcharts :options="chartOptions" />
   </div>
 </template>
@@ -141,7 +162,7 @@ const chartOptions = ref({
 <style scoped>
 .chart-container {
   padding: 16px;
-  background-color: transparent;
   min-height: 100vh;
+  border-radius: 8px;
 }
 </style>