mmintel/at-mintel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adds aquisition extension to cms
Some checks failed
Monorepo Pipeline / 🧪 Quality Assurance (push) Failing after 11s
Details
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Directus (Base) (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-10 21:30:23 +01:00
parent f2c0a4581c
commit 9e4e296e3b
58 changed files with 7215 additions and 1782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/cms-infra/extensions/people-manager/index.js Normal file
View File

File diff suppressed because one or more lines are too long

20
packages/cms-infra/extensions/people-manager/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "people-manager",
"version": "1.0.0",
"type": "module",
"directus:extension": {
"type": "module",
"path": "dist/index.js",
"source": "src/index.ts",
"host": "^11.0.0"
},
"scripts": {
"build": "directus-extension build",
"dev": "directus-extension build -w"
},
"devDependencies": {
"@directus/extensions-sdk": "11.0.2",
"vue": "^3.4.34",
"typescript": "^5.6.3"
}
}

14
packages/cms-infra/extensions/people-manager/src/index.ts Normal file
View File

@@ -0,0 +1,14 @@
import { defineModule } from '@directus/extensions-sdk';
import ModuleComponent from './module.vue';
export default defineModule({
id: 'people-manager',
name: 'People Manager',
icon: 'person',
routes: [
{
path: '',
component: ModuleComponent,
},
],
});

296
packages/cms-infra/extensions/people-manager/src/module.vue Normal file
View File

@@ -0,0 +1,296 @@
<template>
<private-view title="People Manager">
<template #navigation>
<v-list nav>
<v-list-item @click="openCreateDrawer" 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 Person anlegen" />
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-item
v-for="person in people"
:key="person.id"
:active="selectedPerson?.id === person.id"
class="person-item"
clickable
@click="selectPerson(person)"
>
<v-list-item-icon>
<v-icon name="person" />
</v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="`${person.first_name} ${person.last_name}`" />
</v-list-item-content>
</v-list-item>
</v-list>
</template>
<div class="content-wrapper">
<v-notice v-if="feedback" :type="feedback.type" @close="feedback = null" dismissible>
{{ feedback.message }}
</v-notice>
<div v-if="!selectedPerson" class="empty-state">
<v-info title="Person auswählen" icon="person" center>
Wähle eine Person in der Navigation aus oder
<v-button x-small @click="openCreateDrawer">erstelle eine neue Person</v-button>.
</v-info>
</div>
<div v-else>
<header class="header">
<div class="header-left">
<h1 class="title">{{ selectedPerson.first_name }} {{ selectedPerson.last_name }}</h1>
<p class="subtitle">{{ selectedPerson.email || 'Keine E-Mail angegeben' }}</p>
</div>
<div class="header-right">
<v-button secondary rounded icon v-tooltip="'Person bearbeiten'" @click="openEditDrawer">
<v-icon name="edit" />
</v-button>
<v-button danger rounded icon v-tooltip="'Person löschen'" @click="deletePerson">
<v-icon name="delete" />
</v-button>
</div>
</header>
<v-divider />
<div class="details-grid">
<div class="detail-item">
<span class="label">Organisation</span>
<p class="value">{{ selectedPerson.company || '---' }}</p>
</div>
<div class="detail-item">
<span class="label">Telefon</span>
<p class="value">{{ selectedPerson.phone || '---' }}</p>
</div>
</div>
</div>
</div>
<!-- Create/Edit Drawer -->
<v-drawer
v-model="drawerActive"
:title="isEditing ? 'Person bearbeiten' : 'Neue Person anlegen'"
icon="person"
@cancel="drawerActive = false"
>
<template #default>
<div class="drawer-content">
<div class="form-section">
<div class="field">
<span class="label">Vorname</span>
<v-input v-model="form.first_name" placeholder="Vorname" autofocus />
</div>
<div class="field">
<span class="label">Nachname</span>
<v-input v-model="form.last_name" placeholder="Nachname" />
</div>
<div class="field">
<span class="label">E-Mail</span>
<v-input v-model="form.email" placeholder="email@beispiel.de" type="email" />
</div>
<div class="field">
<span class="label">Organisation / Firma</span>
<v-input v-model="form.company" placeholder="z.B. Mintel" />
</div>
<div class="field">
<span class="label">Telefon</span>
<v-input v-model="form.phone" placeholder="+49 ..." />
</div>
</div>
<div class="drawer-actions">
<v-button primary block :loading="saving" @click="savePerson">
Person speichern
</v-button>
</div>
</div>
</template>
</v-drawer>
</private-view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useApi } from '@directus/extensions-sdk';
const api = useApi();
const people = ref([]);
const selectedPerson = ref(null);
const feedback = ref(null);
const saving = ref(false);
const drawerActive = ref(false);
const isEditing = ref(false);
const form = ref({
id: null,
first_name: '',
last_name: '',
email: '',
company: '',
phone: ''
});
async function fetchPeople() {
try {
const response = await api.get('/items/people', {
params: { sort: 'last_name' }
});
people.ref = response.data.data;
} catch (error) {
console.error('Failed to fetch people:', error);
}
}
function selectPerson(person) {
selectedPerson.value = person;
}
function openCreateDrawer() {
isEditing.value = false;
form.value = { id: null, first_name: '', last_name: '', email: '', company: '', phone: '' };
drawerActive.value = true;
}
function openEditDrawer() {
isEditing.value = true;
form.value = { ...selectedPerson.value };
drawerActive.value = true;
}
async function savePerson() {
if (!form.value.first_name || !form.value.last_name) {
feedback.value = { type: 'danger', message: 'Vor- und Nachname sind erforderlich.' };
return;
}
saving.value = true;
try {
if (isEditing.value) {
await api.patch(`/items/people/${form.value.id}`, form.value);
feedback.value = { type: 'success', message: 'Person aktualisiert!' };
} else {
await api.post('/items/people', form.value);
feedback.value = { type: 'success', message: 'Person angelegt!' };
}
drawerActive.value = false;
await fetchPeople();
if (isEditing.value) {
selectedPerson.value = form.value;
}
} catch (error) {
feedback.value = { type: 'danger', message: error.message };
} finally {
saving.value = false;
}
}
async function deletePerson() {
if (!confirm('Soll diese Person wirklich gelöscht werden?')) return;
try {
await api.delete(`/items/people/${selectedPerson.value.id}`);
feedback.value = { type: 'success', message: 'Person gelöscht.' };
selectedPerson.value = null;
await fetchPeople();
} catch (error) {
feedback.value = { type: 'danger', message: error.message };
}
}
onMounted(fetchPeople);
</script>
<style scoped>
.content-wrapper {
padding: 32px;
height: 100%;
}
.header {
margin-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.title {
font-size: 24px;
font-weight: 800;
margin-bottom: 4px;
}
.subtitle {
color: var(--theme--foreground-subdued);
font-size: 14px;
}
.header-right {
display: flex;
gap: 12px;
}
.empty-state {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 32px;
}
.detail-item {
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;
}
.value {
font-size: 16px;
font-weight: 500;
}
.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;
}
.drawer-actions {
margin-top: 24px;
}
</style>