shahondin1624
b29a268b1d
- Move completed plan files to .plans/done/ - Move 18 open plan files to .plans/open/ - Update .gitignore to exclude .verified_plans temp file - Verified all 18 open plans still describe unimplemented issues
66 lines
1.9 KiB
Markdown
66 lines
1.9 KiB
Markdown
# Issue #213: Frontend State Management Issues
|
|
|
|
## Problem
|
|
|
|
Several issues in the Pinia stores and Vue components:
|
|
|
|
### 1. Store State Not Persisted
|
|
|
|
The `members.js` store state (filters, pagination) is lost on page refresh. Users lose their filter settings.
|
|
|
|
### 2. No Optimistic UI Updates
|
|
|
|
When creating/updating/deleting members, the UI waits for the server response before updating. For better UX, implement optimistic updates:
|
|
|
|
```javascript
|
|
async function deleteMember(id) {
|
|
// Optimistic: remove from local state immediately
|
|
this.members = this.members.filter(m => m.id !== id)
|
|
|
|
try {
|
|
await axios.delete(url)
|
|
} catch (err) {
|
|
// Revert on failure
|
|
await this.fetchMembers()
|
|
throw err
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. Stale Data After Navigation
|
|
|
|
After updating a member in `MemberDetail.vue`, navigating back to `MemberList.vue` may show stale data if the list wasn't refetched.
|
|
|
|
### 4. Error State Not Cleared
|
|
|
|
`store.clearError()` exists but isn't always called before retry operations, potentially showing old errors alongside new data.
|
|
|
|
## Impact
|
|
|
|
- Poor UX (page refresh loses context)
|
|
- Slower perceived performance (no optimistic updates)
|
|
- Confusing states when data is stale
|
|
- Confusing error messages
|
|
|
|
## Solution
|
|
|
|
1. Add `pinia-plugin-persistedstate` to persist store state
|
|
2. Implement optimistic updates in CRUD operations
|
|
3. Use `watch` to refetch data when navigating back
|
|
4. Ensure `clearError()` is called at the start of all fetch operations
|
|
|
|
## Tasks
|
|
|
|
- [ ] Add `pinia-plugin-persistedstate` dependency
|
|
- [ ] Configure persistence for filter and pagination state
|
|
- [ ] Implement optimistic updates in `deleteMember()`, `updateMember()`, `createMember()`
|
|
- [ ] Add navigation watchers to refetch stale data
|
|
- [ ] Verify `clearError()` is called before all fetch operations
|
|
- [ ] Test page refresh preserves filter state
|
|
|
|
## Labels
|
|
|
|
- enhancement
|
|
- frontend
|
|
- ux
|
|
- priority:medium |