# 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