Skip to main content

add-task

Description​

Fires when adding a new task

Usage​

"add-task": ({
    target: string | number,
    task: object,
    mode: string
}) => boolean | void;

Parameters​

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

  • 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. You can also specify the following parameters:
    • level - (required) the nesting level of a task in the tasks tree
    • data - (optional) an array of objects with child tasks objects if any (parameters are the same as for the task object)
    • key - (required) the name of the data field which should be unique for each control type (e.g., text, duration, progress, etc.)
  • mode - (required) specifies where to place a task: before - before the task which id is specified or after it (after)

Example​

Use the api.exec method to trigger the action:

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

    const data = getData();

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

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

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 "@wx/svelte-gantt";
  
  const data = getData();
  
  let task;
  let api;
  
  $: if (api) {
  api.intercept("add-task", data => {
    task = data.task;
    });
}

</script>

<Gantt
  bind:api
  tasks={data.tasks}
  //other settings />

Related articles: