Skip to main content

add-task

Description​

Fires when adding a new task

Usage​

"add-task": (ev: {
  id?: string | number,
  task: Partial<ITask>,
  target?: string | number,
  mode?: "before" | "after" | "child",
  index?: number,
  show?: "y" | "xy" | boolean,
  select?: boolean,
  focus?: "grid" | "chart",
  eventSource?: string,
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods. Returning false from the action handler will block the action (see Preventing actions)

Parameters​

The callback of the add-task action can take an object with the following parameters:

  • id - (optional) the id of a new task
  • target - (required) the task ID before or after which a new task will be added
  • task - (required) the task object. The list of parameters you can see here: tasks.
  • mode - (required) specifies where to place a task: before - before the task which id is specified, after it (after), or creates the child task for the target (child)
  • index - (optional) the position of a new task among the children of its parent (starting from 0). Applied when target is not set or mode is child. If the index is out of range, the task is added to the end
  • show – (optional) determines whether and how to scroll to the new task after creation:
    • "y" – scroll vertically to the task row
    • "xy" – scroll both axes
    • true – scroll vertically (same as "y")
    • false (default) – do not scroll
  • select - (optional) set to true (default) to select the added task; otherwise, false
  • focus - (optional) can be applied when selectis true; defines which task element will take focus - grid cell ("grid") or chart bar ("chart")
  • eventSource - (optional) the name of the UI source that triggered the action; set to "placeholder" when the task is created via the grid cells of the placeholder row or by clicking and dragging on the placeholder row within the chart area

Example​

Use the api.exec method to trigger the action:

<script setup>
   import { Gantt } from "@svar-ui/vue-gantt";
   import { Button } from "@svar-ui/vue-core";
   import { getData } from "./common/data";
   import { ref } from "vue";

   const { tasks, links } = getData();

   const api = ref();
   
   function handleAdd() {
      api.value.exec("add-task", { task: {} });
   }
   
</script>

<template>
  <Button type="primary" :onclick="handleAdd">Add task</Button>
  <Gantt ref="api" :tasks="tasks" :links="links" />
</template>

In the example below we use the api.intercept() method to change the task variable value replacing it with the relevant data from the add-task action:

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import { ref } from "vue";
  
  const data = getData();
  
  const task = ref();
  
  function init(api) {
   api.intercept("add-task", data => {
    task.value = data.task;
   });
  }
</script>

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

Prevent adding a task​

You can intercept the action and return false to block it:

api.intercept("add-task", ev => {
  if (!allowAdd) return false; // prevents adding
});

Related articles: