feat(setup): modularize wizard, demo-init for events/notes, add E2E test

Author: Wacken2012

e2e/setup-demo.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('SetupWizard demo mode activates demo data', async ({ page }) => {
+  await page.goto('/setup')
+  await page.fill('#orgName', 'Musikverein Alsdorf')
+  await page.selectOption('#language', 'de')
+  await page.check('input[type="checkbox"]')
+  await page.click('button[type="submit"]')
+
+  await expect(page.locator('h1')).toContainText('Musikverein Alsdorf')
+  await expect(page.locator('[role="listitem"]')).toContainText('Dirigent')
+})

src/components/SetupWizard.vue

@@ -33,6 +33,7 @@ import { ref, watch, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useSetupStore } from '../store/setup'
+import StartStep from './wizard/StartStep.vue'
 import LanguageStep from './wizard/LanguageStep.vue'
 import AdminStep from './wizard/AdminStep.vue'
 import BackupStep from './wizard/BackupStep.vue'
@@ -45,6 +46,7 @@ const router = useRouter()
 const { t, locale } = useI18n()
 
 const steps = [
+  { key: 'start', component: StartStep },
   { key: 'language', component: LanguageStep },
   { key: 'admin', component: AdminStep },
   { key: 'backup', component: BackupStep },
@@ -55,11 +57,18 @@ const steps = [
 
 const currentStep = ref(1)
 const submitting = ref(false)
-const form = ref({})
+const form = ref({ orgName: '', language: 'de', demoMode: false })
 
 // react to language changes in the store
+// keep i18n in sync with the store
 watch(() => store.language, (v) => { if (v) locale.value = v })
 
+// When the user changes language in the wizard form, apply it immediately
+watch(() => form.value.language, (newLang) => {
+  if (!newLang) return
+  try { store.setLanguage(newLang); locale.value = newLang } catch (e) {}
+})
+
 function prevStep() {
   if (currentStep.value > 1) currentStep.value--
 }
@@ -71,9 +80,27 @@ async function nextStep() {
   }
   // finish: persist and redirect
   submitting.value = true
-  store.setSetupCompleted(true)
-  // store persists to localStorage in the action; also ensure i18n locale set
-  if (store.language) locale.value = store.language
+  try {
+    // persist orgName, language and demoMode
+    const payload = {
+      orgName: (form.value && (form.value as any).orgName) || store.orgName || '',
+      language: (form.value && (form.value as any).language) || store.language || 'de',
+      demoMode: !!((form.value && (form.value as any).demoMode) || store.demoMode)
+    }
+    // complete() persists the whole setup to localStorage
+    if (typeof store.complete === 'function') {
+      // call the complete action
+      // @ts-ignore
+      store.complete(payload)
+    } else {
+      // fallback to existing setters
+      try { store.setLanguage(payload.language) } catch (e) {}
+    }
+    // ensure i18n locale reflects the persisted language
+    try { locale.value = payload.language } catch (e) {}
+  } catch (e) {
+    // swallow persistence errors
+  }
   submitting.value = false
   // navigate to dashboard
   await router.push({ name: 'Dashboard' })

src/components/wizard/StartStep.vue

@@ -0,0 +1,23 @@
+<template>
+  <form>
+    <label for="orgName">{{ t('setup.orgName') }}</label>
+    <input id="orgName" v-model="form.orgName" />
+
+    <label for="language">{{ t('setup.language') }}</label>
+    <select id="language" v-model="form.language">
+      <option value="de">Deutsch</option>
+      <option value="en">English</option>
+    </select>
+
+    <label>
+      <input type="checkbox" v-model="form.demoMode" />
+      {{ t('setup.enableDemo') }}
+    </label>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+defineProps<{ form: { orgName: string; language: string; demoMode: boolean } }>()
+</script>

src/main.ts

@@ -14,7 +14,10 @@ const app = createApp(App)
 const pinia = createPinia()
 
 const savedLang = localStorage.getItem('lang') || 'de'
-const i18n = createI18n({ locale: savedLang, fallbackLocale: 'en', messages })
+// Use the Composition API mode for vue-i18n (legacy: false) and enable global injection
+// so templates can still use $t. This allows `useI18n()` in setup() and keeps
+// legacy-style template usage available via globalInjection.
+const i18n = createI18n({ legacy: false, globalInjection: true, locale: savedLang, fallbackLocale: 'en', messages })
 
 app.use(pinia)
 app.use(router)
@@ -28,6 +31,42 @@ app.directive('can-calendar', vCanCalendar)
 
 app.mount('#app')
 
+// Load persisted setup and apply language + demo data initialization
+try {
+	const setupStore = (pinia as any)._s || undefined
+} catch (e) {}
+try {
+	// import stores dynamically to avoid tree-shaking issues
+	const { useSetupStore } = await import('./store/setup')
+	const setup = useSetupStore(pinia)
+	setup.load()
+	// apply saved language to i18n global
+	try { (i18n as any).global.locale.value = setup.language || savedLang } catch (e) {}
+	// initialize demo stores that respect demoMode
+	try {
+		const { useMembersStore } = await import('./stores/membersStore')
+		const members = useMembersStore(pinia)
+		if (typeof members.init === 'function') members.init()
+	} catch (e) {}
+	try {
+		const { useSheetsStore } = await import('./stores/sheetsStore')
+		const sheets = useSheetsStore(pinia)
+		if (typeof sheets.init === 'function') sheets.init()
+	} catch (e) {}
+	try {
+		const { useEventsStore } = await import('./store/eventsStore')
+		const events = useEventsStore(pinia)
+		if (typeof events.init === 'function') events.init()
+	} catch (e) {}
+	try {
+		const { useNoteStore } = await import('./stores/noteStore')
+		const notes = useNoteStore(pinia)
+		if (typeof notes.init === 'function') notes.init()
+	} catch (e) {}
+} catch (e) {
+	// best-effort: don't block app if dynamic imports fail
+}
+
 // default readiness flag for component-level readiness used by Playwright tests
 try { (window as any).APP_READY_FOR_TESTS = false } catch (e) { /* noop in non-browser env */ }
 

src/store/eventsStore.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { useSetupStore } from './setup'
+
+export const useEventsStore = defineStore('events', {
+  state: () => ({ events: [] as Array<{ id: number; title: string; date: string; location: string }> }),
+  actions: {
+    init() {
+      const setup = useSetupStore()
+      if ((import.meta.env.VITE_DEMO === 'true') || !!setup.demoMode) {
+        this.events = [
+          { id: 1, title: 'Probe', date: '2025-11-05T19:00', location: 'Musikheim' },
+          { id: 2, title: 'Konzert', date: '2025-11-12T20:00', location: 'Stadthalle' },
+        ]
+      }
+    }
+  }
+})

src/stores/noteStore.ts

@@ -1,24 +1,10 @@
 import { defineStore } from 'pinia'
 import type { Note } from '../types/note'
+import { useSetupStore } from '../store/setup'
 
 export const useNoteStore = defineStore('note', {
   state: () => ({
-    notes: [
-      {
-        id: 1,
-        sheetId: 1,
-        author: 'Dirigent',
-        content: 'Takt 42: Einsatz verzögern',
-        createdAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        sheetId: 1,
-        author: 'Mitglied',
-        content: 'Bitte Tempo beachten',
-        createdAt: new Date().toISOString(),
-      },
-    ] as Note[],
+    notes: [] as Note[],
   }),
   actions: {
     addNote(sheetId: number, content: string, author = 'Du') {
@@ -30,5 +16,13 @@ export const useNoteStore = defineStore('note', {
     getNotesForSheet(sheetId: number) {
       return this.notes.filter(n => n.sheetId === sheetId)
     },
+    init() {
+      const setup = useSetupStore()
+      if ((import.meta.env.VITE_DEMO === 'true') || !!setup.demoMode) {
+        this.notes = [
+          { id: 1, sheetId: 1, author: 'Dirigent', content: 'Takt 42: Einsatz verzögern', createdAt: new Date().toISOString() },
+        ]
+      }
+    }
   },
 })