Premium support for our pure JavaScript UI components


Post by jean-francois »

hello,
I meet an issue with the dateField in Gantt. When I select a monday date, the calculation including the non work day set to the Saturday instead of Monday.
as you can see in the picture :

dateField.jpg
dateField.jpg (20.97 KiB) Viewed 618 times

Have I a missing configuration ?

thx


Post by mats »

Can you please share your configuration, or tell us how we can reproduce this on our standard examples?


Post by jean-francois »

for the first init, we apply the Localemanager

  const applyLocale = code => {
    switch (code) {
      case "fr-FR":
      case "fr":
        LocaleManager.applyLocale("Fr");
        break;
      default:
        LocaleManager.applyLocale("En");
        break;
    }
  };

the gantt Setting:

export const ganttSettings = canEdit => ({
  readOnly: !canEdit,
  subGridConfigs: {
    locked: {
      width: 490,
    },
    normal: {
      flex: 2,
    },
  },
  viewPreset: {
    id: "myId",
    base: "weekAndDay",
    timeResolution: {
      unit: "day",
      increment: 1,
    },
  },
  features: {
    projectLines: {
      showHeaderElements: true,
    },
    timeRanges: {
      currentDateFormat: "DD/MM/YY",
      showCurrentTimeLine: true,
    },
    taskMenu: false,
    taskEdit: false,
    nonWorkingTime: {
      disabled: false,
    },
    dependencies: {
      disabled: false,
      allowCreate: false,
    },
    cellTooltip: {
      textContent: true,
    },
  },
  columnLines: false,
});

Columns setting:

[
      {
        type: "name",
        text: intl.formatMessage(planningTableHead.projectTableName),
        field: "name",
        width: 270,
        editor: false,
        draggable: false,
        tooltipRenderer: ({ record }) => renderTooltipForProduct(record),
      },
      {
        type: "userResponsibility",
        text: intl.formatMessage(planningTableHead.projectTableResponsUser),
        width: 230,
        locked: true,
        editor: false,
        field: "userResponsibility",
        draggable: false,
      },
      {
        type: "status",
        text: intl.formatMessage(planningTableHead.projectTableStatus),
        locked: true,
        editor: false,
        width: 120,
        field: "status",
        draggable: false,
      },
      {
        type: "date",
        text: intl.formatMessage(planningTableHead.projectTableStartDate),
        format: "DD/MM/YYYY",
        field: "startDate",
        width: 125,
        editor: false,
        draggable: false,
      },
      {
        uuid: "duration",
        type: "estimatedDuration",
        text: intl.formatMessage(planningTableHead.projectTableDuration),
        locked: false,
        minWidth: 115,
        draggable: false,
        editor: new DurationField({
          decimalPrecision: 0,
          width: 200,
          value: "5 min",
          allowNegative: false,
        }),
      },
      {
        uuid: "endDate",
        type: "date",
        text: intl.formatMessage(planningTableHead.projectTableDueDate),
        field: "endDate",
        format: "DD/MM/YYYY",
        width: 120,
        locked: true,
        editor: dateFieldInstance,
        draggable: false,
      },
      {
        type: "date",
        text: intl.formatMessage(planningTableHead.projectTableEndDate),
        format: "DD/MM/YYYY",
        field: "actualEndDate",
        width: 140,
        locked: true,
        editor: false,
        draggable: false,
      },
    ],

For the global config:

export const createGanttConfig = props => {
  const config = {
    project: new ProjectModel({
      taskModelClass: ProjectTaskModel,
      calendar: "general",
      ...createData(props),
    }),
    listeners: {
      cellClick: e => {
        getAction(props, e);
      },
    },
    columns: props.columns,
    ...ganttSettings(props.canEdit),
    userId: props.userId,
  };

  if (props.intl) {
    config.intl = props.intl;
  }

  return config;
};

ProjectTaskModel :

class ProjectTaskModel extends TaskModel {
  static get fields() {
    return [{ name: "actualEndDate", type: "date" }];
  }
}

a function which is called when Gantt is refresh whith new data changed:

const refreshGanttConfig = tasks => {
    const dateFieldInstance =
      status === statusNames.Draft
        ? new DateField({
            format: "DD/MM/YYYY",
            picker: {
              disableWeekends: true,
            },
            editable: false,
            listeners: {
              focusin: ({ source }) => {
                const { project } = ganttRef.current;
                let currentDate = new Date();
                currentDate.setDate(currentDate.getDate() + 1);
                const duration = project.calendar.calculateDurationMs(
                  project.startDate,
                  currentDate
                );
                const { finalDate } = project.calendar.accumulateWorkingTime(
                  source.value,
                  duration,
                  true
                );
                source.min = finalDate;
                source.picker.activeDate = finalDate;
              },
              change: setTaskEndDate,
            },
          })
        : false;
    const columns = bryntumColumns({ intl, dateFieldInstance });
    const data = {
      bryntumModelData: bryntumModelData,
      columns: columns.projectFolderColumns,
      validatedProducts,
      status,
      teams,
      intl,
      userId,
      canEdit,
      tasks: tasks ?? localGanttPayload?.tasks,
      ganttRessourceLabel,
      taskModal: id => history.push(`tasks/${id}`),
    };
    const config = createGanttConfig(data);
    setConfig(config);
  };

Post by pmiklashevich »

Please produce a runnable testcase with minimal code to reproduce. See how to ask for help here: viewtopic.php?f=35&t=772

Pavlo Miklashevych
Sr. Frontend Developer


Post by jean-francois »

Thx, for your help, finally, we have find the root issue. It was the workflow from ou api, which provided a wrong parameter for the calendar.


Post Reply