Fix links with filters not marked as active in the menu

[susanu]

Hi,

I have some links in the menu with filters applied, the problem is that they don't appear as active in the menu when you click on these links.
This pull requesut would solve the issue.

Thanks!

[pxpm]

Hey @susanu thanks for the PR .

Unfortunately I don't think this is the right approach. My understanding of this issue is that http://something.com/something or http://something.com/something?parameter=whatever are the same page? The page is something right?

If we follow your approach, let's say my menu is: <a href="http://something.com/whatever">Whatever</a>. I go to that page and I add some filters. My menu won't be able to be selected right ? Only if my menu contained the filters ? filter=1 for example? What if I change filter = 2, do I need to have a different menu with filter = 2 for it to be selected ?

Let me know if I am on track here or if you think I am missing something.

Cheers

[susanu]

My understanding of this issue is that http://something.com/something or http://something.com/something?parameter=whatever are the same page? The page is something right?

Yes, they are the same page, it's just a filter with a default value

If we follow your approach, let's say my menu is: <a href="http://something.com/whatever">Whatever</a>. I go to that page and I add some filters. My menu won't be able to be selected right ? Only if my menu contained the filters ? filter=1 for example? What if I change filter = 2, do I need to have a different menu with filter = 2 for it to be selected ?

I just tested again with a normal link on the menu but with filters active and this PR would fail in this case.

I think the right approach would be to treat menu dropdown and menu dropdown item differently when checking for the active one.
Another idea would be to check if the menu is active directly into the PHP component.

[pxpm]

Not sure if this would work, but maybe adding an option to the menu item to decide if the menu item matches the url with parameters (current behavior) or if it should keep parameters/hash and validate the current url with them?

Like match-active-full-url=true to don't strip parameters from the URL ?

I think that could cover both scenarios with a simple if in javascript, we just need to make sure it's false by default to keep the current behavior:

let url = window.location.href;
// only strip parameters if set by developer
if(el.getAttribute('match-active-full-url') === false) {
    url = url.split("#")[0].split("?")[0];
}

Something like:
<x-backpack::menu-item :match-active-full-url="true" ... >

Do you think this could work ?

Cheers

[susanu]

Lets take an example:
Monsters CRUD from the demo: https://demo.backpackforlaravel.com/admin/monster

Lets assume i want 3 links
Normal link: /admin/monster
Another link with a filter: /admin/monster?select_from_array=one
Another link with another filter: /admin/monster?select_from_array=three

In this case, only check menu dropdown item (the ones with actual links) and not menu dropdown.
Then, the validation would look like this:

• /admin/monster?select_from_array=three -> /admin/monster?select_from_array=three
• /admin/monster?select_from_array=three&checkbox=true -> /admin/monster?select_from_array=three
• /admin/monster?select_from_array=one -> /admin/monster?select_from_array=one
• /admin/monster?select_from_array=one&checkbox=true -> /admin/monster?select_from_array=one
• /admin/monster?select_from_array=two -> /admin/monster
• /admin/monster?select_from_array=two&checkbox=true -> /admin/monster

After checking the active menu item, then mark parent dropdown as active as well.
Another thing we can consider is add default filter values into the menu items and just check if the match on the match.

Let me know if i speak nonsense here or i am overthinking.

[pxpm]

Hey @susanu , nice example.

So in your example, doing a TLDR; here, what you think is missing is a way to tell what parameters to keep and what to remove ?

I think we can easily adapt the example I gave previously with the match-active-url, so it can accept:

• true - there is not stripping of the url at all.
• false - the url is completely stripped (the behavior we have now)
• parameter or [parameter1,parameter2] to strip everything except the defined parameters

Would this work for your scenario ?

Storing filter values inside the menu is a no-no in my opinion. Let's try to keep the focus on "match route links with urls" and forget the word filters. Let's assume there are just different types of urls (or different ways a url can be presented), and try to come up with something that does not transform this into a BIG thing, and keep it KISS so we can think in merging something like this.

Let me know what you think.

[susanu]

Looks good to me.
I gave the example with filters because it's the most common use case.

Should we close this PR and create another one?

[pxpm]

This PR doesn't have much, we can just change it since we already have all the conversation here.

How would the javascript part for this work ? Would it be a big mess ? I think it will be quite simple but haven't really got deep into this subject.
Want to create a POC and we go from there ? I don't have much time to work on this now but I will happily review any contribution 🙏