From 90758191f99da21e3cb2cd033692cf353f868ab2 Mon Sep 17 00:00:00 2001 From: Simon Date: Thu, 29 Jan 2026 17:03:07 +0100 Subject: [PATCH] docs: update groups architecture --- docs/groups-architecture.md | 89 ++++++++++++++++++++++++++++++++++++- 1 file changed, 87 insertions(+), 2 deletions(-) diff --git a/docs/groups-architecture.md b/docs/groups-architecture.md index b2316d8..8251a4b 100644 --- a/docs/groups-architecture.md +++ b/docs/groups-architecture.md @@ -314,9 +314,23 @@ lib/ - Display group name and description - List all members in group - Link to member detail pages +- Add members to group (via modal with search/autocomplete) +- Remove members from group (via remove button per member) - Edit group button (navigates to `/groups/:slug/edit`) - Delete group button (with confirmation modal) +**Add Member Functionality:** +- "Add Member" button displayed above member table (only for users with `:update` permission) +- Opens modal with member search/autocomplete +- Search filters out members already in the group +- Selecting a member adds them to the group immediately +- Success/error flash messages provide feedback + +**Remove Member Functionality:** +- "Remove" button (icon button) for each member in table (only for users with `:update` permission) +- Clicking remove immediately removes member from group (no confirmation dialog) +- Success/error flash messages provide feedback + **Note:** Uses slug for routing to provide URL-friendly, readable group URLs (e.g., `/groups/board-members`). ### Group Form Pages @@ -752,6 +766,7 @@ Each functional unit can be implemented as a **separate issue**: - **Issue 4:** Groups in Member Detail (Unit 5) - **Issue 5:** Groups in Member Search (Unit 6) - **Issue 6:** Permissions (Unit 7) +- **Issue 7:** Add/Remove Members in Group Detail View **Alternative:** Issues 3 and 4 can be combined, as they both concern the display of groups. @@ -797,6 +812,27 @@ Each functional unit can be implemented as a **separate issue**: **Estimation:** 3-4h +### Phase 2a: Add/Remove Members in Group Detail View + +**Goal:** Enable adding and removing members from groups via UI + +**Tasks:** +1. Add "Add Member" button above member table in Group Detail View +2. Implement modal with member search/autocomplete +3. Add "Remove" button for each member in table +4. Implement add/remove functionality with flash messages +5. Ensure proper authorization checks + +**Deliverables:** +- Members can be added to groups via UI +- Members can be removed from groups via UI +- Proper feedback via flash messages +- Authorization enforced + +**Estimation:** 2-3h + +**Note:** This phase extends Phase 2 and can be implemented as Issue 7 after Issue 2 is complete. + ### Phase 3: Member Overview Integration **Goal:** Display and filter groups in member overview @@ -863,9 +899,9 @@ Each functional unit can be implemented as a **separate issue**: **Estimation:** 1-2h -### Total Estimation: 13-18h +### Total Estimation: 15-21h -**Note:** This aligns with the issue estimation of 15h. +**Note:** This includes all 7 issues. The original MVP estimation was 13-15h, with Issue 7 adding 2-3h for the add/remove members functionality in the Group Detail View. --- @@ -958,6 +994,55 @@ Each functional unit can be implemented as a **separate issue**: - Only admins can manage groups - All users can view groups (if they can view members) +### Issue 7: Add/Remove Members in Group Detail View +**Type:** Frontend +**Estimation:** 2-3h +**Dependencies:** Issue 1 (Backend must be functional), Issue 2 (Group Detail View must exist) + +**Tasks:** +- Add "Add Member" button above member table in Group Detail View (`/groups/:slug`) +- Implement modal for member selection with search/autocomplete +- Add "Remove" button for each member in the member table +- Implement add member functionality (create MemberGroup association) +- Implement remove member functionality (destroy MemberGroup association) +- Add flash messages for success/error feedback +- Ensure proper authorization checks (only users with `:update` permission on Group can add/remove) +- Filter out members already in the group from search results +- Reload group data after add/remove operations + +**Acceptance Criteria:** +- "Add Member" button is visible above member table (only for users with `:update` permission) +- Clicking "Add Member" opens a modal with member search/autocomplete +- Search filters members and excludes those already in the group +- Selecting a member from search adds them to the group +- Success flash message is displayed when member is added +- Error flash message is displayed if member is already in group or other error occurs +- Each member row in the table has a "Remove" button (only visible for users with `:update` permission) +- Clicking "Remove" immediately removes the member from the group (no confirmation dialog) +- Success flash message is displayed when member is removed +- Group member list and member count update automatically after add/remove +- Modal closes after successful member addition +- Authorization is enforced server-side in event handlers +- UI respects permission checks (buttons hidden for unauthorized users) + +**Technical Notes:** +- Reuse member search pattern from `UserLive.Form` (ComboBox hook with autocomplete) +- Use `Membership.create_member_group/1` for adding members +- Use `Membership.destroy_member_group/1` for removing members +- Filter search results to exclude members already in the group (check `group.members`) +- Reload group with `:members` and `:member_count` after operations +- Follow existing modal patterns (similar to delete confirmation modal) +- Ensure accessibility: proper ARIA labels, keyboard navigation, focus management + +**UI/UX Details:** +- Modal title: "Add Member to Group" +- Search input placeholder: "Search for a member..." +- Search results show member name and email +- "Add" button in modal (disabled until member selected) +- "Cancel" button to close modal +- Remove button can be an icon button (trash icon) with tooltip +- Flash messages: "Member added successfully" / "Member removed successfully" / error messages + --- ## Testing Strategy