panel/resources/js/pages/dashboards/demo.vue

<script setup>
import { onMounted, nextTick, ref } 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';

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
    }

    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>'
      }
    }

    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
}

onMounted(async () => {
  const grid = GridStack.init({
    column: 12,
    cellHeight: '105',
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: true,
    maxRow: 20,
  })

  await nextTick()
})
</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>
    </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" />
      </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>
    </div>
    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
      <div class="grid-stack-item-content">
        <ProjectActivityBarChart />
      </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>
    </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>
    </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>