Better listing of options in Smart Search drop downs

[richardolsson]

Description

In Smart Search configuration, there are lots of dropdowns where users can pick surveys, event categories, projects etc. This listings could be improved in several ways, most importantly:

• Alphabetical sorting by default
• Grouping options by project (when applicable, e.g. in surveys and call assignment lists)

Steps to reproduce

1. Go to anywhere a Smart Search can be configured, e.g. by creating a new list at http://app.dev.zetkin.org/organize/1/people and clicking "Configure Smart Search"
2. Add a filter for call history or surveys
3. In the drop-downs, try to find the right call assignment/survey

Expected Behaviour

Lists should be alphabetical, and maybe even grouped by campaign/project

Actual Behaviour

Lists are ordered by creation date, which is very difficult to browse.

Screenshots (if you have any)

[alxgrk]

@richardolsson I would like to offer my help working on this. Any hint on how the grouping might look like, i.e. is there any other UI component that does that already?

[ziggabyte]

Hi @alxgrk! Let's assign you to this task, and I think you should jump in and begin to implement sorting alphabetically - and then we can look at the grouping :D better to get started on something and evaluate as we go along. check out contributing.md and readme.md for all the deets on how to set up! Are you in the Code Red slack group?

[dimplethomas1991]

Hi @ziggabyte , @niklasva82 helped with this one :)

the class to make a fix is src/features/smartSearch/components/filters/CampaignParticipation/index.tsx code to fix ... doesn't yet sort case insensitive

const CampaignParticipation = ({ onSubmit, onCancel, filter: initialFilter, }: CampaignParticipationProps): JSX.Element => { const { orgId } = useNumericRouteParams();

// TODO: Show loading indicator instead of empty arrays? const activities = useEventTypes(orgId).data || []; const campaigns = useCampaigns(orgId).data || []; const locations = useEventLocations(orgId) || [];

campaigns.sort((c1, c2) => c1.title > c2.title ? -1 : 1 );

[alxgrk]

@dimplethomas1991 thanks for the hint, but I think the idea was to not only implement it for that specific drop-down, but for all available fields in the Smart Search modal - correct me if I'm wrong, @richardolsson .

I have some changes locally, will need to go through contributing.md before actually pushing something though...

[richardolsson]

@dimplethomas1991 thanks for the hint, but I think the idea was to not only implement it for that specific drop-down, but for all available fields in the Smart Search modal - correct me if I'm wrong, @richardolsson .

I think it sounds like a good idea to implement alphabetic sorting as default everywhere, although not all drop-downs in every Smart Search filter will contain options that can be grouped by project/campaign, so that part of the expected behaviour would need to be enabled conditionally (e.g. in a separate component).

I have some changes locally, will need to go through contributing.md before actually pushing something though...

Looking forward to seeing it! 💯