Search for calendar view
Currently calendar views aren't searchable. At this end of this issue there you should be able to search and instantly see the filtered calendar cards cut down. This issue should be split into two MR's
- First MR: Make the calendar view rows API endpoint support the search query parameter
- Second MR: Enable the search box in the frontend for the calendar view and make sure the calendar view store correctly accepts and uses any search parameter for realtime updates.
1st Backend MR details
All you need to do is copy how the GridViewView accepts a search query parameter and where it gets passed to filter down the queryset. This should purely be a wiring up excerise, search is already implemented in our backend you just need to hookup a query parameter.
See:
CalendarViewView
get_rows_grouped_by_date_field
- How GridViewView calls get_queryset which then calls
search_all_fields
- Make sure to also allow the search_mode query parameter
- Make sure the query parameters are documented in the http://localhost:8000/api/redoc exactly like the GridViewView params, they are the same ones
- We should have one or two basic API view level tests checking that applying a search term does correctly search and filter out any results
2nd MR details
Now the calendar view endpoint support search you'll need to add search box for the calendar view in the frontend, make sure that gets passed down to the calendar.js service so it is included if set when making the API requests to get the rows.
See web-frontend/modules/database/components/view/grid/GridViewHeader.vue
for how the grid view adds the search box.
Also you will need to make sure the active search term is passed down to the calendar.js store itself which holds all the rows in memories. The key thing here being:
- The user applies a search of "test" to the calendar view
- a realtime rows_updated comes in and changes a calendar card to no longer match the search term
- It should immediately disappear, this means the frontend itself is checking when a search term changes if all the cards still match it, without making any backend API query.
Updating the calendar.js store is going to be tricky, i advise to:
- Look and copy how the
activeSearchTerm
parameter works in thegrid.js
store (the equivilent store to calendar.js but for the GridView instead). You will essentially have to copy over lots of different methods intocalendar.js
likesetSearch
etc. - See
default.methods.debouncedServerSearchRefresh
inweb-frontend/modules/database/components/view/ViewSearchContext.vue
, this is how the search box tells the view store that a search term has changed, you'll need to make sureupdateSearch
exists. AfterupdateSearch
is triggeredCalendarViewType.refresh
inpremium/web-frontend/modules/baserow_premium/viewTypes.js
will be called.
All of this is a bit of a mess, ideally you wouldn't be copy and pasting all of this search logic and it would be shared between all the view stores. For now however, i strongly recommend getting it all working via the copy and paste and duplicate all the logic in calendar.js approach first, and then once you have a grasp of it all we can think about refactoring it. This is all going to be tricky so don't hesitate to ask for help!