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 the tasks object.

Parameters

• taskTemplate - the Svelte component to be applied as a template to the content of the task bar with the next parameters:

• data - (required) the tasks object

• 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 Svelte dispatch to send the custom-click action to Gantt.

<script>
    import { createEventDispatcher } from "svelte";

    export let data;

    const dispatch = createEventDispatcher();

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

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

{#if data.type !== "milestone"}
    <div class="wx-text-out text-right">{data.text || ""}</div>
    <button onclick={doClick}>
        {#if data.clicked}
            Was clicked
        {:else}
            Click Me
        {/if}
    </button>
{:else}
    <div class="wx-text-out text-left">{data.text || ""}</div>
{/if}

<style>
    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>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/svelte-gantt";
    import MyTaskContent from "../custom/MyTaskContent.svelte";

    const data = getData();
    let api;

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

<Gantt
    oncustomclick={doClick}
    taskTemplate={MyTaskContent}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    bind:this={api}
/>