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
59 lines
1.9 KiB
Markdown
59 lines
1.9 KiB
Markdown
# Issue #215: Column Rendering Logic Duplicated Across Views
|
|
|
|
## Problem
|
|
|
|
The `allColumns` definition in `MemberList.vue` contains rendering logic that's duplicated when the same fields appear in other views (e.g., `MemberDetail.vue`, export templates):
|
|
|
|
```javascript
|
|
const allColumns = [
|
|
{ key: 'name', label: 'Name', render: m => m.nachname + ', ' + m.vorname },
|
|
{ key: 'stufe', label: 'Stufe', render: m => getStufeNameById(m.stufeId) },
|
|
{ key: 'status', label: 'Status', render: m => statusMap[m.status] || m.status },
|
|
// ...
|
|
]
|
|
```
|
|
|
|
The `statusMap`, `rolleMap`, `geschlechtMap`, `kvTypMap` translations are duplicated in multiple components.
|
|
|
|
## Impact
|
|
|
|
- Inconsistent rendering if one copy is updated but not others
|
|
- Maintenance burden (3+ places to update for a field change)
|
|
- Difficulty adding new columns consistently across views
|
|
|
|
## Solution
|
|
|
|
Create a shared column definitions module:
|
|
|
|
```javascript
|
|
// src/utils/columnDefinitions.js
|
|
export const STATUS_MAP = { aktiv: 'Aktiv', inaktiv: 'Inaktiv', geloescht: 'Gelöscht' }
|
|
export const ROLLE_MAP = { mitglied: 'Mitglied', erziehungsberechtigter: 'Erziehungsberechtigter' }
|
|
// ...
|
|
|
|
export const MEMBER_LIST_COLUMNS = [
|
|
{ key: 'name', label: 'Name', render: m => `${m.nachname}, ${m.vorname}` },
|
|
{ key: 'status', label: 'Status', render: m => STATUS_MAP[m.status] || m.status },
|
|
// ...
|
|
]
|
|
```
|
|
|
|
Then import in components:
|
|
```javascript
|
|
import { MEMBER_LIST_COLUMNS, STATUS_MAP } from '../utils/columnDefinitions.js'
|
|
```
|
|
|
|
## Tasks
|
|
|
|
- [ ] Create `src/utils/columnDefinitions.js` with all maps and column definitions
|
|
- [ ] Update `MemberList.vue` to import from the shared module
|
|
- [ ] Update `MemberDetail.vue` to use shared maps
|
|
- [ ] Update export templates to use shared definitions
|
|
- [ ] Update any other views using these maps
|
|
- [ ] Add TypeScript types for column definitions (if using TS)
|
|
|
|
## Labels
|
|
|
|
- refactoring
|
|
- frontend
|
|
- priority:low |