feat:add some new future
This commit is contained in:
@@ -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>
|
||||
217
resources/js/pages/dashboards/resource.vue
Normal file
217
resources/js/pages/dashboards/resource.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
|
||||
|
||||
const props = defineProps({
|
||||
apiUrl: {
|
||||
type: String,
|
||||
default: 'http://megategra.com:8001/dev/data/resources'
|
||||
},
|
||||
tableId: {
|
||||
type: String,
|
||||
default: 'resources-table'
|
||||
},
|
||||
tableTitle: {
|
||||
type: String,
|
||||
default: 'Resource Management'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
},
|
||||
enableExport: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableDelete: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const ganttColumns = ref([])
|
||||
|
||||
const generateColumnsFromData = (data, maxCellTextLength = 30) => {
|
||||
if (!data || data.length === 0) return []
|
||||
|
||||
const firstItem = data[0]
|
||||
const sampleSize = Math.min(10, data.length)
|
||||
|
||||
const columns = Object.keys(firstItem).map(key => {
|
||||
const sampleValues = data.slice(0, sampleSize)
|
||||
.map(item => item[key])
|
||||
.filter(val => val !== undefined && val !== null)
|
||||
|
||||
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.hide = true
|
||||
column.width = 0
|
||||
column.flex = 0
|
||||
column.suppressColumnsToolPanel = true
|
||||
column.suppressHeaderMenuButton = true
|
||||
return column
|
||||
}
|
||||
|
||||
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>'
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
if (key === 'userId') {
|
||||
column.width = 100
|
||||
column.flex = undefined
|
||||
return column
|
||||
}
|
||||
|
||||
const isDateField = (val) => {
|
||||
if (typeof val !== 'string') return false
|
||||
const datePatterns = [
|
||||
/^\d{4}-\d{2}-\d{2}/,
|
||||
/T\d{2}:\d{2}:\d{2}/,
|
||||
/^\d{2}\/\d{2}\/\d{4}/,
|
||||
/^\d{1,2}-\d{1,2}-\d{4}/
|
||||
]
|
||||
return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
|
||||
}
|
||||
|
||||
const hasLongText = sampleValues.some(val =>
|
||||
typeof val === 'string' && val.length > maxCellTextLength
|
||||
)
|
||||
|
||||
const firstValue = sampleValues[0]
|
||||
|
||||
if (isDateField(firstValue)) {
|
||||
column.width = 140
|
||||
column.valueFormatter = (params) => {
|
||||
if (!params.value) return ''
|
||||
try {
|
||||
const date = new Date(params.value)
|
||||
if (isNaN(date.getTime())) return String(params.value)
|
||||
return date.toISOString().split('T')[0]
|
||||
} catch (e) {
|
||||
return String(params.value)
|
||||
}
|
||||
}
|
||||
column.tooltipValueGetter = (params) => {
|
||||
if (!params.value) return ''
|
||||
try {
|
||||
const date = new Date(params.value)
|
||||
return isNaN(date.getTime()) ?
|
||||
String(params.value) :
|
||||
date.toLocaleString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
} catch (e) {
|
||||
return String(params.value)
|
||||
}
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
if (hasLongText) {
|
||||
column.flex = 1
|
||||
column.minWidth = 150
|
||||
column.maxWidth = 300
|
||||
column.cellRenderer = 'LongTextCellRenderer'
|
||||
column.cellRendererParams = {
|
||||
maxLength: maxCellTextLength
|
||||
}
|
||||
column.tooltipField = key
|
||||
return column
|
||||
}
|
||||
|
||||
if (typeof firstValue === 'number') {
|
||||
column.filter = 'agNumberColumnFilter'
|
||||
column.width = 120
|
||||
column.valueFormatter = (params) => {
|
||||
if (typeof params.value !== 'number') return params.value || ''
|
||||
return params.value.toLocaleString('en-US')
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
column.flex = 1
|
||||
column.minWidth = 100
|
||||
column.maxWidth = 250
|
||||
|
||||
return column
|
||||
}).filter(col => col.field !== 'action')
|
||||
|
||||
return columns
|
||||
}
|
||||
|
||||
const processAPIData = (response) => {
|
||||
const rawData = response?.data?.data || response?.data || []
|
||||
|
||||
const data = rawData.map((item, index) => {
|
||||
const source = item._source || item
|
||||
return {
|
||||
id: item._id || item.id || `resource_${Date.now()}_${index}`,
|
||||
name: source.name || 'Unnamed',
|
||||
rate: parseFloat(source.rate) || 0,
|
||||
}
|
||||
})
|
||||
|
||||
ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
|
||||
if (col.field === 'name') {
|
||||
return {
|
||||
...col,
|
||||
flex: 2,
|
||||
minWidth: 200,
|
||||
maxWidth: 500,
|
||||
wrapText: true,
|
||||
autoHeight: true,
|
||||
cellStyle: {
|
||||
whiteSpace: 'normal',
|
||||
lineHeight: '1.2',
|
||||
wordWrap: 'break-word'
|
||||
},
|
||||
tooltipField: 'name'
|
||||
}
|
||||
}
|
||||
return col
|
||||
})
|
||||
return data
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AgGridTable
|
||||
:columns="ganttColumns"
|
||||
:api-url="apiUrl"
|
||||
:data-processor="processAPIData"
|
||||
:enable-export="enableExport"
|
||||
:enable-edit="enableEdit"
|
||||
:enable-delete="enableDelete"
|
||||
:enable-search="enableSearch"
|
||||
:height="height"
|
||||
:table-id="tableId"
|
||||
:table-title="tableTitle"
|
||||
/>
|
||||
</template>
|
||||
213
resources/js/pages/dashboards/task.vue
Normal file
213
resources/js/pages/dashboards/task.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
|
||||
|
||||
const props = defineProps({
|
||||
apiUrl: {
|
||||
type: String,
|
||||
default: 'http://megategra.com:8001/dev/data/tasks'
|
||||
},
|
||||
tableId: {
|
||||
type: String,
|
||||
default: 'tasks-table'
|
||||
},
|
||||
tableTitle: {
|
||||
type: String,
|
||||
default: 'Tasks Management'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
},
|
||||
enableExport: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableDelete: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const ganttColumns = ref([])
|
||||
|
||||
const generateColumnsFromData = (data, maxCellTextLength = 30) => {
|
||||
if (!data || data.length === 0) return []
|
||||
|
||||
const firstItem = data[0]
|
||||
const sampleSize = Math.min(10, data.length)
|
||||
|
||||
const columns = Object.keys(firstItem).map(key => {
|
||||
const sampleValues = data.slice(0, sampleSize)
|
||||
.map(item => item[key])
|
||||
.filter(val => val !== undefined && val !== null)
|
||||
|
||||
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.hide = true
|
||||
column.width = 0
|
||||
column.flex = 0
|
||||
column.suppressColumnsToolPanel = true
|
||||
column.suppressHeaderMenuButton = true
|
||||
return column
|
||||
}
|
||||
|
||||
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>'
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
if (key === 'userId') {
|
||||
column.width = 100
|
||||
column.flex = undefined
|
||||
return column
|
||||
}
|
||||
|
||||
const isDateField = (val) => {
|
||||
if (typeof val !== 'string') return false
|
||||
const datePatterns = [
|
||||
/^\d{4}-\d{2}-\d{2}/,
|
||||
/T\d{2}:\d{2}:\d{2}/,
|
||||
/^\d{2}\/\d{2}\/\d{4}/,
|
||||
/^\d{1,2}-\d{1,2}-\d{4}/
|
||||
]
|
||||
return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
|
||||
}
|
||||
|
||||
const hasLongText = sampleValues.some(val =>
|
||||
typeof val === 'string' && val.length > maxCellTextLength
|
||||
)
|
||||
|
||||
const firstValue = sampleValues[0]
|
||||
|
||||
if (isDateField(firstValue)) {
|
||||
column.width = 140
|
||||
column.valueFormatter = (params) => {
|
||||
if (!params.value) return ''
|
||||
try {
|
||||
const date = new Date(params.value)
|
||||
if (isNaN(date.getTime())) return String(params.value)
|
||||
return date.toISOString().split('T')[0]
|
||||
} catch (e) {
|
||||
return String(params.value)
|
||||
}
|
||||
}
|
||||
column.tooltipValueGetter = (params) => {
|
||||
if (!params.value) return ''
|
||||
try {
|
||||
const date = new Date(params.value)
|
||||
return isNaN(date.getTime()) ?
|
||||
String(params.value) :
|
||||
date.toLocaleString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
} catch (e) {
|
||||
return String(params.value)
|
||||
}
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
if (hasLongText) {
|
||||
column.flex = 1
|
||||
column.minWidth = 150
|
||||
column.maxWidth = 300
|
||||
column.cellRenderer = 'LongTextCellRenderer'
|
||||
column.cellRendererParams = {
|
||||
maxLength: maxCellTextLength
|
||||
}
|
||||
column.tooltipField = key
|
||||
return column
|
||||
}
|
||||
|
||||
if (typeof firstValue === 'number') {
|
||||
column.filter = 'agNumberColumnFilter'
|
||||
column.width = 120
|
||||
column.valueFormatter = (params) => {
|
||||
if (typeof params.value !== 'number') return params.value || ''
|
||||
return params.value.toLocaleString('en-US')
|
||||
}
|
||||
return column
|
||||
}
|
||||
|
||||
column.flex = 1
|
||||
column.minWidth = 100
|
||||
column.maxWidth = 250
|
||||
|
||||
return column
|
||||
}).filter(col => col.field !== 'action')
|
||||
|
||||
return columns
|
||||
}
|
||||
|
||||
const processAPIData = (response) => {
|
||||
const rawData = response?.data?.data || response?.data || []
|
||||
|
||||
const data = rawData.map((item, index) => {
|
||||
const source = item._source || item
|
||||
return {
|
||||
id: item._id || item.id || `task_${Date.now()}_${index}`,
|
||||
name: source.name || 'Unnamed',
|
||||
complete: source.complete,
|
||||
effort: parseFloat(source.effort) || 0,
|
||||
effortleft: parseFloat(source.effortleft) || 0,
|
||||
start: source.start,
|
||||
end: source.end,
|
||||
}
|
||||
})
|
||||
|
||||
ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
|
||||
if (col.field === 'name') {
|
||||
return {
|
||||
...col,
|
||||
flex: 2,
|
||||
minWidth: 200,
|
||||
maxWidth: 500,
|
||||
wrapText: true,
|
||||
autoHeight: true,
|
||||
cellStyle: {
|
||||
whiteSpace: 'normal',
|
||||
lineHeight: '1.2',
|
||||
wordWrap: 'break-word'
|
||||
},
|
||||
tooltipField: 'name'
|
||||
}
|
||||
}
|
||||
return col
|
||||
})
|
||||
|
||||
return data
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AgGridTable :columns="ganttColumns" :api-url="apiUrl" :data-processor="processAPIData" :enable-export="enableExport"
|
||||
:enable-edit="enableEdit" :enable-delete="enableDelete" :enable-search="enableSearch" :height="height"
|
||||
:table-id="tableId" :table-title="tableTitle" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user