Skip to main content

provide-data

Description​

Provides new data for a branch

You should call this action to provide data for a branch.

Usage​

"provide-data": ({
  id: string | number,
  data: {
   tasks?: ITask[],
   links?: ILInk[]
  };
}) => boolean|void;

Parameters​

  • id - (required) the ID of the task for which data should be provided
  • data - (required) new data provided for a branch (the tasks and links arrays)
info

For handling the actions you can use the Event Bus methods

Example​

In the example below we listen to the request-data action with the help of the api.on() method, fetch the tasks branch data from the server and parse to the component calling the provide-data action.

<script setup>
   import { Gantt } from "@svar-ui/vue-gantt";
   import { ref } from "vue";

   const server = "https://some-server";

   const tasks = ref([]);
   const links = ref([]);

   Promise.all([
      fetch(server + "/tasks")
        .then(res => res.json()),
      fetch(server + "/links").then(res => res.json()),
   ]).then(([t, l]) => {
      tasks.value = t;
      links.value = l;
   });

   function init(api) {
      api.on("request-data", ev => {
      Promise.all([
        fetch(server + `/tasks/${ev.id}`)
           .then(res => res.json()),
        fetch(server + `/links/${ev.id}`)
           .then   (res => res.json()),
        ]).then(([tasks, links]) => {
           api.exec("provide-data", {
              id: ev.id,
              data: {
                tasks,
                links,
              },
           });
        });
      });
   }
</script>

<template>
  <Gantt :init="init" :tasks="tasks" :links="links" />
</template>

Related articles: How to access Gantt API