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?: "y" | "xy" | boolean,
  select?: boolean,
  focus?: "grid" | "chart",
}) => 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)
  • 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")

Example​

Use the api.exec method to trigger the action:

import { useState } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { Button } from "@svar-ui/react-core";
import { getData } from "./common/data";

export default function App() {
  const { tasks, links } = getData();
  const [api, setApi] = useState(null);

  function init(apiInstance) {
    // store Gantt API instance
    setApi(apiInstance);
  }

  function handleAdd() {
    // trigger the add-task action
    api?.exec("add-task", { task: {} });
  }

  return (
    <>
      <Button type="primary" onClick={handleAdd}>Add task</Button>

      <Gantt
        tasks={tasks}
        links={links}
        init={init}
      />
    </>
  );
}

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:

import { useState } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { getData } from "./common/data";

export default function App() {
  const data = getData();
  const [task, setTask] = useState(null);

  function init(api) {
    api.intercept("add-task", data => {
      setTask(data.task);
    });
  }

  return (
    <Gantt
      tasks={data.tasks}
      init={init}
    />
  );
}

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: