Add Filtering to the Roster Table

[cr0wst]

The existing roster page was visually nice, but I was having trouble navigating through the list. I added a panel that allows users to select filters to reduce the roster table.

Example

This adds three dropdowns and a search box to filter the roster. The Certificates dropdown is generated based on the certificates inside of the roster store.

The search box compares against the controller's name.

Development

I am somewhat familiar with Vue 3 and using the composition API with script setup.

I looked around for contributing information, and I didn't see anything, so I hope this is okay. I'm happy to make any changes!

I tried to follow the method of passing refs into components instead of loading the stores and other patterns I noticed.

Testing

I tested using each of the facility files to ensure the certification options were being pulled in correctly. Things seemed to work as expected.

[dhawton]

Thanks.. this has been on the todo list. Do you think it'd be difficult to retain search data even if for a session (SessionStorage API)? For example, say I filter based on "steve", click on one of them to do something, and go back. I can see it handy going back to the same filtered list. I can see not retaining it between sessions so not using localStorage.

[cr0wst]

Thanks.. this has been on the todo list. Do you think it'd be difficult to retain search data even if for a session (SessionStorage API)? For example, say I filter based on "steve", click on one of them to do something, and go back. I can see it handy going back to the same filtered list. I can see not retaining it between sessions so not using localStorage.

Oh definitely, I’ll poke at it.