Configuring toolbar

The widget provides two possible ways to configure the Toolbar:

• using the internal Toolbar component of Gantt (import from wx-svelte-gantt) and the defaultToolbarButtons array
• using the external Toolbar component with configurable data (import from wx-svelte-toolbar)

Adding the default toolbar

To add a toolbar, import the Toolbar component of Gantt, and add the Toolbar tag. You should also use the api object and pass it to the Toolbar.

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

    const data = getData();

    let api;

</script>

<Toolbar {api} />

<Gantt bind:api tasks={data.tasks} />

Configuring the set of buttons in the toolbar

To configure the toolbar (the set of buttons in the toolbar and their appearance), import the Toolbar component of Gantt and make necessary changes to the items array. Do not forget to add the items attribute to the Toolbar tag.

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

  let api;

  const data = getData();

  const items = [
    {
      id: "add-task",
      comp: "button",
      icon: "wxi-plus",
      text: "Add task",
      type: "primary",
    },
    {
      id: "edit-task",
      comp: "button",
      icon: "wxi-edit",
      text: "edit",
      type: "link",
    },
  ];
</script>

<Toolbar {api} {items} />

<Gantt  bind:api tasks={data.tasks} />

You can also customize the Toolbar by importing and changing the defaultToolbarButtons array.

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

  let api;

  const data = getData();
  
    //remove indentation buttons
    const items = defaultToolbarButtons.filter(b => {
        return b.id?.indexOf("indent") === -1;
    });

</script>

<Toolbar {api} {items} />

<Gantt  bind:api tasks={data.tasks} />

Adding a custom toolbar

The example below shows how to add a custom toolbar by applying the external Toolbar component. We import the Toolbar component, add functions to handle the actions using the api.exec() method, and modify the items array.

<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>