feat:add some new future

resources/js/pages/dashboards/demo.vue

@@ -1,126 +1,270 @@
 <script setup>
-import { onMounted, nextTick, ref } from 'vue'
+import { onMounted, nextTick, ref, onUnmounted } from 'vue'
 import { GridStack } from 'gridstack'
 
 import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
 import AnalysisCard from "@/components/AnalysisCard.vue";
-import CostOverview from "@/components/CostOverview.vue";
 import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
-import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
+import CostOverview from "@/components/CostOverview.vue";
+import TasksTable from "./task.vue";
+import ResourcesTable from "./resource.vue";
+import GanttChart from './gantt.vue'
 
-const ganttColumns = ref([])
 
-const generateColumnsFromData = (data) => {
-  if (!data || data.length === 0) return []
-  
-  const firstItem = data[0]
-  const columns = Object.keys(firstItem).map(key => {
-    const column = {
-      field: key,
-      headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
-      sortable: true,
-      filter: true,
-      flex: 1
-    }
+const isEditMode = ref(false)
+let grid = null
 
-    if (key === 'id') {
-      column.width = 80
-      column.flex = undefined
-    }
-
-    if (key === 'completed' && typeof firstItem[key] === 'boolean') {
-      column.width = 120
-      column.flex = undefined
-      column.cellRenderer = (params) => {
-        return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+const handleEditModeChange = (event) => {
+  if (event.detail) {
+    isEditMode.value = event.detail.isActive;
+    if (grid) {
+      if (isEditMode.value) {
+        grid.enableMove(true)
+        grid.enableResize(true)
+      } else {
+        grid.enableMove(false)
+        grid.enableResize(false)
       }
     }
-
-    if (key === 'userId') {
-      column.width = 100
-      column.flex = undefined
-    }
-
-    return column
-  })
-  
-  return columns
+  }
 }
 
-const processAPIData = (response) => {
-  const data = response.todos || response
-  ganttColumns.value = generateColumnsFromData(data)
-  return data
+const handleDeleteCard = (cardId) => {
+  const element = document.querySelector(`[data-card-id="${cardId}"]`)
+  if (element && grid) {
+    grid.removeWidget(element)
+  }
 }
 
 onMounted(async () => {
-  const grid = GridStack.init({
+  grid = GridStack.init({
     column: 12,
     cellHeight: '105',
     float: true,
     draggable: { handle: '.grid-stack-item-content' },
     resizable: true,
-    maxRow: 20,
+    disableOneColumnMode: true,
+    animate: true,
   })
 
+  grid.enableMove(false)
+  grid.enableResize(false)
+
+  window.addEventListener("crm-edit-mode-changed", handleEditModeChange)
+
   await nextTick()
 })
+
+onUnmounted(() => {
+  window.removeEventListener("crm-edit-mode-changed", handleEditModeChange)
+  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>
 
 <template>
-  <div class="grid-stack">
-    <div class="grid-stack-item" gs-w="4" gs-min-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :progress="32" />
+  <div class="grid-stack-container" :class="{ 'edit-mode-active': isEditMode }">
+    <VCol v-if="isEditMode" cols="12" class="pb-0">
+      <div class="edit-mode-banner">
+        <div class="banner-background">
+          <div class="banner-glow"></div>
+          <div class="banner-particles"></div>
+        </div>
+
+        <div class="banner-content">
+          <div class="banner-header">
+            <div class="banner-icon">
+              <VIcon icon="tabler-edit" size="24" class="edit-icon" />
+              <div class="icon-pulse"></div>
+            </div>
+            <div class="banner-text">
+              <h3 class="banner-title">✨ Edit Mode Enabled</h3>
+              <p class="banner-subtitle">
+                Customize your dashboard with drag & drop, resize, and delete features
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="banner-decorations">
+          <div class="decoration decoration-1"></div>
+          <div class="decoration decoration-2"></div>
+          <div class="decoration decoration-3"></div>
+        </div>
       </div>
-    </div>
-    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
+    </VCol>
+
+    <div class="grid-stack">
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-min-h="2" gs-max-h="2"
+        data-card-id="leads1">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads1">
+            <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 leads1" @click.stop="handleDeleteCard('leads1')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :progress="32" />
+        </div>
       </div>
-    </div>
-    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
+        data-card-id="leads2">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads2">
+            <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 leads2" @click.stop="handleDeleteCard('leads2')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
+        </div>
       </div>
-    </div>
-    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
-      <div class="grid-stack-item-content">
-        <ProjectActivityBarChart />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
+        data-card-id="leads3">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads3">
+            <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 leads3" @click.stop="handleDeleteCard('leads3')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
+        </div>
       </div>
-    </div>
-    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
-      <div class="grid-stack-item-content">
-        <AnalysisCard />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
+        data-card-id="project-activity">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move project-activity">
+            <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 project-activity" @click.stop="handleDeleteCard('project-activity')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <ProjectActivityBarChart />
+        </div>
       </div>
-    </div>
-    <div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6">
-      <div class="grid-stack-item-content">
-        <AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
-          :data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
-          :enable-search="true" height="500px" />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
+        data-card-id="analysis">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
+            <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')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <AnalysisCard />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+        data-card-id="tasks">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move tasks">
+            <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 tasks" @click.stop="handleDeleteCard('tasks')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <TasksTable />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
+        data-card-id="analysis">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
+            <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')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <AnalysisCard />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
+        data-card-id="cost-overview">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move cost-overview">
+            <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 cost-overview" @click.stop="handleDeleteCard('cost-overview')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <CostOverview />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+        data-card-id="resources">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move resources">
+            <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 resources" @click.stop="handleDeleteCard('resources')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <ResourcesTable />
+        </div>
+      </div>
+
+        <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">
+            <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 gantt-chart" @click.stop="handleDeleteCard('gantt-chart')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GanttChart />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style>
-.grid-stack-item-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.grid-stack-item-content>* {
-  flex: 1;
-  margin-bottom: 3.2rem;
-}
-
-.grid-stack-item:has(AgGridTable) {
-  height: 100vh !important;
-}
-
-.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
-  height: 100vh;
-}
+<style lang="scss">
+@import "../../../styles/overview.scss";
 </style>