Advanced Routing Panel in "Other" tab

[jacob-xhio]

This PR addresses the advanced case of the following issue: #458. A video sample of the functionality working is shown below, along with a screenshot of the final appearance of the tab.

2024-03-15.11-55-04.mov

[haynesjm42]

Some additional things to consider for our advanced routing example(s):

---

A pattern I've been using for the obfuscated/encoded route params is this:

Using these encoder/decoder methods on the route to automatically handle the encoding without needing to do anything in the tab/component.

// Encoding of json route params as base64
export const routeParamEncoders = {
    encodeParams: params => {
        if (isEmpty(params)) return {};
        return {q: window.btoa(JSON.stringify(params))};
    },
    decodeParams: params => {
        if (!params.q) return {};
        return JSON.parse(window.atob(params.q));
    }
};

This also requires putting the router query params in "loose" mode (which just means you can put whatever you want in the params and router5 wont validate/modify/etc.)

XH.router.setOption('queryParamsMode', 'loose');

Then in the actual route definition you can do this:

...

{
    name: 'myRoute',
    path: '/my-route',
    ...routeParamEncoders
},
...

With this your component code doesn't need to worry about the encoding at all, or even what the route is configured to use for params - it just gets the json object params and puts whatever json object it wants into the params.

---

Another thing that can be important for tabs which allow you to modify something in a non-modal way is to add handlers to intercept deactivation of a route so you can prompt the user to save changes, which can be done like this:

XH.router.canDeactivate(route, () => (toState, fromState, doneFn) => {
    if (this.isModified) {
        XH.confirm(...).then(confirmed => {
            if (confirmed) doneFn();
        }
    } else {
        doneFn();
    }
});

Also note that this apparently needs to be added each time the route is activated, so it should go into a reaction on the route after checking that the current route is the one for your tab/component (just like when parsing route params - would go in the same place)

This is usually done in combination with adding a beforeunload handler on the window to make a similar check for avoiding losing unsaved changes.

window.addEventListener('beforeunload', e => {
    // Ignore if we aren't the current page or if we don't have pending changes
    if (!XH.routerState.name.endsWith('myRoute') || !this.isModified) {
        delete e.returnValue;
        return;
    }

    e.preventDefault();
    e.returnValue = '';
});

[amcclain]

Again, a few small comments but looking very close / let's get it in today 👍

[amcclain]

If I open the advanced example, adjust some params, then swap to another tab, I see the decoded route params now in my URL:

[amcclain]

@jacob-xhio - it looks like the "revent route deactivation" switch is not working, or at least I could not work out what it was supposed to do while testing out the app. Have a look please?