Toolbar

Description

Toolbar helper

Usage

<Toolbar {items} />

Items array:

items?: [
    {
        id?: string,
        comp: 'button',
        icon?: string,
        css?: string,
        text?: string,
        type?: string,
        layout?: string,
        items?: [],
        handler?: function
    }
]

How to import and add Toolbar to the Gantt chart, and other usage examples see here: Configuring Toolbar

Parameters

The items array has the following parameters:

• id - (optional) the id of a button
• comp - (optional) specifies the type of the button item that can be one of the following: button, separator, spacer, label, icon
• text - (optional) the text for a button
• icon - (optional) sets the icon for a button, and the 'css' property applies a CSS class to the item
• type - (optional) the following types of buttons are available: 'default', 'primary', 'secondary', 'danger', 'link'
• css - (optional) the name of the CSS class applied to the button
• layout - (optional) layout for the group of items; possible layout values: "row", "column"
• items - (optional) an array that defines subitems
• handler - (optional) a function that is called when a button is activated

The default set of buttons array see here: defaultToolbarButtons

Example

The example below shows how to add a custom toolbar:

<script>
    import { getData } from "../data";
    import { Gantt } from "@wx/svelte-gantt";
    import { Toolbar } from "@wx/svelte-toolbar";

    const data = getData();

    function handleAdd() {
        api.exec("add-task", {
            task: {
                text: "New task",
            },
            target: $selected[0],
            mode: "after",
        });
    }

    function handleDelete() {
        const order = getActionOrder(true);
        order.forEach(id => api.exec("delete-task", { id }));
    }

    function handleMove(mode) {
        const changeDir = mode === "down";
        const order = getActionOrder(changeDir);
        order.forEach(id => api.exec("move-task", { id, mode }));
    }

    function getActionOrder(changeDir) {
        // sort by visible order and level
        const tasks = $selected
            .map(id => api.getTask(id))
            .sort((a, b) => {
                return a.$level - b.$level || a.$y - b.$y;
            });
        const idOrder = tasks.map(o => o.id);

        // reverse for deleting/moving tasks down
        if (changeDir) return idOrder.reverse();
        return idOrder;
    }

    const allItems = [
        {
            comp: "button",
            type: "primary",
            text: "Add task",
            handler: handleAdd,
        },
        {
            comp: "button",
            text: "Delete task",
            handler: handleDelete,
        },
        {
            comp: "button",
            type: "primary",
            text: "Move task down",
            handler: () => handleMove("down"),
        },
        {
            comp: "button",
            type: "primary",
            text: "Move task up",
            handler: () => handleMove("up"),
        },
    ];

    let api, selected, items;

    $: if (api) {
        selected = api.getReactiveState().selected;
        items = $selected.length ? allItems : [allItems[0]];
    }
</script>

<Toolbar {items} />
<div class="gtcell">
    <Gantt
        bind:api
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
    />
</div>

<style>
    .gtcell {
        height: calc(100% - 50px);
        border-top: var(--wx-gantt-border);
    }
</style>