Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ [#2686] Add dropdown with checkboxes #1384

Merged
merged 5 commits into from
Sep 10, 2024
Merged

✨ [#2686] Add dropdown with checkboxes #1384

merged 5 commits into from
Sep 10, 2024

Conversation

jiromaykin
Copy link
Contributor

@jiromaykin jiromaykin commented Sep 5, 2024 •
edited
Loading

issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2686

  • make general (gray) filter bar wrapper
  • make template for filterbar wrapper and for re-usable multiselect dropdown
  • make multiselect custom component with checkboxes (does not exist in semantic HTML)
  • use our own custom checkboxes
  • make dropdown with a max height + scroll if contents are too big
  • make submit button appear on checked only
  • checked option sets parent styling
  • calculate Sum of selected frequencies and display/update in submit button
  • when pagination is clicked, make dropdown still work
  • fix buggy Spinner (htmx:afterSwap)
  • scroll to top when pagination is clicked
  • backend: separate status names and frequency
  • toggle dropdown by clicking on it or use spacebar/enter key
  • check checkbox with spacebar
  • submit submitbutton with Enter
  • add SiteImprove tracking on dropdown

Making it functional first, so it looks better already like this: https://www.figma.com/design/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?node-id=3830-16059&t=DRxUxA55fDr62tdz-1
Full accessibility and 'selected' and mobile-version coming up in split up issues.

Test: http://localhost:8000/mijn-aanvragen/

@codecov-commenter
Copy link

codecov-commenter commented Sep 5, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.24%. Comparing base (9f96322) to head (6bcda1b).
Report is 2 commits behind head on develop.

Additional details and impacted files 
@@           Coverage Diff            @@
##           develop    #1384   +/-   ##
========================================
  Coverage    95.24%   95.24%           
========================================
  Files         1007     1007           
  Lines        37347    37348    +1     
========================================
+ Hits         35572    35573    +1     
  Misses        1775     1775

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jiromaykin jiromaykin force-pushed the feature/2686-add-multiselect-dropdown branch 2 times, most recently from 84ff796 to bf4c974 Compare September 9, 2024 20:36
@jiromaykin jiromaykin marked this pull request as ready for review September 9, 2024 20:37
@jiromaykin jiromaykin requested a review from pi-sigma September 9, 2024 21:05
@jiromaykin
Copy link
Contributor Author

@pi-sigma as you can see this simple version of the dropdown has a lot of moving parts. It is not pixel-perfect yet but we need this to be functional first so it can be part of the release, etc.

If this simple version would be approved, then I can start tackling the 3 leftover issues that are separate from this:

  1. display 'selected' states (if multiple statuses are selected, show number of "actieve filters" and keep it on refresh)
  2. possibly needed aria-live accessibility issues and more arrowkey navigation
  3. the mobile designs.

pi-sigma
pi-sigma requested changes Sep 10, 2024
View reviewed changes
Copy link
Contributor

@pi-sigma pi-sigma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is currently no way to reset the filter, you have to select all statuses to see all the cases. This is not a big thing if the statuses are few, but gets annoying when the number increases. Is this addressed in one of the outstanding tasks?

src/open_inwoner/js/components/siteimprove/tracking.js
console.log('-> SiteImprove _sz object exists: ', _sz)
} else {
console.log('-> SiteImprove _sz is not defined yet.')
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be commented out or deleted.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently we have these logs in both Develop and Production due to the ongoing Siteimprove issues, so until https://taiga.maykinmedia.nl/project/open-inwoner/issue/2622 is solved - we still need these logs because sometimes we tend to do 'hacky' things on Production🙈

src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
{# Submit button appears on select #}
<div class="form__actions form__actions--fullwidth" id="filterFormActions">
<button class="button button--primary hide" type="submit" value="" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
{% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span>{% trans 'resultaten' %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plural is currently hard coded. It would be nice to make this dynamic ("1 resultat" vs. "2 resultaten"), though it's not a big thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, agreed - but I'd like to pick that up in #1389 because that one has a bunch of innerHTML replacements that's variable in the same way.

@jiromaykin jiromaykin force-pushed the feature/2686-add-multiselect-dropdown branch from cc73cc0 to 6bcda1b Compare September 10, 2024 10:12
@jiromaykin jiromaykin force-pushed the feature/2686-add-multiselect-dropdown branch from 6bcda1b to 0ea76e7 Compare September 10, 2024 10:46
@jiromaykin jiromaykin requested a review from pi-sigma September 10, 2024 12:52
pi-sigma
pi-sigma approved these changes Sep 10, 2024
View reviewed changes
src/open_inwoner/openzaak/tests/test_cases.py
self.assertTrue(filter_form.is_valid)
# check filter form
filter_form = response.context["filter_form"]
self.assertTrue(filter_form.is_valid())
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, that was a mistake on my part

@jiromaykin jiromaykin merged commit fd2fdb8 into develop Sep 10, 2024
19 checks passed
@jiromaykin jiromaykin deleted the feature/2686-add-multiselect-dropdown branch September 10, 2024 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pi-sigma pi-sigma pi-sigma approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@jiromaykin @codecov-commenter @pi-sigma