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 42 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?

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


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

Pavel Miklashevich - Core Developer

Post Reply