|
| 1 | +<script setup lang="ts"> |
| 2 | +import { ref, watch, onMounted, nextTick, onBeforeUnmount } from 'vue' |
| 3 | +import { useI18n } from 'vue-i18n' |
| 4 | +import Gantt from 'frappe-gantt' |
| 5 | +// CSS imported in main.css to avoid exports resolution issues |
| 6 | +import type { GanttTask } from 'frappe-gantt' |
| 7 | +
|
| 8 | +const props = defineProps<{ |
| 9 | + tasks: GanttTask[] |
| 10 | + loading: boolean |
| 11 | + disabled: boolean |
| 12 | +}>() |
| 13 | +
|
| 14 | +const emit = defineEmits<{ |
| 15 | + clickTask: [taskId: number] |
| 16 | + dateChange: [taskId: number, startDate: string, endDate: string] |
| 17 | +}>() |
| 18 | +
|
| 19 | +const { t } = useI18n() |
| 20 | +const containerRef = ref<HTMLElement | null>(null) |
| 21 | +const viewMode = ref<'Day' | 'Week' | 'Month'>('Week') |
| 22 | +
|
| 23 | +let ganttInstance: Gantt | null = null |
| 24 | +
|
| 25 | +function formatDate(d: Date): string { |
| 26 | + const y = d.getFullYear() |
| 27 | + const m = String(d.getMonth() + 1).padStart(2, '0') |
| 28 | + const day = String(d.getDate()).padStart(2, '0') |
| 29 | + return `${y}-${m}-${day}` |
| 30 | +} |
| 31 | +
|
| 32 | +function initGantt() { |
| 33 | + if (!containerRef.value || props.tasks.length === 0) return |
| 34 | +
|
| 35 | + containerRef.value.innerHTML = '' |
| 36 | +
|
| 37 | + ganttInstance = new Gantt(containerRef.value, props.tasks, { |
| 38 | + view_mode: viewMode.value, |
| 39 | + date_format: 'YYYY-MM-DD', |
| 40 | + readonly: props.disabled, |
| 41 | + on_click: (task: GanttTask) => { |
| 42 | + emit('clickTask', Number(task.id)) |
| 43 | + }, |
| 44 | + on_date_change: (task: GanttTask, start: Date, end: Date) => { |
| 45 | + if (props.disabled) return |
| 46 | + emit('dateChange', Number(task.id), formatDate(start), formatDate(end)) |
| 47 | + }, |
| 48 | + custom_popup_html: (task: GanttTask) => { |
| 49 | + return ` |
| 50 | + <div class="gantt-popup"> |
| 51 | + <div class="gantt-popup-title">${task.name}</div> |
| 52 | + <div class="gantt-popup-dates">${task.start} — ${task.end}</div> |
| 53 | + <div class="gantt-popup-progress">${t('kanban.roadmap.progress')}: ${task.progress}%</div> |
| 54 | + </div> |
| 55 | + ` |
| 56 | + }, |
| 57 | + }) |
| 58 | +} |
| 59 | +
|
| 60 | +onMounted(() => { |
| 61 | + nextTick(() => { |
| 62 | + if (props.tasks.length > 0) initGantt() |
| 63 | + }) |
| 64 | +}) |
| 65 | +
|
| 66 | +onBeforeUnmount(() => { |
| 67 | + ganttInstance = null |
| 68 | +}) |
| 69 | +
|
| 70 | +watch( |
| 71 | + () => props.tasks, |
| 72 | + (newTasks) => { |
| 73 | + if (newTasks.length === 0) { |
| 74 | + if (containerRef.value) containerRef.value.innerHTML = '' |
| 75 | + ganttInstance = null |
| 76 | + return |
| 77 | + } |
| 78 | + if (ganttInstance) { |
| 79 | + ganttInstance.refresh(newTasks) |
| 80 | + } else { |
| 81 | + nextTick(() => initGantt()) |
| 82 | + } |
| 83 | + }, |
| 84 | + { deep: true }, |
| 85 | +) |
| 86 | +
|
| 87 | +watch(viewMode, (mode) => { |
| 88 | + if (ganttInstance) { |
| 89 | + ganttInstance.change_view_mode(mode) |
| 90 | + } |
| 91 | +}) |
| 92 | +
|
| 93 | +watch( |
| 94 | + () => props.disabled, |
| 95 | + () => { |
| 96 | + nextTick(() => initGantt()) |
| 97 | + }, |
| 98 | +) |
| 99 | +</script> |
| 100 | + |
| 101 | +<template> |
| 102 | + <div class="space-y-3"> |
| 103 | + <!-- View mode toggle --> |
| 104 | + <div class="flex items-center justify-between"> |
| 105 | + <div class="flex rounded-lg border border-border overflow-hidden"> |
| 106 | + <button |
| 107 | + v-for="mode in (['Day', 'Week', 'Month'] as const)" |
| 108 | + :key="mode" |
| 109 | + class="px-3 py-1.5 text-sm font-medium transition-colors" |
| 110 | + :class=" |
| 111 | + viewMode === mode |
| 112 | + ? 'bg-primary text-primary-foreground' |
| 113 | + : 'bg-card text-muted-foreground hover:bg-muted' |
| 114 | + " |
| 115 | + @click="viewMode = mode" |
| 116 | + > |
| 117 | + {{ t(`kanban.roadmap.${mode.toLowerCase()}`) }} |
| 118 | + </button> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | + |
| 122 | + <!-- Gantt container --> |
| 123 | + <div |
| 124 | + v-if="tasks.length > 0" |
| 125 | + ref="containerRef" |
| 126 | + class="gantt-container rounded-lg border border-border overflow-auto" |
| 127 | + /> |
| 128 | + |
| 129 | + <!-- Empty state --> |
| 130 | + <div |
| 131 | + v-else-if="!loading" |
| 132 | + class="flex flex-col items-center justify-center py-16 text-muted-foreground" |
| 133 | + > |
| 134 | + <p class="text-lg">{{ t('kanban.roadmap.noTasks') }}</p> |
| 135 | + </div> |
| 136 | + |
| 137 | + <!-- Loading state --> |
| 138 | + <div v-if="loading" class="flex items-center justify-center py-16"> |
| 139 | + <div class="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full" /> |
| 140 | + </div> |
| 141 | + </div> |
| 142 | +</template> |
| 143 | + |
| 144 | +<style scoped> |
| 145 | +.gantt-container { |
| 146 | + height: calc(100vh - 14rem); |
| 147 | + min-height: 400px; |
| 148 | +} |
| 149 | +</style> |
0 commit comments