Skip to content

feat(ipsec-tunnels): enhance table structure and add sorting functionality#728

Open
m-dilorenzi wants to merge 1 commit intomainfrom
ipsec_tunnels_name_sorting
Open

feat(ipsec-tunnels): enhance table structure and add sorting functionality#728
m-dilorenzi wants to merge 1 commit intomainfrom
ipsec_tunnels_name_sorting

Conversation

@m-dilorenzi
Copy link
Collaborator

This pull request refactors the TunnelTable.vue component to improve its table rendering, sorting, and pagination features by leveraging new composables and UI components from @nethesis/vue-components. The update also unifies the usage of FontAwesome icons and enhances the visual feedback for tunnel states.

Key improvements include:

Table Structure, Sorting, and Pagination:

  • Replaces the old table implementation with a fully compositional approach using NeTable, NeTableHead, NeTableBody, etc., for greater flexibility and accessibility. Sorting is now enabled via NeSortDropdown and useSort, and pagination is handled with NePaginator and useItemPagination.

Visual and Icon Consistency:

  • Standardizes icon usage by switching from the generic font-awesome-icon component to the explicitly imported FontAwesomeIcon and named icon imports, ensuring consistency and improved maintainability
  • Updates icon colors and opacity to more clearly indicate enabled/disabled and status states for tunnels and their children, improving user feedback and accessibility.

Code Cleanup and Prop Handling:

  • Cleans up unused code (like getCellClasses) and switches to storing props in a variable, which is more idiomatic in <script setup>.

Closes: NethServer/nethsecurity#1563

@m-dilorenzi m-dilorenzi requested a review from Tbaile March 19, 2026 14:31
@m-dilorenzi m-dilorenzi self-assigned this Mar 19, 2026
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.

Order IPSEC tunnels by name in the UI

1 participant