feat(next-feedback): add onActiveChange prop for controlled activation

packages/cms-infra/extensions/customer-manager/package.json

@@ -11,7 +11,7 @@
   ],
   "directus:extension": {
     "type": "module",
-    "path": "dist/index.js",
+    "path": "index.js",
     "source": "src/index.ts",
     "host": "app",
     "name": "customer manager"

packages/cms-infra/extensions/customer-manager/src/index.ts

@@ -1,16 +0,0 @@
-import { defineModule } from '@directus/extensions-sdk';
-import ModuleComponent from './module.vue';
-
-console.log('🚀 ANTIGRAVITY PROBE [1771026048]: Customer Manager Extension Loaded');
-
-export default defineModule({
-    id: 'customer-manager',
-    name: 'DEBUG: Customer Manager',
-    icon: 'supervisor_account',
-    routes: [
-        {
-            path: '',
-            component: ModuleComponent,
-        },
-    ],
-});

packages/cms-infra/extensions/customer-manager/src/module.vue

@@ -1,398 +0,0 @@
-<template>
-	<private-view title="Customer Manager">
-		<template #navigation>
-			<v-list nav>
-				<v-list-item @click="openCreateCompany" clickable>
-					<v-list-item-icon><v-icon name="add" color="var(--theme--primary)" /></v-list-item-icon>
-					<v-list-item-content>
-						<v-text-overflow text="Neue Firma anlegen" />
-					</v-list-item-content>
-				</v-list-item>
-
-				<v-divider />
-
-				<v-list-item
-					v-for="company in companies"
-					:key="company.id"
-					:active="selectedCompany?.id === company.id"
-					class="company-item"
-					clickable
-					@click="selectCompany(company)"
-				>
-					<v-list-item-icon><v-icon name="business" /></v-list-item-icon>
-					<v-list-item-content>
-						<v-text-overflow :text="company.name" />
-					</v-list-item-content>
-				</v-list-item>
-			</v-list>
-		</template>
-
-		<template #title-outer:after>
-			<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
-				{{ notice.message }}
-			</v-notice>
-		</template>
-
-		<div class="content-wrapper">
-			<div v-if="!selectedCompany" class="empty-state">
-				<v-info title="Firmen auswählen" icon="business" center>
-					Wähle eine Firma in der Navigation aus oder
-					<v-button x-small @click="openCreateCompany">erstelle eine neue Firma</v-button>.
-				</v-info>
-			</div>
-
-			<template v-else>
-				<header class="header">
-					<div class="header-left">
-						<h1 class="title">{{ selectedCompany.name }}</h1>
-						<p class="subtitle">{{ employees.length }} Kunden-Mitarbeiter</p>
-					</div>
-					<div class="header-right">
-						<v-button secondary rounded icon v-tooltip.bottom="'Firma bearbeiten'" @click="openEditCompany">
-							<v-icon name="edit" />
-						</v-button>
-						<v-button primary @click="openCreateEmployee">
-							Mitarbeiter hinzufügen
-						</v-button>
-					</div>
-				</header>
-
-				<v-table
-					:headers="tableHeaders"
-					:items="employees"
-					:loading="loading"
-					class="clickable-table"
-					fixed-header
-					@click:row="onRowClick"
-				>
-					<template #[`item.name`]="{ item }">
-						<div class="user-cell">
-							<v-avatar :name="item.first_name" x-small />
-							<span class="user-name">{{ item.first_name }} {{ item.last_name }}</span>
-						</div>
-					</template>
-
-					<template #[`item.last_invited`]="{ item }">
-						<span v-if="item.last_invited" class="status-date">
-							{{ formatDate(item.last_invited) }}
-						</span>
-						<v-chip v-else x-small>Noch nie</v-chip>
-					</template>
-				</v-table>
-			</template>
-		</div>
-
-		<!-- Drawer: Company Form -->
-		<v-drawer
-			v-model="drawerCompanyActive"
-			:title="isEditingCompany ? 'Firma bearbeiten' : 'Neue Firma anlegen'"
-			icon="business"
-			@cancel="drawerCompanyActive = false"
-		>
-			<div v-if="drawerCompanyActive" class="drawer-content">
-                <div class="form-section">
-                    <div class="field">
-                        <span class="label">Firmenname</span>
-                        <v-input v-model="companyForm.name" placeholder="z.B. KLZ Cables" autofocus />
-                    </div>
-                </div>
-				
-				<div class="drawer-actions">
-					<v-button primary block :loading="saving" @click="saveCompany">Speichern</v-button>
-				</div>
-			</div>
-		</v-drawer>
-
-		<!-- Drawer: Employee Form -->
-		<v-drawer
-			v-model="drawerEmployeeActive"
-			:title="isEditingEmployee ? 'Mitarbeiter bearbeiten' : 'Neuen Mitarbeiter anlegen'"
-			icon="person"
-			@cancel="drawerEmployeeActive = false"
-		>
-			<div v-if="drawerEmployeeActive" class="drawer-content">
-                <div class="form-section">
-                    <div class="field">
-                        <span class="label">Vorname</span>
-                        <v-input v-model="employeeForm.first_name" placeholder="Vorname" autofocus />
-                    </div>
-
-                    <div class="field">
-                        <span class="label">Nachname</span>
-                        <v-input v-model="employeeForm.last_name" placeholder="Nachname" />
-                    </div>
-
-                    <div class="field">
-                        <span class="label">E-Mail</span>
-                        <v-input v-model="employeeForm.email" placeholder="E-Mail Adresse" type="email" />
-                    </div>
-
-                    <div class="field">
-                        <span class="label">Zentrale Person (Verknüpfung)</span>
-                        <v-select
-                            v-model="employeeForm.person"
-                            :items="peopleOptions"
-                            placeholder="Person aus dem People Manager auswählen..."
-                        />
-                    </div>
-
-                    <v-divider v-if="isEditingEmployee" />
-
-                    <div v-if="isEditingEmployee" class="field">
-                        <span class="label">Temporäres Passwort</span>
-                        <v-input v-model="employeeForm.temporary_password" readonly class="password-input" />
-                        <p class="field-note">Wird beim Senden der Zugangsdaten automatisch generiert.</p>
-                    </div>
-                </div>
-
-				<div class="drawer-actions">
-					<v-button primary block :loading="saving" @click="saveEmployee">Daten speichern</v-button>
-					
-					<template v-if="isEditingEmployee">
-						<v-divider />
-						<v-button
-							v-tooltip.bottom="'Generiert PW, speichert es und sendet E-Mail'"
-							secondary
-							block
-							:loading="invitingId === employeeForm.id"
-							@click="inviteUser(employeeForm)"
-						>
-							<v-icon name="send" left /> Zugangsdaten senden
-						</v-button>
-					</template>
-				</div>
-			</div>
-		</v-drawer>
-	</private-view>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, nextTick, computed } from 'vue';
-import { useApi } from '@directus/extensions-sdk';
-
-const api = useApi();
-
-const companies = ref<any[]>([]);
-const selectedCompany = ref<any>(null);
-const employees = ref<any[]>([]);
-const loading = ref(false);
-const saving = ref(false);
-const invitingId = ref<string | null>(null);
-const notice = ref<{ type: string; message: string } | null>(null);
-
-// Forms State
-const drawerCompanyActive = ref(false);
-const isEditingCompany = ref(false);
-const companyForm = ref({ id: '', name: '' });
-
-const drawerEmployeeActive = ref(false);
-const isEditingEmployee = ref(false);
-const employeeForm = ref({ 
-    id: '', 
-    first_name: '', 
-    last_name: '', 
-    email: '', 
-    person: null,
-    temporary_password: '' 
-});
-
-const tableHeaders = [
-	{ text: 'Name', value: 'name', sortable: true },
-	{ text: 'E-Mail', value: 'email', sortable: true },
-	{ text: 'Zuletzt eingeladen', value: 'last_invited', sortable: true }
-];
-
-const people = ref<any[]>([]);
-
-const peopleOptions = computed(() => 
-    people.value.map(p => ({
-        text: `${p.first_name} ${p.last_name} (${p.email})`,
-        value: p.id
-    }))
-);
-
-async function fetchData() {
-    const [companiesResp, peopleResp] = await Promise.all([
-        api.get('/items/companies', { params: { sort: 'name', fields: ['id', 'name'] } }),
-        api.get('/items/people', { params: { sort: 'last_name' } })
-    ]);
-    companies.value = companiesResp.data.data;
-    people.value = peopleResp.data.data;
-}
-
-async function selectCompany(company: any) {
-	selectedCompany.value = company;
-	loading.value = true;
-	try {
-		const res = await api.get('/items/client_users', {
-			params: {
-				filter: { company: { _eq: company.id } },
-				fields: ['*', 'person.*'],
-				sort: 'first_name',
-			},
-		});
-		employees.value = res.data.data;
-	} finally {
-		loading.value = false;
-	}
-}
-
-// Company Actions
-function openCreateCompany() {
-	isEditingCompany.value = false;
-	companyForm.value = { id: '', name: '' };
-	drawerCompanyActive.value = true;
-}
-
-async function openEditCompany() {
-	if (!selectedCompany.value) return;
-    companyForm.value = { 
-        id: selectedCompany.value.id, 
-        name: selectedCompany.value.name 
-    };
-	isEditingCompany.value = true;
-    await nextTick();
-	drawerCompanyActive.value = true;
-}
-
-async function saveCompany() {
-	if (!companyForm.value.name) return;
-	saving.value = true;
-	try {
-		if (isEditingCompany.value) {
-			await api.patch(`/items/companies/${companyForm.value.id}`, { name: companyForm.value.name });
-			notice.value = { type: 'success', message: 'Firma aktualisiert!' };
-		} else {
-			await api.post('/items/companies', { name: companyForm.value.name });
-			notice.value = { type: 'success', message: 'Firma angelegt!' };
-		}
-		drawerCompanyActive.value = false;
-		await fetchCompanies();
-		if (selectedCompany.value?.id === companyForm.value.id) {
-			selectedCompany.value.name = companyForm.value.name;
-		}
-	} catch (e: any) {
-		notice.value = { type: 'danger', message: e.message };
-	} finally {
-		saving.value = false;
-	}
-}
-
-// Employee Actions
-function openCreateEmployee() {
-	isEditingEmployee.value = false;
-	employeeForm.value = { id: '', first_name: '', last_name: '', email: '', temporary_password: '' };
-	drawerEmployeeActive.value = true;
-}
-
-async function openEditEmployee(item: any) {
-    employeeForm.value = {
-        id: item.id || '',
-        first_name: item.first_name || '',
-        last_name: item.last_name || '',
-        email: item.email || '',
-        person: item.person?.id || item.person || null,
-        temporary_password: item.temporary_password || ''
-    };
-	isEditingEmployee.value = true;
-    await nextTick();
-	drawerEmployeeActive.value = true;
-}
-
-async function saveEmployee() {
-	if (!employeeForm.value.email || !selectedCompany.value) return;
-	saving.value = true;
-	try {
-		if (isEditingEmployee.value) {
-			await api.patch(`/items/client_users/${employeeForm.value.id}`, {
-				first_name: employeeForm.value.first_name,
-				last_name: employeeForm.value.last_name,
-				email: employeeForm.value.email,
-				person: employeeForm.value.person
-			});
-			notice.value = { type: 'success', message: 'Mitarbeiter aktualisiert!' };
-		} else {
-			await api.post('/items/client_users', {
-				first_name: employeeForm.value.first_name,
-				last_name: employeeForm.value.last_name,
-				email: employeeForm.value.email,
-				company: selectedCompany.value.id,
-				person: employeeForm.value.person
-			});
-			notice.value = { type: 'success', message: 'Mitarbeiter angelegt!' };
-		}
-		drawerEmployeeActive.value = false;
-		await selectCompany(selectedCompany.value);
-	} catch (e: any) {
-		notice.value = { type: 'danger', message: e.message };
-	} finally {
-		saving.value = false;
-	}
-}
-
-async function inviteUser(user: any) {
-	invitingId.value = user.id;
-	try {
-		await api.post(`/flows/trigger/33443f6b-cec7-4668-9607-f33ea674d501`, [user.id]);
-		notice.value = { type: 'success', message: `Zugangsdaten für ${user.first_name} versendet. 📧` };
-		await selectCompany(selectedCompany.value);
-		if (drawerEmployeeActive.value && employeeForm.value.id === user.id) {
-			const updated = employees.value.find(e => e.id === user.id);
-			if (updated) {
-                employeeForm.value.temporary_password = updated.temporary_password;
-            }
-		}
-	} catch (e: any) {
-		notice.value = { type: 'danger', message: `Fehler: ${e.message}` };
-	} finally {
-		invitingId.value = null;
-	}
-}
-
-function onRowClick(event: any) {
-	const item = event?.item || event;
-	if (item && item.id) {
-		openEditEmployee(item);
-	}
-}
-
-function formatDate(dateStr: string) {
-	return new Date(dateStr).toLocaleString('de-DE', {
-		day: '2-digit', month: '2-digit', year: 'numeric',
-		hour: '2-digit', minute: '2-digit'
-	});
-}
-
-onMounted(() => {
-	fetchData();
-});
-</script>
-
-<style scoped>
-.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; }
-.company-item { cursor: pointer; }
-.header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
-.header-right { display: flex; gap: 12px; }
-.title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
-.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; }
-.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
-.user-cell { display: flex; align-items: center; gap: 12px; }
-.user-name { font-weight: 600; }
-.status-date { font-size: 12px; color: var(--theme--foreground-subdued); }
-.drawer-content { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
-.form-section { display: flex; flex-direction: column; gap: 20px; }
-.field { display: flex; flex-direction: column; gap: 8px; }
-.label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
-.field-note { font-size: 11px; color: var(--theme--foreground-subdued); margin-top: 4px; }
-.drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
-.password-input :deep(textarea) {
-	font-family: var(--family-monospace);
-	font-weight: 800;
-	color: var(--theme--primary) !important;
-	background: var(--theme--background-subdued) !important;
-}
-
-.clickable-table :deep(tbody tr) { cursor: pointer; transition: background-color 0.2s ease; }
-.clickable-table :deep(tbody tr:hover) { background-color: var(--theme--background-subdued) !important; }
-:deep(.v-list-item) { cursor: pointer !important; }
-</style>