feat: Responsive Filtering Implementation

[Cephaz]

Related to https://github.com/adrienpoly/rubyvideo/issues/3

Target :

• [x] Filter by year
• [ ] Filter by keynotes (How is it represented in a database?)
• [ ] Filter by conference name (using event_id for the moment)

Commits :

• Updated Meilisearch to consider event_id and year
• Integrated Stimulus and form for responsive filtering with Tailwind
• Added filter parameters [years] [event_ids]
• update 0.10.2 meilisearch-rails
• sort by date
• click out side filter
• add search endpoint and turbo_frame

To fix in progress:

• [x] when the app is in mobile dimension when using the filter it updates but a z-index bug appears
• [x] Disappearance [filter] of check_box and searchbar when using pagy
• [x] Change the position of the funnel icon [UI]
• [x] Sync icons mobile-web screen
• [x] https://github.com/stimulus-use/stimulus-use/blob/main/docs/use-click-outside.md or other solution

Some problems on the dev : the reindex! doesn't seem to update the model Talk

Talk.index.settings // verify settings
client = MeiliSearch::Client.new('http://localhost:7700', <KEY>)
client.index('Talk').update_settings({
  searchable_attributes: ["title", "description", "speaker_names", "year", "event_name"],
  sortable_attributes: ["title", "date"],
  filterable_attributes: ["year", "event_id"],
})

Please do not hesitate to send us your feedback.

[adrienpoly]

Thanks @Cephaz for this draft I am on the road will look at it a bit later. About the keynote it is my mistake I thought I had added the attributes on the talk model but that is not the case yet

don’t worry about it

[Cephaz]

[LOCAL DEMO]

https://github.com/adrienpoly/rubyvideo/assets/48413069/71ad9e6b-22c2-4593-be53-3f5f519ded40

[adrienpoly]

Hello

This is looking promissing!

I tried the PR locally but getting this error for every search.

I tried Talk.clear_index! and Talk.reindex! but still getting the same error

do you have an idea?

[Cephaz]

there's a problem with meilisearch, I'll make a more detailed ticket

rails c
Talk.reindex! // not working for updating settings
Talk.index.settings // check actual settings
client = MeiliSearch::Client.new('http://localhost:7700', <KEY>) //connection client
client.index('Talk').update_settings({
  searchable_attributes: ["title", "description", "speaker_names", "year", "event_name"],
  sortable_attributes: ["title", "date"],
  filterable_attributes: ["year", "event_id"],
}) //update settings

[Cephaz]

curl -H "Authorization: Bearer <KEY>" http://localhost:7700/tasks/<id>

by default on a project init with in reindex! there are only 3 ids that are generated 0, 1 ,2 but settingsUpdate doesn't work for me (it's just to check if it's not enqueue)

{"uid":0,"indexUid":"Talk","status":"succeeded","type":"indexCreation","canceledBy":null,"details":{"primaryKey":"id"},"error":null,"duration":"PT0.017674332S","enqueuedAt":"2024-01-05T14:25:37.630392882Z","startedAt":"2024-01-05T14:25:37.637012087Z","finishedAt":"2024-01-05T14:25:37.654686419Z"}

{"uid":1,"indexUid":"Talk","status":"succeeded","type":"settingsUpdate","canceledBy":null,"details":{},"error":null,"duration":"PT0.004740782S","enqueuedAt":"2024-01-05T14:25:37.647437198Z","startedAt":"2024-01-05T14:25:37.656546468Z","finishedAt":"2024-01-05T14:25:37.66128725Z"}

{"uid":2,"indexUid":"Talk","status":"succeeded","type":"documentAdditionOrUpdate","canceledBy":null,"details":{"receivedDocuments":820,"indexedDocuments":820},"error":null,"duration":"PT0.451346560S","enqueuedAt":"2024-01-05T14:25:37.928852886Z","startedAt":"2024-01-05T14:25:37.934841086Z","finishedAt":"2024-01-05T14:25:38.386187646Z"}

https://www.meilisearch.com/docs/reference/api/tasks#get-tasks

[adrienpoly]

thanks for this proposal, lots of changes to happened including reducing our dependency to Meilisearch so I will be closing the PR for now