getToolbarButtons

Description

Returns the full default configuration of toolbar buttons

Usage

getToolbarButtons(config?: {
  undo?: boolean,
  splitTasks?: boolean,
  conflicts?: boolean,
  group?: boolean
}): IButtonConfig[];

Parameters

• config (optional) — an object with the next parameters:
  • undo — enables Undo and Redo buttons | PRO feature
  • splitTasks — enables the Split task button | PRO feature
  • conflicts — enables the Conflicts button that opens the ConflictReport list | PRO feature
  • group — returns only the buttons available when grouping is active; filters out actions that cannot be used in a grouped tree

Returns

The method returns an array of toolbar button configuration objects. Conditional blocks are included only when the corresponding config properties are enabled. If no parameter is defined, only default config is returned.

[
  {
    id: "add-task",
    comp: "button",
    icon: "wxi-plus",
    text: "New task",
    type: "primary",
  },
  {
    id: "edit-task",
    comp: "icon",
    icon: "wxi-edit",
    menuText: "Edit",
    text: "Ctrl+E",
  },

  // appears only if config.splitTasks is true
  {
    id: "split-task",
    comp: "icon",
    icon: "wxi-arrow-split",
    menuText: "Split",
  },
  // end

  {
    id: "delete-task",
    comp: "icon",
    icon: "wxi-delete",
    menuText: "Delete",
    text: "Ctrl+D, Backspace",
  },
  { comp: "separator" },

  {
    id: "move-task:up",
    comp: "icon",
    icon: "wxi-angle-up",
    menuText: "Move up",
  },
  {
    id: "move-task:down",
    comp: "icon",
    icon: "wxi-angle-down",
    menuText: "Move down",
  },

  { comp: "separator" },

  {
    id: "copy-task",
    comp: "icon",
    icon: "wxi-content-copy",
    menuText: "Copy",
    text: "Ctrl+C",
  },
  {
    id: "cut-task",
    comp: "icon",
    icon: "wxi-content-cut",
    menuText: "Cut",
    text: "Ctrl+X",
  },
  {
    id: "paste-task",
    comp: "icon",
    icon: "wxi-content-paste",
    menuText: "Paste",
    text: "Ctrl+V",
  },

  { comp: "separator" },

  {
    id: "indent-task:add",
    comp: "icon",
    icon: "wxi-indent",
    menuText: "Indent",
  },
  {
    id: "indent-task:remove",
    comp: "icon",
    icon: "wxi-unindent",
    menuText: "Outdent",
  },

  // appears only if config.undo is true
  { comp: "separator" },
  {
    id: "undo",
    comp: "icon",
    icon: "wxi-undo",
    menuText: "Undo",
  },
  {
    id: "redo",
    comp: "icon",
    icon: "wxi-redo",
    menuText: "Redo",
  },
  // end

  // appears only if config.conflicts is true
  { comp: "separator" },
  {
    id: "show-conflicts",
    comp: "icon",
    icon: "wxi-warning",
    menuText: "Conflicts",
  }
  // end
]

Example

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

  const data = getData();

  function init(api) {
    const toolbar = getToolbarButtons({
      splitTasks: true,
      undo: true
    });

    console.log("Toolbar buttons:", toolbar);
  }
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :init="init"
  />
</template>

---

Related article: defaultToolbarButtons