Skip to main content

add-assignment

PRO

The functionality is available in PRO Edition only

Description​

Fires when adding a new resource assignment to a task

Usage​

"add-assignment": ({
  id?: string | number,
  assignment: {
    id?: string | number,
    task: string | number,
    resource: string | number,
    units?: number,
    [key: string]: any,
  },
}) => 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-assignment action can take an object with the following parameters:

  • id - (optional) the ID of the new assignment; if not provided, set automatically
  • assignment - (required) the assignment object with the following fields:
    • task - (required) the ID of the task to assign the resource to; summary tasks cannot have assignments
    • resource - (required) the ID of the resource to assign; only leaf resources can be assigned; the same resource cannot be assigned to the same task twice
    • units - (optional) allocation percentage from 0 to 100; Default: 100

Example​

Use the api.exec method to trigger the action:

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

  const data = getData();
  let api = ref();

  function init(ganttApi) {
    api = ganttApi;
  }

  function assignResource() {
    api.exec("add-assignment", {
      assignment: { task: 1, resource: 2, units: 100 },
    });
  }
</script>

<Gantt
  :tasks="data.tasks"
  :links="data.links"
  :scales="data.scales"
  :init="init"
/>

Prevent adding an assignment​

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

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

Related articles: