126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
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> |