273 lines
10 KiB
Vue
273 lines
10 KiB
Vue
<script setup>
|
|
import { onMounted, nextTick, ref, onUnmounted } from 'vue'
|
|
import { GridStack } from 'gridstack'
|
|
|
|
import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
|
|
import AnalysisCard from "@/components/AnalysisCard.vue";
|
|
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
|
|
import CostOverview from "@/components/CostOverview.vue";
|
|
import TasksTable from "./task.vue";
|
|
import ResourcesTable from "./resource.vue";
|
|
import GanttChart from './gantt.vue'
|
|
|
|
const isEditMode = ref(false)
|
|
const autoCompact = ref(true)
|
|
let grid = null
|
|
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleDeleteCard = (cardId) => {
|
|
const element = document.querySelector(`[data-card-id="${cardId}"]`)
|
|
if (element && grid) {
|
|
grid.removeWidget(element)
|
|
if (autoCompact.value) {
|
|
grid.compact()
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
grid = GridStack.init({
|
|
column: 12,
|
|
cellHeight: '105',
|
|
float: true,
|
|
draggable: { handle: '.grid-stack-item-content' },
|
|
resizable: true,
|
|
disableOneColumnMode: true,
|
|
animate: true,
|
|
columnOpts: {
|
|
breakpoints: [
|
|
{ w: 768, c: 1 },
|
|
{ w: 992, c: 12 }
|
|
]
|
|
}
|
|
})
|
|
|
|
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)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<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 class="banner-controls">
|
|
<VSwitch
|
|
v-model="autoCompact"
|
|
label="Auto Compact"
|
|
class="auto-compact-switch"
|
|
hide-details
|
|
inset
|
|
/>
|
|
</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>
|
|
</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 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 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 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 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="analysis2">
|
|
<div class="grid-stack-item-content">
|
|
<div v-if="isEditMode" class="drag-handle" title="Move analysis2">
|
|
<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 analysis2" @click.stop="handleDeleteCard('analysis2')">
|
|
<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 lang="scss">
|
|
@import "../../../styles/overview.scss";
|
|
</style> |