Adding a custom editor dialog

For the instructions about applying a default editor component, refer to Configuring the task editor.

To add your custom editor, you should:

• Import the custom Form component for adding/editing tasks
• Use the api.intercept method to disable opening the default editor by blocking the show-editor action (return false)
• Add the Form tag, define tasks and taskTypes, and add the action handler function that triggers the update-task or delete-task action.

<script setup>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/vue-gantt";
    import { Form } from "../custom/Form.vue";
    import { ref } from "vue";

    const data = getData();
    const taskTypes = [
        { id: "task", label: "Task" },
        { id: "milestone", label: "Milestone" },
        { id: "summary", label: "Project" },
    ];

    const task = ref();
    let store;
    function init(api) {
        store = api.getState().tasks;

        api.intercept("show-editor", data => {
            task.value = store.byId(data.id);
            return false;
        });
    }

    const api = ref(null);
    function formAction(ev) {
        const { action, data } = ev;

        switch (action) {
            case "close-form":
                task.value = null;
                break;

            default:
                api.value.exec(action, data);  //"update-task", "delete-task" actions
                break;
        }
    }
</script>

<template>
    <Gantt
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
        ref="api"
        :init="init"
    />

    <Form v-if="task" :task="task" :taskTypes="taskTypes" :onaction="formAction" />
</template>

---

Related sample: Custom edit form