Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Active Tab Detection for Nova Cards with URL Filter Support #37

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

jbumaniss
Copy link
Contributor

This pull request introduces a significant enhancement to the resource-navigation-link package by adding the ability to dynamically determine the active state of navigation links based on URL filter parameters. Previously, the active state of navigation links was determined solely by matching the URL path, which limited scenarios where the active state needed to dynamically reflect filters applied within a single resource. This update addresses those limitations by enabling active state determination based on specified URL filters, significantly enhancing the package's flexibility and user experience.

Main Contributions:

1. Refinement of ResourceNavigationLink.vue:

  • Enhanced to adeptly decode URL search parameters, using these as criteria for activating tabs.
  • Essential for scenarios where tabs correspond to distinct filter states within a single resource.
  • Verifies the presence and match of specified filters in the URL's query parameters to set the tab's active state accordingly.

2. Backend Integration in Link.php:

  • Introduced backend methods to allow specifying filters that dictate a tab's active state.
  • Permits defining a filter by its name or class and a corresponding value, triggering the tab to become active when matched with the URL's search parameters.
  • Ensures precise determination of the active state based on server-defined criteria.

3. Dynamic Event Listening:

  • Dynamically listens for filter-changed and filter-reset events, enabling the component to update its active state in response to filter changes without a page reload.
  • Ensures the UI consistently reflects the current filter settings, improving interface interactivity and responsiveness.

Detailed Enhancements:

  • Vue Component Adjustments:

    • ResourceNavigationLink.vue now includes methods for detecting active filters from URL search parameters, alongside updates to lifecycle hooks for optimized event management.
  • Server-side Logic Enhancement:

    • The activeByFilter method in Link.php facilitates specifying filters that influence the active state of navigation links, complete with adjustments to serialization logic for effective frontend communication.
  • Improved Reactivity and UI Responsiveness:

    • Updated event handling ensures the UI state remains synchronized with application filter settings, enhancing navigation clarity and ease for users.

This enhancement significantly augments the resource-navigation-link package, providing developers with enhanced control over UI dynamics and navigation precision, particularly beneficial for applications leveraging filters. By enabling active tab identification based on URL filters, we offer an elevated level of control and a more intuitive navigation experience for users.


I encourage the maintainers and the community to review and consider this enhancement for inclusion in the resource-navigation-link package. Your valuable feedback, insights, and any further suggestions are highly welcomed and appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants