docs: add translations and update development log (#168)
This commit is contained in:
parent
48b0823091
commit
078809981d
6 changed files with 325 additions and 40 deletions
|
|
@ -1321,6 +1321,135 @@ end
|
|||
|
||||
---
|
||||
|
||||
## Session: User-Member Linking UI Enhancement (2025-01-13)
|
||||
|
||||
### Feature Summary
|
||||
Implemented user-member linking functionality in User Edit/Create views with fuzzy search autocomplete, email conflict handling, and accessibility support.
|
||||
|
||||
**Key Features:**
|
||||
- Autocomplete dropdown with PostgreSQL Trigram fuzzy search
|
||||
- Link/unlink members to user accounts
|
||||
- Email synchronization between linked entities
|
||||
- WCAG 2.1 AA compliant (ARIA labels)
|
||||
- Bilingual UI (English/German)
|
||||
|
||||
### Technical Decisions
|
||||
|
||||
**1. Search Priority Logic**
|
||||
Search query takes precedence over email filtering to provide better UX:
|
||||
- User types → fuzzy search across all unlinked members
|
||||
- Email matching only used for post-filtering when no search query present
|
||||
|
||||
**2. JavaScript Hook for Input Value**
|
||||
Used minimal JavaScript (~6 lines) for reliable input field updates:
|
||||
```javascript
|
||||
// assets/js/app.js
|
||||
window.addEventListener("phx:set-input-value", (e) => {
|
||||
document.getElementById(e.detail.id).value = e.detail.value
|
||||
})
|
||||
```
|
||||
**Rationale:** LiveView DOM patching has race conditions with rapid state changes in autocomplete components. Direct DOM manipulation via `push_event` is the idiomatic LiveView solution for this edge case.
|
||||
|
||||
**3. Fuzzy Search Implementation**
|
||||
Combined PostgreSQL Full-Text Search + Trigram for optimal results:
|
||||
```sql
|
||||
-- FTS for exact word matching
|
||||
search_vector @@ websearch_to_tsquery('simple', 'greta')
|
||||
-- Trigram for typo tolerance
|
||||
word_similarity('gre', first_name) > 0.2
|
||||
-- Substring for email/IDs
|
||||
email ILIKE '%greta%'
|
||||
```
|
||||
|
||||
### Key Learnings
|
||||
|
||||
#### 1. Ash `manage_relationship` Internals
|
||||
**Critical Discovery:** During validation, relationship data lives in `changeset.relationships`, NOT `changeset.attributes`:
|
||||
|
||||
```elixir
|
||||
# During validation (manage_relationship processing):
|
||||
changeset.relationships.member = [{[%{id: "uuid"}], opts}]
|
||||
changeset.attributes.member_id = nil # Still nil!
|
||||
|
||||
# After action completes:
|
||||
changeset.attributes.member_id = "uuid" # Now set
|
||||
```
|
||||
|
||||
**Solution:** Extract member_id from both sources:
|
||||
```elixir
|
||||
defp get_member_id_from_changeset(changeset) do
|
||||
case Map.get(changeset.relationships, :member) do
|
||||
[{[%{id: id}], _opts}] -> id # New link
|
||||
_ -> Ash.Changeset.get_attribute(changeset, :member_id) # Existing
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
**Impact:** Fixed email validation false positives when linking user+member with identical emails.
|
||||
|
||||
#### 2. LiveView + JavaScript Integration Patterns
|
||||
|
||||
**When to use JavaScript:**
|
||||
- ✅ Direct DOM manipulation (autocomplete, input values)
|
||||
- ✅ Browser APIs (clipboard, geolocation)
|
||||
- ✅ Third-party libraries
|
||||
|
||||
**When NOT to use JavaScript:**
|
||||
- ❌ Form submissions
|
||||
- ❌ Simple show/hide logic
|
||||
- ❌ Server-side data fetching
|
||||
|
||||
**Pattern:**
|
||||
```elixir
|
||||
socket |> push_event("event-name", %{key: value})
|
||||
```
|
||||
```javascript
|
||||
window.addEventListener("phx:event-name", (e) => { /* handle */ })
|
||||
```
|
||||
|
||||
#### 3. PostgreSQL Trigram Search
|
||||
Requires `pg_trgm` extension with GIN indexes:
|
||||
```sql
|
||||
CREATE INDEX members_first_name_trgm_idx
|
||||
ON members USING GIN(first_name gin_trgm_ops);
|
||||
```
|
||||
Supports:
|
||||
- Typo tolerance: "Gret" finds "Greta"
|
||||
- Partial matching: "Mit" finds "Mitglied"
|
||||
- Substring: "exam" finds "example.com"
|
||||
|
||||
#### 4. Test-Driven Development for Bug Fixes
|
||||
Effective workflow:
|
||||
1. Write test that reproduces bug (should fail)
|
||||
2. Implement minimal fix
|
||||
3. Verify test passes
|
||||
4. Refactor while green
|
||||
|
||||
**Result:** 355 tests passing, 100% backend coverage for new features.
|
||||
|
||||
### Files Changed
|
||||
|
||||
**Backend:**
|
||||
- `lib/membership/member.ex` - `:available_for_linking` action with fuzzy search
|
||||
- `lib/mv/accounts/user/validations/email_not_used_by_other_member.ex` - Relationship change extraction
|
||||
- `lib/mv_web/live/user_live/form.ex` - Event handlers, state management
|
||||
|
||||
**Frontend:**
|
||||
- `assets/js/app.js` - Input value hook (6 lines)
|
||||
- `priv/gettext/**/*.po` - 10 new translation keys (DE/EN)
|
||||
|
||||
**Tests (NEW):**
|
||||
- `test/membership/member_fuzzy_search_linking_test.exs`
|
||||
- `test/accounts/user_member_linking_email_test.exs`
|
||||
- `test/mv_web/user_live/form_member_linking_ui_test.exs`
|
||||
|
||||
### Deployment Notes
|
||||
- **Assets:** Requires `cd assets && npm run build`
|
||||
- **Database:** No migrations (uses existing indexes)
|
||||
- **Config:** No changes required
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
This project demonstrates a modern Phoenix application built with:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue