[ANGULAR] is angular 11 supported

Post by **eugenem** » Tue Mar 30, 2021 11:01 am

My event editor modifications aren't loaded though. Are they done differently with Pro version?

                      

                      [eventEditFeature]="schedulerConfig.eventEditFeature"

    eventEditFeature: {
      // Add extra widgets to the event editor
      items: {
        resourceField: false,

    facilities: {
      label: 'Facilities',
      type: 'combo',
      store: new ResourceStore({ data: [] }),
      name: 'facilities',
      valueField: 'id',
      displayField: 'name',
      multiSelect: false,
      weight: 220,
      highlightExternalChange: false
    },
    staff: {
      label: 'Staff',
      type: 'combo',
      store: new ResourceStore({ data: [] }),
      name: 'staff',
      valueField: 'id',
      displayField: 'name',
      multiSelect: true,
      weight: 221,
      highlightExternalChange: false
    },

Post by **eugenem** » Tue Mar 30, 2021 2:14 pm

I also checked my pre-edit event handler:

    this.schedulerPro.schedulerInstance.addListener('beforeEventEditShow', ({ eventRecord, resourceRecord, editor }) => {
      console.log(eventRecord);
      const { facilities, staff } = editor.widgetMap;
      const resources = eventRecord.resources?.length ? eventRecord.resources : (resourceRecord ? [resourceRecord] : []);

  facilities.value = resources.filter(r => r.type === 'facilities');
  staff.value = resources.filter(r => r.type === 'staff');
});

and eventRecord doesn't have resources field at all

Post by **alex.l** » Tue Mar 30, 2021 3:45 pm

Hi eugenem,

There are a lot difference via the Scheduler and the SchedulerPro.
the name of EventEdit feature in the SchedulerPro is https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/feature/TaskEdit . So, for wrapper please use taskEditFeature name and check docs to configure it properly.
There are no beforeEventEditShow event, it has https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/feature/TaskEdit#event-beforeTaskEditShow . Make sure you used correct param names because they have difference as well.

I would suggest you to read docs and guides for the SchedulerPro to make easier for you for the further development if you didn't https://www.bryntum.com/docs/scheduler-pro/

If you'll have more questions, please create a new thread for every new question as it described in our Support Policy viewtopic.php?f=35&t=772

All the best,
Alex

Post by **eugenem** » Tue Mar 30, 2021 4:55 pm

ok, changed it to taskEdit like this:


<bry-schedulerpro 
                      [height]="height - 150"
                      [columns]="schedulerConfig.columns"
                      [timeRangesFeature]="schedulerConfig.features.timeRanges"
                      [taskEditFeature]="schedulerConfig.taskEditFeature">

schedulerConfig = {
    taskEditFeature: {
        // Add extra widgets to the event editor
      items: {
        generalTab: {
          resourceField: false,
          durationField: false,
          percentDoneField: false,

      facilities: {
        label: 'Facilities',
        type: 'combo',
        store: new ResourceStore({ data: [] }),
        name: 'facilities',
        valueField: 'id',
        displayField: 'name',
        multiSelect: false,
        weight: 220,
        highlightExternalChange: false
      },
      staff: {
        label: 'Staff',
        type: 'combo',
        store: new ResourceStore({ data: [] }),
        name: 'staff',
        valueField: 'id',
        displayField: 'name',
        multiSelect: true,
        weight: 221,
        highlightExternalChange: false
      },

      department: {
        label: 'Department',
        type: 'combo',
        store: new ResourceStore({ data: [] }),
        name: 'departmentId',
        valueField: 'id',
        displayField: 'name',
        multiSelect: false,
        weight: 210,
        highlightExternalChange: false
      },

      client: {
        label: 'Client',
        type: 'combo',
        store: new ResourceStore({ data: [] }),
        name: 'companyId',
        valueField: 'id',
        displayField: 'name',
        multiSelect: false,
        weight: 211,
        highlightExternalChange: false,
        listeners: {
          change: this.onClientComboChanged
        }
      },

      project: {
        label: 'Project',
        type: 'combo',
        store: new ResourceStore({ data: [] }),
        name: 'projectId',
        valueField: 'id',
        displayField: 'name',
        multiSelect: false,
        weight: 212,
        highlightExternalChange: false
      },
    },
    predecessorsTab: false,
    successorsTab: false,
    advancedTab: false
  },
},

now get this error when trying to open the editor:

ERROR Error: Uncaught (in promise): TypeError: Cannot set property project of [object Object] which has only a getter
TypeError: Cannot set property project of [object Object] which has only a getter
    at SchedulerGeneralTab.set (Config.js:442)
    at SchedulerGeneralTab.setConfig (Base.js:849)
    at SchedulerGeneralTab.configure (Base.js:766)
    at SchedulerGeneralTab.construct (Base.js:399)
    at SchedulerGeneralTab.construct (Localizable.js:158)
    at SchedulerGeneralTab.construct (Events.js:357)
    at SchedulerGeneralTab.construct (Widget.js:882)
    at new Base (main.js:21304)
    at SchedulerGeneralTab._createSuperInternal (Localizable.js:9)
    at new Localizable (Localizable.js:145)
    at resolvePromise (zone.js:832)
    at zone.js:739
    at asyncGeneratorStep (arrayWithoutHoles.js:7)
    at _next (assertThisInitialized.js:9)
    at assertThisInitialized.js:9
    at new ZoneAwarePromise (zone.js:913)
    at TaskEdit.<anonymous> (assertThisInitialized.js:6)
    at TaskEdit.editEvent (TaskEdit.js:591)
    at TaskEdit.onActivateEditor (TaskEdit.js:565)
    at SchedulerPro.trigger (Events.js:1134)

Post by **eugenem** » Tue Mar 30, 2021 4:59 pm

removed my own 'project' field, as it seems to conflict with yours.

So now I can open the editor and I see a standard one (except there is just general tab)

Post by **mats** » Tue Mar 30, 2021 5:26 pm

All is working?

Post by **eugenem** » Tue Mar 30, 2021 5:35 pm

It's close. Found an error in my setup, now I open the editor, see my custom fields, and also your resources field (I've tried to disable it with

taskEditFeature: {
        // Add extra widgets to the event editor
      items: {
        generalTab: {
          items: {
            resourceField: false,

And also I need to fix the events. Standard version has resourceRecord parameter and resources property of eventRecord. How do I work with resources in Pro? I need to split the resources field into 2 groups on load, and combine them back on save...

  ngAfterViewInit() {
    // install beforeEventEdit listener

this.schedulerPro.schedulerInstance.addListener('beforeTaskEditShow', ({ taskRecord, resourceRecord, editor }) => {
  console.log(taskRecord, resourceRecord);
  const { facilities, staff } = editor.widgetMap;
  const resources = taskRecord.resources?.length ? taskRecord.resources : (resourceRecord ? [resourceRecord] : []);

  facilities.value = resources.filter(r => r.type === 'facilities');
  staff.value = resources.filter(r => r.type === 'staff');
});

this.schedulerPro.schedulerInstance.addListener('beforeTaskSave', ({ source: scheduler, taskRecord, values, resourceRecords }) => {
  const selectedFacilities = [values.facilities]; // single select
  const selectedStaff = values.staff; // multi select
  const selectedResourceIds = [...selectedFacilities, ...selectedStaff];

  // Assigning resources to event does not work here, because event editor reassigns the resources internally.
  // Therefore mutate the resourceRecords param which is used internally.
  const selectedResources = this.schedulerPro.schedulerInstance.resourceStore.query(record => selectedResourceIds.includes(record.id), true);
  resourceRecords.splice(0, resourceRecords.length, ...selectedResources);
});

this.schedulerPro.schedulerInstance.addListener('timeAxisChange', ({ source, config }) => {
  //this.startDate = config.startDate;
  //this.endDate = config.endDate;
});
  }

Post by **mats** » Tue Mar 30, 2021 5:46 pm

How do I work with resources in Pro

Resources are assigned using the assignmentStore, data in Pro looks like this (you can look at any example to see the structure easily):

{
    "success"      : true,
    "calendars"    : {
        "rows" : [
            {
                "id"                       : "day",
                "name"                     : "Day",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 8:00",
                        "recurrentEndDate"   : "at 17:00",
                        "isWorking"          : true
                    }
                ]
            },
            {
                "id"                       : "early",
                "name"                     : "Morning",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 6:00",
                        "recurrentEndDate"   : "at 14:00",
                        "isWorking"          : true
                    }
                ]
            },
            {
                "id"                       : "late",
                "name"                     : "Evening",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 16:00",
                        "recurrentEndDate"   : "at 00:00",
                        "isWorking"          : true
                    }
                ]
            },
            {
                "id"                       : "night",
                "name"                     : "Night",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 22:00",
                        "recurrentEndDate"   : "at 6:00",
                        "isWorking"          : true
                    }
                ]
            }
        ]
    },
    "resources"    : {
        "rows" : [
            {
                "id"         : 1,
                "name"       : "George",
                "calendar"   : "day",
                "type"       : "Operators",
                "eventColor" : "blue"
            },
            {
                "id"         : 2,
                "name"       : "Rob",
                "calendar"   : "late",
                "type"       : "Operators",
                "eventColor" : "blue"
            },
            {
                "id"       : 3,
                "name"     : "Mike",
                "calendar" : "early",
                "type"     : "Operators"
            },
            {
                "id"       : 4,
                "name"     : "Celia",
                "calendar" : "early",
                "type"     : "Operators"
            },
            {
                "id"         : 5,
                "name"       : "Electric forklift",
                "eventStyle" : "plain",
                "image"      : false,
                "iconCls"    : "b-fa b-fa-truck-loading",
                "type"       : "Machines"
            },
            {
                "id"         : 6,
                "name"       : "Workstation T22",
                "eventStyle" : "plain",
                "image"      : false,
                "iconCls"    : "b-fa b-fa-desktop",
                "type"       : "Machines"
            },
            {
                "id"         : 7,
                "name"       : "Robot AT4",
                "image"      : false,
                "eventStyle" : "plain",
                "iconCls"    : "b-fa b-fa-robot",
                "type"       : "Machines"
            },
            {
                "id"         : 8,
                "name"       : "Assembly station",
                "image"      : false,
                "eventStyle" : "plain",
                "iconCls"    : "b-fa b-fa-cogs",
                "type"       : "Machines"
            }
        ]
    },
    "events"       : {
        "rows" : [
            {
                "id"             : 1,
                "name"           : "Meeting",
                "startDate"      : "2020-03-23T07:00",
                "duration"       : 4,
                "durationUnit"   : "hour",
                "constraintDate" : "2020-03-23T07:00",
                "constraintType" : "startnoearlierthan",
                "percentDone"    : 100
            },
            {
                "id"           : 13,
                "name"         : "Get parts",
                "durationUnit" : "hour",
                "duration"     : 3,
                "percentDone"  : 40
            },
            {
                "id"           : 14,
                "name"         : "Assembly",
                "startDate"    : "2020-03-23T06:00",
                "durationUnit" : "hour",
                "duration"     : 3,
                "percentDone"  : 40
            },
            {
                "id"           : 15,
                "name"         : "Chip installation",
                "durationUnit" : "hour",
                "duration"     : 4,
                "percentDone"  : 20
            },
            {
                "id"           : 16,
                "name"         : "Inspection",
                "durationUnit" : "hour",
                "duration"     : 3,
                "percentDone"  : 10
            },
            {
                "id"           : 17,
                "name"         : "Maintenance",
                "eventColor"   : "red",
                "eventStyle"   : "dashed",
                "iconCls"      : "b-fa b-fa-hammer",
                "durationUnit" : "hour",
                "duration"     : 3,
                "percentDone"  : 0
            },
            {
                "id"           : 18,
                "startDate"    : "2020-03-23T20:00",
                "name"         : "Recharge",
                "eventColor"   : "red",
                "eventStyle"   : "dashed",
                "iconCls"      : "b-fa b-fa-bolt",
                "durationUnit" : "hour",
                "duration"     : 8,
                "percentDone"  : 0
            }
        ]
    },
    "assignments"  : {
        "rows" : [
            {
                "id"       : 1,
                "event"    : 1,
                "resource" : 1
            },
            {
                "id"       : 2,
                "event"    : 2,
                "resource" : 1
            },
            {
                "id"       : 3,
                "event"    : 3,
                "resource" : 1
            },
            {
                "id"       : 4,
                "event"    : 4,
                "resource" : 1
            },
            {
                "id"       : 5,
                "event"    : 5,
                "resource" : 2
            },
            {
                "id"       : 6,
                "event"    : 6,
                "resource" : 2
            },
            {
                "id"       : 7,
                "event"    : 7,
                "resource" : 2
            },
            {
                "id"       : 9,
                "event"    : 13,
                "resource" : 4
            },
            {
                "id"       : 12,
                "event"    : 14,
                "resource" : 3
            },
            {
                "id"       : 13,
                "event"    : 9,
                "resource" : 4
            },
            {
                "id"       : 16,
                "event"    : 10,
                "resource" : 3
            },
            {
                "id"       : 17,
                "event"    : 10,
                "resource" : 4
            },
            {
                "id"       : 20,
                "event"    : 11,
                "resource" : 3
            },
            {
                "id"       : 21,
                "event"    : 11,
                "resource" : 4
            },
            {
                "id"       : 24,
                "event"    : 12,
                "resource" : 3
            },
            {
                "id"       : 25,
                "event"    : 12,
                "resource" : 4
            },
            {
                "id"       : 28,
                "event"    : 13,
                "resource" : 5
            },
            {
                "id"       : 29,
                "event"    : 16,
                "resource" : 2
            },
            {
                "id"       : 47,
                "event"    : 16,
                "resource" : 6
            },
            {
                "id"       : 32,
                "event"    : 14,
                "resource" : 8
            },
            {
                "id"       : 33,
                "event"    : 15,
                "resource" : 7
            },
            {
                "id"       : 34,
                "event"    : 17,
                "resource" : 7
            },
            {
                "id"       : 35,
                "event"    : 17,
                "resource" : 2
            },
            {
                "id"       : 36,
                "event"    : 18,
                "resource" : 5
            }
        ]
    },
    "dependencies" : {
        "rows" : [
            {
                "id"        : 1,
                "fromEvent" : 14,
                "toEvent"   : 13
            },
            {
                "id"        : 2,
                "fromEvent" : 13,
                "toEvent"   : 15
            },
            {
                "id"        : 3,
                "fromEvent" : 15,
                "toEvent"   : 16
            },
            {
                "id"        : 4,
                "fromEvent" : 16,
                "toEvent"   : 17,
                "lag"       : 1,
                "lagUnit"   : "h"
            }
        ]
    },
    "timeRanges"   : {
        "rows" : [
            {
                "id"        : 1,
                "startDate" : "2020-03-23T15:00",
                "iconCls"   : "b-fa b-fa-coffee",
                "name"      : "Fika"
            },
            {
                "id"           : 2,
                "startDate"    : "2020-03-23T12:00",
                "duration"     : 2,
                "durationUnit" : "h",
                "name"         : "Lunch"
            },
            {
                "id"           : 3,
                "startDate"    : "2020-03-23T22:00",
                "iconCls"      : "b-fa b-fa-fw b-fa-fire",
                "duration"     : 4,
                "durationUnit" : "h",
                "name"         : "Fire alarm test"
            }
        ]
    }
}

Post by **eugenem** » Tue Mar 30, 2021 5:53 pm

Resources are loaded fine, I return structure like this, and I see resources in your standard resources field.

But what I need is to have 2 fields of my own that split resources into 2 groups: people and rooms. So for example, I have event assigned to Person 1, Person 2, Room 1. And at editor I should see
Room: Room 1
Persons: Person1, Person2

This is how it worked at Standard version:
viewtopic.php?f=44&t=16356&start=10

Post by **mats** » Tue Mar 30, 2021 6:11 pm

It should be possible to configure the general tab the same way you configured the Event Editor in the basic Scheduler version. We don't have a guide (yet) showing how to customize the event editor, but for now you can learn how to customize it through the Gantt docs: https://bryntum.com/docs/gantt/#guides/customization/taskedit.md

Does that help?

Support Forum

[ANGULAR] is angular 11 supported