378 lines
12 KiB
Vue
378 lines
12 KiB
Vue
<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>
|
|
|
|
<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 } 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: '',
|
|
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 }
|
|
];
|
|
|
|
async function fetchCompanies() {
|
|
const res = await api.get('/items/companies', {
|
|
params: {
|
|
fields: ['id', 'name'],
|
|
sort: 'name',
|
|
},
|
|
});
|
|
companies.value = res.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: ['*'],
|
|
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 || '',
|
|
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
|
|
});
|
|
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
|
|
});
|
|
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(() => {
|
|
fetchCompanies();
|
|
});
|
|
</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>
|