Mitgliederverwaltung/.plans/open/issue-213-frontend-state-management-issues.md

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:

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