97 lines
3.0 KiB
Vue
97 lines
3.0 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([
|
|
{ field: 'id', headerName: 'ID', sortable: true, filter: true, width: 80 },
|
|
{ field: 'todo', headerName: 'Task', sortable: true, filter: true, flex: 1 },
|
|
{ field: 'userId', headerName: 'User ID', sortable: true, filter: true, width: 100 },
|
|
{
|
|
field: 'completed', headerName: 'Status', sortable: true, filter: true, width: 120, cellRenderer: (params) => {
|
|
return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
|
|
}
|
|
}
|
|
])
|
|
|
|
const processAPIData = (response) => {
|
|
return response.todos || response
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const grid = GridStack.init({
|
|
column: 12,
|
|
cellHeight: '110',
|
|
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-min-w="4" gs-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="4" gs-max-h="8">
|
|
<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> |