Task as Resources Gantt in - ERROR in VUE Project


#1

Hi!
I am implementing a Gantt chart using instances in VUE, but I have the problem that when I try to modify the layout, to add the resource view and I have tasks to show in the resource view I get a problem.
I have verified that doing it outside of VUE does not give me this problem and I wanted to know if it could be a VUE problem or the logic is poorly implemented.

(Uso la versión PRO - 7.1.2)
I tell you what I do:
1.- I make changes to the default gantt configuration, to customize it (columns, scales, etc). I make changes to => gantt.config

2.- Later I create the instance on a global variable.

me.ganttInstance = Gantt.getGanttInstance({
  container: document.querySelector("#gantt_here"),
  config: gantt.config,
})

3.- I create the database for the resources, marking that I link the tasks as resources.

me.resourceStore = me.ganttInstance.createDatastore({
  name: me.ganttInstance.config.resource_store,
  type: "treeDatastore",
  fetchTasks: true,
  initItem: function (item) {
    item.parent = item.parent || me.ganttInstance.config.root_id;
    item[me.ganttInstance.config.resource_property] = item.parent;
    item.open = true;
    return item;
  },
})

4.- I perform the parsing of resources

me.resourceStore.parse([
  { id: 1, text: "QA", parent: null },
  { id: 2, text: "Development", parent: null },
  { id: 3, text: "Sales", parent: null },
  { id: 4, text: "Other", parent: null },
  { id: 5, text: "Unassigned", parent: 4 },
  { id: 6, text: "John", parent: 1, unit: "hours/day" },
  { id: 7, text: "Mike", parent: 2, unit: "hours/day" },
  { id: 8, text: "Anna", parent: 2, unit: "hours/day" },
  { id: 9, text: "Bill", parent: 3, unit: "hours/day" },
  { id: 10, text: "Floe", parent: 3, unit: "hours/day" },
])

5.- Finally I do the parsing of the Gantt data.

me.ganttInstance.parse({
  data: [
    {
      id: 1,
      text: "Office itinerancy",
      type: "project",
      start_date: "02-04-2019 00:00",
      duration: 17,
      progress: 0.4,
      parent: 0,
    },
    {
      id: 2,
      text: "Office facing",
      type: "project",
      start_date: "02-04-2019 00:00",
      duration: 8,
      progress: 0.6,
      parent: "1",
    },
    {
      id: 3,
      text: "Furniture installation",
      type: "project",
      start_date: "11-04-2019 00:00",
      duration: 8,
      parent: "1",
      progress: 0.6,
      owner: [],
    },
    {
      id: 4,
      text: "The employee relocation",
      type: "project",
      start_date: "13-04-2019 00:00",
      duration: 5,
      parent: "1",
      progress: 0.5,
      owner: [],
      priority: 3,
    },
    {
      id: 5,
      text: "Interior office",
      type: "task",
      start_date: "03-04-2019 00:00",
      duration: 7,
      parent: "2",
      progress: 0.6,
      owner: [
        {
          resource_id: "6",
          value: 3,
          start_date: "03-04-2019 00:00",
          end_date: "05-04-2019 00:00",
        },
      ],
      priority: 1,
    },
  ]

})

6.- Later I include a button that when pressed adds the resource view, and I reset the layout of the instance

 me.ganttInstance.config.layout.rows.push({
			config: me.resourceConfig,
			cols: [
				{view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
				{resizer: true, width: 1},
				{view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
				{view: "scrollbar", id: "resourceVScroll", group:"vertical"}
			],
			gravity:1
		})

	me.ganttInstance.resetLayout()

7.- This causes me an error, because it changes the ids of the tasks linked to the Gantt and when trying to render the task layers in the Gantt, it paints them blank causing an error that does not show the bars of the Gantt chart.

Could you help me, to know if it is a problem of the implemented logic or of VUE?

Thank you!


#2

To clarify the error, when performing the resetLayout (), the tasks that I parse for Gantt data, exactly the task with id: 5 fails, since having an associated resource, the library changes its id to “5_6”


#3

Hello Agustin,
Maybe there is an issue that you create a config object with the default instance and then you add it to your Gantt instance:

me.ganttInstance = Gantt.getGanttInstance({
  container: document.querySelector("#gantt_here"),
  config: gantt.config,
})

Or maybe it happens because of something else, but it is hard to suggest because I don’t see the code you use.

Vue and other frameworks are beyond our support, so, I cannot suggest how to do that in a Vue way, but here is a demo, where you can add the resource view with the approach you tried:
https://files.dhtmlx.com/30d/0f86a875167e66a01351425aa5bd56ed/vue+resource+gantt-instance.zip