[ANGULAR] Delete Resource from context Menu

Our pure JavaScript Scheduler component


User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

[ANGULAR] Delete Resource from context Menu

Post by Aniket »

Team,
How can I remove a resource from context Menu so that autoSync picks this and sends a post request.

I set showRemoveRowInContextMenu to false , since I perform the validation of deleting only an empty resource.

Any suggestions?


User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

Re: [ANGULAR] Delete Resource from context Menu

Post by Aniket »

Any suggestions?


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3069
Joined: Fri Apr 01, 2016 11:08 am

Re: [ANGULAR] Delete Resource from context Menu

Post by pmiklashevich »

Hello,

I set showRemoveRowInContextMenu to false , since I perform the validation of deleting only an empty resource.

I don't see how showing or not a menu item can be related to the resource removing. 'removeRow' is a menu item which calls resourceStore.remove with a selected resource. Also I don't see how you perform validation. If removing operation is not valid, you can return false from https://www.bryntum.com/docs/scheduler/#Scheduler/data/ResourceStore#event-beforeRemove handler.

Also please keep in mind that https://www.bryntum.com/docs/scheduler/#Grid/view/GridBase#config-showRemoveRowInContextMenu is deprecated. If you need to hide the 'removeRow' item, please use the following approach:

Code: Select all

const scheduler = new Scheduler({
    features : {
        cellMenu : {
            items : {
                removeRow : false
            }
        }
    }
});

If you want to show/hide the 'removeRow' item base on a condition, that's another thing. Please take a look at https://www.bryntum.com/docs/scheduler/#Grid/feature/CellMenu#config-processItems. For example:

Code: Select all

features : {
    cellMenu : {
        processItems({contextRecord, items}) {
            // Show/hide delete option
            items.removeRow.hidden = true; // or false according to your logic
        }
    }
}

Cheers,
Pavel

Pavel Miklashevich - Core Developer

User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

Re: [ANGULAR] Delete Resource from context Menu

Post by Aniket »

Pavel,
I have a contextMenu item inside a custom column.

Code: Select all

 {
        text: 'Action',
        template: () => `<img src="./assets/icons/icon-action.svg" alt="Action"/>`,
        type: 'template',
        field: 'option',
        width: 51,
        editor: false,
        draggable: false,
        sortable: false,
        filterable: false,
        tooltipRenderer: false,
        hideable: false,
        cellMenuItems: [
          {
            text: 'Delete Item',
            icon: 'b-fa b-fa-fw b-fa-car',
            onItem: ({ record }) => {
              MessageDialog.confirm({
                title: 'Delete Item',
                message: 'Are you sure?'
              }).then(result => {
                // @ts-ignore 
                if (result === MessageDialog.yesButton) {
                  // The YES button was clicked, so go ahead!
                  const count = this.scheduler.schedulerInstance.eventStore.getEventsForResource(record.id).length;
                  // count indicates tests on a car
                  if (count > 1) {
                    Toast.show(`Resource can only be deleted if there are no events attached`);
                  } else {
                    this.scheduler.schedulerInstance.resourceStore.remove(record);
                  }
                }
              });

        }
      },
    ],
  },

Above code, deletes a resource for me but makes multiple api post calls to the backend, I have set autoSync to true


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3069
Joined: Fri Apr 01, 2016 11:08 am

Re: [ANGULAR] Delete Resource from context Menu

Post by pmiklashevich »

What is the question? Please explain better what you're trying to overcome. You said about custom column, context menu, confirmation dialog, resource removing, auto synchronization, data saving, multiple requests. But there is no questions in the post above. What is the problem?

Pavel Miklashevich - Core Developer

User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

Re: [ANGULAR] Delete Resource from context Menu

Post by Aniket »

Pavel,
I want to remove a resource using the context Menu Item, P.S above code.

However, Removing a resource triggers multiple sync calls to the backend.

Is my approach of removing a resource incorrect? P.S refer above code


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3069
Joined: Fri Apr 01, 2016 11:08 am

Re: [ANGULAR] Delete Resource from context Menu

Post by pmiklashevich »

https://www.bryntum.com/docs/scheduler/#Grid/column/Column#config-cellMenuItems has to be an object. Providing an array is deprecated. See the docs please. Other than that it looks good. If you remove the record from console, do you see 2 requests too?

Code: Select all

scheduler.resourceStore.remove(scheduler.resourceStore.first)

If so, please let us know how to reproduce with one of our examples or produce a runnable testcase that shows the issue. And please add screenshots of the requests, so it's clear what data is sent. Thanks

Pavel Miklashevich - Core Developer

User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

Re: [ANGULAR] Delete Resource from context Menu

Post by Aniket »

Pavel,
I ran

Code: Select all

scheduler.resourceStore.remove(10)

in the console and did see 2 requests in the network tab

Here is what I see in the network tab contents

1st Request

Code: Select all

{type: "sync", requestId: 16031699562781,…}
events: {updated: [{resourceId: null, id: 78}, {resourceId: null, id: 57}, {resourceId: null, id: 58},…]}
requestId: 16031699562781
resources: {removed: [{id: 10}]}
type: "sync"

2nd request

Code: Select all

{type: "sync", requestId: 16031699735632, resources: {removed: [{id: 10}]}}
requestId: 16031699735632
resources: {removed: [{id: 10}]}
type: "sync"

In the first request, Inside events array, these are the events attached to the deleted resource


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3069
Joined: Fri Apr 01, 2016 11:08 am

Re: [ANGULAR] Delete Resource from context Menu

Post by pmiklashevich »

Hello Aniket,

Please open https://www.bryntum.com/examples/scheduler/crudmanager/. It uses crud manager and has autoSync enabled. Open dev console and run:

Code: Select all

scheduler.resourceStore.remove(1)

See only one sync request is sent:

Снимок экрана 2020-10-20 в 10.38.23.png
Снимок экрана 2020-10-20 в 10.38.23.png (633.68 KiB) Viewed 16 times

Please submit a testcase. You can modify this demo, for example.

Cheers,
Pavel

Pavel Miklashevich - Core Developer

User avatar
Aniket
Posts: 260
Joined: Wed Apr 29, 2020 7:23 am

Re: [ANGULAR] Delete Resource from context Menu

Post by Aniket »

pavel,
since I am removing a record, Does my backend need to respond with removed items as well?
should I get the id's of removed resources in the response of sync?
Similar to below

Code: Select all

{
    "success" : true,
    ...
    "resources" : {
        "removed" : [
            { id : 10 },
           
] } }

Does crudManager requires the id's of resources/events which were removed either from UI or backend explicilty?


Post Reply