How to compare the current state to a new state and warn that it already exists?

glimpsed_chaos

Link to test case: https://live.datatables.net/cuxosuta/4/edit
Description of problem: Is there a way to alert/notify/modal a user that they created a duplicate State, when using StateRestore extension?

In the above test case, if you select a state then click "Create State", it creates the exact same state previously selected. This is shown as both States showing checkmarks next to them in the drop down.

This does not convey that or any other meaning to the user to let them know they should either remove the extra State or change its meaning (order, search, etc.).

I tried in the test case, using the "stateRestore-change" event to extract and compare the Key/Value that is saved in the local storage and compare them for duplicates values. However, it seems that the keys won't match even though they do the same thing.

Is there a way to achieve this that I can implement? It seems like there should be as the indication of the checkmark on both States implies that the extension is aware of the duplicate nature.

I would like to be able to, modal preferable, notify the user they created duplicate state and should modify/delete.

Thanks for your time and any help you can offer.

kthorngren

Looks like StateRestore has a _deepCompare() function that is used to compare two states. You might be able to reuse that code on your page.

One option might be to use stateRestore.states() to fetch all the states and compare them directly by converting the objects to a JSON string. I created this example to show this:
https://live.datatables.net/nahotobe/1/edit

It accesses the state using table.stateRestore.states()[1].s.savedState then uses JSON.stringify() to convert to JSON. As long as the order of the object is the savedState same this should work. Not sure if the order is guaranteed in Javascript. A deep compare function of the stateRestore.states() result would be a safer option.

Kevin

glimpsed_chaos

It looks like comparing the stateRestore.states should work.

Though it appears that if you have additional options/extensions enabled, such as childRows or searchPanes, the stateRestore.states object will contain settings for those as well.

Which is all good and correct but just pointing out for others usage that if an option/extension is added later then that will create a difference and you may need to remove the original and recreate or at minimum inform users that something new was added and to delete/create their own states again.

Thank Kevin!

glimpsed_chaos

My 2 cents, but I think this might be a nice feature to opt into whenever an update is made to the stateRestore extension. It just seems that letting a user endlessly click 'createState' and duplicating a current state without warning is a problem.

allan

Agreed - I can see that this might be quite desirable. I've added it to my list

Thanks for the feedback!
Allan

glimpsed_chaos

@allan - Thank you!

For now, I am implementing what @kthorngren suggested.

My mostly working example with a modal - https://live.datatables.net/nahotobe/8/edit

It works when you switch States but I cannot seem to find a trigger to make this occur when a user might "Create State", which would be ideal.

Any suggestions on that would be fantastic.

kthorngren

One option is to add a class name to the Create State button using buttons.buttons.className. Create an event handler for that button. For example:
https://live.datatables.net/nahotobe/9/edit

Is this what you are looking for?

Kevin

glimpsed_chaos

@kthorngren Yes! That works perfectly for me. I was too busy looking into the code for something to trigger on, I overlooked the obvious of adding a class in the button options.

Thank you!