Skip to main content

getData()

Description​

Gets a promise with arrays of tasks, links and optionally resources and assignments
info

The getData() method is a part of the RestDataProvider service intended for working with a server

Usage​

getData(
   id?: string | number,
   options?: { resources?: boolean, assignments?: boolean }
): Promise<{
   tasks: [],
   links: [],
   resources?: [],
   assignments?: []
}>

Parameters​

  • id - (optional) the id of a task whose branch should be loaded; if omitted, the whole dataset is loaded
  • options - (optional) an object that enables loading of additional collections together with tasks and links:
    • resources - (optional) if set to true, resources are loaded via GET /resources. Applied only on initial load (when id is omitted).
    • assignments - (optional) if set to true, assignments are loaded. On initial load, the request is GET /assignments; on subtree load, the request is GET /assignments/{id} and returns the assignments scoped to the requested branch.

Response​

The getData() method sends requests to the server by the GET method and returns a promise with data on tasks and links (and resources/assignments when requested via options). For the examples of returned objects, see tasks, links, resources and assignments.

Examples​

Loading tasks and links only:

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { RestDataProvider } from "@svar-ui/gantt-data-provider";

const url = "https://some_backend_url";

const server = new RestDataProvider(url);

function App() {
   const [tasks, setTasks] = useState();
   const [links, setLinks] = useState();

   useEffect(() => {
      server.getData().then(data => {
         setTasks(data.tasks);
         setLinks(data.links);
      });
   }, []);

   return (
      <Gantt
         tasks={tasks}
         links={links} />
   );
}

Loading tasks, links, resources and assignments:

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { RestDataProvider } from "@svar-ui/gantt-data-provider";

const server = new RestDataProvider("https://some_backend_url");

function App() {
   const [tasks, setTasks] = useState();
   const [links, setLinks] = useState();
   const [resources, setResources] = useState();
   const [assignments, setAssignments] = useState();

   useEffect(() => {
      server
         .getData(undefined, { resources: true, assignments: true })
         .then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
            setResources(data.resources);
            setAssignments(data.assignments);
         });
   }, []);

   return (
      <Gantt
         tasks={tasks}
         links={links}
         resources={resources}
         assignments={assignments} />
   );
}

Loading a subtree together with its assignments (use inside a request-data handler when tasks are marked lazy):

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { RestDataProvider } from "@svar-ui/gantt-data-provider";

const restProvider = new RestDataProvider("https://some_backend_url");

function App() {
   const [tasks, setTasks] = useState();
   const [links, setLinks] = useState();
   const [resources, setResources] = useState();
   const [assignments, setAssignments] = useState();

   useEffect(() => {
      restProvider
         .getData(undefined, { resources: true, assignments: true })
         .then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
            setResources(data.resources);
            setAssignments(data.assignments);
         });
   }, []);

   const init = api => {
      api.setNext(restProvider);
      api.on("request-data", ev => {
         restProvider
            .getData(ev.id, { assignments: true })
            .then(({ tasks, links, assignments }) => {
               api.exec("provide-data", {
                  id: ev.id,
                  data: { tasks, links, assignments },
               });
            });
      });
   };

   return (
      <Gantt
         init={init}
         tasks={tasks}
         links={links}
         resources={resources}
         assignments={assignments} />
   );
}

parseDates() method​

Description: getData() applies the parseDates() method to parse dates (start, end, base_start, base_end from tasks) to Date object (as new Date(string)).

Usage:

parseDates(task) => task

If you need to change the parsing method, you can redefine it as in the example below: create a new class for RestDataProvider, set the required parsing method using the parseDates() method, and then apply this new class for RestDataProvider.

class MyProvider extends RestDataProvider{
   parseDates(task){
       // parse dates by method you like
      return task; 
    }
}

const restProvider = new MyProvider(serverUrl);

Related articles: