feat: replace our home-grown gantt implementation with ganttastic #2180
|
@ -105,13 +105,9 @@ const ganttBars = ref([])
|
||||||
const defaultStartDate = format(new Date(), dateFormat)
|
const defaultStartDate = format(new Date(), dateFormat)
|
||||||
const defaultEndDate = format(new Date((new Date()).setDate((new Date()).getDate() + 7)), dateFormat)
|
const defaultEndDate = format(new Date((new Date()).setDate((new Date()).getDate() + 7)), dateFormat)
|
||||||
|
|
||||||
dpschen marked this conversation as resolved
Outdated
|
|||||||
// We need a "real" ref object for the gantt bars to instantly update the tasks when they are dragged on the chart.
|
function transformTaskToGanttBar(t: TaskModel) {
|
||||||
// A computed won't work directly.
|
|
||||||
function mapGanttBars() {
|
|
||||||
ganttBars.value = []
|
|
||||||
const black = 'var(--grey-800)'
|
const black = 'var(--grey-800)'
|
||||||
|
return [{
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
define types define types
konrad
commented
Done. Done.
|
|||||||
tasks.value.forEach(t => ganttBars.value.push([{
|
|
||||||
startDate: t.startDate ? format(t.startDate, dateFormat) : defaultStartDate,
|
startDate: t.startDate ? format(t.startDate, dateFormat) : defaultStartDate,
|
||||||
endDate: t.endDate ? format(t.endDate, dateFormat) : defaultEndDate,
|
endDate: t.endDate ? format(t.endDate, dateFormat) : defaultEndDate,
|
||||||
ganttBarConfig: {
|
ganttBarConfig: {
|
||||||
|
@ -124,7 +120,15 @@ function mapGanttBars() {
|
||||||
border: t.startDate ? '' : '2px dashed var(--grey-300)',
|
border: t.startDate ? '' : '2px dashed var(--grey-300)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}]))
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
// We need a "real" ref object for the gantt bars to instantly update the tasks when they are dragged on the chart.
|
||||||
|
// A computed won't work directly.
|
||||||
|
function mapGanttBars() {
|
||||||
|
ganttBars.value = []
|
||||||
|
|
||||||
|
tasks.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t)))
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadTasks() {
|
async function loadTasks() {
|
||||||
|
@ -168,11 +172,15 @@ async function updateTask(e) {
|
||||||
task.startDate = e.bar.startDate
|
task.startDate = e.bar.startDate
|
||||||
task.endDate = e.bar.endDate
|
task.endDate = e.bar.endDate
|
||||||
const taskService = new TaskService()
|
const taskService = new TaskService()
|
||||||
await taskService.update(task)
|
const r = await taskService.update(task)
|
||||||
// TODO: Loading animation
|
// TODO: Loading animation
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
This and the three lines below should be combined to one watcher that trigger immediately.
Something like:
This and the three lines below should be combined to one watcher that trigger immediately.
`loadTasks` should accept these three as params, so that it's clear that these are needed to reload.
Something like:
```
watchEffect(() => loadTasks({
dateTo: props.dateTo,
dateFrom: props.dateFrom,
showTasksWithoutDates: props.showTasksWithoutDates,
})
```
|
|||||||
|
for (const i in ganttBars.value) {
|
||||||
|
if(ganttBars.value[i][0].ganttBarConfig.id === task.id) {
|
||||||
|
ganttBars.value[i] = transformTaskToGanttBar(r)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const newTaskFieldActive = ref(false)
|
const newTaskFieldActive = ref(false)
|
||||||
const newTaskTitleField = ref()
|
const newTaskTitleField = ref()
|
||||||
const newTaskTitle = ref('')
|
const newTaskTitle = ref('')
|
||||||
|
|
Reference in New Issue
Block a user
User
TaskModel['id']
Done (I think you did that one?)