[Angular] Resource change in Angular Taskboard

[harish22]

Hi team,

I'm using the Angular version of Bryntum TaskBoard. I need to call a POST API whenever a resource (technician) is changed using the taskMenu option.

Currently, I’m configuring the taskMenu inside the TaskBoard config, but I’m not able to trigger the API call from there. Is there any way to handle this event and call the API from the Angular component (.ts file) instead?

Also I don't want to show the resource icon in taskMenu option.

Any guidance would be appreciated!

Thanks,
Harish

[ghulam.ghous]

I'm using the Angular version of Bryntum TaskBoard. I need to call a POST API whenever a resource (technician) is changed using the taskMenu option.

Please listen to change event on assignmentStore and implement your logic: https://bryntum.com/products/taskboard/docs/api/Scheduler/data/AssignmentStore#event-change

assignmentStore : {
    onChange(e){
        // Your logic
    }
}

Currently, I’m configuring the taskMenu inside the TaskBoard config, but I’m not able to trigger the API call from there. Is there any way to handle this event and call the API from the Angular component (.ts file) instead?

Yes you can listen to the onItem event and make the necessary changes there:

features : {
    taskMenu: {
        items : {
        resources : {
            onItem(e){
                    debugger
                    console.log(e.eventName)
                }
            }
        }}
    }
},

https://bryntum.com/products/taskboard/docs/api/Core/widget/Menu

What do you mean by resource icon?
The icon in the resources items? Or in the menu items in the resources menu?

For the resourceItem, you can modify the resourcesItem:

features : {
    taskMenu: {
        items : {
        resources : {
            icon : null,
            onItem(e){
                    debugger
                    console.log(e.eventName)
                }
            }
        }}
    },

Or if you don't want to render the resource images, you can override this code on the resources menu:

                  menu     : resourceStore.map(resource => {
                        const avatar = this.avatarRendering?.getResourceAvatar({
                            resourceRecord : resource,
                            initials       : resource.initials,
                            color          : resource.color,
                            iconCls        : resource.iconCls,
                            imageUrl       : resource.imageUrl || ((client.resourceImagePath || '') + (resource.image || ''))
                        });

                        return {
                            ref  : String(resource.id),
                            cls  : 'b-resource-menu-item',
                            text : avatar ? {
                                className : 'b-resource-menu-item-inner',
                                children  : [
                                    avatar,
                                    StringHelper.encodeHtml(resource.name)
                                ]
                            } : StringHelper.encodeHtml(resource.name),
                            resource,
                            checked     : taskRecord.resources.includes(resource),
                            // Only allow single pick in single assignment mode
                            toggleGroup : usesSingleAssignment ? 'single' : null,
                            radio       : false
                        };
                    }
                    ),