[ANGULAR] Error when adding items to SchedulerTaskEditor

[deleepa]

Hello again!

I'm having some trouble when trying to create a SchedulerTaskEditor type object. I'm trying to add some custom fields in the generalTab of the SchedulerTaskEditor. This is what I'm doing:

this.taskEditor = new SchedulerTaskEditor({
  title: 'asd',
  bbar: {
    items: {
      deleteButton: false
     }
   },
   items: {
     generalTab: {
       title: 'Details',
       items: {
         nameField: {
           label: 'Appointment description'
         }
       }
      }
    }
    ...
 })

I'm following the documentation from here: https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/widget/SchedulerTaskEditor#configs. It says I can pass an Object for the items field. But I keep getting this error in the console:

task_edit_console.png (45.56 KiB) Viewed 633 times

Any pointers you can give me here?

[Animal]

These are not meant to be instantiated by user apps.

This is instantiated by the EventEdit Feature which sets it all up for you.

What is the goal of your current coding task?

[deleepa]

Hmm. I want to trigger the task edit modal from a custom button I have added in the event menu. Something similar to the following:

features: {
  ...
  eventMenu: {
    items: {
      editAppointment: {
        text : 'Edit Appointment',
        icon : 'b-fa-pencil-alt',
        onItem(eventData: any) {
          const taskEditor = new SchedulerTaskEditor();
          taskEditor.loadEvent(eventData.eventRecord);
          taskEditor.show();
        },
        ...
    }
},

I want to customise the editor modal that shows up.

[saki]

It should be as easy as to call https://bryntum.com/docs/scheduler/api/Scheduler/view/SchedulerBase#function-editEvent on the scheduler view. You can test it here https://bryntum.com/examples/scheduler/frameworks/angular/basic/dist/basic/ by running following in the console:

bryntum.query('scheduler').editEvent(bryntum.query('scheduler').eventStore.first)

[deleepa]

Yeah we saw the EditEvent option before, but we wanted to have multiple tabs on the editor. It seemed like tabs was only supported on the TaskEdit. Is that correct?

If I understood you correctly, if we want to programmatically trigger an edit modal, we have to use the EditEvent and not the TaskEdit. Which means the editor cannot have tabs?

[saki]

If you are using Scheduler Pro then you get the tabbed event (task) editor. You can test it at https://bryntum.com/examples/scheduler-pro/percent-done/ executing the following in the console:

schedulerPro.editEvent(schedulerPro.taskStore.first)

[Animal]

This would be a deep customization in the EventEdit configuration using the editorConfig option to reconfigure the child items to the editor to be as you want them:

{
    features : {
        eventEdit : {
            editorConfig : {
                // We're planning to have only *one* child - a TabPanel
                // so make it fit exactly into the content element
                layout : 'fit',

                items : {
                    // Null out *all* the provided defaults and add a TabPanel
                    nameField : null,
                    resourceField : null,
                    startDateField : null,
                    startTimeField : null,
                    endDateField : null,
                    endTimeField : null,

                    // We knocked out all inputs above, now add a TabPanel
                    tabs : {
                        type : 'tabpanel',
                        items : {
                            generalTab : {
                                title : 'General',
                                items : {
        // You have to put all your inputs in here
                                }
                            },
                            yourExtraTab : {
                                title : 'Extra stuff'
                            }
                        }
                    }
                }
            }
        }
    }
}

[Animal]

I see, you are using SchedulerPro. That has a multi tabbed EventEditor by default.

[saki]

To the original question. Although it is not recommended way to create an instance of the editor in the application, it would work if the configuration has a proper structure. The default configuration can be found in SchedulerPro/lib/SchedulerPro/widget/SchedulerTaskEditor.js and if you take that, pass it as the config object to new SchedulerTaskEditor it will work.

From this point on you customize it to your needs.

NOTE: It is still not optimal to create an instance for the purposes of customization.

I have tested the approach in percent-done SchedulerPro demo with this code in app.js:

import '../_shared/shared.js'; // not required, our example styling etc.
import SchedulerPro from '../../lib/SchedulerPro/view/SchedulerPro.js';
import '../../lib/Scheduler/column/ResourceInfoColumn.js';
import SchedulerTaskEditor from '../../lib/SchedulerPro/widget/SchedulerTaskEditor.js';

// Import the percent bar feature
import '../../lib/SchedulerPro/feature/PercentBar.js';

import WidgetHelper from '../../lib/Core/helper/WidgetHelper.js';

const taskEditor = new SchedulerTaskEditor({
    items : [
        {
            type        : 'tabpanel',
            defaultType : 'formtab',
            ref         : 'tabs',
            flex        : '1 0 100%',
            autoHeight  : true,

            layoutConfig : {
                alignItems   : 'stretch',
                alignContent : 'stretch'
            },

            items : {
                generalTab : {
                    title : 'Details',
                    items : {
                        nameField : {
                            type  : 'textfield',
                            label : 'Appointment description'
                        }
                    }
                },
                predecessorsTab : {
                    type   : 'predecessorstab',
                    weight : 200
                },
                successorsTab : {
                    type   : 'successorstab',
                    weight : 300
                },
                // Replaced with combo on general tab
                //{ type : 'resourcestab', weight : 400 },
                advancedTab : {
                    type   : 'scheduleradvancedtab',
                    weight : 500
                },
                notesTab : {
                    type   : 'notestab',
                    weight : 600
                }
            }
        }
    ]
});

WidgetHelper.append([
    {
        type : 'button',
        // text     : 'Open editor',
        cls  : 'b-tool',
        icon : 'b-fa-edit',
        onAction() {
            taskEditor.loadEvent(scheduler.taskStore.first);
            taskEditor.showBy({
                target : this.element,
                align  : 'l-r',
                offset : 5
            });
        }
    }
], { insertFirst : document.getElementById('tools') || document.body });

const scheduler = new SchedulerPro({
    // A Project holds the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing
    // loading data into all stores at once
    project : {
        autoLoad  : true,
        transport : {
            load : {
                url : './data/data.json'
            }
        },

        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true
    },

    appendTo          : 'container',
    startDate         : '2020-03-23',
    endDate           : '2020-03-26',
    rowHeight         : 70,
    barMargin         : 22,
    eventStyle        : 'rounded',
    resourceImagePath : '../_shared/images/users/',

    // Custom view preset, with more compact display of hours
    viewPreset : {
        base      : 'hourAndDay',
        tickWidth : 15,
        headers   : [
            {
                unit       : 'day',
                dateFormat : 'ddd DD/MM' //Mon 01/10
            },
            {
                unit       : 'hour',
                dateFormat : 'h'
            }
        ]
    },

    features : {
        columnLines  : false,
        dependencies : false,
        // Enable the percent bar feature
        percentBar   : true
    },

    columns : [
        {
            type           : 'resourceInfo',
            text           : 'Worker',
            showEventCount : true
        }
    ]
});