taskTemplate

Description

Optional. Defines your own template for tasks bars

Usage

taskTemplate?: Component<{
    data: ITask;
    api: IApi;
    onaction: (ev: {
        action: string;
        data: { [key: string]: any };
    }) => void;
}>;

ITask is a single task object from the tasks array.

Parameters

• taskTemplate - the Vue component (SFC) to be applied as a template to the content of the task bar with the next parameters:

• data - (required) a single task object from the tasks array

• api - (required) the API gateway object for interacting with the Gantt API

• onaction - (required) callback function for handling custom actions triggered inside the task template:

  • action - (required) string representing the action name
  • data - (required) object with additional data related to the action

Below is an example of the component that uses the onaction prop to send the custom-click action to Gantt.

<script setup>
const props = defineProps({
    data: {},
    api: {},
    onaction: { type: Function },
});

function doClick(ev) {
    ev.stopPropogation();

    props.onaction?.({
        action: "custom-click",
        data: {
            clicked: !props.data.clicked,
            id: props.data.id,
        },
    });
}
</script>

<template>
    <template v-if="data.type !== 'milestone'">
        <div class="wx-text-out text-right">{{ data.text || "" }}</div>
        <button @click="doClick">
            <template v-if="data.clicked">
                Was clicked
            </template>
            <template v-else>
                Click Me
            </template>
        </button>
    </template>
    <template v-else>
        <div class="wx-text-out text-left">{{ data.text || "" }}</div>
    </template>
</template>

<style scoped>
    button {
        font-size: 10px;
        position: relative;
        z-index: 2;
        font: var(--wx-gantt-bar-font);
    }

    .text-right {
        left: 100%;
        top: -2px;
    }

    .text-left {
        right: 100%;
        top: -2px;
    }

    .text-right,
    .text-left,
    button {
        padding: 0 2px;
        font-size: 12px;
    }
</style>

In the next example we import the component above and listen to the custom-click action to trigger the update-task action on click.

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

const data = getData();
const api = ref(null);

function doClick(ev) {
    const data = ev;
    api.value.exec("update-task", {
        id: data.id,
        task: {
            clicked: data.clicked,
        },
    });
}
</script>

<template>
    <Gantt
        :oncustomclick="doClick"
        :taskTemplate="MyTaskContent"
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
        v-model:this="api"
    />
</template>