[VUE 3] Task Editor - Inputs disappear after choosing start-/enddate

[johannesbeck]

Hi,

I have the problem, that my preselected inputs disappear, after I choose another start date or end date. But if I select all the fields manually, they do not disappear, when I select a date. Also the nameField gets reset to the default value "New Event" ("Neuer Ereignis" in German).
I've recorded a video about this.

The fields "Anker" and "Rolle" get preselected by a listener (beforeTaskEditShow), that splits the resourceId into "Anker" and "Rolle" and writes the values into the two fields.

How can I disable this behavior, after selecting a date?

[ghulam.ghous]

Hey there,

Are you able to reproduce this issue here in this example? https://bryntum.com/products/scheduler/examples/basic/
Please share steps or a small runnable test case where we can reproduce this issue.

[johannesbeck]

Hey there,

Are you able to reproduce this issue here in this example? https://bryntum.com/products/scheduler/examples/basic/
Please share steps or a small runnable test case where we can reproduce this issue.

It is very difficult to create a small test case, that is runnable.
Which code fragments do you need to take a closer look? Ive added the taskEditConfig and the listener I use to prefill the taskEdit fields.

When I select a startDate, every listener of the other fields gets called. But the value is null and the oldValue is the value, that should be the fields value. I tried to fix this in roleField. When the listener gets called and it is no userAction, then the value (null) gets overwritten by oldValue (for example 'project_manager'):

else {
                  if (event.value === null) {
                    event.value = event.oldValue
                  }
                }

But this does not work. The value of the fields disappears.

Is there a way to take a look at the listeners of startDateField and endDateField?

taskEditConfig() {
      return {
        editorConfig: {
          title: 'Eintrag bearbeiten',
          weekStartDay: 1,
          bbar: {
            layout: {
              type: 'hbox',
            },
            items: {
              //deleteButton: false
            }
          }
        },
        items: {
          generalTab: {
            title: 'Allgemein',
            hidden: true,
            items: {
              nameField: {
                readOnly: true,
                weight: 100,
                clearable: false
              },
              resourcesField: {
                readOnly: true,
                weight: 105,
                clearable: false,
                hidden: true
              },
              personField: {
                type: 'combobox',
                required: true,
                multiSelect: false,
                name: "personId",
                label: 'Person',
                store: this.employeeStore,
                displayField: "label",
                valueField: "value",
                weight: 110,
                listeners: {
                  change: function (event) {
                    if (event.userAction) {
                      const roleShortName = this.parent.items.find(e => e.name === 'roleValue').record.data.shortName;
                      const anchor = this.parent.items.find(e => e.name === 'resourceName').value;
                      const employee = event.source.record.data.label;
                      this.parent.items.find(e => e.name === 'name').value = employee + ' - ' + roleShortName + ' - ' + anchor;
                    }
                  }
                }
              },
              roleField: {
                type: 'combobox',
                required: true,
                multiSelect: false,
                name: 'roleValue',
                label: 'Rolle',
                store: this.roleStore,
                valueField: 'value',
                displayField: "displayName",
                weight: 120,
                listeners: {
                  change: function (event /*, value, record, records, userAction*/) {
                    if (event.userAction) {
                      const roleValue = event.value;
                      const roleShortName = event.source.record.shortName;
                      const anchor = this.parent.items.find(e => e.name === 'resourceName').value;

                  let employee;
                  try {
                    employee = this.parent.items.find(e => e.name === 'personId').record.data.label;
                  } catch (e) {
                    employee = '?'
                  }

                  this.parent.items.find(e => e.name === 'name').value = employee + ' - ' + roleShortName + ' - ' + anchor;
                  this.parent.items.find(e => e.name === 'resources').value = anchor + "_" + roleValue;
                }
                else {
                  if (event.value === null) {
                    event.value = event.oldValue
                  }
                }
              }
            }
          },
          anchorField: {
            type: 'combobox',
            required: true,
            multiSelect: false,
            name: 'resourceName',
            label: 'Anker',
            store: this.anchorStore,
            valueField: 'anchorNumber',
            displayField: "anchorNumber",
            weight: 130,
            listeners: {
              change: function (event) {
                if (event.userAction) {
                  if (event.value === null) {
                    event.value = event.oldValue
                  }
                  const roleShortName = this.parent.items.find(e => e.name === 'roleValue').record.data.shortName;
                  const roleValue = this.parent.items.find(e => e.name === 'roleValue').record.data.value;
                  const anchor = event.value;

                  let employee;
                  try {
                    employee = this.parent.items.find(e => e.name === 'personId').record.data.label;
                  } catch (e) {
                    employee = '?'
                  }

                  this.parent.items.find(e => e.name === 'name').value = employee + ' - ' + roleShortName + ' - ' + anchor;
                  this.parent.items.find(e => e.name === 'resources').value = anchor + "_" + roleValue;
                }
              }
            }
          },
          startDateField: {
            required: true,
            type: 'date',                // Hide the start time
            weight: 140
          },
          endDateField: {
            required: true,
            label: 'Ende',
            weight: 150,
            type: 'date' // Hide the end time
          },
          durationField: false,
          percentDoneField: false,
          effortField: false,
        }
      },
      notesTab: false,
      advancedTab: false,
      predecessorsTab: false,
      successorsTab: false
    }
  }
},

beforeTaskEditShow({ editor, taskRecord }) {
        if (taskRecord.isCreating) {
            const resourceId = editor.eventEditFeature.editor.eventEditFeature.record.originalData.resourceId
            const resourceIdStr = String(resourceId);

        if (resourceIdStr.includes('_')) {
            const [anchor, ...roleParts] = resourceId.split('_');
            const role = roleParts.join('_');

            const roleField = editor.widgetMap.roleField
            const anchorField = editor.widgetMap.anchorField
            const nameField = editor.widgetMap.nameField

            roleField.value = role
            anchorField.value = anchor
            nameField.value = "? - " + role + " - " + anchor
        }
        else if (!isNaN(Number(resourceId))) {
            const personField = editor.widgetMap.personField
            const nameField = editor.widgetMap.nameField

            personField.value = resourceId
            nameField.value = resourceId + " - ? - ?"
        }
    }
}

Edit: beforeTaskEditShow -> the resourceId is a combination of anchor and role -> BLI0001_PROJECT_MANAGER -> anchor: BLI0001, role: PROJECT_MANAGER

[alex.l]

Hi,

It is very difficult to create a small test case, that is runnable.
Which code fragments do you need to take a closer look? Ive added the taskEditConfig and the listener I use to prefill the taskEdit fields.

We can't confirm a bug, as well as fix it if we can't reproduce it. Actually, we need the code that allow us to reproduce the problem - all relevant code. Try to comment one by one all custom behaviour and find a fragment that make it working incorrect. Set debugger into it and see what's happened. Try to apply minimal changes to one of our demos to make this problem reproducible. I don't see how the code you shared might initiate such problem, I am afraid, we need more context.