\n\n\n","url":"https://docs.dhtmlx.com/gantt/demos/vue-custom-edit-view/"}
Skip to main content
Back to examples
Vue/Custom edit view
Loading live demo…from dhtmlx.github.io
Vue

Custom edit view

Split task editing into a dedicated Vue Router view with shared Gantt context via provide/inject.

src/examples/custom-edit-view/Demo.vue View on GitHub
<script setup lang="ts">
import { provide } from "vue";
import { RouterView } from "vue-router";
import type { Task } from "@dhtmlx/trial-vue-gantt";
import { createProjectData } from "../shared/projectData";
import { useDemoBatchState } from "../shared/useDemoBatchState";
import { CUSTOM_EDIT_VIEW_CONTEXT_KEY } from "./context";

const { tasks, links, applyBatch } = useDemoBatchState(createProjectData());

const upsertTask = (task: Task) => {
  const index = tasks.value.findIndex(item => String(item.id) === String(task.id));
  if (index === -1) {
    tasks.value = [...tasks.value, task];
    return;
  }

  const nextTasks = [...tasks.value];
  nextTasks[index] = { ...nextTasks[index], ...task };
  tasks.value = nextTasks;
};

const saveTask = (task: Task) => {
  const nextTask = { ...task } as any;
  if (nextTask.$new) {
    delete nextTask.$new;
  }
  upsertTask(nextTask);
};

const deleteTask = (taskId: string | number) => {
  tasks.value = tasks.value.filter(task => String(task.id) !== String(taskId));
};

provide(CUSTOM_EDIT_VIEW_CONTEXT_KEY, {
  tasks,
  links,
  saveTask,
  upsertTask,
  deleteTask,
  applyBatch
});
</script>

<template>
  <section class="demo-panel" data-cy="custom-edit-view-demo">
    <RouterView />
  </section>
</template>