Error after opening pop up

[Jénnifer Villalobos]

Hello there!
I’ve been playing around the Gantt component since yesterday and everytime I open up the editor popup it leaves an error on my app.
Here’s the image of the error:
https://ibb.co/G7sb8gc

Basically, I double click on a row, it opens the popup, I close it, try to open the pop up again and there’s the error.

My code is very simple:

import React from "react";
import dynamic from "next/dynamic";
import { t } from "@lingui/macro";

//Dynamically import the Smart.Scheduler component
const GanttChart = dynamic(
  () => import("smart-webcomponents-react/ganttchart"),
  {
    ssr: false, //no server-side rendering
  }
);

class Gantt extends React.Component {
  treeSize = "30%";
  durationUnit = "day";
  nonworkingHours = [0, 1, 2, 3, 4, 5, 6, 7, 18, 19, 20, 21, 22, 23];
  nonworkingDays = [0, 6];

  taskColumns = [
    {
      label: t<code>Machines</code>,
      value: "label",
    },
    {
      label: t<code>Rent ID</code>,
      value: "label",
    },
    {
      label: "Duration",
      value: "duration",
      formatFunction: (date: string) => parseInt(date),
    },
    {
      label: t<code>Supplier</code>,
      value: "label",
    },
    {
      label: t<code>Client</code>,
      value: "label",
    },
  ];

  dataSource = [
    {
      label: "Chapter 1",
      synchronized: true,
      expanded: true,
      type: "project",
      tasks: [
        {
          label: "Section 1.1",
          dateStart: "2021-01-01",
          duration: 30,
          progress: 35,
          type: "task",
        },
        {
          label: "Section 1.2",
          dateStart: "2021-02-01",
          progress: 25,
          duration: 30,
          type: "task",
        },
        {
          label: "Section 1.3",
          dateStart: "2021-02-01",
          progress: 10,
          duration: 30,
          type: "task",
        },
      ],
    },
    {
      label: "End of Chapter 1",
      dateStart: "2021-03-01",
      type: "milestone",
    },
    {
      label: "Chapter 2",
      synchronized: true,
      expanded: true,
      type: "project",
      tasks: [
        {
          label: "Section 2.1",
          dateStart: "2021-03-01",
          duration: 30,
          progress: 15,
          type: "task",
        },
        {
          label: "Section 2.2",
          dateStart: "2021-03-01",
          progress: 10,
          duration: 30,
          type: "task",
        },
        {
          label: "Section 2.3",
          dateStart: "2021-03-01",
          progress: 20,
          duration: 30,
          type: "task",
        },
      ],
    },
    {
      label: "End of Chapter 2",
      dateStart: "2021-03-01",
      type: "milestone",
    },
  ];

  render () {
		return (
			<div>
				<GanttChart
					view="month"
					dataSource={this.dataSource}
					taskColumns={this.taskColumns}
					treeSize={this.treeSize}
					durationUnit={this.durationUnit}
					nonworkingDays={this.nonworkingDays}
					nonworkingHours={this.nonworkingHours}
					shadeUntilCurrentTime={true}
					currentTimeIndicator={true}
					locale="es"
					currentTimeIndicatorInterval={60}
					id="gantt"
				></GanttChart>
			</div>
		);
	}
};

export default Gantt;

Thanks in advance!

[admin]

Hi,

The issue is that many task columns share the same ‘value’, which is called ‘label’ in the provided code.

Hope this helps.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Jénnifer Villalobos]

Thank you very much! It did help a lot.

[Author]

Posts