Add filter to Moments page (index)

[julianguyen]

Description

It would be useful to be able to filter Moments posts by:

• Secret Share enabled
• No viewers
• At least one viewer
• Comments enabled
• Draft enabled
• Published

Filtering should work with the existing search feature as well. It might be worth being able to filter by multiple traits, so creating a new UI component for that would be necessary here.

Let's use our InputSelect component for this and place it beside the search bar

This issue requires more planning, so please plan things out it out in this issue :)

---

Please assign yourself (via the Assignees dropdown), if you do want to work on this issue. Can't find yourself? You need to join our organization.

Check out our Picking Up Issues guide if you haven't already!

[nad0m]

Hey @julianguyen , if we want to filter by multiple traits, should we be using the InputSelect component? Not sure if I understand it correctly, but seems like the component only lets you select one option at a time.

[julianguyen]

@nad0m Correct, the InputSelect component only lets you select one option at a time. So we would have to create an InputMultiSelect component to be able to filter by multiple options.

[julianguyen]

@nad0m An InputMultiSelect component could be similar to this one from Bootstrap.

[franpb14]

Hey! I've just made this component, I wanted to ask what you think about the design or if you would change anything.

https://user-images.githubusercontent.com/70280187/128932031-2e2ff7fb-4c96-444e-a18f-7b8733568c5a.mp4

[julianguyen]

This looks great @franpb14! Can we change "Filter Moments posts by..." to "Filter by"?

What do you think of placing the filter component to the right of the search bar?

[franpb14]

How exactly? as option A:

https://user-images.githubusercontent.com/70280187/129051100-e195c702-e980-41e4-ab4a-382b6bba13b9.mp4

or as option B:

https://user-images.githubusercontent.com/70280187/129051220-ceb40f38-ce58-4e70-9232-e55939bca851.mp4

Personally I prefer option A because I think it is more intuitive, the user will know that they have to apply the filters first and then click on search.

[julianguyen]

@franpb14 I think the Filter tool should be able to operate independently of the search bar. But yeah, filtering on a search should work too. I think B works well for that!

Thanks for laying out the options :)

[uzorjchibuzor]

I can see that this issue is linked to a year old PR, do you still want want help with this? @julianguyen The assigned dev has done a lot of work on this. And the rest should be minor @franpb14

[julianguyen]

@uzorjchibuzor Yeah there is a PR out that needs to be updated. I saw that you started work on https://github.com/ifmeorg/ifme/issues/2116 so I would focus on that. I can look into this or someone else can pick it up!

[lucas-codes-stuff]

@julianguyen I see there has been some progress on this so far. Is the goal to just fix up some of the suggestions you made on the PR?

[julianguyen]

Taking over this incomplete MR and taking it over the finish line 🏁