Add groups to member detail view closes #374

simon commented

2026-02-17 14:35:13 +01:00

Owner

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Member Detail – Groups display (Issue #374)
Show a member’s groups in the member detail view as button-style links in the Personal Data section (below “Linked User”). Each group links to its detail page (/groups/:slug). Empty state shows “No groups”. Implements Issue 4 from the Groups architecture.

What has been changed?

Member show (lib/mv_web/live/member_live/show.ex)
- Load groups: [:id, :name, :slug] with the member in handle_params (single query, no N+1).
- Add a “Groups” row in the Personal Data section (below “Linked User”, above “Notes”) using the existing data_field pattern.
- Each group is a link (Phoenix <.link navigate=...>) styled as btn btn-xs btn-outline btn-primary, with role="status" and aria-label={gettext("Member of group %{name}", name: group.name)}.
- Empty state: italic “No groups” text.
Tests
- New file: test/mv_web/member_live/show_groups_display_test.exs (10 tests): visibility with/without groups, multiple groups, empty state, links and navigation, slug in URL, read-only user, accessibility (role + aria-label), and that groups are loaded with the member in one request.
Docs
- docs/groups-architecture.md: Issue 4 marked as implemented (Groups in Personal Data, button-style links).
Gettext
- No new message IDs; existing “Groups”, “No groups”, “Member of group %{name}” are used and referenced from show.ex in the .pot/.po files.

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added where needed (moduledoc in Show, architecture doc)

Accessibility

New elements are properly defined with html-tags (links for navigation, not buttons)
Colour contrast follows WCAG criteria (DaisyUI btn-outline btn-primary)
Aria labels are added when needed (aria-label with “Member of group %{name}” per link; role="status")
Everything is accessible by keyboard (links are focusable)
Tab-order is comprehensible (document order in Personal Data)
All interactive elements have a visible focus (DaisyUI button focus styles)

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues (please run in browser on /members/:id with groups)

Additional Notes

Where to look: Member show LiveView (Contact Data tab) → Personal Data box → “Groups” row below “Linked User”. Group links open /groups/:slug.
Test run: mix test test/mv_web/member_live/show_groups_display_test.exs (async: false to avoid DB deadlocks).
i18n: DE translations for “Groups”, “No groups”, “Member of group %{name}” already existed; only usage in show.ex was added.
Design: Groups are links styled as small outline-primary buttons so hover/focus behaviour matches DaisyUI buttons and stays consistent with the rest of the UI.

## Description of the implemented changes The changes were: - [ ] Bugfixing - [x] New Feature - [ ] Breaking Change - [ ] Refactoring **Member Detail – Groups display (Issue #374)** Show a member’s groups in the member detail view as button-style links in the Personal Data section (below “Linked User”). Each group links to its detail page (`/groups/:slug`). Empty state shows “No groups”. Implements Issue 4 from the Groups architecture. ## What has been changed? - **Member show (`lib/mv_web/live/member_live/show.ex`)** - Load `groups: [:id, :name, :slug]` with the member in `handle_params` (single query, no N+1). - Add a “Groups” row in the **Personal Data** section (below “Linked User”, above “Notes”) using the existing `data_field` pattern. - Each group is a link (Phoenix `<.link navigate=...>`) styled as `btn btn-xs btn-outline btn-primary`, with `role="status"` and `aria-label={gettext("Member of group %{name}", name: group.name)}`. - Empty state: italic “No groups” text. - **Tests** - New file: `test/mv_web/member_live/show_groups_display_test.exs` (10 tests): visibility with/without groups, multiple groups, empty state, links and navigation, slug in URL, read-only user, accessibility (role + aria-label), and that groups are loaded with the member in one request. - **Docs** - `docs/groups-architecture.md`: Issue 4 marked as implemented (Groups in Personal Data, button-style links). - **Gettext** - No new message IDs; existing “Groups”, “No groups”, “Member of group %{name}” are used and referenced from `show.ex` in the .pot/.po files. ## Definition of Done ### Code Quality - [x] No new technical depths - [x] Linting passed - [x] Documentation is added where needed (moduledoc in Show, architecture doc) ### Accessibility - [x] New elements are properly defined with html-tags (links for navigation, not buttons) - [x] Colour contrast follows WCAG criteria (DaisyUI `btn-outline btn-primary`) - [x] Aria labels are added when needed (`aria-label` with “Member of group %{name}” per link; `role="status"`) - [x] Everything is accessible by keyboard (links are focusable) - [x] Tab-order is comprehensible (document order in Personal Data) - [x] All interactive elements have a visible focus (DaisyUI button focus styles) ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues *(please run in browser on `/members/:id` with groups)* ## Additional Notes - **Where to look:** Member show LiveView (Contact Data tab) → Personal Data box → “Groups” row below “Linked User”. Group links open `/groups/:slug`. - **Test run:** `mix test test/mv_web/member_live/show_groups_display_test.exs` (async: false to avoid DB deadlocks). - **i18n:** DE translations for “Groups”, “No groups”, “Member of group %{name}” already existed; only usage in `show.ex` was added. - **Design:** Groups are links styled as small outline-primary buttons so hover/focus behaviour matches DaisyUI buttons and stays consistent with the rest of the UI.

simon added 3 commits 2026-02-17 14:35:14 +01:00