Mitgliederverwaltung/.plans/open/issue-215-column-rendering-duplicated.md

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):

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:

// 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:

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