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:

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

   const url = "https://some_backend_url";

   const server = new RestDataProvider(url);
   const tasks = ref(), links = ref();

   server.getData().then(data => {
      tasks.value = data.tasks;
      links.value = data.links;
   });
</script>

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

Loading tasks, links, resources and assignments:

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

   const server = new RestDataProvider("https://some_backend_url");
   const tasks = ref(), links = ref(), resources = ref(), assignments = ref();

   server
      .getData(undefined, { resources: true, assignments: true })
      .then(data => {
         tasks.value = data.tasks;
         links.value = data.links;
         resources.value = data.resources;
         assignments.value = data.assignments;
      });
</script>

<template>
   <Gantt
      :tasks="tasks"
      :links="links"
      :resources="resources"
      :assignments="assignments" />
</template>

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

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

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

   const api = ref(), tasks = ref(), links = ref(),
      resources = ref(), assignments = ref();

   restProvider
      .getData(undefined, { resources: true, assignments: true })
      .then(data => {
         tasks.value = data.tasks;
         links.value = data.links;
         resources.value = data.resources;
         assignments.value = data.assignments;
      });

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

<template>
   <Gantt :init="init" :tasks="tasks" :links="links" :resources="resources" :assignments="assignments" ref="api" />
</template>

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: