✨ Voting-booth: Support search/filter candidates feature

[ElectricPaperInformationssystemeGmbH]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.

Suggestion

For many candidates, a different display is required (search field at the top and page-by-page display)

Proposed Implementation

• Filter field at the top left of each question.
• Add question extra option for this feature show_filter_field.
• Enable using asterisks * on the filter. For example the text Sir John F Kennedy Jr would match with the search John*Kennedy.
• Show any matches, on category,text or details.
• Match disregarding casing, tildes and with trimming.
• If it matches the category, show all candidates for the category.
• If it doesn't match a category but it matches some candidates of the category, the category will appear with just the matching candidates.
• In order to filter, add a tag to candidates.
• Add a bouncing period of 200ms to the field so that it only filters after the user stops typing.
• Show a soft/blue warning indicating the voting options are being filtered.
• If it is filtered by category, the results should be displayed in one column (answer_group_columns_size: 12, answer_columns_size: 12).

Proposed Implementation Design

Actual Implementation with Screenshots

In the implementation we've made a few changes:

• The search field is not next to the title to avoid margin/centering issues.
• The search field is on the right by default, but you can change it with custom css: .question-search-container { justify-content: flex-start; }.

You can find screenshots below and a link to an election with this feature. Note that this is a development server and how it looks could change.

Empty search field:

Filter by category showing all candidates from the category and using asterisks. As it's filtered by category all is shown in 1 column.

Mobile look:

Filter by write-in content. As it's not filtered by category it's shown in two columns:

Filter by candidate details:

Filter by candidate title/text:

Search for invalid option:

Tasks

Tasks

Beta Give feedback

1. Implementation proposal
2. Design proposal
3. Review and acceptance of design/implementation proposal by EPI
4. Development
5. Documentation
6. Add screenshots/video on the actual implementation.
7. Implementation approved by client.

Master PRs

Beta Give feedback

1. ✨ Search-driven ballot (large ballots) voting-booth#390
   enhancement +1
   
2. ✨ Support search/filter candidates feature in voting booth ballot-box#176
   enhancement +1
   
3. ✨ Support search/filter candidates feature in voting booth documentation#132
   documentation enhancement +2
   

Additional context

No response

[Findeton]

Hi @ElectricPaperInformationssystemeGmbH could you please review the proposed implementation?

[ElectricPaperInformationssystemeGmbH]

Hi @Findeton, thanks for the information. The design looks good. We only have one comment on this, it would be handy if we could position the search box left-aligned. We would also like to have the support of asterisk search queries and the search query must run over three parameters: category, text and details. If it is filtered by category, the results should be displayed in one column (answer_group_columns_size: 12, answer_columns_size: 12).

[Findeton]

Hi @ElectricPaperInformationssystemeGmbH Please review the implementation, specifically the section "Actual Implementation with Screenshots".

[ElectricPaperInformationssystemeGmbH]

The implementation looks good. Reviewed, thank you.