1261 lines
37 KiB
Vue
1261 lines
37 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue'
|
||
|
|
import { gantt } from 'dhtmlx-gantt'
|
||
|
|
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
|
||
|
|
|
||
|
|
// Reactive data
|
||
|
|
const ganttContainer = ref(null)
|
||
|
|
const isLoading = ref(true)
|
||
|
|
const selectedTask = ref(null)
|
||
|
|
const showTaskDetails = ref(false)
|
||
|
|
const showResourcePanel = ref(false)
|
||
|
|
const showFilterPanel = ref(false)
|
||
|
|
const currentView = ref('month')
|
||
|
|
const searchQuery = ref('')
|
||
|
|
const snackbar = ref(false)
|
||
|
|
const snackbarText = ref('')
|
||
|
|
|
||
|
|
// Sample data with proper date format
|
||
|
|
const projectData = ref({
|
||
|
|
tasks: {
|
||
|
|
data: [
|
||
|
|
{ id: 1, text: "Software Development Project", start_date: "01-01-2024", duration: 30, progress: 0.6, open: true, priority: "high", resource: "team1" },
|
||
|
|
{ id: 2, text: "Requirements Analysis", start_date: "01-01-2024", duration: 5, progress: 0.4, parent: 1, priority: "medium", resource: "analyst1" },
|
||
|
|
{ id: 3, text: "Architecture Design", start_date: "06-01-2024", duration: 7, progress: 0.6, parent: 1, priority: "high", resource: "architect1" },
|
||
|
|
{ id: 4, text: "Frontend Development", start_date: "13-01-2024", duration: 10, progress: 0.8, parent: 1, priority: "medium", resource: "developer1" },
|
||
|
|
{ id: 5, text: "Backend Development", start_date: "13-01-2024", duration: 12, progress: 0.7, parent: 1, priority: "medium", resource: "developer2" },
|
||
|
|
{ id: 6, text: "Testing & Debugging", start_date: "25-01-2024", duration: 5, progress: 0.3, parent: 1, priority: "low", resource: "tester1" },
|
||
|
|
{ id: 7, text: "Documentation", start_date: "30-01-2024", duration: 3, progress: 0.1, parent: 1, priority: "low", resource: "writer1" },
|
||
|
|
{ id: 8, text: "Marketing Campaign", start_date: "15-01-2024", duration: 20, progress: 0.5, open: true, priority: "medium", resource: "team2" },
|
||
|
|
{ id: 9, text: "Market Research", start_date: "15-01-2024", duration: 5, progress: 0.8, parent: 8, priority: "high", resource: "researcher1" },
|
||
|
|
{ id: 10, text: "Campaign Design", start_date: "20-01-2024", duration: 7, progress: 0.6, parent: 8, priority: "medium", resource: "designer1" },
|
||
|
|
{ id: 11, text: "Campaign Execution", start_date: "27-01-2024", duration: 8, progress: 0.2, parent: 8, priority: "medium", resource: "marketer1" }
|
||
|
|
],
|
||
|
|
links: [
|
||
|
|
{ id: 1, source: 2, target: 3, type: "0" },
|
||
|
|
{ id: 2, source: 3, target: 4, type: "0" },
|
||
|
|
{ id: 3, source: 3, target: 5, type: "0" },
|
||
|
|
{ id: 4, source: 4, target: 6, type: "0" },
|
||
|
|
{ id: 5, source: 5, target: 6, type: "0" },
|
||
|
|
{ id: 6, source: 6, target: 7, type: "0" },
|
||
|
|
{ id: 7, source: 9, target: 10, type: "0" },
|
||
|
|
{ id: 8, source: 10, target: 11, type: "0" }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
resources: [
|
||
|
|
{ id: "team1", name: "Development Team 1", capacity: 100 },
|
||
|
|
{ id: "team2", name: "Marketing Team", capacity: 80 },
|
||
|
|
{ id: "analyst1", name: "Senior Analyst", capacity: 100 },
|
||
|
|
{ id: "architect1", name: "Software Architect", capacity: 100 },
|
||
|
|
{ id: "developer1", name: "Frontend Developer", capacity: 100 },
|
||
|
|
{ id: "developer2", name: "Backend Developer", capacity: 100 },
|
||
|
|
{ id: "tester1", name: "QA Tester", capacity: 100 },
|
||
|
|
{ id: "writer1", name: "Technical Writer", capacity: 100 },
|
||
|
|
{ id: "researcher1", name: "Market Researcher", capacity: 100 },
|
||
|
|
{ id: "designer1", name: "Graphic Designer", capacity: 100 },
|
||
|
|
{ id: "marketer1", name: "Marketing Specialist", capacity: 100 }
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
// Computed properties
|
||
|
|
const filteredTasks = computed(() => {
|
||
|
|
if (!searchQuery.value) return projectData.value.tasks.data
|
||
|
|
|
||
|
|
return projectData.value.tasks.data.filter(task =>
|
||
|
|
task.text.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
|
|
)
|
||
|
|
})
|
||
|
|
|
||
|
|
const priorityOptions = [
|
||
|
|
{ value: 'high', label: 'High', color: 'error', icon: 'tabler-arrow-up' },
|
||
|
|
{ value: 'medium', label: 'Medium', color: 'warning', icon: 'tabler-arrow-right' },
|
||
|
|
{ value: 'low', label: 'Low', color: 'success', icon: 'tabler-arrow-down' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const viewOptions = [
|
||
|
|
{ value: 'day', label: 'Daily', icon: 'tabler-calendar' },
|
||
|
|
{ value: 'week', label: 'Weekly', icon: 'tabler-calendar-week' },
|
||
|
|
{ value: 'month', label: 'Monthly', icon: 'tabler-calendar-month' },
|
||
|
|
{ value: 'quarter', label: 'Quarterly', icon: 'tabler-calendar-time' },
|
||
|
|
{ value: 'year', label: 'Yearly', icon: 'tabler-calendar-stats' }
|
||
|
|
]
|
||
|
|
|
||
|
|
// Watch for search changes
|
||
|
|
watch(searchQuery, (newValue) => {
|
||
|
|
performSearch()
|
||
|
|
})
|
||
|
|
|
||
|
|
// Gantt configuration
|
||
|
|
const initGantt = () => {
|
||
|
|
// Set date format
|
||
|
|
gantt.config.date_format = "%d-%m-%Y"
|
||
|
|
gantt.config.xml_date = "%d-%m-%Y"
|
||
|
|
|
||
|
|
// Configure scale
|
||
|
|
gantt.config.scale_unit = currentView.value
|
||
|
|
gantt.config.date_scale = "%F %Y"
|
||
|
|
|
||
|
|
// Configure subscales based on view
|
||
|
|
updateViewConfig(currentView.value)
|
||
|
|
|
||
|
|
// Enable features
|
||
|
|
gantt.config.drag_progress = true
|
||
|
|
gantt.config.drag_resize = true
|
||
|
|
gantt.config.drag_move = true
|
||
|
|
gantt.config.drag_links = true
|
||
|
|
gantt.config.show_links = true
|
||
|
|
gantt.config.show_progress = true
|
||
|
|
gantt.config.show_chart = true
|
||
|
|
gantt.config.show_grid = true
|
||
|
|
gantt.config.auto_scheduling = false
|
||
|
|
gantt.config.auto_scheduling_strict = false
|
||
|
|
|
||
|
|
// Prevent task overlapping issues
|
||
|
|
gantt.config.work_time = true
|
||
|
|
gantt.config.correct_work_time = true
|
||
|
|
|
||
|
|
// Custom columns
|
||
|
|
gantt.config.columns = [
|
||
|
|
{ name: "text", label: "Task Name", width: 200, tree: true },
|
||
|
|
{
|
||
|
|
name: "start_date",
|
||
|
|
label: "Start Date",
|
||
|
|
align: "center",
|
||
|
|
width: 100,
|
||
|
|
template: function(obj) {
|
||
|
|
if (!obj.start_date) return ""
|
||
|
|
try {
|
||
|
|
return gantt.date.date_to_str("%d/%m/%Y")(gantt.date.str_to_date("%d-%m-%Y")(obj.start_date))
|
||
|
|
} catch (e) {
|
||
|
|
return obj.start_date
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ name: "duration", label: "Duration (Days)", align: "center", width: 80 },
|
||
|
|
{
|
||
|
|
name: "progress",
|
||
|
|
label: "Progress",
|
||
|
|
align: "center",
|
||
|
|
width: 100,
|
||
|
|
template: function(obj) {
|
||
|
|
return Math.round((obj.progress || 0) * 100) + "%"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "priority",
|
||
|
|
label: "Priority",
|
||
|
|
align: "center",
|
||
|
|
width: 100,
|
||
|
|
template: function(obj) {
|
||
|
|
const priority = priorityOptions.find(p => p.value === obj.priority)
|
||
|
|
if (!priority) return obj.priority || ''
|
||
|
|
return `<span style="color: var(--v-theme-${priority.color}); font-weight: bold;">${priority.label}</span>`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "resource",
|
||
|
|
label: "Resource",
|
||
|
|
align: "center",
|
||
|
|
width: 120,
|
||
|
|
template: function(obj) {
|
||
|
|
const resource = projectData.value.resources.find(r => r.id === obj.resource)
|
||
|
|
return resource ? resource.name : (obj.resource || '')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
// Templates
|
||
|
|
gantt.templates.task_text = function(start, end, task) {
|
||
|
|
return `<span title='${task.text || ""}'>${task.text || ""}</span>`
|
||
|
|
}
|
||
|
|
|
||
|
|
gantt.templates.progress_text = function(start, end, task) {
|
||
|
|
return Math.round((task.progress || 0) * 100) + "%"
|
||
|
|
}
|
||
|
|
|
||
|
|
gantt.templates.task_class = function(start, end, task) {
|
||
|
|
let classes = []
|
||
|
|
if (task.priority === 'high') classes.push('high-priority')
|
||
|
|
if (task.priority === 'medium') classes.push('medium-priority')
|
||
|
|
if (task.priority === 'low') classes.push('low-priority')
|
||
|
|
classes.push('gantt-task-rounded')
|
||
|
|
return classes.join(' ')
|
||
|
|
}
|
||
|
|
|
||
|
|
gantt.templates.tooltip_text = function(start, end, task) {
|
||
|
|
const resource = projectData.value.resources.find(r => r.id === task.resource)
|
||
|
|
const startDate = task.start_date || "Not set"
|
||
|
|
const duration = task.duration || 0
|
||
|
|
const progress = Math.round((task.progress || 0) * 100)
|
||
|
|
const priority = task.priority || "Not set"
|
||
|
|
const resourceName = resource ? resource.name : (task.resource || "Not assigned")
|
||
|
|
|
||
|
|
return `<b>${task.text || "Unnamed Task"}</b><br/>
|
||
|
|
Start: ${startDate}<br/>
|
||
|
|
Duration: ${duration} days<br/>
|
||
|
|
Progress: ${progress}%<br/>
|
||
|
|
Priority: ${priority}<br/>
|
||
|
|
Resource: ${resourceName}`
|
||
|
|
}
|
||
|
|
|
||
|
|
// Events
|
||
|
|
gantt.attachEvent("onTaskClick", function(id, e) {
|
||
|
|
try {
|
||
|
|
const task = gantt.getTask(id)
|
||
|
|
if (task) {
|
||
|
|
selectedTask.value = { ...task } // Create a copy to avoid direct mutation
|
||
|
|
showTaskDetails.value = true
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error selecting task:", error)
|
||
|
|
showSnackbar('Error selecting task', 'error')
|
||
|
|
}
|
||
|
|
return true
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.attachEvent("onAfterTaskUpdate", function(id, task) {
|
||
|
|
showSnackbar('Task updated successfully!')
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.attachEvent("onAfterLinkAdd", function(id, link) {
|
||
|
|
showSnackbar('Link added!')
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.attachEvent("onAfterTaskAdd", function(id, task) {
|
||
|
|
showSnackbar('Task added!')
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.attachEvent("onAfterTaskDelete", function(id) {
|
||
|
|
showSnackbar('Task deleted!')
|
||
|
|
if (selectedTask.value && selectedTask.value.id === id) {
|
||
|
|
selectedTask.value = null
|
||
|
|
showTaskDetails.value = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// Error handling
|
||
|
|
gantt.attachEvent("onTaskDragEnd", function(id, mode, e) {
|
||
|
|
try {
|
||
|
|
gantt.updateTask(id)
|
||
|
|
return true
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error updating task:", error)
|
||
|
|
showSnackbar('Error updating task', 'error')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
try {
|
||
|
|
gantt.init(ganttContainer.value)
|
||
|
|
gantt.parse(projectData.value)
|
||
|
|
isLoading.value = false
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error initializing Gantt:", error)
|
||
|
|
showSnackbar('Error initializing Gantt chart', 'error')
|
||
|
|
isLoading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Helper function for view configuration
|
||
|
|
const updateViewConfig = (view) => {
|
||
|
|
gantt.config.scale_unit = view
|
||
|
|
|
||
|
|
// Clear existing subscales
|
||
|
|
gantt.config.subscales = []
|
||
|
|
|
||
|
|
// Configure subscales based on view
|
||
|
|
switch (view) {
|
||
|
|
case 'day':
|
||
|
|
gantt.config.date_scale = "%d %F %Y"
|
||
|
|
gantt.config.subscales = [
|
||
|
|
{ unit: "hour", step: 6, date: "%H:00" }
|
||
|
|
]
|
||
|
|
break
|
||
|
|
case 'week':
|
||
|
|
gantt.config.date_scale = "Week %W, %F %Y"
|
||
|
|
gantt.config.subscales = [
|
||
|
|
{ unit: "day", step: 1, date: "%d %M" }
|
||
|
|
]
|
||
|
|
break
|
||
|
|
case 'month':
|
||
|
|
gantt.config.date_scale = "%F %Y"
|
||
|
|
gantt.config.subscales = [
|
||
|
|
{ unit: "week", step: 1, date: "Week %W" }
|
||
|
|
]
|
||
|
|
break
|
||
|
|
case 'quarter':
|
||
|
|
gantt.config.date_scale = "%Y"
|
||
|
|
gantt.config.subscales = [
|
||
|
|
{ unit: "month", step: 1, date: "%F" }
|
||
|
|
]
|
||
|
|
break
|
||
|
|
case 'year':
|
||
|
|
gantt.config.date_scale = "%Y"
|
||
|
|
gantt.config.subscales = [
|
||
|
|
{ unit: "quarter", step: 1, date: "Q%q" }
|
||
|
|
]
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Helper function for snackbar
|
||
|
|
const showSnackbar = (message, type = 'success') => {
|
||
|
|
snackbarText.value = message
|
||
|
|
snackbar.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
// Task management functions
|
||
|
|
const addTask = () => {
|
||
|
|
try {
|
||
|
|
const today = new Date()
|
||
|
|
const formattedDate = gantt.date.date_to_str("%d-%m-%Y")(today)
|
||
|
|
|
||
|
|
const newTask = {
|
||
|
|
id: gantt.uid(),
|
||
|
|
text: "New Task",
|
||
|
|
start_date: formattedDate,
|
||
|
|
duration: 1,
|
||
|
|
progress: 0,
|
||
|
|
priority: "medium",
|
||
|
|
resource: projectData.value.resources[0]?.id || ""
|
||
|
|
}
|
||
|
|
|
||
|
|
gantt.addTask(newTask)
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error adding task:", error)
|
||
|
|
showSnackbar('Error adding task', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const deleteTask = () => {
|
||
|
|
if (selectedTask.value) {
|
||
|
|
try {
|
||
|
|
gantt.deleteTask(selectedTask.value.id)
|
||
|
|
selectedTask.value = null
|
||
|
|
showTaskDetails.value = false
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error deleting task:", error)
|
||
|
|
showSnackbar('Error deleting task', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const updateTask = (task) => {
|
||
|
|
try {
|
||
|
|
if (!task || !task.id) {
|
||
|
|
throw new Error("Invalid task data")
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validate required fields
|
||
|
|
if (!task.text || task.text.trim() === '') {
|
||
|
|
task.text = "Unnamed Task"
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!task.start_date) {
|
||
|
|
const today = new Date()
|
||
|
|
task.start_date = gantt.date.date_to_str("%d-%m-%Y")(today)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!task.duration || task.duration < 1) {
|
||
|
|
task.duration = 1
|
||
|
|
}
|
||
|
|
|
||
|
|
if (task.progress < 0) task.progress = 0
|
||
|
|
if (task.progress > 1) task.progress = 1
|
||
|
|
|
||
|
|
gantt.updateTask(task.id, task)
|
||
|
|
|
||
|
|
// Update selectedTask to reflect changes
|
||
|
|
selectedTask.value = { ...task }
|
||
|
|
showTaskDetails.value = false
|
||
|
|
showSnackbar('Task updated successfully!')
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error updating task:", error)
|
||
|
|
showSnackbar('Error updating task', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// View management
|
||
|
|
const changeView = (view) => {
|
||
|
|
try {
|
||
|
|
currentView.value = view
|
||
|
|
updateViewConfig(view)
|
||
|
|
gantt.render()
|
||
|
|
showSnackbar(`View changed to ${view}`)
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error changing view:", error)
|
||
|
|
showSnackbar('Error changing view', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Export functions with error handling
|
||
|
|
const exportToPDF = () => {
|
||
|
|
try {
|
||
|
|
if (gantt.exportToPDF) {
|
||
|
|
gantt.exportToPDF({
|
||
|
|
name: "project-gantt.pdf",
|
||
|
|
header: "<h1>Project Gantt Chart</h1>",
|
||
|
|
footer: "<div>Generated on " + new Date().toLocaleDateString('en-US') + "</div>"
|
||
|
|
})
|
||
|
|
showSnackbar('PDF export started')
|
||
|
|
} else {
|
||
|
|
showSnackbar('PDF export not available', 'error')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error exporting to PDF:", error)
|
||
|
|
showSnackbar('Error exporting to PDF', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const exportToPNG = () => {
|
||
|
|
try {
|
||
|
|
if (gantt.exportToPNG) {
|
||
|
|
gantt.exportToPNG({
|
||
|
|
name: "project-gantt.png"
|
||
|
|
})
|
||
|
|
showSnackbar('PNG export started')
|
||
|
|
} else {
|
||
|
|
showSnackbar('PNG export not available', 'error')
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error exporting to PNG:", error)
|
||
|
|
showSnackbar('Error exporting to PNG', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const exportToExcel = () => {
|
||
|
|
try {
|
||
|
|
const data = gantt.getTaskByTime()
|
||
|
|
// Create a simple CSV export as fallback
|
||
|
|
const csvContent = "data:text/csv;charset=utf-8," +
|
||
|
|
"Task Name,Start Date,Duration,Progress,Priority,Resource\n" +
|
||
|
|
data.map(task => {
|
||
|
|
const resource = projectData.value.resources.find(r => r.id === task.resource)
|
||
|
|
return `"${task.text}","${task.start_date}","${task.duration}","${Math.round((task.progress || 0) * 100)}%","${task.priority}","${resource ? resource.name : task.resource || ''}"`
|
||
|
|
}).join("\n")
|
||
|
|
|
||
|
|
const encodedUri = encodeURI(csvContent)
|
||
|
|
const link = document.createElement("a")
|
||
|
|
link.setAttribute("href", encodedUri)
|
||
|
|
link.setAttribute("download", "project-gantt.csv")
|
||
|
|
document.body.appendChild(link)
|
||
|
|
link.click()
|
||
|
|
document.body.removeChild(link)
|
||
|
|
|
||
|
|
showSnackbar('Excel/CSV export completed')
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error exporting to Excel:", error)
|
||
|
|
showSnackbar('Error exporting to Excel', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Search functionality with error handling
|
||
|
|
const performSearch = () => {
|
||
|
|
try {
|
||
|
|
if (!gantt.getTaskByTime) {
|
||
|
|
console.warn("Gantt not fully initialized for search")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (searchQuery.value && searchQuery.value.trim() !== '') {
|
||
|
|
const tasks = gantt.getTaskByTime()
|
||
|
|
const filtered = tasks.filter(task =>
|
||
|
|
task.text && task.text.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
|
|
)
|
||
|
|
|
||
|
|
// Clear previous highlights
|
||
|
|
gantt.eachTask(function(task) {
|
||
|
|
gantt.removeTaskClass(task.id, "search-highlight")
|
||
|
|
})
|
||
|
|
|
||
|
|
// Highlight filtered tasks
|
||
|
|
filtered.forEach(task => {
|
||
|
|
gantt.addTaskClass(task.id, "search-highlight")
|
||
|
|
})
|
||
|
|
|
||
|
|
if (filtered.length === 0) {
|
||
|
|
showSnackbar('No tasks found matching search criteria', 'warning')
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// Clear all highlights when search is empty
|
||
|
|
gantt.eachTask(function(task) {
|
||
|
|
gantt.removeTaskClass(task.id, "search-highlight")
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error performing search:", error)
|
||
|
|
showSnackbar('Error performing search', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close task details when clicking outside
|
||
|
|
const closeTaskDetails = () => {
|
||
|
|
showTaskDetails.value = false
|
||
|
|
selectedTask.value = null
|
||
|
|
}
|
||
|
|
|
||
|
|
// Resource utilization calculation
|
||
|
|
const getResourceUtilization = (resourceId) => {
|
||
|
|
try {
|
||
|
|
const tasksForResource = projectData.value.tasks.data.filter(task => task.resource === resourceId)
|
||
|
|
if (tasksForResource.length === 0) return 0
|
||
|
|
|
||
|
|
const totalProgress = tasksForResource.reduce((sum, task) => sum + (task.progress || 0), 0)
|
||
|
|
const avgProgress = totalProgress / tasksForResource.length
|
||
|
|
return Math.round(avgProgress * 100)
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error calculating resource utilization:", error)
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Filter functionality
|
||
|
|
const filterOptions = ref({
|
||
|
|
priority: '',
|
||
|
|
resource: '',
|
||
|
|
progressRange: [0, 100]
|
||
|
|
})
|
||
|
|
|
||
|
|
const applyFilters = () => {
|
||
|
|
try {
|
||
|
|
const { priority, resource, progressRange } = filterOptions.value
|
||
|
|
|
||
|
|
gantt.eachTask(function(task) {
|
||
|
|
let shouldShow = true
|
||
|
|
|
||
|
|
// Filter by priority
|
||
|
|
if (priority && task.priority !== priority) {
|
||
|
|
shouldShow = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Filter by resource
|
||
|
|
if (resource && task.resource !== resource) {
|
||
|
|
shouldShow = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Filter by progress
|
||
|
|
const taskProgress = Math.round((task.progress || 0) * 100)
|
||
|
|
if (taskProgress < progressRange[0] || taskProgress > progressRange[1]) {
|
||
|
|
shouldShow = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hide/show task
|
||
|
|
if (shouldShow) {
|
||
|
|
gantt.showTask(task.id)
|
||
|
|
} else {
|
||
|
|
gantt.hideTask(task.id)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.render()
|
||
|
|
showFilterPanel.value = false
|
||
|
|
showSnackbar('Filters applied successfully')
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error applying filters:", error)
|
||
|
|
showSnackbar('Error applying filters', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear all filters
|
||
|
|
const clearFilters = () => {
|
||
|
|
try {
|
||
|
|
filterOptions.value = {
|
||
|
|
priority: '',
|
||
|
|
resource: '',
|
||
|
|
progressRange: [0, 100]
|
||
|
|
}
|
||
|
|
|
||
|
|
gantt.eachTask(function(task) {
|
||
|
|
gantt.showTask(task.id)
|
||
|
|
})
|
||
|
|
|
||
|
|
gantt.render()
|
||
|
|
showSnackbar('Filters cleared')
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error clearing filters:", error)
|
||
|
|
showSnackbar('Error clearing filters', 'error')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lifecycle
|
||
|
|
onMounted(async () => {
|
||
|
|
try {
|
||
|
|
await nextTick()
|
||
|
|
if (ganttContainer.value) {
|
||
|
|
initGantt()
|
||
|
|
} else {
|
||
|
|
throw new Error("Gantt container not found")
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error mounting Gantt:", error)
|
||
|
|
isLoading.value = false
|
||
|
|
showSnackbar('Error initializing Gantt chart', 'error')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
try {
|
||
|
|
if (gantt && gantt.clearAll) {
|
||
|
|
gantt.clearAll()
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error cleaning up Gantt:", error)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VCard class="gantt-card">
|
||
|
|
<VCardTitle class="d-flex align-center justify-space-between">
|
||
|
|
<div class="d-flex align-center">
|
||
|
|
<VIcon
|
||
|
|
icon="tabler-chart-timeline"
|
||
|
|
size="24"
|
||
|
|
class="me-3"
|
||
|
|
color="primary"
|
||
|
|
/>
|
||
|
|
<span class="text-h5 font-weight-medium">Project Gantt Chart</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex gap-2">
|
||
|
|
<VBtn
|
||
|
|
color="primary"
|
||
|
|
prepend-icon="tabler-plus"
|
||
|
|
@click="addTask"
|
||
|
|
variant="flat"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
class="me-1"
|
||
|
|
title="Add New Task"
|
||
|
|
>
|
||
|
|
Add Task
|
||
|
|
</VBtn>
|
||
|
|
|
||
|
|
<VBtn
|
||
|
|
color="error"
|
||
|
|
variant="flat"
|
||
|
|
prepend-icon="tabler-trash"
|
||
|
|
:disabled="!selectedTask"
|
||
|
|
@click="deleteTask"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
class="me-1"
|
||
|
|
title="Delete Selected Task"
|
||
|
|
>
|
||
|
|
Delete Task
|
||
|
|
</VBtn>
|
||
|
|
|
||
|
|
<VMenu>
|
||
|
|
<template #activator="{ props }">
|
||
|
|
<VBtn
|
||
|
|
color="secondary"
|
||
|
|
variant="flat"
|
||
|
|
prepend-icon="tabler-download"
|
||
|
|
v-bind="props"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
class="me-1"
|
||
|
|
title="Export Gantt Chart"
|
||
|
|
>
|
||
|
|
Export
|
||
|
|
</VBtn>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<VList>
|
||
|
|
<VListItem @click="exportToPDF" :disabled="!gantt.exportToPDF">
|
||
|
|
<template #prepend>
|
||
|
|
<VIcon>tabler-file-type-pdf</VIcon>
|
||
|
|
</template>
|
||
|
|
<VListItemTitle>PDF</VListItemTitle>
|
||
|
|
</VListItem>
|
||
|
|
<VListItem @click="exportToPNG" :disabled="!gantt.exportToPNG">
|
||
|
|
<template #prepend>
|
||
|
|
<VIcon>tabler-file-type-png</VIcon>
|
||
|
|
</template>
|
||
|
|
<VListItemTitle>PNG</VListItemTitle>
|
||
|
|
</VListItem>
|
||
|
|
<VListItem @click="exportToExcel">
|
||
|
|
<template #prepend>
|
||
|
|
<VIcon>tabler-file-spreadsheet</VIcon>
|
||
|
|
</template>
|
||
|
|
<VListItemTitle>Excel/CSV</VListItemTitle>
|
||
|
|
</VListItem>
|
||
|
|
</VList>
|
||
|
|
</VMenu>
|
||
|
|
</div>
|
||
|
|
</VCardTitle>
|
||
|
|
|
||
|
|
<VDivider />
|
||
|
|
|
||
|
|
<!-- Toolbar -->
|
||
|
|
<VCardText class="py-4">
|
||
|
|
<VRow>
|
||
|
|
<VCol cols="12" md="3">
|
||
|
|
<VTextField
|
||
|
|
v-model="searchQuery"
|
||
|
|
label="Search Tasks"
|
||
|
|
prepend-inner-icon="tabler-search"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
clearable
|
||
|
|
class="me-1"
|
||
|
|
title="Search for tasks by name"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12" md="3">
|
||
|
|
<VSelect
|
||
|
|
v-model="currentView"
|
||
|
|
:items="viewOptions"
|
||
|
|
item-title="label"
|
||
|
|
item-value="value"
|
||
|
|
label="View"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
@update:model-value="changeView"
|
||
|
|
class="me-1"
|
||
|
|
title="Change Gantt chart view"
|
||
|
|
>
|
||
|
|
<template #item="{ props, item }">
|
||
|
|
<VListItem v-bind="props">
|
||
|
|
<template #prepend>
|
||
|
|
<VIcon :icon="item.raw.icon" />
|
||
|
|
</template>
|
||
|
|
</VListItem>
|
||
|
|
</template>
|
||
|
|
</VSelect>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12" md="3">
|
||
|
|
<VBtn
|
||
|
|
color="info"
|
||
|
|
variant="flat"
|
||
|
|
prepend-icon="tabler-filter"
|
||
|
|
@click="showFilterPanel = !showFilterPanel"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
class="me-1"
|
||
|
|
title="Filter tasks"
|
||
|
|
>
|
||
|
|
Filter
|
||
|
|
</VBtn>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12" md="3">
|
||
|
|
<VBtn
|
||
|
|
color="success"
|
||
|
|
variant="flat"
|
||
|
|
prepend-icon="tabler-users"
|
||
|
|
@click="showResourcePanel = !showResourcePanel"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
class="me-1"
|
||
|
|
title="Manage resources"
|
||
|
|
>
|
||
|
|
Resources
|
||
|
|
</VBtn>
|
||
|
|
</VCol>
|
||
|
|
</VRow>
|
||
|
|
</VCardText>
|
||
|
|
|
||
|
|
<VDivider />
|
||
|
|
|
||
|
|
<VCardText class="pa-0">
|
||
|
|
<div class="d-flex position-relative">
|
||
|
|
<!-- Main Gantt Chart -->
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<div
|
||
|
|
ref="ganttContainer"
|
||
|
|
class="gantt-container"
|
||
|
|
style="height: 600px; width: 100%;"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<VOverlay
|
||
|
|
v-model="isLoading"
|
||
|
|
contained
|
||
|
|
persistent
|
||
|
|
class="align-center justify-center"
|
||
|
|
>
|
||
|
|
<VProgressCircular
|
||
|
|
indeterminate
|
||
|
|
color="primary"
|
||
|
|
size="64"
|
||
|
|
/>
|
||
|
|
</VOverlay>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Task Details Sidebar -->
|
||
|
|
<VNavigationDrawer
|
||
|
|
v-model="showTaskDetails"
|
||
|
|
location="end"
|
||
|
|
temporary
|
||
|
|
width="400"
|
||
|
|
class="gantt-sidebar"
|
||
|
|
>
|
||
|
|
<VCardTitle class="d-flex align-center justify-space-between">
|
||
|
|
<span>Task Details</span>
|
||
|
|
<VBtn
|
||
|
|
icon="tabler-x"
|
||
|
|
variant="flat"
|
||
|
|
@click="closeTaskDetails"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
title="Close task details"
|
||
|
|
/>
|
||
|
|
</VCardTitle>
|
||
|
|
|
||
|
|
<VDivider />
|
||
|
|
|
||
|
|
<VCardText v-if="selectedTask">
|
||
|
|
<VForm @submit.prevent="updateTask(selectedTask)">
|
||
|
|
<VRow>
|
||
|
|
<VCol cols="12">
|
||
|
|
<VTextField
|
||
|
|
v-model="selectedTask.text"
|
||
|
|
label="Task Name"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
:rules="[v => !!v || 'Task name is required']"
|
||
|
|
title="Edit task name"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="6">
|
||
|
|
<VTextField
|
||
|
|
v-model="selectedTask.start_date"
|
||
|
|
label="Start Date"
|
||
|
|
type="date"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
title="Edit task start date"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="6">
|
||
|
|
<VTextField
|
||
|
|
v-model.number="selectedTask.duration"
|
||
|
|
label="Duration (Days)"
|
||
|
|
type="number"
|
||
|
|
min="1"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
:rules="[v => v > 0 || 'Duration must be positive']"
|
||
|
|
title="Edit task duration"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12">
|
||
|
|
<VSelect
|
||
|
|
v-model="selectedTask.priority"
|
||
|
|
:items="priorityOptions"
|
||
|
|
item-title="label"
|
||
|
|
item-value="value"
|
||
|
|
label="Priority"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
title="Edit task priority"
|
||
|
|
>
|
||
|
|
<template #item="{ props, item }">
|
||
|
|
<VListItem v-bind="props">
|
||
|
|
<template #prepend>
|
||
|
|
<VIcon :icon="item.raw.icon" :color="item.raw.color" />
|
||
|
|
</template>
|
||
|
|
</VListItem>
|
||
|
|
</template>
|
||
|
|
</VSelect>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12">
|
||
|
|
<VSelect
|
||
|
|
v-model="selectedTask.resource"
|
||
|
|
:items="projectData.resources"
|
||
|
|
item-title="name"
|
||
|
|
item-value="id"
|
||
|
|
label="Resource"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
title="Edit task resource"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12">
|
||
|
|
<div class="mb-2">
|
||
|
|
<VLabel>Progress: {{ Math.round((selectedTask.progress || 0) * 100) }}%</VLabel>
|
||
|
|
</div>
|
||
|
|
<VSlider
|
||
|
|
v-model="selectedTask.progress"
|
||
|
|
min="0"
|
||
|
|
max="1"
|
||
|
|
step="0.1"
|
||
|
|
thumb-label
|
||
|
|
color="primary"
|
||
|
|
title="Edit task progress"
|
||
|
|
>
|
||
|
|
<template #thumb-label="{ modelValue }">
|
||
|
|
{{ Math.round(modelValue * 100) }}%
|
||
|
|
</template>
|
||
|
|
</VSlider>
|
||
|
|
</VCol>
|
||
|
|
|
||
|
|
<VCol cols="12">
|
||
|
|
<VBtn
|
||
|
|
type="submit"
|
||
|
|
color="primary"
|
||
|
|
block
|
||
|
|
variant="flat"
|
||
|
|
rounded="lg"
|
||
|
|
prepend-icon="tabler-check"
|
||
|
|
title="Save task changes"
|
||
|
|
>
|
||
|
|
Save Changes
|
||
|
|
</VBtn>
|
||
|
|
</VCol>
|
||
|
|
</VRow>
|
||
|
|
</VForm>
|
||
|
|
</VCardText>
|
||
|
|
</VNavigationDrawer>
|
||
|
|
|
||
|
|
<!-- Resource Panel -->
|
||
|
|
<VNavigationDrawer
|
||
|
|
v-model="showResourcePanel"
|
||
|
|
location="start"
|
||
|
|
temporary
|
||
|
|
width="300"
|
||
|
|
class="gantt-sidebar"
|
||
|
|
>
|
||
|
|
<VCardTitle class="d-flex align-center justify-space-between">
|
||
|
|
<span>Resource Management</span>
|
||
|
|
<VBtn
|
||
|
|
icon="tabler-x"
|
||
|
|
variant="flat"
|
||
|
|
@click="showResourcePanel = false"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
title="Close resource panel"
|
||
|
|
/>
|
||
|
|
</VCardTitle>
|
||
|
|
|
||
|
|
<VDivider />
|
||
|
|
|
||
|
|
<VCardText>
|
||
|
|
<VList>
|
||
|
|
<VListItem
|
||
|
|
v-for="resource in projectData.resources"
|
||
|
|
:key="resource.id"
|
||
|
|
:title="resource.name"
|
||
|
|
:subtitle="`Capacity: ${resource.capacity}%`"
|
||
|
|
class="gantt-resource-item"
|
||
|
|
>
|
||
|
|
<template #prepend>
|
||
|
|
<VAvatar color="primary" size="small">
|
||
|
|
<VIcon>tabler-user</VIcon>
|
||
|
|
</VAvatar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template #append>
|
||
|
|
<VChip
|
||
|
|
:color="getResourceUtilization(resource.id) > 80 ? 'error' : 'success'"
|
||
|
|
size="small"
|
||
|
|
variant="flat"
|
||
|
|
>
|
||
|
|
{{ getResourceUtilization(resource.id) }}%
|
||
|
|
</VChip>
|
||
|
|
</template>
|
||
|
|
</VListItem>
|
||
|
|
</VList>
|
||
|
|
</VCardText>
|
||
|
|
</VNavigationDrawer>
|
||
|
|
|
||
|
|
<!-- Filter Panel -->
|
||
|
|
<VDialog v-model="showFilterPanel" max-width="500">
|
||
|
|
<VCard>
|
||
|
|
<VCardTitle class="d-flex align-center justify-space-between">
|
||
|
|
<span>Filter Tasks</span>
|
||
|
|
<VBtn
|
||
|
|
icon="tabler-x"
|
||
|
|
variant="flat"
|
||
|
|
@click="showFilterPanel = false"
|
||
|
|
rounded="lg"
|
||
|
|
size="small"
|
||
|
|
title="Close filter panel"
|
||
|
|
/>
|
||
|
|
</VCardTitle>
|
||
|
|
<VDivider />
|
||
|
|
<VCardText>
|
||
|
|
<VRow>
|
||
|
|
<VCol cols="12">
|
||
|
|
<VSelect
|
||
|
|
v-model="filterOptions.priority"
|
||
|
|
label="Filter by Priority"
|
||
|
|
:items="[{ value: '', label: 'All Priorities' }, ...priorityOptions]"
|
||
|
|
item-title="label"
|
||
|
|
item-value="value"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
clearable
|
||
|
|
>
|
||
|
|
<template #item="{ props, item }">
|
||
|
|
<VListItem v-bind="props">
|
||
|
|
<template #prepend v-if="item.raw.icon">
|
||
|
|
<VIcon :icon="item.raw.icon" :color="item.raw.color" />
|
||
|
|
</template>
|
||
|
|
</VListItem>
|
||
|
|
</template>
|
||
|
|
</VSelect>
|
||
|
|
</VCol>
|
||
|
|
<VCol cols="12">
|
||
|
|
<VSelect
|
||
|
|
v-model="filterOptions.resource"
|
||
|
|
label="Filter by Resource"
|
||
|
|
:items="[{ id: '', name: 'All Resources' }, ...projectData.resources]"
|
||
|
|
item-title="name"
|
||
|
|
item-value="id"
|
||
|
|
variant="outlined"
|
||
|
|
density="compact"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
<VCol cols="12">
|
||
|
|
<div class="mb-2">
|
||
|
|
<VLabel>Progress Range: {{ filterOptions.progressRange[0] }}% - {{ filterOptions.progressRange[1] }}%</VLabel>
|
||
|
|
</div>
|
||
|
|
<VRangeSlider
|
||
|
|
v-model="filterOptions.progressRange"
|
||
|
|
label="Progress Range"
|
||
|
|
min="0"
|
||
|
|
max="100"
|
||
|
|
step="10"
|
||
|
|
thumb-label
|
||
|
|
color="primary"
|
||
|
|
/>
|
||
|
|
</VCol>
|
||
|
|
</VRow>
|
||
|
|
</VCardText>
|
||
|
|
<VCardActions>
|
||
|
|
<VBtn @click="clearFilters" variant="text" color="secondary">
|
||
|
|
Clear Filters
|
||
|
|
</VBtn>
|
||
|
|
<VSpacer />
|
||
|
|
<VBtn @click="showFilterPanel = false" variant="text">Cancel</VBtn>
|
||
|
|
<VBtn color="primary" @click="applyFilters" variant="flat">Apply Filters</VBtn>
|
||
|
|
</VCardActions>
|
||
|
|
</VCard>
|
||
|
|
</VDialog>
|
||
|
|
</div>
|
||
|
|
</VCardText>
|
||
|
|
</VCard>
|
||
|
|
|
||
|
|
<VSnackbar
|
||
|
|
v-model="snackbar"
|
||
|
|
:color="snackbarText.includes('Error') ? 'error' : snackbarText.includes('Warning') ? 'warning' : 'success'"
|
||
|
|
location="bottom"
|
||
|
|
variant="flat"
|
||
|
|
rounded="lg"
|
||
|
|
timeout="4000"
|
||
|
|
>
|
||
|
|
<template #default>
|
||
|
|
<div class="d-flex align-center">
|
||
|
|
<VIcon
|
||
|
|
:icon="snackbarText.includes('Error') ? 'tabler-alert-circle' :
|
||
|
|
snackbarText.includes('Warning') ? 'tabler-alert-triangle' :
|
||
|
|
'tabler-check'"
|
||
|
|
class="me-2"
|
||
|
|
/>
|
||
|
|
{{ snackbarText }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template #actions>
|
||
|
|
<VBtn
|
||
|
|
icon="tabler-x"
|
||
|
|
variant="text"
|
||
|
|
@click="snackbar = false"
|
||
|
|
size="small"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</VSnackbar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.gantt-container {
|
||
|
|
:deep(.gantt_grid) {
|
||
|
|
background-color: rgb(var(--v-theme-surface));
|
||
|
|
border-right: 1px solid rgb(var(--v-theme-outline));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_task) {
|
||
|
|
background-color: rgb(var(--v-theme-primary));
|
||
|
|
border-color: rgb(var(--v-theme-primary));
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_task_progress) {
|
||
|
|
background-color: rgb(var(--v-theme-success));
|
||
|
|
border-radius: 0 8px 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_task_line) {
|
||
|
|
border-color: rgb(var(--v-theme-primary));
|
||
|
|
background-color: rgb(var(--v-theme-primary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_task_line .gantt_task_progress) {
|
||
|
|
background-color: rgb(var(--v-theme-success));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_row) {
|
||
|
|
background-color: rgb(var(--v-theme-surface));
|
||
|
|
border-bottom: 1px solid rgb(var(--v-theme-outline));
|
||
|
|
height: 40px; /* Increased row height */
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_row.gantt_selected) {
|
||
|
|
background-color: rgb(var(--v-theme-primary-container));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_cell) {
|
||
|
|
border-right: 1px solid rgb(var(--v-theme-outline));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_scale_cell) {
|
||
|
|
background-color: rgb(var(--v-theme-surface-variant));
|
||
|
|
border-right: 1px solid rgb(var(--v-theme-outline));
|
||
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_grid_head_cell) {
|
||
|
|
background-color: rgb(var(--v-theme-surface-variant));
|
||
|
|
border-right: 1px solid rgb(var(--v-theme-outline));
|
||
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_link_control) {
|
||
|
|
background-color: rgb(var(--v-theme-secondary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_link_point) {
|
||
|
|
background-color: rgb(var(--v-theme-secondary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_drag_marker) {
|
||
|
|
background-color: rgb(var(--v-theme-primary));
|
||
|
|
border-color: rgb(var(--v-theme-primary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_drag_progress) {
|
||
|
|
background-color: rgb(var(--v-theme-success));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_drag_link) {
|
||
|
|
background-color: rgb(var(--v-theme-secondary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_row_odd) {
|
||
|
|
background-color: rgb(var(--v-theme-surface));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_row_even) {
|
||
|
|
background-color: rgb(var(--v-theme-surface-variant));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_tree_icon) {
|
||
|
|
color: rgb(var(--v-theme-on-surface));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_tree_content) {
|
||
|
|
color: rgb(var(--v-theme-on-surface));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_tree_icon.gantt_open) {
|
||
|
|
color: rgb(var(--v-theme-primary));
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_tree_icon.gantt_close) {
|
||
|
|
color: rgb(var(--v-theme-primary));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Priority styling
|
||
|
|
:deep(.high-priority) {
|
||
|
|
background-color: rgb(var(--v-theme-error)) !important;
|
||
|
|
border-color: rgb(var(--v-theme-error)) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.medium-priority) {
|
||
|
|
background-color: rgb(var(--v-theme-warning)) !important;
|
||
|
|
border-color: rgb(var(--v-theme-warning)) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.low-priority) {
|
||
|
|
background-color: rgb(var(--v-theme-success)) !important;
|
||
|
|
border-color: rgb(var(--v-theme-success)) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Search highlight
|
||
|
|
:deep(.search-highlight) {
|
||
|
|
background-color: rgb(var(--v-theme-secondary)) !important;
|
||
|
|
border-color: rgb(var(--v-theme-secondary)) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// RTL Support
|
||
|
|
:deep(.gantt_grid) {
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_task) {
|
||
|
|
direction: ltr;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.gantt_scale) {
|
||
|
|
direction: ltr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gantt-sidebar {
|
||
|
|
.v-navigation-drawer__content {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.v-card {
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.v-list-item {
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 4px 8px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: rgba(var(--v-theme-primary), 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gantt-resource-item {
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 4px 8px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: rgba(var(--v-theme-primary), 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gantt-card {
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.gantt-task-rounded {
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
</style>
|