Skip to main content

Configuring toolbar

The widget provides two possible ways to configure the Toolbar:

  • using the internal Toolbar component of Gantt (import from @svar-ui/vue-gantt) and the getToolbarButtons helper
  • using the external Toolbar component with configurable data (import from @svar-ui/vue-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 setup>
  import { getData } from "./common/data";
  import { Gantt, Toolbar } from "@svar-ui/vue-gantt";

  const data = getData();

  const api = ref(null);
</script>

<template>
  <Toolbar :api="api" />

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

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 setup>
  import { getData } from "../data";
  import { Gantt, Toolbar } from "@svar-ui/vue-gantt";

  const api = ref(null);
  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>

<template>
  <Toolbar :api="api" :items="items" />

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

You can also customize the Toolbar using the getToolbarButtons helper to get the default array.

<script setup>
  import { getData } from "../data";
  import { Gantt, Toolbar, getToolbarButtons } from "@svar-ui/vue-gantt";

  const api = ref(null);
  const data = getData();
  
  //remove indentation buttons
  const items = getToolbarButtons().filter(b => {
    return b.id?.indexOf("indent") === -1;
  });
</script>

<template>
  <Toolbar :api="api" :items="items" />

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

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 setup>
  import { ref, computed } from "vue";
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import { Toolbar } from "@svar-ui/vue-toolbar";

  const data = getData();

  let api = null;
  let selected = null;

  function handleAdd() {
    api.exec("add-task", {
      task: {
        text: "New task",
      },
      target: selected.value[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.value
      .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"),
    },
  ];

  const items = ref([allItems[0]]);

  function init(ganttApi) {
    api = ganttApi;
    selected = api.getReactiveState().selected;
    items.value = selected.value.length ? allItems : [allItems[0]];
  }
</script>

<template>
  <Toolbar :items="items" />
  <div class="gtcell">
    <Gantt
      :tasks="data.tasks"
      :links="data.links"
      :scales="data.scales"
      :init="init"
    />
  </div>
</template>

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

Related samples: