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",
  show?: "x" | "y" | "xy" | boolean
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods

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)
  • show – (optional) determines whether and how to scroll to the new task after creation:
    • "x" – scroll horizontally
    • "y" – scroll vertically
    • "xy" – scroll both axes
    • true – scroll in both directions
    • false – do not scroll

Example​

Use the api.exec method to trigger the action:

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

   const data = getData();

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

<Toolbar>
  <Button type="primary" onclick={handleAdd}>Add task</Button>
</Toolbar>
   <Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    columns={data.columns}
    {init}={api} />

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>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  
  const data = getData();
  
  let task;
  
  function init(api) {
   api.intercept("add-task", data => {
    task = data.task;
   });
  }
</script>

<Gantt
  tasks={data.tasks}
  {init} />

Related articles: How to access Gantt API