Skip to main content

getEditorButtons

Description​

Returns the default configuration of Editor top bar buttons based on the provided settings

Usage​

getEditorButtons(options?: {
  autoSave?: boolean,
  resources?: boolean,
  splitTasks?: boolean,
  criticalPath?: { type: "strict" | "flexible" },
  deadlines?: boolean,
  inactiveTasks?: boolean,
  schedule?: { auto?: boolean, resourceCalendars?: boolean },
}): IEditorButtonConfig[];

Parameters​

  • options (optional) — an object with the next parameters:
    • autoSave — if false, adds the Save button to the first button group; omit or set to true when the editor saves automatically
    • resources — adds the Resources tab that allows assigning and unassigning resources for the task | PRO feature
    • splitTasks — adds the Segments tab that allows managing task segments | PRO feature
    • criticalPath — adds the Scheduling tab that holds the Constraint field | PRO feature
    • deadlines — adds the Scheduling tab that holds the Deadline field | PRO feature
    • inactiveTasks — adds the Scheduling tab that holds the Inactive checkbox | PRO feature
    • schedule — if auto is set, adds the Scheduling tab that holds the Constraint field and the Manual checkbox; if resourceCalendars is set, adds the Scheduling tab that holds the Skip resource calendars checkbox | PRO feature

Returns​

Returns an array of objects with the configuration of the Editor top bar. Conditional fields are included only when their config property is provided. If no parameter is defined, only the default configuration is returned.

[
  {
    items: [
      { comp: "icon", icon: "wxi-close", id: "close" },
      { comp: "spacer" },
      { comp: "button", type: "danger", text: "Delete", id: "delete" },
      // returned only if autoSave is false
      { comp: "button", type: "primary", text: "Save", id: "save" },
    ],
  },
  {
    comp: "tabs",
    css: "wx-toolbar-tabs",
    id: "tabs",
    options: [
      { id: "general", label: "General" },
      { id: "links", label: "Links" },
      // returned only if resources is true
      { id: "resources", label: "Resources", isHidden: fn },
      // returned only if splitTasks is true
      { id: "segments", label: "Segments", isHidden: fn },
      // returned only if deadlines, inactiveTasks, schedule.auto, schedule.resourceCalendars or criticalPath is set
      { id: "scheduling", label: "Scheduling" },
    ],
  },
]

Example​

The Editor builds its default top bar on its own. Use the getEditorButtons helper when you need a custom top bar: call the helper to get the default buttons and tabs for your configuration, rearrange or extend them as needed, and pass the result to the editor's topBar property.

In the example below, the two default rows are merged into one, with the tabs moved to the left of the buttons.

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

  const data = getData();

  const api = ref();

  // get the default top bar config for the required feature set
  const toolbarRows = getEditorButtons({
    autoSave: false,
    splitTasks: true,
    schedule: { auto: true },
  });

  // check what the helper returned: the buttons row and the tabs row
  console.log("buttons:", toolbarRows[0].items);
  console.log("tabs:", toolbarRows[1].options);

  // take the separate controls out of the returned config
  const [closeBtn, spacer, deleteBtn, saveBtn] = toolbarRows[0].items;
  const tabs = toolbarRows[1];

  // rebuild them into a single row: tabs on the left, buttons on the right
  const topBar = { items: [tabs, spacer, deleteBtn, saveBtn, closeBtn] };
</script>

<template>
  <Gantt
    ref="api"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
  />
  <Editor :api="api" :topBar="topBar" :autoSave="false" />
</template>

Related sample:

Related articles: