flfeders/FEDEO
2
1
Fork 0
Code Issues 96 Pull Requests Actions Packages Projects 22 Releases Wiki Activity

Compare commits

base: flfeders:cfd84b773f73823379cadbba24bee17f0e64ae77
Branches Tags
flfeders:main flfeders:dev flfeders:uichange
...
compare: flfeders:uichange
Branches Tags
flfeders:dev flfeders:uichange flfeders:main

3 Commits
cfd84b773f ... uichange

Author SHA1 Message Date
florianfederspiel
03bcc1a939 2. Zwischenstand
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 15s
Details
Build and Push Docker Images / build-frontend (push) Successful in 2m43s
Details
2026-03-21 22:56:56 +01:00
florianfederspiel
68b2cbb0ee Zwischenstand 2026-03-21 22:13:19 +01:00
florianfederspiel
b009ac845f Start UI Change 2026-03-21 21:13:22 +01:00
99 changed files with 4849 additions and 3996 deletions
Expand all files Collapse all files

6
frontend/app.config.ts
View File

@@ -1,7 +1,9 @@
export default defineAppConfig({ export default defineAppConfig({
ui: { ui: {
primary: 'green', colors: {
gray: 'slate', primary: 'green',
neutral: 'slate'
},
tooltip: { tooltip: {
background: '!bg-background' background: '!bg-background'
}, },

18
frontend/app.vue
View File

@@ -47,14 +47,16 @@ useSeoMeta({
</script> </script>
<template> <template>
<div class="safearea"> <UApp>
<NuxtLayout> <div class="safearea">
<NuxtPage/> <NuxtLayout>
</NuxtLayout> <NuxtPage/>
<UNotifications/> </NuxtLayout>
<USlideovers /> <UNotifications/>
<UModals/> <USlideovers />
</div> <UModals/>
</div>
</UApp>

26
frontend/assets/css/main.css Normal file
View File

@@ -0,0 +1,26 @@
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme static {
--font-sans: "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
--color-green-50: #f4fbf2;
--color-green-100: #e7f7e1;
--color-green-200: #cdeec4;
--color-green-300: #a6e095;
--color-green-400: #69c350;
--color-green-500: #53ad3a;
--color-green-600: #418e2b;
--color-green-700: #357025;
--color-green-800: #2d5922;
--color-green-900: #254a1d;
--color-green-950: #10280b;
}
:root {
--ui-container: 90rem;
}
body {
font-family: var(--font-sans);
}

54
frontend/components/ArchiveButton.vue
View File

@@ -38,34 +38,36 @@ const emitConfirm = () => {
> >
Archivieren Archivieren
</UButton> </UButton>
<UModal v-model="showModal"> <UModal v-model:open="showModal">
<UCard> <template #content>
<template #header> <UCard>
<span class="text-md font-bold">Archivieren bestätigen</span> <template #header>
</template> <span class="text-md font-bold">Archivieren bestätigen</span>
Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren? </template>
Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
<template #footer> <template #footer>
<div class="text-right"> <div class="text-right">
<UButtonGroup> <UButtonGroup>
<UButton <UButton
variant="outline" variant="outline"
@click="showModal = false" @click="showModal = false"
> >
Abbrechen Abbrechen
</UButton> </UButton>
<UButton <UButton
@click="emitConfirm" @click="emitConfirm"
class="ml-2" class="ml-2"
color="rose" color="error"
> >
Archivieren Archivieren
</UButton> </UButton>
</UButtonGroup> </UButtonGroup>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

80
frontend/components/BankAccountAssignInput.vue
View File

@@ -49,7 +49,7 @@ const assignByIban = async () => {
const match = accounts.value.find((a) => normalizeIban(a.iban) === search) const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
if (!match) { if (!match) {
toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "rose" }) toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "error" })
return return
} }
@@ -68,7 +68,7 @@ const removeAssigned = (id) => {
const createAndAssign = async () => { const createAndAssign = async () => {
if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) { if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) {
toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "rose" }) toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "error" })
return return
} }
@@ -140,43 +140,45 @@ loadAccounts()
</InputGroup> </InputGroup>
</div> </div>
<UModal v-model="showCreate"> <UModal v-model:open="showCreate">
<UCard> <template #content>
<template #header>Neue Bankverbindung erstellen</template> <UCard>
<div class="space-y-3"> <template #header>Neue Bankverbindung erstellen</template>
<UFormGroup label="IBAN"> <div class="space-y-3">
<InputGroup> <UFormField label="IBAN">
<UInput <InputGroup>
v-model="createPayload.iban" <UInput
@blur="resolveCreatePayloadFromIban" v-model="createPayload.iban"
@keydown.enter.prevent="resolveCreatePayloadFromIban" @blur="resolveCreatePayloadFromIban"
/> @keydown.enter.prevent="resolveCreatePayloadFromIban"
<UButton />
color="gray" <UButton
variant="outline" color="gray"
:loading="resolvingIban" variant="outline"
@click="resolveCreatePayloadFromIban" :loading="resolvingIban"
> @click="resolveCreatePayloadFromIban"
Ermitteln >
</UButton> Ermitteln
</InputGroup> </UButton>
</UFormGroup> </InputGroup>
<UFormGroup label="BIC"> </UFormField>
<UInput v-model="createPayload.bic" /> <UFormField label="BIC">
</UFormGroup> <UInput v-model="createPayload.bic" />
<UFormGroup label="Bankinstitut"> </UFormField>
<UInput v-model="createPayload.bankName" /> <UFormField label="Bankinstitut">
</UFormGroup> <UInput v-model="createPayload.bankName" />
<UFormGroup label="Beschreibung (optional)"> </UFormField>
<UInput v-model="createPayload.description" /> <UFormField label="Beschreibung (optional)">
</UFormGroup> <UInput v-model="createPayload.description" />
</div> </UFormField>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
<UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
</div> </div>
</template> <template #footer>
</UCard> <div class="flex justify-end gap-2">
<UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
<UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
</div>
</template>
</UCard>
</template>
</UModal> </UModal>
</template> </template>

54
frontend/components/ButtonWithConfirm.vue
View File

@@ -31,33 +31,35 @@ const emitConfirm = () => {
> >
<slot name="button"></slot> <slot name="button"></slot>
</UButton> </UButton>
<UModal v-model="showModal"> <UModal v-model:open="showModal">
<UCard> <template #content>
<template #header> <UCard>
<slot name="header"></slot> <template #header>
</template> <slot name="header"></slot>
<slot/> </template>
<template #footer> <slot/>
<div class="text-right"> <template #footer>
<UButtonGroup> <div class="text-right">
<UButton <UButtonGroup>
variant="outline" <UButton
@click="showModal = false" variant="outline"
> @click="showModal = false"
Abbrechen >
</UButton> Abbrechen
<UButton </UButton>
@click="emitConfirm" <UButton
class="ml-2" @click="emitConfirm"
color="rose" class="ml-2"
> color="error"
Archivieren >
</UButton> Archivieren
</UButtonGroup> </UButton>
</UButtonGroup>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

13
frontend/components/Calculator.vue
View File

@@ -51,8 +51,8 @@
<div class="grid grid-cols-4 gap-2"> <div class="grid grid-cols-4 gap-2">
<UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip> <UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip>
<UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip> <UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip>
<UTooltip text="Netto (-19%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip> <UTooltip text="Netto (-19%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
<UTooltip text="Netto (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip> <UTooltip text="Netto (-7%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
<UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip> <UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip>
<UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip> <UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
@@ -227,9 +227,14 @@ defineShortcuts({
width: 4px; width: 4px;
} }
.custom-scrollbar::-webkit-scrollbar-track { .custom-scrollbar::-webkit-scrollbar-track {
@apply bg-transparent; background: transparent;
} }
.custom-scrollbar::-webkit-scrollbar-thumb { .custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-gray-200 dark:bg-gray-700 rounded-full; background: #e5e7eb;
border-radius: 9999px;
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
background: #374151;
} }
</style> </style>

56
frontend/components/DocumentDisplayModal.vue
View File

@@ -156,7 +156,8 @@ const moveFile = async () => {
<template> <template>
<UModal fullscreen > <UModal fullscreen >
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full"> <template #content>
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
<template #header> <template #header>
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -186,7 +187,7 @@ const moveFile = async () => {
<div class="w-2/3 p-5" v-if="!false"> <div class="w-2/3 p-5" v-if="!false">
<UButtonGroup> <UButtonGroup>
<ArchiveButton <ArchiveButton
color="rose" color="error"
variant="outline" variant="outline"
type="files" type="files"
@confirmed="archiveDocument" @confirmed="archiveDocument"
@@ -202,7 +203,7 @@ const moveFile = async () => {
</UButton> </UButton>
</UButtonGroup> </UButtonGroup>
<UDivider>Zuweisungen</UDivider> <USeparator label="Zuweisungen"/>
<table class="w-full"> <table class="w-full">
<tr v-if="props.documentData.project"> <tr v-if="props.documentData.project">
<td>Projekt</td> <td>Projekt</td>
@@ -278,44 +279,44 @@ const moveFile = async () => {
</tr> </tr>
</table> </table>
<UDivider class="my-3">Datei zuweisen</UDivider> <USeparator class="my-3" label="Datei zuweisen"/>
<UFormGroup <UFormField
label="Resource auswählen" label="Resource auswählen"
> >
<USelectMenu <USelectMenu
:options="resourceOptions" :items="resourceOptions"
v-model="resourceToAssign" v-model="resourceToAssign"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
@change="getItemsBySelectedResource" @change="getItemsBySelectedResource"
> >
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Eintrag auswählen:" label="Eintrag auswählen:"
> >
<USelectMenu <USelectMenu
:options="itemOptions" :items="itemOptions"
v-model="idToAssign" v-model="idToAssign"
:option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'" :label-key="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
value-attribute="id" value-key="id"
@change="updateDocumentAssignment" @change="updateDocumentAssignment"
></USelectMenu> ></USelectMenu>
</UFormGroup> </UFormField>
<UDivider class="my-5">Datei verschieben</UDivider> <USeparator class="my-5" label="Datei verschieben"/>
<InputGroup class="w-full"> <InputGroup class="w-full">
<USelectMenu <USelectMenu
class="flex-auto" class="flex-auto"
v-model="folderToMoveTo" v-model="folderToMoveTo"
value-attribute="id" value-key="id"
option-attribute="name" label-key="name"
:options="folders" :items="folders"
/> />
<UButton <UButton
@click="moveFile" @click="moveFile"
@@ -324,34 +325,35 @@ const moveFile = async () => {
>Verschieben</UButton> >Verschieben</UButton>
</InputGroup> </InputGroup>
<UDivider class="my-5">Dateityp</UDivider> <USeparator class="my-5" label="Dateityp"/>
<InputGroup class="w-full"> <InputGroup class="w-full">
<USelectMenu <USelectMenu
class="flex-auto" class="flex-auto"
v-model="props.documentData.type" v-model="props.documentData.type"
value-attribute="id" value-key="id"
option-attribute="name" label-key="name"
:options="filetypes" :items="filetypes"
@change="updateDocument" @change="updateDocument"
/> />
</InputGroup> </InputGroup>
<UDivider class="my-5">Dokumentenbox</UDivider> <USeparator class="my-5" label="Dokumentenbox" />
<InputGroup class="w-full"> <InputGroup class="w-full">
<USelectMenu <USelectMenu
class="flex-auto" class="flex-auto"
v-model="props.documentData.documentbox" v-model="props.documentData.documentbox"
value-attribute="id" value-key="id"
option-attribute="key" label-key="key"
:options="documentboxes" :items="documentboxes"
@change="updateDocument" @change="updateDocument"
/> />
</InputGroup> </InputGroup>
</div> </div>
</div> </div>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

140
frontend/components/DocumentUploadModal.vue
View File

@@ -78,81 +78,83 @@ const fileNames = computed(() => {
<template> <template>
<UModal> <UModal>
<div ref="dropZoneRef" class="relative h-full flex flex-col"> <template #content>
<div ref="dropZoneRef" class="relative h-full flex flex-col">
<div <div
v-if="isOverDropZone" v-if="isOverDropZone"
class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all" class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
>
<span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
Dateien hier ablegen
</span>
</div>
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
:disabled="uploadInProgress"
/>
</div>
</template>
<UFormGroup
label="Datei:"
:help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
> >
<UInput <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
v-if="selectedFiles.length === 0" Dateien hier ablegen
type="file" </span>
id="fileUploadInput" </div>
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
@change="onFileInputChange"
/>
<div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500"> <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span> <template #header>
</div> <div class="flex items-center justify-between">
</UFormGroup> <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
:disabled="uploadInProgress"
/>
</div>
</template>
<UFormGroup <UFormField
label="Typ:" label="Datei:"
class="mt-3" :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
>
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
:disabled="!props.fileData.typeEnabled"
> >
<template #label> <UInput
<span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span> v-if="selectedFiles.length === 0"
<span v-else>Kein Typ ausgewählt</span> type="file"
</template> id="fileUploadInput"
</USelectMenu> multiple
</UFormGroup> accept="image/jpeg, image/png, image/gif, application/pdf"
@change="onFileInputChange"
/>
<template #footer> <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
<UButton Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
@click="uploadFiles" </div>
:loading="uploadInProgress" </UFormField>
:disabled="uploadInProgress || selectedFiles.length === 0"
>Hochladen</UButton> <UFormField
</template> label="Typ:"
</UCard> class="mt-3"
</div> >
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
:disabled="!props.fileData.typeEnabled"
>
<template #label>
<span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
<span v-else>Kein Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormField>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
:disabled="uploadInProgress || selectedFiles.length === 0"
>Hochladen</UButton>
</template>
</UCard>
</div>
</template>
</UModal> </UModal>
</template> </template>

172
frontend/components/EntityEdit.vue
View File

@@ -211,6 +211,22 @@ const contentChanged = (content, datapoint) => {
} }
} }
const getSelectItems = (datapoint) => {
return datapoint.selectManualOptions || loadedOptions.value[datapoint.selectDataType] || []
}
const getSelectValueKey = (datapoint) => {
return datapoint.selectValueAttribute || 'id'
}
const getSelectLabelKey = (datapoint) => {
return datapoint.selectOptionAttribute || 'label'
}
const getSelectSearchInput = (datapoint) => {
return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
}
const createItem = async () => { const createItem = async () => {
let ret = null let ret = null
@@ -264,7 +280,7 @@ const updateItem = async () => {
</template> </template>
<template #right> <template #right>
<ArchiveButton <ArchiveButton
color="rose" color="error"
v-if="platform !== 'mobile'" v-if="platform !== 'mobile'"
variant="outline" variant="outline"
:type="type" :type="type"
@@ -336,12 +352,12 @@ const updateItem = async () => {
v-for="(columnName,index) in dataType.inputColumns" v-for="(columnName,index) in dataType.inputColumns"
:class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]" :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
> >
<UDivider>{{ columnName }}</UDivider> <USeparator :label="columnName"/>
<div <div
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)" v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
> >
<UFormGroup <UFormField
v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)" v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
:label="datapoint.label" :label="datapoint.label"
> >
@@ -354,7 +370,7 @@ const updateItem = async () => {
</template> </template>
<InputGroup class="w-full" v-if="datapoint.key.includes('.')"> <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
<UInput <UInput
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)" v-if="['text','number'].includes(datapoint.inputType)"
@@ -367,25 +383,25 @@ const updateItem = async () => {
<span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span> <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
</template> </template>
</UInput> </UInput>
<UToggle <USwitch
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'" v-else-if="datapoint.inputType === 'bool'"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<USelectMenu <USelectMenu
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'" v-else-if="datapoint.inputType === 'select'"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:option-attribute="datapoint.selectOptionAttribute" :items="getSelectItems(datapoint)"
:value-attribute="datapoint.selectValueAttribute || 'id'" :label-key="getSelectLabelKey(datapoint)"
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]" :value-key="getSelectValueKey(datapoint)"
:searchable="datapoint.selectSearchAttributes" :search-input="getSelectSearchInput(datapoint)"
:search-attributes="datapoint.selectSearchAttributes" :filter-fields="datapoint.selectSearchAttributes"
:multiple="datapoint.selectMultiple" :multiple="datapoint.selectMultiple"
> >
<template #empty> <template #empty>
@@ -393,7 +409,7 @@ const updateItem = async () => {
</template> </template>
</USelectMenu> </USelectMenu>
<UTextarea <UTextarea
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'" v-else-if="datapoint.inputType === 'textarea'"
@@ -401,9 +417,9 @@ const updateItem = async () => {
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4" rows="4"
/> />
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'" :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline" variant="outline"
@@ -411,17 +427,17 @@ const updateItem = async () => {
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
</template> </template>
</UPopover> </UPopover>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'" :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
variant="outline" variant="outline"
@@ -429,10 +445,10 @@ const updateItem = async () => {
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
mode="datetime" mode="datetime"
/> />
@@ -460,7 +476,7 @@ const updateItem = async () => {
<InputGroup class="w-full" v-else> <InputGroup class="w-full" v-else>
<UInput <UInput
class="flex-auto" class="flex-auto"
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)" v-if="['text','number'].includes(datapoint.inputType)"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
@@ -472,34 +488,33 @@ const updateItem = async () => {
{{ datapoint.inputTrailing }} {{ datapoint.inputTrailing }}
</template> </template>
</UInput> </UInput>
<UToggle <USwitch
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'" v-else-if="datapoint.inputType === 'bool'"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<USelectMenu <USelectMenu
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'" v-else-if="datapoint.inputType === 'select'"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:option-attribute="datapoint.selectOptionAttribute" :items="getSelectItems(datapoint)"
:value-attribute="datapoint.selectValueAttribute || 'id'" :label-key="getSelectLabelKey(datapoint)"
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]" :value-key="getSelectValueKey(datapoint)"
:searchable="datapoint.selectSearchAttributes" :search-input="getSelectSearchInput(datapoint)"
:search-attributes="datapoint.selectSearchAttributes" :filter-fields="datapoint.selectSearchAttributes"
:multiple="datapoint.selectMultiple" :multiple="datapoint.selectMultiple"
searchable-placeholder="Suche..."
> >
<template #empty> <template #empty>
Keine Optionen verfügbar Keine Optionen verfügbar
</template> </template>
</USelectMenu> </USelectMenu>
<UTextarea <UTextarea
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'" v-else-if="datapoint.inputType === 'textarea'"
@@ -507,37 +522,36 @@ const updateItem = async () => {
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4" rows="4"
/> />
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'" :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline" variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" @close="close" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
</template> </template>
</UPopover> </UPopover>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'" :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
variant="outline" variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
@close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
mode="datetime" mode="datetime"
/> />
@@ -572,11 +586,11 @@ const updateItem = async () => {
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
</div> </div>
</div> </div>
</div> </div>
<UFormGroup <UFormField
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)" v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
:label="datapoint.label" :label="datapoint.label"
> >
@@ -589,7 +603,7 @@ const updateItem = async () => {
</template> </template>
<InputGroup class="w-full" v-if="datapoint.key.includes('.')"> <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
<UInput <UInput
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)" v-if="['text','number'].includes(datapoint.inputType)"
@@ -602,25 +616,25 @@ const updateItem = async () => {
<span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span> <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
</template> </template>
</UInput> </UInput>
<UToggle <USwitch
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'" v-else-if="datapoint.inputType === 'bool'"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<USelectMenu <USelectMenu
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'" v-else-if="datapoint.inputType === 'select'"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:option-attribute="datapoint.selectOptionAttribute" :items="getSelectItems(datapoint)"
:value-attribute="datapoint.selectValueAttribute || 'id'" :label-key="getSelectLabelKey(datapoint)"
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]" :value-key="getSelectValueKey(datapoint)"
:searchable="datapoint.selectSearchAttributes" :search-input="getSelectSearchInput(datapoint)"
:search-attributes="datapoint.selectSearchAttributes" :filter-fields="datapoint.selectSearchAttributes"
:multiple="datapoint.selectMultiple" :multiple="datapoint.selectMultiple"
> >
<template #empty> <template #empty>
@@ -628,7 +642,7 @@ const updateItem = async () => {
</template> </template>
</USelectMenu> </USelectMenu>
<UTextarea <UTextarea
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'" v-else-if="datapoint.inputType === 'textarea'"
@@ -636,9 +650,9 @@ const updateItem = async () => {
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4" rows="4"
/> />
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'" :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline" variant="outline"
@@ -646,17 +660,17 @@ const updateItem = async () => {
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
</template> </template>
</UPopover> </UPopover>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'" :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
variant="outline" variant="outline"
@@ -664,10 +678,10 @@ const updateItem = async () => {
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
mode="datetime" mode="datetime"
/> />
@@ -695,7 +709,7 @@ const updateItem = async () => {
<InputGroup class="w-full" v-else> <InputGroup class="w-full" v-else>
<UInput <UInput
class="flex-auto" class="flex-auto"
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)" v-if="['text','number'].includes(datapoint.inputType)"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
@@ -707,34 +721,33 @@ const updateItem = async () => {
{{ datapoint.inputTrailing }} {{ datapoint.inputTrailing }}
</template> </template>
</UInput> </UInput>
<UToggle <USwitch
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'" v-else-if="datapoint.inputType === 'bool'"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<USelectMenu <USelectMenu
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'" v-else-if="datapoint.inputType === 'select'"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:option-attribute="datapoint.selectOptionAttribute" :items="getSelectItems(datapoint)"
:value-attribute="datapoint.selectValueAttribute || 'id'" :label-key="getSelectLabelKey(datapoint)"
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]" :value-key="getSelectValueKey(datapoint)"
:searchable="datapoint.selectSearchAttributes" :search-input="getSelectSearchInput(datapoint)"
:search-attributes="datapoint.selectSearchAttributes" :filter-fields="datapoint.selectSearchAttributes"
:multiple="datapoint.selectMultiple" :multiple="datapoint.selectMultiple"
searchable-placeholder="Suche..."
> >
<template #empty> <template #empty>
Keine Optionen verfügbar Keine Optionen verfügbar
</template> </template>
</USelectMenu> </USelectMenu>
<UTextarea <UTextarea
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
class="flex-auto" class="flex-auto"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'" v-else-if="datapoint.inputType === 'textarea'"
@@ -742,37 +755,36 @@ const updateItem = async () => {
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4" rows="4"
/> />
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'" :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline" variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" @close="close" v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
</template> </template>
</UPopover> </UPopover>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'"> <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
<UButton <UButton
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'" :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'" :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
variant="outline" variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker <LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null" @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" v-model="item[datapoint.key]"
@close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false" :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
mode="datetime" mode="datetime"
/> />
@@ -807,7 +819,7 @@ const updateItem = async () => {
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
</UForm> </UForm>
</UDashboardPanelContent> </UDashboardPanelContent>
</template> </template>

24
frontend/components/EntityList.vue
View File

@@ -110,12 +110,6 @@ const filteredRows = computed(() => {
</script> </script>
<template> <template>
<FloatingActionButton
:label="`+ ${dataType.labelSingle}`"
variant="outline"
v-if="platform === 'mobile'"
@click="router.push(`/standardEntity/${type}/create`)"
/>
<UDashboardNavbar :title="dataType.label" :badge="filteredRows.length"> <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
<template #toggle> <template #toggle>
<div v-if="platform === 'mobile'"></div> <div v-if="platform === 'mobile'"></div>
@@ -138,7 +132,7 @@ const filteredRows = computed(() => {
<UButton <UButton
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
color="rose" color="error"
@click="clearSearchString()" @click="clearSearchString()"
v-if="searchString.length > 0" v-if="searchString.length > 0"
/> />
@@ -161,15 +155,15 @@ const filteredRows = computed(() => {
<USelectMenu <USelectMenu
v-model="selectedColumns" v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)" :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
by="key" by="key"
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'" :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
@change="tempStore.modifyColumns(type,selectedColumns)" @change="tempStore.modifyColumns(type,selectedColumns)"
> >
<template #label> <template #default>
Spalten Spalten
</template> </template>
</USelectMenu> </USelectMenu>
@@ -178,11 +172,11 @@ const filteredRows = computed(() => {
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
multiple multiple
v-model="selectedFilters" v-model="selectedFilters"
:options="selectableFilters" :items="selectableFilters"
:color="selectedFilters.length > 0 ? 'primary' : 'white'" :color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
> >
<template #label> <template #default>
Filter Filter
</template> </template>
</USelectMenu> </USelectMenu>
@@ -191,14 +185,14 @@ const filteredRows = computed(() => {
<EntityTableMobile <EntityTableMobile
v-if="platform === 'mobile'" v-if="platform === 'mobile'"
:type="props.type" :type="props.type"
:columns="columns" :columns="normalizeTableColumns(columns)"
:rows="filteredRows" :rows="filteredRows"
/> />
<EntityTable <EntityTable
v-else v-else
@sort="(i) => emit('sort',i)" @sort="(i) => emit('sort',i)"
:type="props.type" :type="props.type"
:columns="columns" :columns="normalizeTableColumns(columns)"
:rows="filteredRows" :rows="filteredRows"
:loading="props.loading" :loading="props.loading"
/> />

19
frontend/components/EntityShow.vue
View File

@@ -28,14 +28,16 @@ defineShortcuts({
router.back() router.back()
}, },
'arrowleft': () => { 'arrowleft': () => {
if(openTab.value > 0){ const currentIndex = Number(openTab.value)
openTab.value -= 1 if(currentIndex > 0){
openTab.value = String(currentIndex - 1)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`) router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
} }
}, },
'arrowright': () => { 'arrowright': () => {
if(openTab.value < dataType.showTabs.length - 1) { const currentIndex = Number(openTab.value)
openTab.value += 1 if(currentIndex < dataType.showTabs.length - 1) {
openTab.value = String(currentIndex + 1)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`) router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
} }
}, },
@@ -51,7 +53,7 @@ const auth = useAuthStore()
const dataType = dataStore.dataTypes[type] const dataType = dataStore.dataTypes[type]
const openTab = ref(route.query.tabIndex || 0) const openTab = ref(String(route.query.tabIndex || 0))
@@ -97,7 +99,8 @@ const getAvailableQueryStringData = (keys) => {
} }
const onTabChange = (index) => { const onTabChange = (index) => {
router.push(`${router.currentRoute.value.path}?tabIndex=${index}`) openTab.value = String(index)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
} }
const changePinned = async () => { const changePinned = async () => {
@@ -255,9 +258,9 @@ const openCustomerInventoryLabelPrint = () => {
v-if="props.item.id && platform !== 'mobile'" v-if="props.item.id && platform !== 'mobile'"
class="p-5" class="p-5"
v-model="openTab" v-model="openTab"
@change="onTabChange" @update:model-value="onTabChange"
> >
<template #item="{item:tab}"> <template #content="{item:tab}">
<div v-if="tab.label === 'Informationen'" class="flex flex-row"> <div v-if="tab.label === 'Informationen'" class="flex flex-row">
<EntityShowSubInformation <EntityShowSubInformation

8
frontend/components/EntityShowSub.vue
View File

@@ -96,15 +96,15 @@ setup()
<USelectMenu <USelectMenu
v-model="selectedColumns" v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)" :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
by="key" by="key"
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'" :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
@change="tempStore.modifyColumns(type,selectedColumns)" @change="tempStore.modifyColumns(type,selectedColumns)"
> >
<template #label> <template #default>
Spalten Spalten
</template> </template>
</USelectMenu> </USelectMenu>
@@ -114,7 +114,7 @@ setup()
<div class="scroll" style="height: 70vh"> <div class="scroll" style="height: 70vh">
<EntityTable <EntityTable
:type="type" :type="type"
:columns="columns" :columns="normalizeTableColumns(columns)"
:rows="props.item[type]" :rows="props.item[type]"
style style
/> />

134
frontend/components/EntityShowSubCreatedDocuments.vue
View File

@@ -181,49 +181,51 @@ const selectItem = (item) => {
</UButton> </UButton>
<UModal <UModal
prevent-close prevent-close
v-model="showFinalInvoiceConfig" v-model:open="showFinalInvoiceConfig"
> >
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Schlussrechnung konfigurieren <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Schlussrechnung konfigurieren
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showFinalInvoiceConfig = false" />
</template> </div>
</template>
<UFormGroup <UFormField
label="Rechnungsvorlage" label="Rechnungsvorlage"
>
<USelectMenu
:options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
value-attribute="id"
option-attribute="documentNumber"
v-model="referenceDocument"
/>
</UFormGroup>
<UFormGroup
label="Abschlagsrechnungen"
>
<USelectMenu
:options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
multiple
value-attribute="id"
option-attribute="documentNumber"
v-model="advanceInvoicesToAdd"
/>
</UFormGroup>
<template #footer>
<UButton
@click="invoiceAdvanceInvoices"
> >
Weiter <USelectMenu
</UButton> :items="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
</template> value-key="id"
</UCard> label-key="documentNumber"
v-model="referenceDocument"
/>
</UFormField>
<UFormField
label="Abschlagsrechnungen"
>
<USelectMenu
:items="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
multiple
value-key="id"
label-key="documentNumber"
v-model="advanceInvoicesToAdd"
/>
</UFormField>
<template #footer>
<UButton
@click="invoiceAdvanceInvoices"
>
Weiter
</UButton>
</template>
</UCard>
</template>
</UModal> </UModal>
<UButton <UButton
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)" @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
@@ -235,48 +237,48 @@ const selectItem = (item) => {
<USelectMenu <USelectMenu
v-model="selectedColumns" v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns" :items="templateColumns"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
by="key" by="key"
@change="tempStore.modifyColumns('createddocuments',selectedColumns)" @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
> >
<template #label> <template #default>
Spalten Spalten
</template> </template>
</USelectMenu> </USelectMenu>
</template> </template>
</Toolbar> </Toolbar>
<UTable <UTable
:rows="props.item.createddocuments.filter(i => !i.archived)" :data="props.item.createddocuments.filter(i => !i.archived)"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="selectItem" :on-select="(row) => selectItem(row.original)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
style="height: 70vh" style="height: 70vh"
> >
<template #type-data="{row}"> <template #type-cell="{ row }">
{{dataStore.documentTypesForCreation[row.type].labelSingle}} {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
</template> </template>
<template #state-data="{row}"> <template #state-cell="{ row }">
<span <span
v-if="row.state === 'Entwurf'" v-if="row.original.state === 'Entwurf'"
class="text-rose-500" class="text-error-500"
> >
{{row.state}} {{ row.original.state }}
</span> </span>
<span <span
v-if="row.state === 'Gebucht'" v-if="row.original.state === 'Gebucht'"
class="text-cyan-500" class="text-cyan-500"
> >
{{row.state}} {{ row.original.state }}
</span> </span>
<span <span
v-if="row.state === 'Abgeschlossen'" v-if="row.original.state === 'Abgeschlossen'"
class="text-primary-500" class="text-primary-500"
> >
{{row.state}} {{ row.original.state }}
</span> </span>
</template> </template>
<!-- <template #paid-data="{row}"> <!-- <template #paid-data="{row}">
@@ -285,19 +287,19 @@ const selectItem = (item) => {
<span v-else class="text-rose-600">Offen</span> <span v-else class="text-rose-600">Offen</span>
</div> </div>
</template>--> </template>-->
<template #reference-data="{row}"> <template #reference-cell="{ row }">
<span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span> <span v-if="row.original === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
<span v-else>{{row.documentNumber}}</span> <span v-else>{{ row.original.documentNumber }}</span>
</template> </template>
<template #date-data="{row}"> <template #date-cell="{ row }">
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span> <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
<span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span> <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
</template> </template>
<template #dueDate-data="{row}"> <template #dueDate-cell="{ row }">
<span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span> <span v-if="row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type)">{{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays,'day').format("DD.MM.YY") : '' }}</span>
</template> </template>
<template #amount-data="{row}"> <template #amount-cell="{ row }">
<span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span> <span v-if="row.original.type !== 'deliveryNotes'">{{ useCurrency(useSum().getCreatedDocumentSum(row.original, createddocuments)) }}</span>
</template> </template>
</UTable> </UTable>

66
frontend/components/EntityShowSubFiles.vue
View File

@@ -94,41 +94,43 @@ function isImage(file) {
</UCard> </UCard>
<!-- 📱 PDF / IMG Viewer Slideover --> <!-- 📱 PDF / IMG Viewer Slideover -->
<UModal v-model="showViewer" side="bottom" class="h-[100dvh]" fullscreen> <UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
<!-- Header --> <template #content>
<div class="p-4 border-b flex justify-between items-center flex-shrink-0"> <!-- Header -->
<h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3> <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
<UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" /> <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
</div> <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
<!-- Content -->
<div class="flex-1 overflow-y-auto m-2">
<!-- PDF -->
<div v-if="activeFile && isPdf(activeFile)" class="h-full">
<PDFViewer
:no-controls="true"
:file-id="activeFile.id"
location="fileviewer-mobile"
class="h-full"
/>
</div> </div>
<!-- IMAGE --> <!-- Content -->
<div <div class="flex-1 overflow-y-auto m-2">
v-else-if="activeFile && isImage(activeFile)" <!-- PDF -->
class="p-4 flex justify-center" <div v-if="activeFile && isPdf(activeFile)" class="h-full">
> <PDFViewer
<img :no-controls="true"
:src="activeFile.url" :file-id="activeFile.id"
class="max-w-full max-h-[80vh] rounded-lg shadow" location="fileviewer-mobile"
class="h-full"
/>
</div>
<!-- IMAGE -->
<div
v-else-if="activeFile && isImage(activeFile)"
class="p-4 flex justify-center"
>
<img
:src="activeFile.url"
class="max-w-full max-h-[80vh] rounded-lg shadow"
/>
</div>
<UAlert
v-else
title="Nicht unterstützter Dateityp"
icon="i-heroicons-exclamation-triangle"
/> />
</div> </div>
</template>
<UAlert
v-else
title="Nicht unterstützter Dateityp"
icon="i-heroicons-exclamation-triangle"
/>
</div>
</UModal> </UModal>
</template> </template>

2
frontend/components/EntityShowSubInformation.vue
View File

@@ -65,7 +65,7 @@ const renderDatapointValue = (datapoint) => {
</template> </template>
<UAlert <UAlert
v-if="props.item.archived" v-if="props.item.archived"
color="rose" color="error"
variant="outline" variant="outline"
:title="`${dataType.labelSingle} archiviert`" :title="`${dataType.labelSingle} archiviert`"
icon="i-heroicons-archive-box" icon="i-heroicons-archive-box"

24
frontend/components/EntityShowSubOwnAccountsStatements.vue
View File

@@ -77,21 +77,21 @@ const renderedAllocations = computed(() => {
<UCard class="mt-5"> <UCard class="mt-5">
<UTable <UTable
v-if="props.item.statementallocations" v-if="props.item.statementallocations"
:rows="renderedAllocations" :data="renderedAllocations"
:columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]" :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
@select="(i) => selectAllocation(i)" :on-select="(i) => selectAllocation(i)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
> >
<template #amount-data="{row}"> <template #amount-cell="{row}">
<span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span> <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
<span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span> <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
<span v-else>{{useCurrency(row.amount)}}</span> <span v-else>{{useCurrency(row.original.amount)}}</span>
</template> </template>
<template #date-data="{row}"> <template #date-cell="{row}">
{{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}} {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
</template> </template>
<template #description-data="{row}"> <template #description-cell="{row}">
{{row.description ? row.description : ''}} {{row.original.description ? row.original.description : ''}}
</template> </template>
</UTable> </UTable>
</UCard> </UCard>

10
frontend/components/EntityShowSubPhases.vue
View File

@@ -95,26 +95,26 @@ const changeActivePhase = async (key) => {
<UAccordion <UAccordion
:items="renderedPhases" :items="renderedPhases"
> >
<template #default="{item,index,open}"> <template #default="slotProps">
<UButton <UButton
variant="ghost" variant="ghost"
:color="item.active ? 'primary' : 'white'" :color="slotProps.item.active ? 'primary' : 'white'"
class="mb-1" class="mb-1"
:disabled="true" :disabled="true"
> >
<template #leading> <template #leading>
<div class="w-6 h-6 flex items-center justify-center -my-1"> <div class="w-6 h-6 flex items-center justify-center -my-1">
<UIcon :name="item.icon" class="w-4 h-4 " /> <UIcon :name="slotProps.item.icon" class="w-4 h-4 " />
</div> </div>
</template> </template>
<span class="truncate"> {{item.label}}</span> <span class="truncate"> {{ slotProps.item.label }}</span>
<template #trailing> <template #trailing>
<UIcon <UIcon
name="i-heroicons-chevron-right-20-solid" name="i-heroicons-chevron-right-20-solid"
class="w-5 h-5 ms-auto transform transition-transform duration-200" class="w-5 h-5 ms-auto transform transition-transform duration-200"
:class="[open && 'rotate-90']" :class="[slotProps?.open && 'rotate-90']"
/> />
</template> </template>

42
frontend/components/EntityShowSubTimes.vue
View File

@@ -67,40 +67,40 @@ const columns = [
<UCard class="mt-5"> <UCard class="mt-5">
<UTable <UTable
class="mt-3" class="mt-3"
:columns="columns" :columns="normalizeTableColumns(columns)"
:rows="props.item.times" :data="props.item.times"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
> >
<template #state-data="{row}"> <template #state-cell="{ row }">
<span <span
v-if="row.state === 'Entwurf'" v-if="row.original.state === 'Entwurf'"
class="text-rose-500" class="text-error-500"
>{{row.state}}</span> >{{ row.original.state }}</span>
<span <span
v-if="row.state === 'Eingereicht'" v-if="row.original.state === 'Eingereicht'"
class="text-cyan-500" class="text-cyan-500"
>{{row.state}}</span> >{{ row.original.state }}</span>
<span <span
v-if="row.state === 'Bestätigt'" v-if="row.original.state === 'Bestätigt'"
class="text-primary-500" class="text-primary-500"
>{{row.state}}</span> >{{ row.original.state }}</span>
</template> </template>
<template #user-data="{row}"> <template #user-cell="{ row }">
{{row.profile ? row.profile.fullName : "" }} {{ row.original.profile ? row.original.profile.fullName : "" }}
</template> </template>
<template #startDate-data="{row}"> <template #startDate-cell="{ row }">
{{dayjs(row.startDate).format("DD.MM.YY HH:mm")}} {{ dayjs(row.original.startDate).format("DD.MM.YY HH:mm") }}
</template> </template>
<template #endDate-data="{row}"> <template #endDate-cell="{ row }">
{{dayjs(row.endDate).format("DD.MM.YY HH:mm")}} {{ dayjs(row.original.endDate).format("DD.MM.YY HH:mm") }}
</template> </template>
<template #duration-data="{row}"> <template #duration-cell="{ row }">
{{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h {{ Math.floor(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") / 60) }}:{{ String(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") % 60).padStart(2,"0") }} h
</template> </template>
<template #project-data="{row}"> <template #project-cell="{ row }">
{{row.project ? row.project.name : "" }} {{ row.original.project ? row.original.project.name : "" }}
</template> </template>
</UTable> </UTable>
</UCard> </UCard>

113
frontend/components/EntityTable.vue
View File

@@ -58,76 +58,101 @@
const dataType = dataStore.dataTypes[props.type] const dataType = dataStore.dataTypes[props.type]
const selectedItem = ref(0) const selectedItem = ref(0)
const sort = ref({ const sorting = ref([{
column: dataType.sortColumn || "date", id: dataType.sortColumn || "date",
direction: 'desc' desc: true
}) }])
const normalizedColumns = computed(() => normalizeTableColumns(props.columns))
const truncateValue = (value, maxLength) => {
if (value === null || value === undefined || value === '') {
return '\u00A0'
}
const stringValue = String(value)
if (!maxLength || stringValue.length <= maxLength) {
return stringValue
}
return `${stringValue.substring(0, maxLength)}...`
}
const handleSortChange = (value) => {
const nextSort = Array.isArray(value) ? value[0] : undefined
if (!nextSort?.id) {
return
}
emit('sort', {
sort_column: nextSort.id,
sort_direction: nextSort.desc ? 'desc' : 'asc'
})
}
const handleSelect = (row) => {
router.push(getShowRoute(props.type, row.original.id))
}
</script> </script>
<template> <template>
<UTable <UTable
:loading="props.loading" :loading="props.loading"
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
sort-mode="manual" sort-mode="manual"
v-model:sort="sort" v-model:sorting="sorting"
@update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})" @update:sorting="handleSortChange"
v-if="dataType && columns" v-if="dataType && columns"
:rows="props.rows" :data="props.rows"
:columns="props.columns" :columns="normalizedColumns"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(getShowRoute(type, i.id))" :on-select="handleSelect"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }" :empty="`Keine ${dataType.label} anzuzeigen`"
> >
<!-- <template <template #name-cell="{ row }">
v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
v-slot:[`${column.key}-header`]="{row}">
<span class="text-nowrap">{{column.label}}</span>
</template>-->
<template #name-data="{row}">
<span <span
v-if="row.id === props.rows[selectedItem].id" v-if="row.original.id === props.rows[selectedItem]?.id"
class="text-primary-500 font-bold"> class="block truncate text-primary-500 font-bold"
<UTooltip >
:text="row.name" <UTooltip :text="row.original.name">
> <span class="block truncate">
{{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}} {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
</span>
</UTooltip> </span> </UTooltip> </span>
<span v-else> <span v-else class="block truncate">
<UTooltip <UTooltip :text="row.original.name">
:text="row.name" <span class="block truncate">
> {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
{{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}} </span>
</UTooltip> </UTooltip>
</span> </span>
</template> </template>
<template #fullName-data="{row}"> <template #fullName-cell="{ row }">
<span <span
v-if="row.id === props.rows[selectedItem].id" v-if="row.original.id === props.rows[selectedItem]?.id"
class="text-primary-500 font-bold">{{row.fullName}} class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
</span> </span>
<span v-else> <span v-else class="block truncate">
{{row.fullName}} {{ row.original.fullName }}
</span> </span>
</template> </template>
<template #licensePlate-data="{row}"> <template #licensePlate-cell="{ row }">
<span <span
v-if="row.id === props.rows[selectedItem].id" v-if="row.original.id === props.rows[selectedItem]?.id"
class="text-primary-500 font-bold">{{row.licensePlate}} class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
</span> </span>
<span v-else> <span v-else class="block truncate">
{{row.licensePlate}} {{ row.original.licensePlate }}
</span> </span>
</template> </template>
<template <template
v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)" v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
v-slot:[`${column.key}-data`]="{row}"> v-slot:[`${column.key}-cell`]="{ row }">
<component v-if="column.component" :is="column.component" :row="row"></component> <component v-if="column.component" :is="column.component" :row="row.original"></component>
<span v-else-if="row[column.key]"> <span v-else-if="row.original[column.key]" class="block truncate">
<UTooltip :text="row[column.key]"> <UTooltip :text="String(row.original[column.key])">
{{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}} <span class="block truncate">
</UTooltip> {{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
</span>
</UTooltip>
</span> </span>
</template> </template>

2
frontend/components/EntityTableMobile.vue
View File

@@ -77,7 +77,7 @@
<!-- <UTable <!-- <UTable
v-if="dataType && columns" v-if="dataType && columns"
:rows="props.rows" :data="props.rows"
:columns="props.columns" :columns="props.columns"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"

26
frontend/components/GlobalMessages.vue
View File

@@ -55,17 +55,19 @@ setup()
</script> </script>
<template> <template>
<UModal v-model="showMessageModal" prevent-close> <UModal v-model:open="showMessageModal" prevent-close>
<UCard> <template #content>
<template #header> <UCard>
<span class="font-bold">{{messageToShow.title}}</span> <template #header>
</template> <span class="font-bold">{{messageToShow.title}}</span>
<p class=" my-2" v-html="messageToShow.description"></p> </template>
<UButton <p class=" my-2" v-html="messageToShow.description"></p>
variant="outline" <UButton
@click="markMessageAsRead" variant="outline"
>Gelesen</UButton> @click="markMessageAsRead"
</UCard> >Gelesen</UButton>
</UCard>
</template>
</UModal> </UModal>
<!-- <UCard <!-- <UCard
@@ -79,7 +81,7 @@ setup()
variant="ghost" variant="ghost"
@click="showMessage(globalMessages[0])" @click="showMessage(globalMessages[0])"
/> />
<UModal v-model="showMessageModal"> <UModal v-model:open="showMessageModal">
<UCard> <UCard>
<template #header> <template #header>
<span class="font-bold">{{messageToShow.title}}</span> <span class="font-bold">{{messageToShow.title}}</span>

18
frontend/components/GlobalSearch.vue
View File

@@ -123,15 +123,17 @@ function onSelect (option) {
/> />
<UModal <UModal
v-model="showCommandPalette" v-model:open="showCommandPalette"
> >
<UCommandPalette <template #content>
v-model="selectedCommand" <UCommandPalette
:groups="groups" v-model="selectedCommand"
:autoselect="false" :groups="groups"
@update:model-value="onSelect" :autoselect="false"
ref="commandPaletteRef" @update:model-value="onSelect"
/> ref="commandPaletteRef"
/>
</template>
</UModal> </UModal>
</template> </template>

189
frontend/components/HelpSlideover.vue
View File

@@ -2,9 +2,16 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
const { isHelpSlideoverOpen } = useDashboard() const { isHelpSlideoverOpen } = useDashboard()
const { metaSymbol } = useShortcuts()
const { entries, pending, error, seenState, refresh, markAsSeen } = useChangelog() const { entries, pending, error, seenState, refresh, markAsSeen } = useChangelog()
const metaSymbol = computed(() => {
if (import.meta.server) {
return 'Ctrl'
}
return /Mac|iPhone|iPad|iPod/i.test(navigator.platform) ? '⌘' : 'Ctrl'
})
const shortcuts = ref(false) const shortcuts = ref(false)
const query = ref('') const query = ref('')
const toast = useToast() const toast = useToast()
@@ -125,7 +132,7 @@ const addContactRequest = async () => {
toast.add({title: "Anfrage erfolgreich erstellt"}) toast.add({title: "Anfrage erfolgreich erstellt"})
resetContactRequest() resetContactRequest()
} else { } else {
toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"}) toast.add({title: "Anfrage konnte nicht erstellt werden",color:"error"})
} }
loadingContactRequest.value = false loadingContactRequest.value = false
} }
@@ -154,7 +161,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</script> </script>
<template> <template>
<UDashboardSlideover v-model="isHelpSlideoverOpen"> <USlideover v-model:open="isHelpSlideoverOpen" side="right">
<template #title> <template #title>
<UButton <UButton
v-if="shortcuts" v-if="shortcuts"
@@ -168,93 +175,94 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
{{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }} {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
</template> </template>
<div v-if="shortcuts" class="space-y-6"> <template #body>
<UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" /> <div v-if="shortcuts" class="space-y-6">
<UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
<div v-for="(category, index) in filteredCategories" :key="index"> <div v-for="(category, index) in filteredCategories" :key="index">
<p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold"> <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
{{ category.title }} {{ category.title }}
</p> </p>
<div class="space-y-2"> <div class="space-y-2">
<div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between"> <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
<span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span> <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
<div class="flex items-center justify-end flex-shrink-0 gap-0.5"> <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
<UKbd v-for="(shortcut, j) in item.shortcuts" :key="j"> <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
{{ shortcut }} {{ shortcut }}
</UKbd> </UKbd>
</div>
</div>
</div>
</div>
</div>
<div v-else class="flex flex-col gap-y-6">
<div class="flex flex-col gap-y-3">
<UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
</div>
<UCard>
<div class="flex items-center justify-between gap-3">
<div>
<p class="text-base font-semibold text-gray-900 dark:text-white">
Changelog
</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
Zuletzt geöffnet: {{ lastOpenedLabel }}
</p>
</div>
<UButton
icon="i-heroicons-arrow-path"
color="gray"
variant="ghost"
:loading="pending"
@click="refresh(true)"
/>
</div>
<UAlert
v-if="error"
class="mt-4"
color="red"
variant="soft"
title="Changelog konnte nicht geladen werden"
:description="error"
/>
<div v-else-if="pending && !changelogEntries.length" class="mt-4">
<UProgress animation="carousel"/>
</div>
<div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
<div
v-for="entry in changelogEntries"
:key="entry.hash"
class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<p class="font-medium text-gray-900 dark:text-white break-words">
{{ entry.subject }}
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
{{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
</p>
</div> </div>
<UBadge color="gray" variant="subtle">
{{ entry.shortHash }}
</UBadge>
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-else class="flex flex-col gap-y-6">
<div class="flex flex-col gap-y-3">
<UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
</div>
<p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400"> <UCard>
Es sind noch keine Changelog-Einträge verfügbar. <div class="flex items-center justify-between gap-3">
</p> <div>
</UCard> <p class="text-base font-semibold text-gray-900 dark:text-white">
</div> Changelog
</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
Zuletzt geöffnet: {{ lastOpenedLabel }}
</p>
</div>
<UButton
icon="i-heroicons-arrow-path"
color="gray"
variant="ghost"
:loading="pending"
@click="refresh(true)"
/>
</div>
<UAlert
v-if="error"
class="mt-4"
color="red"
variant="soft"
title="Changelog konnte nicht geladen werden"
:description="error"
/>
<div v-else-if="pending && !changelogEntries.length" class="mt-4">
<UProgress animation="carousel"/>
</div>
<div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
<div
v-for="entry in changelogEntries"
:key="entry.hash"
class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<p class="font-medium text-gray-900 dark:text-white break-words">
{{ entry.subject }}
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
{{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
</p>
</div>
<UBadge color="gray" variant="subtle">
{{ entry.shortHash }}
</UBadge>
</div>
</div>
</div>
<p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400">
Es sind noch keine Changelog-Einträge verfügbar.
</p>
</UCard>
</div>
<!-- <div class="mt-5" v-if="!loadingContactRequest"> <!-- <div class="mt-5" v-if="!loadingContactRequest">
<h1 class="font-semibold">Kontaktanfrage:</h1> <h1 class="font-semibold">Kontaktanfrage:</h1>
<UForm <UForm
@@ -262,29 +270,29 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
@submit="addContactRequest" @submit="addContactRequest"
@reset="resetContactRequest" @reset="resetContactRequest"
> >
&lt;!&ndash; <UFormGroup &lt;!&ndash; <UFormField
label="Art:" label="Art:"
> >
<USelectMenu <USelectMenu
:options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']" :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
v-model="contactRequestData.contactType" v-model="contactRequestData.contactType"
/> />
</UFormGroup>&ndash;&gt; </UFormField>&ndash;&gt;
<UFormGroup <UFormField
label="Titel:" label="Titel:"
> >
<UInput <UInput
v-model="contactRequestData.title" v-model="contactRequestData.title"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Nachricht:" label="Nachricht:"
> >
<UTextarea <UTextarea
v-model="contactRequestData.message" v-model="contactRequestData.message"
rows="6" rows="6"
/> />
</UFormGroup> </UFormField>
<InputGroup class="mt-3"> <InputGroup class="mt-3">
<UButton <UButton
type="submit" type="submit"
@@ -294,7 +302,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</UButton> </UButton>
<UButton <UButton
type="reset" type="reset"
color="rose" color="error"
variant="outline" variant="outline"
:disabled="!contactRequestData.title && !contactRequestData.message" :disabled="!contactRequestData.title && !contactRequestData.message"
> >
@@ -305,5 +313,6 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</UForm> </UForm>
</div> </div>
<UProgress class="mt-5" animation="carousel" v-else/>--> <UProgress class="mt-5" animation="carousel" v-else/>-->
</UDashboardSlideover> </template>
</USlideover>
</template> </template>

58
frontend/components/HistoryDisplay.vue
View File

@@ -76,38 +76,40 @@ const renderText = (text) => {
<template> <template>
<UModal <UModal
v-model="showAddHistoryItemModal" v-model:open="showAddHistoryItemModal"
> >
<UCard class="h-full"> <template #content>
<template #header> <UCard class="h-full">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Eintrag hinzufügen <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Eintrag hinzufügen
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
</template> </div>
</template>
<UFormGroup <UFormField
label="Text:" label="Text:"
> >
<UTextarea <UTextarea
v-model="addHistoryItemData.text" v-model="addHistoryItemData.text"
@keyup.meta.enter="addHistoryItem" @keyup.meta.enter="addHistoryItem"
/> />
<!-- TODO: Add Dropdown and Checking for Usernames --> <!-- TODO: Add Dropdown and Checking for Usernames -->
<!-- <template #help> <!-- <template #help>
<UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
</template>--> </template>-->
</UFormGroup> </UFormField>
<template #footer> <template #footer>
<UButton @click="addHistoryItem">Speichern</UButton> <UButton @click="addHistoryItem">Speichern</UButton>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
<Toolbar <Toolbar
v-if="!props.renderHeadline && props.elementId && props.type" v-if="!props.renderHeadline && props.elementId && props.type"
@@ -127,7 +129,7 @@ const renderText = (text) => {
+ Eintrag + Eintrag
</UButton> </UButton>
</div> </div>
<UDivider class="my-3"/> <USeparator class="my-3"/>
</div> </div>
<!-- ITEM LIST --> <!-- ITEM LIST -->
@@ -136,7 +138,7 @@ const renderText = (text) => {
v-if="items.length > 0" v-if="items.length > 0"
v-for="(item,index) in items.slice().reverse()" v-for="(item,index) in items.slice().reverse()"
> >
<UDivider <USeparator
class="my-3" class="my-3"
v-if="index !== 0" v-if="index !== 0"
/> />

2
frontend/components/InboxList.vue
View File

@@ -86,7 +86,7 @@ defineShortcuts({
</p> </p>
</div> </div>
<UDivider /> <USeparator />
</div> </div>
</UDashboardPanelContent> </UDashboardPanelContent>
</template> </template>

4
frontend/components/InboxMail.vue
View File

@@ -34,7 +34,7 @@ defineProps({
</p> </p>
</div> </div>
<UDivider class="my-5" /> <USeparator class="my-5" />
<div class="flex-1"> <div class="flex-1">
<p class="text-lg"> <p class="text-lg">
@@ -42,7 +42,7 @@ defineProps({
</p> </p>
</div> </div>
<UDivider class="my-5" /> <USeparator class="my-5" />
<form @submit.prevent> <form @submit.prevent>
<UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`"> <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">

6
frontend/components/LabelPrintModal.vue
View File

@@ -90,7 +90,8 @@ watch(() => labelPrinter.connected, (connected) => {
<template> <template>
<UModal :ui="{ width: 'sm:max-w-5xl' }"> <UModal :ui="{ width: 'sm:max-w-5xl' }">
<UCard class="w-[92vw] max-w-5xl"> <template #content>
<UCard class="w-[92vw] max-w-5xl">
<template #header> <template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@@ -133,6 +134,7 @@ watch(() => labelPrinter.connected, (connected) => {
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

32
frontend/components/LabelPrinterButton.vue
View File

@@ -18,21 +18,23 @@ const handleClick = async () => {
<template> <template>
<!-- Printer Button --> <!-- Printer Button -->
<UModal v-model="showPrinterInfo"> <UModal v-model:open="showPrinterInfo">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-lg font-semibold">Drucker Informationen</h3> <div class="flex items-center justify-between">
<UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" /> <h3 class="text-lg font-semibold">Drucker Informationen</h3>
</div> <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
</template> </div>
<p>Seriennummer: {{labelPrinter.info.serial}}</p> </template>
<p>MAC: {{labelPrinter.info.mac}}</p> <p>Seriennummer: {{labelPrinter.info.serial}}</p>
<p>Modell: {{labelPrinter.info.modelId}}</p> <p>MAC: {{labelPrinter.info.mac}}</p>
<p>Charge: {{labelPrinter.info.charge}}</p> <p>Modell: {{labelPrinter.info.modelId}}</p>
<p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p> <p>Charge: {{labelPrinter.info.charge}}</p>
<p>Software Version: {{labelPrinter.info.softwareVersion}}</p> <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
</UCard> <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
</UCard>
</template>
</UModal> </UModal>
<UButton <UButton

195
frontend/components/MainNav.vue
View File

@@ -1,10 +1,14 @@
<script setup> <script setup>
const props = defineProps({
collapsed: {
type: Boolean,
default: false
}
})
const route = useRoute() const route = useRoute()
const auth = useAuthStore() const auth = useAuthStore()
const { has } = usePermission() const { has } = usePermission()
// Lokaler State für den Taschenrechner
const showCalculator = ref(false)
const tenantExtraModules = computed(() => { const tenantExtraModules = computed(() => {
const modules = auth.activeTenantData?.extraModules const modules = auth.activeTenantData?.extraModules
return Array.isArray(modules) ? modules : [] return Array.isArray(modules) ? modules : []
@@ -19,6 +23,17 @@ const isAdmin = computed(() => Boolean(auth.user?.is_admin))
const tenantFeatures = computed(() => auth.activeTenantData?.features || {}) const tenantFeatures = computed(() => auth.activeTenantData?.features || {})
const featureEnabled = (key) => tenantFeatures.value?.[key] !== false const featureEnabled = (key) => tenantFeatures.value?.[key] !== false
const visibleItems = (items) => items.filter(item => item && !item.disabled) const visibleItems = (items) => items.filter(item => item && !item.disabled)
const isRouteActive = (to) => {
if (!to) {
return false
}
if (to === '/') {
return route.path === '/'
}
return route.path === to || route.path.startsWith(`${to}/`)
}
const links = computed(() => { const links = computed(() => {
const organisationChildren = [ const organisationChildren = [
@@ -284,15 +299,13 @@ const links = computed(() => {
label: pin.label, label: pin.label,
to: pin.link, to: pin.link,
icon: pin.icon, icon: pin.icon,
target: "_blank", target: "_blank"
pinned: true
} }
} else if (pin.type === "standardEntity") { } else if (pin.type === "standardEntity") {
return { return {
label: pin.label, label: pin.label,
to: pin.datatype === "tasks" ? `/tasks/show/${pin.id}` : `/standardEntity/${pin.datatype}/show/${pin.id}`, to: pin.datatype === "tasks" ? `/tasks/show/${pin.id}` : `/standardEntity/${pin.datatype}/show/${pin.id}`,
icon: pin.icon, icon: pin.icon
pinned: true
} }
} }
}), }),
@@ -309,6 +322,21 @@ const links = computed(() => {
to: "/historyitems", to: "/historyitems",
icon: "i-heroicons-book-open" icon: "i-heroicons-book-open"
} : null, } : null,
...(has("projects") && featureEnabled("projects")) ? [{
label: "Projekte",
to: "/standardEntity/projects",
icon: "i-heroicons-clipboard-document-check"
}] : [],
...(has("contracts") && featureEnabled("contracts")) ? [{
label: "Verträge",
to: "/standardEntity/contracts",
icon: "i-heroicons-clipboard-document"
}] : [],
...(has("plants") && featureEnabled("plants")) ? [{
label: "Objekte",
to: "/standardEntity/plants",
icon: "i-heroicons-clipboard-document"
}] : [],
...(visibleOrganisationChildren.length > 0 ? [{ ...(visibleOrganisationChildren.length > 0 ? [{
label: "Organisation", label: "Organisation",
icon: "i-heroicons-rectangle-stack", icon: "i-heroicons-rectangle-stack",
@@ -358,21 +386,7 @@ const links = computed(() => {
children: visibleMasterDataChildren children: visibleMasterDataChildren
}] : []), }] : []),
...(has("projects") && featureEnabled("projects")) ? [{
label: "Projekte",
to: "/standardEntity/projects",
icon: "i-heroicons-clipboard-document-check"
}] : [],
...(has("contracts") && featureEnabled("contracts")) ? [{
label: "Verträge",
to: "/standardEntity/contracts",
icon: "i-heroicons-clipboard-document"
}] : [],
...(has("plants") && featureEnabled("plants")) ? [{
label: "Objekte",
to: "/standardEntity/plants",
icon: "i-heroicons-clipboard-document"
}] : [],
...(visibleSettingsChildren.length > 0 ? [{ ...(visibleSettingsChildren.length > 0 ? [{
label: "Einstellungen", label: "Einstellungen",
defaultOpen: false, defaultOpen: false,
@@ -382,81 +396,80 @@ const links = computed(() => {
]) ])
}) })
const accordionItems = computed(() => const navItems = computed(() =>
links.value.filter(item => Array.isArray(item.children) && item.children.length > 0) links.value
) .filter(Boolean)
.map((item, index) => {
const children = Array.isArray(item.children)
? item.children.map((child, childIndex) => ({
...child,
value: child.id || child.label || `${index}-${childIndex}`,
active: isRouteActive(child.to)
}))
: undefined
const buttonItems = computed(() => const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
links.value.filter(item => !item.children || item.children.length === 0)
return {
...item,
children,
value: item.id || item.label || String(index),
defaultOpen: item.defaultOpen || active,
active,
tooltip: true,
popover: true,
trailingIcon: children?.length ? undefined : ''
}
})
) )
</script> </script>
<template> <template>
<div class="flex flex-col gap-1"> <UNavigationMenu
<UButton :items="navItems"
v-for="item in buttonItems" orientation="vertical"
:key="item.label" :collapsed="props.collapsed"
variant="ghost" tooltip
:color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')" popover
:icon="item.pinned ? 'i-heroicons-star' : item.icon" color="neutral"
class="w-full" highlight
:to="item.to" highlight-color="primary"
:target="item.target" class="w-full"
@click="item.click ? item.click() : null" :ui="{
> root: 'w-full',
<UIcon list: 'space-y-1',
v-if="item.pinned" link: 'min-w-0 rounded-lg px-2.5 py-2',
:name="item.icon" linkLeadingIcon: 'size-5 shrink-0',
class="w-5 h-5 me-2" linkLabel: 'truncate',
/> childList: 'ms-0 space-y-1 border-l border-default ps-3',
{{ item.label }} childLink: 'min-w-0 rounded-lg px-2 py-1.5',
</UButton> childLinkLabel: 'truncate'
</div> }"
<UDivider class="my-2"/>
<UAccordion
:items="accordionItems"
:multiple="false"
class="mt-2"
> >
<template #default="{ item, open }"> <template #item-leading="{ item, active }">
<UButton <UIcon
variant="ghost" v-if="item.icon"
:color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'" :name="item.icon"
:icon="item.icon" class="size-5 shrink-0"
class="w-full" :class="active ? 'text-primary' : 'text-muted'"
/>
</template>
<template #item-trailing="{ item, active }">
<UBadge
v-if="item.badge && !props.collapsed"
color="primary"
variant="soft"
size="xs"
> >
{{ item.label }} {{ item.badge }}
<template #trailing> </UBadge>
<UIcon <UIcon
name="i-heroicons-chevron-right-20-solid" v-else-if="item.children?.length"
class="w-5 h-5 ms-auto transform transition-transform duration-200" name="i-heroicons-chevron-down-20-solid"
:class="[open && 'rotate-90']" class="size-4 shrink-0 transition-transform"
/> :class="active ? 'text-primary' : 'text-muted'"
</template> />
</UButton>
</template> </template>
</UNavigationMenu>
<template #item="{ item }">
<div class="flex flex-col">
<UButton
v-for="child in item.children"
:key="child.label"
variant="ghost"
:color="child.to === route.path ? 'primary' : 'gray'"
:icon="child.icon"
class="ml-4"
:to="child.to"
:target="child.target"
:disabled="child.disabled"
@click="child.click ? child.click() : null"
>
{{ child.label }}
</UButton>
</div>
</template>
</UAccordion>
<Calculator v-if="showCalculator" v-model="showCalculator"/>
</template> </template>

46
frontend/components/NotificationsSlideover.vue
View File

@@ -36,28 +36,30 @@ const setNotificationAsRead = async (notification) => {
</script> </script>
<template> <template>
<UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen"> <USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
<NuxtLink <template #body>
v-for="notification in notifications" <NuxtLink
:key="notification.id" v-for="notification in notifications"
:to="notification.link" :key="notification.id"
class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative" :to="notification.link"
@click="setNotificationAsRead(notification)" class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
> @click="setNotificationAsRead(notification)"
<UChip color="primary" :show="!notification.read && !notification.readAt" inset> >
<UAvatar alt="FEDEO" size="md" /> <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
</UChip> <UAvatar alt="FEDEO" size="md" />
</UChip>
<div class="text-sm flex-1"> <div class="text-sm flex-1">
<p class="flex items-center justify-between"> <p class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span> <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
<time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" /> <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
</p> </p>
<p class="text-gray-500 dark:text-gray-400"> <p class="text-gray-500 dark:text-gray-400">
{{ notification.message }} {{ notification.message }}
</p> </p>
</div> </div>
</NuxtLink> </NuxtLink>
</UDashboardSlideover> </template>
</USlideover>
</template> </template>

46
frontend/components/PublicDynamicForm.vue
View File

@@ -119,7 +119,7 @@ const setDeliveryDateToToday = () => {
<div class="space-y-5"> <div class="space-y-5">
<UFormGroup <UFormField
label="Datum der Ausführung" label="Datum der Ausführung"
:error="errors.deliveryDate" :error="errors.deliveryDate"
required required
@@ -134,9 +134,9 @@ const setDeliveryDateToToday = () => {
/> />
<UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" /> <UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0" v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
label="Mitarbeiter" label="Mitarbeiter"
:error="errors.profile" :error="errors.profile"
@@ -144,16 +144,16 @@ const setDeliveryDateToToday = () => {
> >
<USelectMenu <USelectMenu
v-model="form.profile" v-model="form.profile"
:options="data.profiles" :items="data.profiles"
option-attribute="fullName" label-key="fullName"
value-attribute="id" value-key="id"
placeholder="Name auswählen..." placeholder="Name auswählen..."
searchable searchable
size="lg" size="lg"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
v-if="data?.projects?.length > 0" v-if="data?.projects?.length > 0"
:label="config.ui?.labels?.project || 'Projekt / Auftrag'" :label="config.ui?.labels?.project || 'Projekt / Auftrag'"
:error="errors.project" :error="errors.project"
@@ -161,16 +161,16 @@ const setDeliveryDateToToday = () => {
> >
<USelectMenu <USelectMenu
v-model="form.project" v-model="form.project"
:options="data.projects" :items="data.projects"
option-attribute="name" label-key="name"
value-attribute="id" value-key="id"
placeholder="Wählen..." placeholder="Wählen..."
searchable searchable
size="lg" size="lg"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
v-if="data?.services?.length > 0" v-if="data?.services?.length > 0"
:label="config?.ui?.labels?.service || 'Tätigkeit'" :label="config?.ui?.labels?.service || 'Tätigkeit'"
:error="errors.service" :error="errors.service"
@@ -178,16 +178,16 @@ const setDeliveryDateToToday = () => {
> >
<USelectMenu <USelectMenu
v-model="form.service" v-model="form.service"
:options="data.services" :items="data.services"
option-attribute="name" label-key="name"
value-attribute="id" value-key="id"
placeholder="Wählen..." placeholder="Wählen..."
searchable searchable
size="lg" size="lg"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Menge / Dauer" label="Menge / Dauer"
:error="errors.quantity" :error="errors.quantity"
required required
@@ -203,9 +203,9 @@ const setDeliveryDateToToday = () => {
<span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span> <span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span>
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
v-if="config?.features?.agriculture?.showDieselUsage" v-if="config?.features?.agriculture?.showDieselUsage"
label="Dieselverbrauch" label="Dieselverbrauch"
:error="errors.diesel" :error="errors.diesel"
@@ -216,11 +216,11 @@ const setDeliveryDateToToday = () => {
<span class="text-gray-500 text-xs">Liter</span> <span class="text-gray-500 text-xs">Liter</span>
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'"> <UFormField :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
<UTextarea v-model="form.description" :rows="3" placeholder="Optional..." /> <UTextarea v-model="form.description" :rows="3" placeholder="Optional..." />
</UFormGroup> </UFormField>
</div> </div>

44
frontend/components/SessionRefreshModal.vue
View File

@@ -16,28 +16,30 @@ const onLogout = async () => {
</script> </script>
<template> <template>
<UModal v-model="auth.sessionWarningVisible" prevent-close> <UModal v-model:open="auth.sessionWarningVisible" prevent-close>
<UCard> <template #content>
<template #header> <UCard>
<h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3> <template #header>
</template> <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
</template>
<p class="text-sm text-gray-600 dark:text-gray-300"> <p class="text-sm text-gray-600 dark:text-gray-300">
Deine Sitzung endet in Deine Sitzung endet in
<span class="font-semibold">{{ remainingTimeLabel }}</span>. <span class="font-semibold">{{ remainingTimeLabel }}</span>.
Bitte bestätige, um eingeloggt zu bleiben. Bitte bestätige, um eingeloggt zu bleiben.
</p> </p>
<template #footer> <template #footer>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<UButton variant="outline" color="gray" @click="onLogout"> <UButton variant="outline" color="gray" @click="onLogout">
Abmelden Abmelden
</UButton> </UButton>
<UButton color="primary" @click="onRefresh"> <UButton color="primary" @click="onRefresh">
Eingeloggt bleiben Eingeloggt bleiben
</UButton> </UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

102
frontend/components/StaffTimeEntryModal.vue
View File

@@ -116,7 +116,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
emit('saved') emit('saved')
isOpen.value = false isOpen.value = false
} catch (error: any) { } catch (error: any) {
toast.add({ title: 'Fehler', description: error.message, color: 'red' }) toast.add({ title: 'Fehler', description: error.message, color: 'error' })
} finally { } finally {
loading.value = false loading.value = false
} }
@@ -124,57 +124,63 @@ async function onSubmit(event: FormSubmitEvent<any>) {
</script> </script>
<template> <template>
<UModal v-model="isOpen"> <UModal v-model:open="isOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <template #content>
<template #header> <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
{{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }} <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</template> </div>
</template>
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit"> <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<UFormField label="Typ" name="type">
<USelectMenu
v-model="state.type"
:items="types"
value-key="value"
label-key="label"
/>
</UFormField>
<UFormGroup label="Typ" name="type"> <div class="grid grid-cols-2 gap-4">
<USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" /> <UFormField label="Start Datum" name="start_date">
</UFormGroup> <div class="flex items-center gap-2">
<UInput type="date" v-model="state.start_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
</div>
</UFormField>
<UFormField label="Start Zeit" name="start_time">
<UInput type="time" v-model="state.start_time" />
</UFormField>
</div>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<UFormGroup label="Start Datum" name="start_date"> <UFormField label="Ende Datum" name="end_date">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput type="date" v-model="state.start_date" class="flex-1" /> <UInput type="date" v-model="state.end_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" /> <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Start Zeit" name="start_time"> <UFormField label="Ende Zeit" name="end_time">
<UInput type="time" v-model="state.start_time" /> <UInput type="time" v-model="state.end_time" />
</UFormGroup> </UFormField>
</div> </div>
<p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
<div class="grid grid-cols-2 gap-4"> <UFormField label="Beschreibung / Notiz" name="description">
<UFormGroup label="Ende Datum" name="end_date"> <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
<div class="flex items-center gap-2"> </UFormField>
<UInput type="date" v-model="state.end_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
</div>
</UFormGroup>
<UFormGroup label="Ende Zeit" name="end_time">
<UInput type="time" v-model="state.end_time" />
</UFormGroup>
</div>
<p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
<UFormGroup label="Beschreibung / Notiz" name="description"> <div class="flex justify-end gap-2 pt-4">
<UTextarea v-model="state.description" placeholder="Was wurde gemacht?" /> <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
</UFormGroup> <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
</div>
<div class="flex justify-end gap-2 pt-4"> </UForm>
<UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" /> </UCard>
<UButton type="submit" label="Speichern" color="primary" :loading="loading" /> </template>
</div>
</UForm>
</UCard>
</UModal> </UModal>
</template> </template>

56
frontend/components/StandardEntityModal.vue
View File

@@ -61,33 +61,35 @@ setupPage()
<template> <template>
<UModal :fullscreen="props.mode === 'show'"> <UModal :fullscreen="props.mode === 'show'">
<EntityShow <template #content>
v-if="loaded && props.mode === 'show'" <EntityShow
:type="props.type" v-if="loaded && props.mode === 'show'"
:item="item" :type="props.type"
@updateNeeded="setupPage" :item="item"
:key="item" @updateNeeded="setupPage"
:in-modal="true" :key="item"
/> :in-modal="true"
<EntityEdit />
v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')" <EntityEdit
:type="props.type" v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
:item="item" :type="props.type"
:inModal="true" :item="item"
@return-data="(data) => emit('return-data',data)" :inModal="true"
:createQuery="props.createQuery" @return-data="(data) => emit('return-data',data)"
:mode="props.mode" :createQuery="props.createQuery"
/> :mode="props.mode"
<!-- <EntityList />
v-else-if="loaded && props.mode === 'list'" <!-- <EntityList
:type="props.type" v-else-if="loaded && props.mode === 'list'"
:items="items" :type="props.type"
/>--> :items="items"
<UProgress />-->
v-else <UProgress
animation="carousel" v-else
class="p-5 mt-10" animation="carousel"
/> class="p-5 mt-10"
/>
</template>
</UModal> </UModal>
</template> </template>

60
frontend/components/TenantDropdown.vue
View File

@@ -1,27 +1,59 @@
<script setup> <script setup>
const auth = useAuthStore() const auth = useAuthStore()
const selectedTenant = ref(auth.user.tenant_id) const activeTenantName = computed(() => {
return auth.activeTenantData?.name || auth.tenants?.find((tenant) => tenant.id === auth.activeTenant)?.name || 'Mandant waehlen'
})
const tenantInitials = computed(() => {
return activeTenantName.value
.split(' ')
.filter(Boolean)
.slice(0, 2)
.map((part) => part[0]?.toUpperCase() || '')
.join('') || 'M'
})
const tenantItems = computed(() => [
auth.tenants.map((tenant) => ({
label: tenant.name,
icon: tenant.id === auth.activeTenant ? 'i-heroicons-check' : undefined,
disabled: Boolean(tenant.locked),
onSelect: async (event) => {
if (tenant.locked || tenant.id === auth.activeTenant) {
event?.preventDefault?.()
return
}
await auth.switchTenant(tenant.id)
}
}))
])
</script> </script>
<template> <template>
<USelectMenu <USelectMenu
:options="auth.tenants" :items="tenantItems"
value-attribute="id" :content="{ align: 'start', side: 'bottom', sideOffset: 6 }"
class="w-40" :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
@change="auth.switchTenant(selectedTenant)" class="block w-40"
v-model="selectedTenant" :avatar="{
alt: activeTenantName,
text: tenantInitials,
loading: 'lazy'
}"
> >
<UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full"> <template #default="{ open }">
<UAvatar :alt="auth.activeTenantData?.name" size="md" /> <UButton
color="gray"
<span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span> variant="ghost"
</UButton> class="w-full min-w-0 max-w-full justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
:class="[open && 'bg-gray-100 dark:bg-gray-800']"
<template #option="{option}"> >
{{option.name}} <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
{{ activeTenantName }}
</span>
</UButton>
</template> </template>
</USelectMenu> </USelectMenu>
</template> </template>

2
frontend/components/Toolbar.vue
View File

@@ -11,7 +11,7 @@
<slot name="right"/> <slot name="right"/>
</InputGroup> </InputGroup>
</div> </div>
<UDivider class="my-3"/> <USeparator class="my-3"/>
</template> </template>
<style scoped> <style scoped>

27
frontend/components/UDashboardPanelContent.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
defineOptions({
inheritAttrs: false
})
const props = defineProps({
as: {
type: [String, Object],
default: 'div'
}
})
const attrs = useAttrs()
</script>
<template>
<component
:is="props.as"
v-bind="attrs"
:class="[
'min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
attrs.class
]"
>
<slot />
</component>
</template>

65
frontend/components/UserDropdown.vue
View File

@@ -1,57 +1,44 @@
<script setup> <script setup>
const { isHelpSlideoverOpen } = useDashboard()
const { isDashboardSearchModalOpen } = useUIState()
const { metaSymbol } = useShortcuts()
const auth = useAuthStore() const auth = useAuthStore()
const items = computed(() => [ const userItems = computed(() => [[
[{ {
slot: 'account', label: 'Passwort aendern',
label: '',
disabled: true
}], [/*{
label: 'Mein Profil',
icon: 'i-heroicons-user',
to: `/profiles/show/${profileStore.activeProfile.id}`
},*/{
label: 'Passwort ändern',
icon: 'i-heroicons-shield-check', icon: 'i-heroicons-shield-check',
to: `/password-change` to: '/password-change'
},{ },
{
label: 'Abmelden', label: 'Abmelden',
icon: 'i-heroicons-arrow-left-on-rectangle', icon: 'i-heroicons-arrow-left-on-rectangle',
click: async () => { onSelect: async () => {
await auth.logout() await auth.logout()
} }
}] }
]) ]])
</script> </script>
<template> <template>
<UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full"> <UDropdownMenu
:items="userItems"
:content="{ align: 'start', side: 'top', sideOffset: 8 }"
:ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
class="block w-full"
>
<template #default="{ open }"> <template #default="{ open }">
<UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']"> <UButton
<!-- <template #leading> color="gray"
<UAvatar :alt="auth.user.email" size="xs" /> variant="ghost"
</template>--> class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
:class="[open && 'bg-gray-100 dark:bg-gray-800']"
>
<span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
{{ auth.user.email }}
</span>
<template #trailing> <template #trailing>
<UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" /> <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
</template> </template>
</UButton> </UButton>
</template> </template>
</UDropdownMenu>
<template #account>
<div class="text-left">
<p>
Angemeldet als
</p>
<p class="truncate font-medium text-gray-900 dark:text-white">
{{auth.user.email}}
</p>
</div>
</template>
</UDropdown>
</template> </template>

6
frontend/components/copyCreatedDocumentModal.vue
View File

@@ -67,12 +67,13 @@ const startImport = () => {
<template> <template>
<UModal :fullscreen="false"> <UModal :fullscreen="false">
<template #content>
<UCard> <UCard>
<template #header> <template #header>
Erstelltes Dokument Kopieren Erstelltes Dokument Kopieren
</template> </template>
<UFormGroup <UFormField
label="Dokumententyp:" label="Dokumententyp:"
class="mb-3" class="mb-3"
> >
@@ -84,7 +85,7 @@ const startImport = () => {
> >
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UCheckbox <UCheckbox
v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)" v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
v-model="optionsToImport[key]" v-model="optionsToImport[key]"
@@ -101,6 +102,7 @@ const startImport = () => {
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

36
frontend/components/displayIncomeAndExpenditure.vue
View File

@@ -243,26 +243,26 @@ loadData()
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<USelectMenu <USelectMenu
v-model="granularity" v-model="granularity"
:options="granularityOptions" :items="granularityOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-28" class="w-28"
/> />
<USelectMenu <USelectMenu
v-model="selectedYear" v-model="selectedYear"
:options="yearOptions" :items="yearOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-24" class="w-24"
/> />
<USelectMenu <USelectMenu
v-if="granularity === 'month'" v-if="granularity === 'month'"
v-model="selectedMonth" v-model="selectedMonth"
:options="monthOptions" :items="monthOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-36" class="w-36"
/> />
</div> </div>
@@ -288,26 +288,26 @@ loadData()
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<USelectMenu <USelectMenu
v-model="granularity" v-model="granularity"
:options="granularityOptions" :items="granularityOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-28" class="w-28"
/> />
<USelectMenu <USelectMenu
v-model="selectedYear" v-model="selectedYear"
:options="yearOptions" :items="yearOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-24" class="w-24"
/> />
<USelectMenu <USelectMenu
v-if="granularity === 'month'" v-if="granularity === 'month'"
v-model="selectedMonth" v-model="selectedMonth"
:options="monthOptions" :items="monthOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="w-36" class="w-36"
/> />
</div> </div>

6
frontend/components/displayOpenTasks.vue
View File

@@ -23,9 +23,9 @@ setupPage()
<template> <template>
<UTable <UTable
v-if="openTasks.length > 0" v-if="openTasks.length > 0"
:rows="openTasks" :data="openTasks"
:columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]" :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
@select="(i) => router.push(`/tasks/show/${i.id}`)" :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
/> />
<div v-else> <div v-else>
<p class="text-center font-bold">Keine offenen Aufgaben</p> <p class="text-center font-bold">Keine offenen Aufgaben</p>

12
frontend/components/displayRunningTime.vue
View File

@@ -29,7 +29,7 @@ const startTime = async () => {
await setupPage() await setupPage()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
toast.add({title: "Fehler beim starten der Projektzeit",color:"rose"}) toast.add({title: "Fehler beim starten der Projektzeit",color:"error"})
} }
} }
@@ -41,7 +41,7 @@ const stopStartedTime = async () => {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
let errorId = await useError().logError(`${JSON.stringify(error)}`) let errorId = await useError().logError(`${JSON.stringify(error)}`)
toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"rose"}) toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"error"})
} }
} }
@@ -53,15 +53,15 @@ const stopStartedTime = async () => {
<p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p> <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
<p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p> <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
<UFormGroup <UFormField
class="mt-2" class="mt-2"
label="Notizen:" label="Notizen:"
> >
<UTextarea <UTextarea
v-model="runningTimeInfo.notes" v-model="runningTimeInfo.notes"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
class="mt-2" class="mt-2"
label="Projekt:" label="Projekt:"
> >
@@ -74,7 +74,7 @@ const stopStartedTime = async () => {
value-attribute="id" value-attribute="id"
option-attribute="name" option-attribute="name"
/> />
</UFormGroup> </UFormField>
<UButton <UButton
class="mt-3" class="mt-3"
@click="stopStartedTime" @click="stopStartedTime"

8
frontend/components/displayRunningWorkingTime.vue
View File

@@ -25,7 +25,7 @@ const startTime = async () => {
await setupPage() await setupPage()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
toast.add({title: "Fehler beim starten der Zeit",color:"rose"}) toast.add({title: "Fehler beim starten der Zeit",color:"error"})
} }
} }
@@ -37,7 +37,7 @@ const stopStartedTime = async () => {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
let errorId = await useError().logError(`${JSON.stringify(error)}`) let errorId = await useError().logError(`${JSON.stringify(error)}`)
toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"rose"}) toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"error"})
} }
} }
@@ -49,14 +49,14 @@ const stopStartedTime = async () => {
<p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p> <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
<p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p> <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
<UFormGroup <UFormField
class="mt-2" class="mt-2"
label="Notizen:" label="Notizen:"
> >
<UTextarea <UTextarea
v-model="runningTimeInfo.notes" v-model="runningTimeInfo.notes"
/> />
</UFormGroup> </UFormField>
<UButton <UButton
class="mt-3" class="mt-3"
@click="stopStartedTime" @click="stopStartedTime"

26
frontend/components/materialComposing.vue
View File

@@ -12,6 +12,10 @@ const props = defineProps({
const products = ref([]) const products = ref([])
const units = ref([]) const units = ref([])
const productSearchInput = {
placeholder: 'Artikel suchen...'
}
const setup = async () => { const setup = async () => {
products.value = await useEntities("products").select() products.value = await useEntities("products").select()
units.value = await useEntities("units").selectSpecial() units.value = await useEntities("units").selectSpecial()
@@ -80,16 +84,16 @@ const setRowData = (row) => {
> >
<td> <td>
<USelectMenu <USelectMenu
searchable :items="products"
:search-attributes="['name']" label-key="name"
:options="products" value-key="id"
value-attribute="id" :search-input="productSearchInput"
option-attribute="name" :filter-fields="['name']"
v-model="product.product" v-model="product.product"
:color="product.product ? 'primary' : 'rose'" :color="product.product ? 'primary' : 'error'"
@change="setRowData(product)" @change="setRowData(product)"
> >
<template #label> <template #default>
{{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}} {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
</template> </template>
</USelectMenu> </USelectMenu>
@@ -104,9 +108,9 @@ const setRowData = (row) => {
</td> </td>
<td> <td>
<USelectMenu <USelectMenu
:options="units" :items="units"
value-attribute="id" label-key="name"
option-attribute="name" value-key="id"
v-model="product.unit" v-model="product.unit"
></USelectMenu> ></USelectMenu>
</td> </td>
@@ -123,7 +127,7 @@ const setRowData = (row) => {
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="removeProductFromMaterialComposition(product.id)" @click="removeProductFromMaterialComposition(product.id)"
variant="outline" variant="outline"
color="rose" color="error"
/> />
</td> </td>
</tr> </tr>

13
frontend/components/mobile/FloatingActionButton.vue
View File

@@ -53,7 +53,10 @@ const emit = defineEmits(["click"])
<style scoped> <style scoped>
/* FAB Basis */ /* FAB Basis */
.fab-base { .fab-base {
@apply rounded-full px-5 py-4 text-lg font-semibold; border-radius: 9999px;
padding: 1rem 1.25rem;
font-size: 1.125rem;
font-weight: 600;
/* Wenn nur ein Icon vorhanden ist → runder Kreis */ /* Wenn nur ein Icon vorhanden ist → runder Kreis */
/* Wenn Label + Icon → Extended FAB */ /* Wenn Label + Icon → Extended FAB */
@@ -61,6 +64,12 @@ const emit = defineEmits(["click"])
/* Optional: Auto-Kreisen wenn kein Label */ /* Optional: Auto-Kreisen wenn kein Label */
#fab:not([label]) { #fab:not([label]) {
@apply w-14 h-14 p-0 flex items-center justify-center text-2xl; width: 3.5rem;
height: 3.5rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
} }
</style> </style>

12
frontend/components/nimbot.vue
View File

@@ -47,14 +47,14 @@ async function handlePrint() {
{{labelPrinter.printProgress}} {{labelPrinter.printProgress}}
<UFormGroup label="Breite"> <UFormField label="Breite">
<UInput v-model="labelWidth"><template #trailing>mm</template></UInput> <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
</UFormGroup> </UFormField>
<UFormGroup label="Höhe"> <UFormField label="Höhe">
<UInput v-model="labelHeight"><template #trailing>mm</template></UInput> <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
</UFormGroup> </UFormField>
<UFormGroup label="ZPL"> <UFormField label="ZPL">
<UTextarea v-model="zpl" rows="6" /> <UTextarea v-model="zpl" rows="6" />
</UFormGroup> </UFormField>
</UCard> </UCard>
</template> </template>

28
frontend/components/personalComposing.vue
View File

@@ -12,6 +12,10 @@ const props = defineProps({
const hourrates = ref([]) const hourrates = ref([])
const units = ref([]) const units = ref([])
const hourrateSearchInput = {
placeholder: 'Stundensatz suchen...'
}
const setup = async () => { const setup = async () => {
hourrates.value = await useEntities("hourrates").select() hourrates.value = await useEntities("hourrates").select()
units.value = await useEntities("units").selectSpecial() units.value = await useEntities("units").selectSpecial()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
> >
<td> <td>
<USelectMenu <USelectMenu
searchable :items="hourrates"
:search-attributes="['name']" label-key="name"
:options="hourrates" value-key="id"
value-attribute="id" :search-input="hourrateSearchInput"
option-attribute="name" :filter-fields="['name']"
v-model="row.hourrate" v-model="row.hourrate"
:color="row.hourrate ? 'primary' : 'rose'" :color="row.hourrate ? 'primary' : 'error'"
@change="setRowData(row)" @change="setRowData(row)"
> >
<!-- <template #label> <!-- <template #label>
{{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}} {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
@@ -106,10 +110,10 @@ const setRowData = (row) => {
</td> </td>
<td> <td>
<USelectMenu <USelectMenu
:options="units" :items="units"
disabled disabled
value-attribute="id" label-key="name"
option-attribute="name" value-key="id"
v-model="row.unit" v-model="row.unit"
></USelectMenu> ></USelectMenu>
</td> </td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="removeRowFromPersonalComposition(row.id)" @click="removeRowFromPersonalComposition(row.id)"
variant="outline" variant="outline"
color="rose" color="error"
/> />
</td> </td>
</tr> </tr>

92
frontend/components/wiki/WikiEditor.vue
View File

@@ -206,16 +206,62 @@ const addVideo = () => {
<style scoped> <style scoped>
/* Toolbar & Buttons */ /* Toolbar & Buttons */
.toolbar-btn { .toolbar-btn {
@apply p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center; padding: 0.375rem;
border-radius: 0.25rem;
color: #4b5563;
transition: background-color 0.2s ease, color 0.2s ease;
font-size: 0.875rem;
font-weight: 500;
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.toolbar-btn.is-active { .toolbar-btn.is-active {
@apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner; background: #e5e7eb;
color: #000;
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
} }
.bubble-btn { .bubble-btn {
@apply px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200; padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease, color 0.2s ease;
font-size: 0.875rem;
min-width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #374151;
} }
.bubble-btn.is-active { .bubble-btn.is-active {
@apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white; background: #e5e7eb;
color: #000;
}
.toolbar-btn:hover,
.bubble-btn:hover {
background: #f3f4f6;
}
:global(.dark) .toolbar-btn {
color: #d1d5db;
}
:global(.dark) .toolbar-btn:hover,
:global(.dark) .bubble-btn:hover {
background: #374151;
}
:global(.dark) .toolbar-btn.is-active,
:global(.dark) .bubble-btn.is-active {
background: #4b5563;
color: #fff;
}
:global(.dark) .bubble-btn {
color: #e5e7eb;
} }
/* GLOBAL EDITOR STYLES */ /* GLOBAL EDITOR STYLES */
@@ -235,20 +281,48 @@ const addVideo = () => {
/* MENTION */ /* MENTION */
.wiki-mention { .wiki-mention {
/* Pill-Shape, grau/neutral statt knallig blau */ /* Pill-Shape, grau/neutral statt knallig blau */
@apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm font-medium no-underline inline-block mx-0.5 align-middle border border-gray-200 dark:border-gray-700; background: #f3f4f6;
color: #374151;
padding: 0.125rem 0.375rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
display: inline-block;
margin-inline: 0.125rem;
vertical-align: middle;
border: 1px solid #e5e7eb;
box-decoration-break: clone; box-decoration-break: clone;
} }
.wiki-mention::before { .wiki-mention::before {
@apply text-gray-400 dark:text-gray-500 mr-0.5; color: #9ca3af;
margin-right: 0.125rem;
} }
.wiki-mention:hover { .wiki-mention:hover {
@apply bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 text-primary-700 dark:text-primary-400; background: #eefbf0;
border-color: #bbf7d0;
color: #15803d;
cursor: pointer; cursor: pointer;
} }
:global(.dark) .wiki-mention {
background: #1f2937;
color: #e5e7eb;
border-color: #374151;
}
:global(.dark) .wiki-mention::before {
color: #6b7280;
}
:global(.dark) .wiki-mention:hover {
background: rgb(20 83 45 / 0.3);
border-color: #166534;
color: #4ade80;
}
/* TABLE */ /* TABLE */
table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; } table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; } th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; }
@@ -258,7 +332,7 @@ const addVideo = () => {
.column-resize-handle { background-color: #3b82f6; width: 4px; } .column-resize-handle { background-color: #3b82f6; width: 4px; }
/* CODE */ /* CODE */
pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; } pre { background: #0d1117; color: #c9d1d9; font-family: var(--font-mono); padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
code { color: inherit; padding: 0; background: none; font-size: 0.9rem; } code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }
/* IMG */ /* IMG */

26
frontend/components/wiki/WikiEntityWidget.vue
View File

@@ -98,17 +98,19 @@
</div> </div>
</div> </div>
<UModal v-model="isCreateModalOpen"> <UModal v-model:open="isCreateModalOpen">
<div class="p-5"> <template #content>
<h3 class="font-bold mb-4">Neue Seite</h3> <div class="p-5">
<form @submit.prevent="createPage"> <h3 class="font-bold mb-4">Neue Seite</h3>
<UInput v-model="newTitle" placeholder="Titel..." autofocus /> <form @submit.prevent="createPage">
<div class="mt-4 flex justify-end gap-2"> <UInput v-model="newTitle" placeholder="Titel..." autofocus />
<UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton> <div class="mt-4 flex justify-end gap-2">
<UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton> <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
</div> <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
</form> </div>
</div> </form>
</div>
</template>
</UModal> </UModal>
</div> </div>
@@ -163,7 +165,7 @@ async function selectPage(id: string) {
const data = await $api(`/api/wiki/${id}`, { method: 'GET' }) const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
selectedPage.value = data selectedPage.value = data
} catch (e) { } catch (e) {
toast.add({ title: 'Fehler beim Laden', color: 'red' }) toast.add({ title: 'Fehler beim Laden', color: 'error' })
} finally { } finally {
loadingContent.value = false loadingContent.value = false
} }

35
frontend/composables/useModal.ts Normal file
View File

@@ -0,0 +1,35 @@
type ModalComponent = any
type ModalProps = Record<string, any> | undefined
const modalStack = useState<any[]>('__fed_modal_stack__', () => [])
export const useModal = () => {
const overlay = useOverlay()
const open = (component: ModalComponent, props?: ModalProps) => {
const instance = overlay.create(component, { props, destroyOnClose: true })
modalStack.value.push(instance)
const result = instance.open(props)
result.finally(() => {
modalStack.value = modalStack.value.filter((entry) => entry.id !== instance.id)
})
return result
}
const close = (value?: any) => {
const current = modalStack.value[modalStack.value.length - 1]
if (!current) {
return
}
current.close(value)
}
return {
open,
close
}
}

28
frontend/composables/useTableColumns.ts Normal file
View File

@@ -0,0 +1,28 @@
type LegacyTableColumn = {
id?: string
key?: string
label?: unknown
header?: unknown
accessorKey?: string
[key: string]: unknown
}
export const normalizeTableColumns = (columns: LegacyTableColumn[] = []) => {
return columns.map((column, index) => {
const accessorKey = typeof column.accessorKey === 'string'
? column.accessorKey
: typeof column.key === 'string'
? column.key
: undefined
const header = column.header ?? column.label ?? accessorKey ?? `column_${index}`
const id = column.id ?? accessorKey ?? (typeof header === 'string' ? header : `column_${index}`)
return {
...column,
id,
accessorKey,
header
}
})
}

65
frontend/layouts/default.vue
View File

@@ -240,26 +240,42 @@ onMounted(() => {
</UCard> </UCard>
</UContainer> </UContainer>
</div> </div>
<UDashboardLayout class="safearea" v-else> <div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
<UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible> <!-- <div
<UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" class="border-b border-default bg-default px-3 py-2"
:class="['!border-transparent']" :ui="{ left: 'flex-1' }"> style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
<template #left> >
<TenantDropdown class="min-w-0 w-full max-w-sm" />
</div>-->
<UDashboardGroup class="flex min-h-0 flex-1 overflow-hidden">
<UDashboardSidebar
id="sidebar"
collapsible
resizable
:default-size="18"
:min-size="14"
:max-size="24"
class="shrink-0 border-r border-default bg-default"
>
<template #header>
<TenantDropdown class="w-full"/> <TenantDropdown class="w-full"/>
</template> </template>
</UDashboardNavbar>
<UDashboardSidebar id="sidebar"> <template #default="{ collapsed }">
<MainNav :collapsed="collapsed" />
<MainNav/> </template>
<div class="flex-1"/>
<template #footer>
<template #footer="{ collapsed }">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<div class="flex items-center gap-2">
<UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
<UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
</div>
<UColorModeToggle class="ml-3"/>
<LabelPrinterButton class="w-full"/> <LabelPrinterButton class="w-full"/>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
@@ -272,34 +288,33 @@ onMounted(() => {
:icon="item.icon" :icon="item.icon"
@click="item.click ? item.click() : null" @click="item.click ? item.click() : null"
> >
{{ item.label }} <span v-if="!collapsed">{{ item.label }}</span>
<template #trailing> <template #trailing>
<UBadge v-if="item.badge" color="primary" variant="solid" size="xs"> <UBadge v-if="!collapsed && item.badge" color="primary" variant="solid" size="xs">
{{ item.badge }} {{ item.badge }}
</UBadge> </UBadge>
</template> </template>
</UButton> </UButton>
</div> </div>
<UDivider class="sticky bottom-0 w-full"/> <USeparator class="sticky bottom-0 w-full"/>
<UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;" class="w-full"/> <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;" class="w-full"/>
</div> </div>
</template> </template>
</UDashboardSidebar> </UDashboardSidebar>
</UDashboardPanel>
<UDashboardPage>
<UDashboardPanel grow> <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<slot/> <slot/>
</UDashboardPanel>
</UDashboardPage> </div>
</UDashboardGroup>
<HelpSlideover/> <HelpSlideover/>
<Calculator v-if="calculatorStore.isOpen"/> <Calculator v-if="calculatorStore.isOpen"/>
</div>
</UDashboardLayout>
</div> </div>
<div <div
@@ -330,7 +345,7 @@ onMounted(() => {
</div> </div>
<UButton <UButton
variant="outline" variant="outline"
color="rose" color="error"
@click="auth.logout()" @click="auth.logout()"
>Abmelden >Abmelden
</UButton> </UButton>

12
frontend/nuxt.config.ts
View File

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
} }
}, },
modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'], modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui-pro', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
ssr: false, ssr: false,
@@ -15,14 +15,12 @@ export default defineNuxtConfig({
dirs: ['stores'] dirs: ['stores']
}, },
extends: [
'@nuxt/ui-pro'
],
components: [{ components: [{
path: '~/components' path: '~/components'
}], }],
css: ['~/assets/css/main.css'],
build: { build: {
transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight', transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
'lowlight',] 'lowlight',]
@@ -74,10 +72,6 @@ export default defineNuxtConfig({
}, },
}, },
ui: {
icons: ['heroicons', 'mdi', 'simple-icons']
},
colorMode: { colorMode: {
preference: 'system' preference: 'system'
}, },

3506
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
frontend/package.json
View File

@@ -37,7 +37,8 @@
"@fullcalendar/vue3": "^6.1.10", "@fullcalendar/vue3": "^6.1.10",
"@iconify/json": "^2.2.171", "@iconify/json": "^2.2.171",
"@mmote/niimbluelib": "^0.0.1-alpha.29", "@mmote/niimbluelib": "^0.0.1-alpha.29",
"@nuxt/ui-pro": "^1.6.0", "@nuxt/ui": "^3.3.7",
"@nuxt/ui-pro": "^3.3.7",
"@nuxtjs/fontaine": "^0.4.1", "@nuxtjs/fontaine": "^0.4.1",
"@nuxtjs/google-fonts": "^3.1.0", "@nuxtjs/google-fonts": "^3.1.0",
"@nuxtjs/strapi": "^1.9.3", "@nuxtjs/strapi": "^1.9.3",

30
frontend/pages/accounting/tax.vue
View File

@@ -253,34 +253,34 @@ onMounted(loadData)
</template> </template>
<UTable <UTable
:columns="columns" :columns="normalizeTableColumns(columns)"
:rows="periods" :data="periods"
:loading="loading" :loading="loading"
:empty-state="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }" :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
> >
<template #label-data="{ row }"> <template #label-cell="{ row }">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span>{{ row.label }}</span> <span>{{ row.original.label }}</span>
<UBadge v-if="row.isCurrent" color="primary" variant="soft">Aktuell</UBadge> <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
</div> </div>
</template> </template>
<template #outputTax-data="{ row }"> <template #outputTax-cell="{ row }">
{{ formatCurrency(row.outputTax) }} {{ formatCurrency(row.original.outputTax) }}
</template> </template>
<template #inputTax-data="{ row }"> <template #inputTax-cell="{ row }">
{{ formatCurrency(row.inputTax) }} {{ formatCurrency(row.original.inputTax) }}
</template> </template>
<template #balance-data="{ row }"> <template #balance-cell="{ row }">
<span :class="row.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'"> <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
{{ formatCurrency(row.balance) }} {{ formatCurrency(row.original.balance) }}
</span> </span>
</template> </template>
<template #documents-data="{ row }"> <template #documents-cell="{ row }">
{{ row.outputCount }} / {{ row.inputCount }} {{ row.original.outputCount }} / {{ row.original.inputCount }}
</template> </template>
</UTable> </UTable>
</UCard> </UCard>

18
frontend/pages/accounts/index.vue
View File

@@ -158,7 +158,7 @@ setupPage()
<UButton <UButton
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
color="rose" color="error"
@click="clearSearchString()" @click="clearSearchString()"
v-if="searchString.length > 0" v-if="searchString.length > 0"
/> />
@@ -194,20 +194,20 @@ setupPage()
</template> </template>
</UDashboardToolbar> </UDashboardToolbar>
<UTable <UTable
:rows="filteredRows" :data="filteredRows"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/accounts/show/${i.id}`)" :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
> >
<template #allocations-data="{row}"> <template #allocations-cell="{row}">
<span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span> <span v-if="dataLoaded">{{row.original.allocations ? row.original.allocations : null}}</span>
<USkeleton v-else class="h-4 w-[250px]" /> <USkeleton v-else class="h-4 w-[250px]" />
</template> </template>
<template #saldo-data="{row}"> <template #saldo-cell="{row}">
<span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span> <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
<USkeleton v-else class="h-4 w-[250px]" /> <USkeleton v-else class="h-4 w-[250px]" />
</template> </template>
</UTable> </UTable>

26
frontend/pages/accounts/show/[id].vue
View File

@@ -106,7 +106,7 @@ const saldo = computed(() => {
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardPanelContent> <UDashboardPanelContent>
<UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]"> <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
<template #item="{item}"> <template #content="{item}">
<UCard class="mt-5" v-if="item.label === 'Information'"> <UCard class="mt-5" v-if="item.label === 'Information'">
<div class="text-wrap"> <div class="text-wrap">
<table class="w-full" v-if="itemInfo"> <table class="w-full" v-if="itemInfo">
@@ -137,21 +137,21 @@ const saldo = computed(() => {
<UCard class="mt-5" v-if="item.label === 'Buchungen'"> <UCard class="mt-5" v-if="item.label === 'Buchungen'">
<UTable <UTable
v-if="statementallocations" v-if="statementallocations"
:rows="renderedAllocations" :data="renderedAllocations"
:columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]" :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
@select="(i) => selectAllocation(i)" :on-select="(i) => selectAllocation(i)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
> >
<template #amount-data="{row}"> <template #amount-cell="{row}">
<span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span> <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
<span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span> <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
<span v-else>{{useCurrency(row.amount)}}</span> <span v-else>{{useCurrency(row.original.amount)}}</span>
</template> </template>
<template #date-data="{row}"> <template #date-cell="{row}">
{{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}} {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
</template> </template>
<template #description-data="{row}"> <template #description-cell="{row}">
{{row.description ? row.description : ''}} {{row.original.description ? row.original.description : ''}}
</template> </template>
</UTable> </UTable>
</UCard> </UCard>

38
frontend/pages/banking/index.vue
View File

@@ -504,7 +504,7 @@ onMounted(() => {
placeholder="Konten" placeholder="Konten"
class="w-48" class="w-48"
/> />
<UDivider orientation="vertical" class="h-6"/> <USeparator orientation="vertical" class="h-6"/>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<USelectMenu <USelectMenu
v-model="selectedPeriod" v-model="selectedPeriod"
@@ -601,17 +601,18 @@ onMounted(() => {
</div> </div>
<PageLeaveGuard :when="isSyncing"/> <PageLeaveGuard :when="isSyncing"/>
<UModal v-model="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }"> <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between gap-3"> <template #header>
<div> <div class="flex items-center justify-between gap-3">
<div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div> <div>
<div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div> <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
<div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
</div>
<UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
</div> </div>
<UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge> </template>
</div>
</template>
<div v-if="rowsWithSuggestions.length > 0" class="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[520px]"> <div v-if="rowsWithSuggestions.length > 0" class="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[520px]">
<div class="lg:col-span-1 border rounded-lg overflow-hidden dark:border-gray-800"> <div class="lg:col-span-1 border rounded-lg overflow-hidden dark:border-gray-800">
@@ -633,7 +634,7 @@ onMounted(() => {
</div> </div>
<div class="mt-2 flex flex-wrap gap-1"> <div class="mt-2 flex flex-wrap gap-1">
<UBadge v-if="entry.suggestions?.topDocument" size="xs" color="emerald" variant="subtle">Rechnung</UBadge> <UBadge v-if="entry.suggestions?.topDocument" size="xs" color="emerald" variant="subtle">Rechnung</UBadge>
<UBadge v-if="entry.suggestions?.topIncomingInvoice" size="xs" color="rose" variant="subtle">Eingangsbeleg</UBadge> <UBadge v-if="entry.suggestions?.topIncomingInvoice" size="xs" color="error" variant="subtle">Eingangsbeleg</UBadge>
</div> </div>
</div> </div>
</div> </div>
@@ -690,7 +691,7 @@ onMounted(() => {
</UBadge> </UBadge>
</div> </div>
</div> </div>
<UButton size="sm" color="rose" @click="handleAssignIncomingInvoice(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice, $event)"> <UButton size="sm" color="error" @click="handleAssignIncomingInvoice(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice, $event)">
Zuweisen Zuweisen
</UButton> </UButton>
<UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionKey, $event)"> <UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionKey, $event)">
@@ -701,10 +702,11 @@ onMounted(() => {
</div> </div>
</div> </div>
<div v-else class="py-10 text-center text-gray-400"> <div v-else class="py-10 text-center text-gray-400">
<UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/> <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
<p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p> <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
</div> </div>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

16
frontend/pages/banking/statements/[mode]/[[id]].vue
View File

@@ -438,7 +438,7 @@ setup()
<UBadge v-else color="amber" variant="subtle">Offen</UBadge> <UBadge v-else color="amber" variant="subtle">Offen</UBadge>
</template> </template>
<template #right> <template #right>
<ArchiveButton color="rose" variant="outline" type="bankstatements" @confirmed="archiveStatement"/> <ArchiveButton color="error" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
@@ -552,7 +552,7 @@ setup()
<div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div> <div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div>
<UButton <UButton
icon="i-heroicons-trash" icon="i-heroicons-trash"
color="rose" color="error"
variant="ghost" variant="ghost"
size="xs" size="xs"
class="opacity-0 group-hover:opacity-100 transition-opacity" class="opacity-0 group-hover:opacity-100 transition-opacity"
@@ -571,14 +571,14 @@ setup()
class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10"> class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
<div class="grid grid-cols-12 gap-4 items-end"> <div class="grid grid-cols-12 gap-4 items-end">
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<UFormGroup label="Betrag" size="sm"> <UFormField label="Betrag" size="sm">
<UInput v-model="manualAllocationSum" type="number" step="0.01"> <UInput v-model="manualAllocationSum" type="number" step="0.01">
<template #trailing><span class="text-gray-500 text-xs">EUR</span></template> <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
</UInput> </UInput>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 md:col-span-5"> <div class="col-span-12 md:col-span-5">
<UFormGroup label="Konto / Manuelle Buchung" size="sm"> <UFormField label="Konto / Manuelle Buchung" size="sm">
<div class="flex gap-1"> <div class="flex gap-1">
<USelectMenu <USelectMenu
class="w-full" class="w-full"
@@ -607,7 +607,7 @@ setup()
/> />
</UTooltip> </UTooltip>
</div> </div>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5"> <div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5">
<UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal" <UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal"
@@ -747,7 +747,7 @@ setup()
</div> </div>
<UButton <UButton
size="xs" size="xs"
color="rose" color="error"
@click="saveAllocation({incominginvoice: invoice.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(invoice,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(invoice,true)), description: allocationDescription || 'Automatischer Vorschlag'})" @click="saveAllocation({incominginvoice: invoice.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(invoice,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(invoice,true)), description: allocationDescription || 'Automatischer Vorschlag'})"
> >
Beleg zuweisen Beleg zuweisen
@@ -867,7 +867,7 @@ setup()
v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)" v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
icon="i-heroicons-check" icon="i-heroicons-check"
size="sm" size="sm"
color="rose" color="error"
variant="soft" variant="soft"
@click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})" @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
/> />

352
frontend/pages/createDocument/edit/[[id]].vue
View File

@@ -1283,7 +1283,9 @@ const generateDocument = async () => {
} }
const onChangeTab = (index) => { const onChangeTab = (index) => {
if (index === 1) { selectedTab.value = String(index)
if (String(index) === "1") {
generateDocument() generateDocument()
} }
} }
@@ -1441,13 +1443,13 @@ const saveDocument = async (state, resetup = false) => {
if (resetup) await setupPage() if (resetup) await setupPage()
} }
const selectedTab = ref(0) const selectedTab = ref("0")
const closeDocument = async () => { const closeDocument = async () => {
if(selectedTab.value === 0) { if(selectedTab.value === "0") {
await generateDocument() await generateDocument()
selectedTab.value = 1 selectedTab.value = "1"
} else { } else {
loaded.value = false loaded.value = false
@@ -1609,7 +1611,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</template> </template>
<template #right> <template #right>
<ArchiveButton <ArchiveButton
color="rose" color="error"
type="createddocuments" type="createddocuments"
v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'" v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
variant="outline" variant="outline"
@@ -1628,7 +1630,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
@click="closeDocument" @click="closeDocument"
v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'" v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'"
> >
{{selectedTab === 0 ? "Vorschau zeigen" : "Fertigstellen"}} {{selectedTab === '0' ? "Vorschau zeigen" : "Fertigstellen"}}
</UButton> </UButton>
<UButton <UButton
icon="i-mdi-content-save" icon="i-mdi-content-save"
@@ -1640,13 +1642,13 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardPanelContent> <UDashboardPanelContent>
<UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab"> <UTabs class="p-5" :items="tabItems" @update:model-value="onChangeTab" v-if="loaded" v-model="selectedTab">
<template #item="{item}"> <template #content="{item}">
<div v-if="item.label === 'Editor'"> <div v-if="item.label === 'Editor'">
<UAlert <UAlert
class="my-5" class="my-5"
title="Vorhandene Probleme und Informationen:" title="Vorhandene Probleme und Informationen:"
:color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'" :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'error' : 'white'"
variant="outline" variant="outline"
v-if="findDocumentErrors.length > 0" v-if="findDocumentErrors.length > 0"
> >
@@ -1664,7 +1666,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<InputGroup> <InputGroup>
<div class="w-1/3 mr-5"> <div class="w-1/3 mr-5">
<UFormGroup <UFormField
label="Dokumenttyp:" label="Dokumenttyp:"
> >
<InputGroup> <InputGroup>
@@ -1689,14 +1691,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</InputGroup> </InputGroup>
<USlideover <USlideover
v-model="showAdvanceInvoiceCalcModal" v-model:open="showAdvanceInvoiceCalcModal"
> >
<UCard class="h-full"> <template #body>
<template #header> <UCard class="h-full">
<UButton @click="importPositions">Übernehmen</UButton> <template #header>
</template> <UButton @click="importPositions">Übernehmen</UButton>
</template>
<UFormGroup <UFormField
label="Gesamtsumme:" label="Gesamtsumme:"
> >
<UInput <UInput
@@ -1705,8 +1708,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
v-model="advanceInvoiceData.totalSumNet" v-model="advanceInvoiceData.totalSumNet"
@focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage" @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Prozent:" label="Prozent:"
> >
<UInput <UInput
@@ -1715,27 +1718,26 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
v-model="advanceInvoiceData.partPerPecentage" v-model="advanceInvoiceData.partPerPecentage"
@focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage" @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Abzurechnender Anteil:" label="Abzurechnender Anteil:"
> >
<UInput <UInput
type="number" type="number"
:step="0.01" :step="0.01"
v-model="advanceInvoiceData.part" v-model="advanceInvoiceData.part"
@focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))" @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
/> />
</UFormGroup> </UFormField>
</UCard>
</template>
</UCard>
</USlideover> </USlideover>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Steuertyp:" label="Steuertyp:"
v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)" v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
> >
@@ -1747,9 +1749,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
@change="setTaxType" @change="setTaxType"
class="w-full" class="w-full"
></USelectMenu> ></USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Briefpapier:" label="Briefpapier:"
> >
<USelectMenu <USelectMenu
@@ -1761,15 +1763,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
searchable-placeholder="Suche..." searchable-placeholder="Suche..."
:search-attributes="['name']" :search-attributes="['name']"
class="w-full" class="w-full"
:color="itemInfo.letterhead ? 'primary' : 'rose'" :color="itemInfo.letterhead ? 'primary' : 'error'"
> >
<template #label> <template #label>
{{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }} {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Kunde:" label="Kunde:"
> >
<div class="flex flex-row"> <div class="flex flex-row">
@@ -1788,7 +1790,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{ option.name }}{{ option.nameAddition }} {{ option.name }}{{ option.nameAddition }}
</template> </template>
<UButton <UButton
:color="itemInfo.customer ? 'primary' : 'rose'" :color="itemInfo.customer ? 'primary' : 'error'"
variant="outline" variant="outline"
class="w-full" class="w-full"
> >
@@ -1860,8 +1862,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</UAlert> </UAlert>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Ansprechpartner:" label="Ansprechpartner:"
v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false " v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
> >
@@ -1902,7 +1904,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
>Kontakt</UButton>--> >Kontakt</UButton>-->
<UButton <UButton
variant="outline" variant="outline"
color="rose" color="error"
v-if="itemInfo.contact" v-if="itemInfo.contact"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="itemInfo.contact = null" @click="itemInfo.contact = null"
@@ -1915,15 +1917,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Adresse:" label="Adresse:"
> >
<UInput <UInput
v-model="itemInfo.address.street" v-model="itemInfo.address.street"
:placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'" :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
:color="itemInfo.address.street ? 'primary' : 'rose'" :color="itemInfo.address.street ? 'primary' : 'error'"
/> />
<UInput <UInput
v-model="itemInfo.address.special" v-model="itemInfo.address.special"
@@ -1940,19 +1942,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
@input="sanitizeAddressZipInput" @input="sanitizeAddressZipInput"
@change="checkAddressZip" @change="checkAddressZip"
:placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.zip : 'PLZ'" :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.zip : 'PLZ'"
:color="itemInfo.address.zip ? 'primary' : 'rose'" :color="itemInfo.address.zip ? 'primary' : 'error'"
/> />
<UInput <UInput
class="flex-auto" class="flex-auto"
v-model="itemInfo.address.city" v-model="itemInfo.address.city"
:placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'" :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'"
:color="itemInfo.address.city ? 'primary' : 'rose'" :color="itemInfo.address.city ? 'primary' : 'error'"
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
</div> </div>
<div class="w-2/3"> <div class="w-2/3">
<UFormGroup <UFormField
:label="itemInfo.documentNumberTitle + ':'" :label="itemInfo.documentNumberTitle + ':'"
v-if="itemInfo.type !== 'serialInvoices'" v-if="itemInfo.type !== 'serialInvoices'"
> >
@@ -1961,10 +1963,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
placeholder="XXXX" placeholder="XXXX"
disabled disabled
/> />
</UFormGroup> </UFormField>
<InputGroup class="w-full"> <InputGroup class="w-full">
<UFormGroup <UFormField
class="w-80 mr-1" class="w-80 mr-1"
label="Lieferdatumsart:" label="Lieferdatumsart:"
v-if="itemInfo.type !== 'serialInvoices'" v-if="itemInfo.type !== 'serialInvoices'"
@@ -1975,8 +1977,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
:label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`" :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'" v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
class="mr-1" class="mr-1"
@@ -1994,8 +1996,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
:label="itemInfo.deliveryDateType + ' Ende:'" :label="itemInfo.deliveryDateType + ' Ende:'"
v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)" v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
> >
@@ -2012,11 +2014,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/> <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<InputGroup class="w-full"> <InputGroup class="w-full">
<UFormGroup <UFormField
label="Belegdatum:" label="Belegdatum:"
class="mr-1" class="mr-1"
v-if="itemInfo.type !== 'serialInvoices'" v-if="itemInfo.type !== 'serialInvoices'"
@@ -2032,10 +2034,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<LazyDatePicker v-model="itemInfo.documentDate" @close="close"/> <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
class="w-full" class="w-full"
label="Zahlungsziel in Tagen:" label="Zahlungsziel in Tagen:"
> >
@@ -2043,8 +2045,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
type="number" type="number"
v-model="itemInfo.paymentDays" v-model="itemInfo.paymentDays"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
class="w-full" class="w-full"
label="Zahlungsart:" label="Zahlungsart:"
> >
@@ -2066,8 +2068,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}} {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
class="w-full" class="w-full"
label="Individueller Aufschlag:" label="Individueller Aufschlag:"
> >
@@ -2081,9 +2083,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span> <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<UFormGroup <UFormField
label="Mitarbeiter:" label="Mitarbeiter:"
> >
<USelectMenu <USelectMenu
@@ -2093,22 +2095,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
value-attribute="id" value-attribute="id"
@change="setContactPersonData" @change="setContactPersonData"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Kontakt Telefon:" label="Kontakt Telefon:"
> >
<UInput <UInput
v-model="itemInfo.contactTel" v-model="itemInfo.contactTel"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Kontakt E-Mail:" label="Kontakt E-Mail:"
> >
<UInput <UInput
v-model="itemInfo.contactEMail" v-model="itemInfo.contactEMail"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Objekt:" label="Objekt:"
> >
<InputGroup> <InputGroup>
@@ -2132,7 +2134,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</USelectMenu> </USelectMenu>
<UButton <UButton
variant="outline" variant="outline"
color="rose" color="error"
v-if="itemInfo.plant" v-if="itemInfo.plant"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="itemInfo.plant = null" @click="itemInfo.plant = null"
@@ -2145,8 +2147,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Projekt:" label="Projekt:"
> >
<InputGroup> <InputGroup>
@@ -2171,7 +2173,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</USelectMenu> </USelectMenu>
<UButton <UButton
variant="outline" variant="outline"
color="rose" color="error"
v-if="itemInfo.project" v-if="itemInfo.project"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="itemInfo.project = null" @click="itemInfo.project = null"
@@ -2184,8 +2186,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Vertrag:" label="Vertrag:"
> >
<InputGroup> <InputGroup>
@@ -2210,7 +2212,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</USelectMenu> </USelectMenu>
<UButton <UButton
variant="outline" variant="outline"
color="rose" color="error"
v-if="itemInfo.contract" v-if="itemInfo.contract"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
@click="itemInfo.contract = null" @click="itemInfo.contract = null"
@@ -2223,19 +2225,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
/> />
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
</div> </div>
</InputGroup> </InputGroup>
<div v-if="itemInfo.type === 'serialInvoices'" class="mb-5"> <div v-if="itemInfo.type === 'serialInvoices'" class="mb-5">
<UDivider class="mt-5 mb-3"> <USeparator class="mt-5 mb-3">
Einstellungen für die Serienrechnung Einstellungen für die Serienrechnung
</UDivider> </USeparator>
<div class="flex flex-row"> <div class="flex flex-row">
<div class="w-1/3"> <div class="w-1/3">
<UFormGroup <UFormField
label="Datum erste Ausführung:" label="Datum erste Ausführung:"
> >
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2249,8 +2251,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/> <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Datum letzte Ausführung:" label="Datum letzte Ausführung:"
> >
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2264,7 +2266,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/> <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UCheckbox <UCheckbox
v-model="itemInfo.serialConfig.active" v-model="itemInfo.serialConfig.active"
label="Aktiv" label="Aktiv"
@@ -2273,22 +2275,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</div> </div>
<div class="w-2/3"> <div class="w-2/3">
<UFormGroup <UFormField
label="Intervall:" label="Intervall:"
> >
<USelectMenu <USelectMenu
v-model="itemInfo.serialConfig.intervall" v-model="itemInfo.serialConfig.intervall"
:options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']" :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Richtung:" label="Richtung:"
> >
<USelectMenu <USelectMenu
v-model="itemInfo.serialConfig.dateDirection" v-model="itemInfo.serialConfig.dateDirection"
:options="['Rückwirkend','Im Voraus']" :options="['Rückwirkend','Im Voraus']"
/> />
</UFormGroup> </UFormField>
<UAlert <UAlert
title="Anfangs- und Enddatum" title="Anfangs- und Enddatum"
description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt" description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt"
@@ -2301,27 +2303,27 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</div> </div>
<UDivider <USeparator
class="my-3" class="my-3"
/> />
<UFormGroup <UFormField
label="Titel:" label="Titel:"
> >
<UInput v-model="itemInfo.title" disabled/> <UInput v-model="itemInfo.title" disabled/>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Beschreibung:" label="Beschreibung:"
class="mt-3" class="mt-3"
> >
<UInput v-model="itemInfo.description"/> <UInput v-model="itemInfo.description"/>
</UFormGroup> </UFormField>
<UDivider <USeparator
class="my-3" class="my-3"
/> />
<UFormGroup <UFormField
label="Vorlage auswählen" label="Vorlage auswählen"
> >
<USelectMenu <USelectMenu
@@ -2337,20 +2339,20 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }} {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Einleitung:" label="Einleitung:"
> >
<UTextarea <UTextarea
v-model="itemInfo.startText" v-model="itemInfo.startText"
:rows="6" :rows="6"
/> />
</UFormGroup> </UFormField>
<UDivider <USeparator
class="my-3" class="my-3"
/> />
@@ -2389,7 +2391,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
v-if="row.mode === 'pagebreak'" v-if="row.mode === 'pagebreak'"
colspan="7" colspan="7"
> >
<UDivider/> <USeparator/>
</td> </td>
<td <td
v-if="row.mode === 'text'" v-if="row.mode === 'text'"
@@ -2429,7 +2431,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
:disabled="itemInfo.type === 'cancellationInvoices'" :disabled="itemInfo.type === 'cancellationInvoices'"
class="w-60" class="w-60"
:options="products" :options="products"
:color="row.product ? 'primary' : 'rose'" :color="row.product ? 'primary' : 'error'"
option-attribute="name" option-attribute="name"
value-attribute="id" value-attribute="id"
searchable searchable
@@ -2453,14 +2455,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
icon="i-heroicons-magnifying-glass" icon="i-heroicons-magnifying-glass"
@click="showProductSelectionModal = true" @click="showProductSelectionModal = true"
/> />
<UModal v-model="showProductSelectionModal"> <UModal v-model:open="showProductSelectionModal">
<UCard> <UCard>
<template #header> <template #header>
Artikel Auswählen Artikel Auswählen
</template> </template>
<InputGroup class="w-full"> <InputGroup class="w-full">
<UFormGroup label="Artikelkategorie:"> <UFormField label="Artikelkategorie:">
<USelectMenu <USelectMenu
v-if="productcategories.length > 0" v-if="productcategories.length > 0"
:options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]" :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
@@ -2468,15 +2470,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
option-attribute="name" option-attribute="name"
v-model="selectedProductcategorie" v-model="selectedProductcategorie"
/> />
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<UTable <UTable
:rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)" :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
:columns="[ :columns="normalizeTableColumns([
{key: 'name',label:'Name'}, {key: 'name',label:'Name'},
{key: 'manufacturer',label:'Hersteller'}, {key: 'manufacturer',label:'Hersteller'},
{key: 'articleNumber',label:'Artikelnummer'}, {key: 'articleNumber',label:'Artikelnummer'},
]" ])"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }" :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
@select=" (i) => { @select=" (i) => {
row.product = i.id row.product = i.id
@@ -2501,7 +2503,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
:disabled="itemInfo.type === 'cancellationInvoices'" :disabled="itemInfo.type === 'cancellationInvoices'"
class="w-60" class="w-60"
:options="services" :options="services"
:color="row.service ? 'primary' : 'rose'" :color="row.service ? 'primary' : 'error'"
option-attribute="name" option-attribute="name"
value-attribute="id" value-attribute="id"
searchable searchable
@@ -2525,14 +2527,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
icon="i-heroicons-magnifying-glass" icon="i-heroicons-magnifying-glass"
@click="showServiceSelectionModal = true" @click="showServiceSelectionModal = true"
/> />
<UModal v-model="showServiceSelectionModal"> <UModal v-model:open="showServiceSelectionModal">
<UCard> <UCard>
<template #header> <template #header>
Leistung Auswählen Leistung Auswählen
</template> </template>
<InputGroup class="w-full"> <InputGroup class="w-full">
<UFormGroup label="Leistungskategorie:"> <UFormField label="Leistungskategorie:">
<USelectMenu <USelectMenu
v-if="servicecategories.length > 0" v-if="servicecategories.length > 0"
:options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]" :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
@@ -2540,15 +2542,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
option-attribute="name" option-attribute="name"
v-model="selectedServicecategorie" v-model="selectedServicecategorie"
/> />
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<UTable <UTable
:rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)" :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
:columns="[ :columns="normalizeTableColumns([
{key: 'name',label:'Name'}, {key: 'name',label:'Name'},
{key: 'serviceNumber',label:'Leistungsnummer'}, {key: 'serviceNumber',label:'Leistungsnummer'},
{key: 'sellingPrice',label:'Verkaufspreis'}, {key: 'sellingPrice',label:'Verkaufspreis'},
]" ])"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }" :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
@select=" (i) => { @select=" (i) => {
row.service = i.id row.service = i.id
@@ -2670,8 +2672,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
v-if="row.agriculture" v-if="row.agriculture"
@click="row.showEditDiesel = true" @click="row.showEditDiesel = true"
/> />
<UModal v-model="row.showEdit"> <UModal v-model:open="row.showEdit">
<UCard> <template #content>
<UCard>
<!-- <template #header> <!-- <template #header>
Zeile bearbeiten Zeile bearbeiten
</template>--> </template>-->
@@ -2685,7 +2688,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</div> </div>
</template> </template>
<InputGroup> <InputGroup>
<UFormGroup <UFormField
label="Anzahl:" label="Anzahl:"
class="flex-auto" class="flex-auto"
> >
@@ -2695,8 +2698,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
:step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' " :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Einheit:" label="Einheit:"
class="flex-auto" class="flex-auto"
> >
@@ -2711,10 +2714,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }} {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<UFormGroup <UFormField
label="Einzelpreis:" label="Einzelpreis:"
v-if="itemInfo.type !== 'deliveryNotes'" v-if="itemInfo.type !== 'deliveryNotes'"
> >
@@ -2743,8 +2746,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
class="text-gray-500 dark:text-gray-400 text-xs"> </span> class="text-gray-500 dark:text-gray-400 text-xs"> </span>
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Umsatzsteuer:" label="Umsatzsteuer:"
class="mt-3" class="mt-3"
v-if="itemInfo.type !== 'deliveryNotes'" v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2761,9 +2764,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{ row.taxPercent }} % {{ row.taxPercent }} %
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Rabatt:" label="Rabatt:"
class="mt-3" class="mt-3"
v-if="itemInfo.type !== 'deliveryNotes'" v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2778,25 +2781,25 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span> <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<InputGroup class="w-full mt-3"> <InputGroup class="w-full mt-3">
<UFormGroup <UFormField
label="Optional:" label="Optional:"
> >
<UToggle <USwitch
:disabled="row.alternative" :disabled="row.alternative"
v-model="row.optional" v-model="row.optional"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
class="ml-3" class="ml-3"
label="Alternativ:" label="Alternativ:"
> >
<UToggle <USwitch
:disabled="row.optional" :disabled="row.optional"
v-model="row.alternative" v-model="row.alternative"
/> />
</UFormGroup> </UFormField>
</InputGroup> </InputGroup>
<UAlert <UAlert
@@ -2819,7 +2822,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</li> </li>
</ul> </ul>
<UFormGroup <UFormField
label="Beschreibung:" label="Beschreibung:"
class="mt-3" class="mt-3"
> >
@@ -2829,7 +2832,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
> >
</UTextarea> </UTextarea>
</UFormGroup> </UFormField>
<!-- <template #footer> <!-- <template #footer>
<UButton <UButton
@@ -2838,16 +2841,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
Speichern Speichern
</UButton> </UButton>
</template>--> </template>-->
</UCard> </UCard>
</template>
</UModal> </UModal>
<UModal v-model="row.showEditDiesel"> <UModal v-model:open="row.showEditDiesel">
<UCard> <template #content>
<template #header> <UCard>
Dieselverbrauch bearbeiten <template #header>
</template> Dieselverbrauch bearbeiten
<UFormGroup </template>
<UFormField
label="Menge Diesel:" label="Menge Diesel:"
> >
<UInput <UInput
@@ -2861,8 +2864,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
L L
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Preis Diesel:" label="Preis Diesel:"
> >
<UInput <UInput
@@ -2875,8 +2878,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
€/L €/L
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Menge AdBlue:" label="Menge AdBlue:"
> >
<UInput <UInput
@@ -2888,8 +2891,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
L L
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Preis AdBlue:" label="Preis AdBlue:"
> >
<UInput <UInput
@@ -2901,18 +2904,17 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
€/L €/L
</template> </template>
</UInput> </UInput>
</UFormGroup> </UFormField>
<template #footer> <template #footer>
<UButton <UButton
@click="row.showEditDiesel = false, @click="row.showEditDiesel = false,
processDieselPosition()" processDieselPosition()"
> >
Speichern Speichern
</UButton> </UButton>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</td> </td>
<td <td
@@ -2942,7 +2944,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UButton <UButton
:disabled="itemInfo.type === 'cancellationInvoices'" :disabled="itemInfo.type === 'cancellationInvoices'"
variant="ghost" variant="ghost"
color="rose" color="error"
icon="i-heroicons-x-mark-16-solid" icon="i-heroicons-x-mark-16-solid"
@click="removePosition(row.id)" @click="removePosition(row.id)"
/> />
@@ -2954,7 +2956,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UAlert <UAlert
v-else v-else
title="Keine Positionen hinzugefügt" title="Keine Positionen hinzugefügt"
color="rose" color="error"
variant="outline" variant="outline"
icon="i-heroicons-light-bulb" icon="i-heroicons-light-bulb"
></UAlert> ></UAlert>
@@ -3004,12 +3006,12 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</UButton> </UButton>
</InputGroup> </InputGroup>
<!-- <UDivider <!-- <USeparator
class="mt-5 mb-3" class="mt-5 mb-3"
v-if="openAdvanceInvoices.length > 0 || itemInfo.usedAdvanceInvoices.length > 0" v-if="openAdvanceInvoices.length > 0 || itemInfo.usedAdvanceInvoices.length > 0"
> >
Noch nicht abgerechnete Abschlagsrechnungen Noch nicht abgerechnete Abschlagsrechnungen
</UDivider> </USeparator>
<div <div
v-for="advanceInvoice in openAdvanceInvoices" v-for="advanceInvoice in openAdvanceInvoices"
@@ -3029,7 +3031,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UButton <UButton
@click="itemInfo.usedAdvanceInvoices = itemInfo.usedAdvanceInvoices.filter(i => i !== advanceInvoice.id)" @click="itemInfo.usedAdvanceInvoices = itemInfo.usedAdvanceInvoices.filter(i => i !== advanceInvoice.id)"
:disabled="!itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)" :disabled="!itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)"
color="rose" color="error"
variant="outline" variant="outline"
> >
X X
@@ -3037,7 +3039,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</InputGroup> </InputGroup>
</div>--> </div>-->
<UDivider class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0">Überschriften</UDivider> <USeparator class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0" label="Überschriften"/>
<table> <table>
<tr v-for="sumKey in Object.keys(documentTotal.titleSums) "> <tr v-for="sumKey in Object.keys(documentTotal.titleSums) ">
@@ -3046,7 +3048,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</tr> </tr>
</table> </table>
<UDivider class="my-3" v-if="itemInfo.rows.length > 0">Auswertung & Gesamt</UDivider> <USeparator class="my-3" v-if="itemInfo.rows.length > 0" label="Auswertung & Gesamt"/>
<div class="w-full flex justify-between" v-if="itemInfo.type !== 'deliveryNotes'"> <div class="w-full flex justify-between" v-if="itemInfo.type !== 'deliveryNotes'">
@@ -3112,9 +3114,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</table> </table>
</div> </div>
<!-- <UDivider <!-- <USeparator
class="my-3" class="my-3"
>Auswertung</UDivider> >Auswertung</USeparator>
<div class="w-full flex justify-end"> <div class="w-full flex justify-end">
<table class="w-1/3"> <table class="w-1/3">
@@ -3151,11 +3153,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UDivider <USeparator
class="my-3" class="my-3"
/> />
<UFormGroup <UFormField
label="Vorlage auswählen" label="Vorlage auswählen"
> >
<USelectMenu <USelectMenu
@@ -3171,16 +3173,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
{{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}} {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Nachbemerkung:" label="Nachbemerkung:"
> >
<UTextarea <UTextarea
v-model="itemInfo.endText" v-model="itemInfo.endText"
:rows="6" :rows="6"
/> />
</UFormGroup> </UFormField>
</div> </div>
<div v-else-if="item.label === 'Vorschau'"> <div v-else-if="item.label === 'Vorschau'">
<PDFViewer <PDFViewer

80
frontend/pages/createDocument/index.vue
View File

@@ -16,7 +16,7 @@
</UInput> </UInput>
<UButton <UButton
v-if="searchString.length > 0" v-if="searchString.length > 0"
color="rose" color="error"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
@click="clearSearchString()" @click="clearSearchString()"
@@ -55,82 +55,82 @@
{{ getRowsForTab(item.key).length }} {{ getRowsForTab(item.key).length }}
</UBadge> </UBadge>
</template> </template>
<template #item="{item}"> <template #content="{item}">
<div style="height: 80vh; overflow-y: scroll"> <div style="height: 80vh; overflow-y: scroll">
<UTable <UTable
:columns="getColumnsForTab(item.key)" :columns="normalizeTableColumns(getColumnsForTab(item.key))"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
:rows="getRowsForTab(item.key)" :data="getRowsForTab(item.key)"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
class="w-full" class="w-full"
@select="selectItem" :on-select="selectItem"
> >
<template #type-data="{row}"> <template #type-cell="{row}">
<span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{ <span v-if="row.original.type === 'cancellationInvoices'" class="text-cyan-500">{{
dataStore.documentTypesForCreation[row.type].labelSingle dataStore.documentTypesForCreation[row.original.type].labelSingle
}} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span> }} für {{ filteredRows.find(i => row.original.createddocument?.id === i.id)?.documentNumber }}</span>
<span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span> <span v-else>{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}</span>
</template> </template>
<template #state-data="{row}"> <template #state-cell="{row}">
<span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span> <span v-if="row.original.state === 'Entwurf'" class="text-rose-500">{{ row.original.state }}</span>
<span <span
v-if="row.state === 'Gebucht' && !hasCancellationInvoice(row)" v-if="row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)"
class="text-primary-500" class="text-primary-500"
> >
{{ row.state }} {{ row.original.state }}
</span> </span>
<span <span
v-else-if="row.state === 'Gebucht' && hasCancellationInvoice(row) && ['invoices','advanceInvoices'].includes(row.type)" v-else-if="row.original.state === 'Gebucht' && hasCancellationInvoice(row.original) && ['invoices','advanceInvoices'].includes(row.original.type)"
class="text-cyan-500" class="text-cyan-500"
> >
Storniert mit {{ getCancellationInvoice(row)?.documentNumber }} Storniert mit {{ getCancellationInvoice(row.original)?.documentNumber }}
</span> </span>
<span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span> <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{ row.original.state }}</span>
</template> </template>
<template #partner-data="{row}"> <template #partner-cell="{row}">
<span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span> <span v-if="row.original.customer && row.original.customer.name.length < 21">{{ row.original.customer ? row.original.customer.name : "" }}</span>
<UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name"> <UTooltip v-else-if="row.original.customer && row.original.customer.name.length > 20" :text="row.original.customer.name">
{{ row.customer.name.substring(0, 20) }}... {{ row.original.customer.name.substring(0, 20) }}...
</UTooltip> </UTooltip>
</template> </template>
<template #reference-data="{row}"> <template #reference-cell="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span> <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
<span v-else>{{ row.documentNumber }}</span> <span v-else>{{ row.original.documentNumber }}</span>
</template> </template>
<template #date-data="{row}"> <template #date-cell="{row}">
<span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span> <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
<span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span> <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
</template> </template>
<template #dueDate-data="{row}"> <template #dueDate-cell="{row}">
<span <span
v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !hasCancellationInvoice(row)" v-if="row.original.state === 'Gebucht' && row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type) && !hasCancellationInvoice(row.original)"
:class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' " :class="dayjs(row.original.documentDate).add(row.original.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row.original) ? ['text-rose-500'] : '' "
> >
{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }} {{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays, 'day').format("DD.MM.YY") : '' }}
</span> </span>
</template> </template>
<template #paid-data="{row}"> <template #paid-cell="{row}">
<div <div
v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !hasCancellationInvoice(row)"> v-if="(row.original.type === 'invoices' ||row.original.type === 'advanceInvoices') && row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)">
<span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span> <span v-if="useSum().getIsPaid(row.original,items)" class="text-primary-500">Bezahlt</span>
<span v-else class="text-rose-600">Offen</span> <span v-else class="text-rose-600">Offen</span>
</div> </div>
</template> </template>
<template #amount-data="{row}"> <template #amount-cell="{row}">
<span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span> <span v-if="row.original.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row.original, items)) }}</span>
</template> </template>
<template #amountOpen-data="{row}"> <template #amountOpen-cell="{row}">
<span <span
v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !hasCancellationInvoice(row) && !useSum().getIsPaid(row,items) "> v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.original.type) && row.original.state !== 'Entwurf' && !hasCancellationInvoice(row.original) && !useSum().getIsPaid(row.original,items) ">
{{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row, items)) }} {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row.original, items)) }}
</span> </span>
</template> </template>
</UTable> </UTable>

206
frontend/pages/createDocument/serialInvoice.vue
View File

@@ -44,15 +44,15 @@
<USelectMenu <USelectMenu
v-model="selectedFilters" v-model="selectedFilters"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="filterOptions" :items="filterOptions"
option-attribute="name" label-key="name"
value-attribute="name" value-key="name"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
:color="selectedFilters.length > 0 ? 'primary' : 'white'" :color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
> >
<template #label> <template #default>
Filter Filter
</template> </template>
</USelectMenu> </USelectMenu>
@@ -93,16 +93,16 @@
</div> </div>
<UTable <UTable
:rows="filteredRows" :data="filteredRows"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(row) => router.push(`/createDocument/edit/${row.id}`)" :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
> >
<template #actions-data="{ row }"> <template #actions-cell="{ row }">
<div @click.stop> <div @click.stop>
<UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }"> <UDropdown :items="getActionItems(row.original)" :popper="{ placement: 'bottom-end' }">
<UButton <UButton
color="gray" color="gray"
variant="ghost" variant="ghost"
@@ -112,53 +112,54 @@
</div> </div>
</template> </template>
<template #type-data="{row}"> <template #type-cell="{row}">
{{dataStore.documentTypesForCreation[row.type].labelSingle}} {{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
</template> </template>
<template #partner-data="{row}"> <template #partner-cell="{row}">
<span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span> <span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
</template> </template>
<template #amount-data="{row}"> <template #amount-cell="{row}">
{{displayCurrency(calculateDocSum(row))}} {{displayCurrency(calculateDocSum(row.original))}}
</template> </template>
<template #serialConfig.active-data="{row}"> <template #serialConfig.active-cell="{row}">
<span v-if="row.serialConfig.active" class="text-primary">Ja</span> <span v-if="row.original.serialConfig.active" class="text-primary">Ja</span>
<span v-else class="text-rose-600">Nein</span> <span v-else class="text-rose-600">Nein</span>
</template> </template>
<template #contract-data="{row}"> <template #contract-cell="{row}">
<span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span> <span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
</template> </template>
<template #serialConfig.intervall-data="{row}"> <template #serialConfig.intervall-cell="{row}">
<span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span> <span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
<span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span> <span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
</template> </template>
<template #payment_type-data="{row}"> <template #payment_type-cell="{row}">
<span v-if="row.payment_type === 'transfer'">Überweisung</span> <span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
<span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span> <span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
</template> </template>
</UTable> </UTable>
<UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }"> <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Serienrechnungen manuell ausführen <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Serienrechnungen manuell ausführen
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
</template> </div>
</template>
<div class="space-y-4"> <div class="space-y-4">
<UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend')."> <UFormField label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput type="date" v-model="executionDate" class="flex-1" /> <UInput type="date" v-model="executionDate" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" /> <UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" />
</div> </div>
</UFormGroup> </UFormField>
<UDivider label="Vorlagen auswählen" /> <USeparator label="Vorlagen auswählen" />
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto"> <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
@@ -172,9 +173,9 @@
<USelectMenu <USelectMenu
v-model="selectedExecutionIntervall" v-model="selectedExecutionIntervall"
:options="executionIntervallOptions" :items="executionIntervallOptions"
option-attribute="label" label-key="label"
value-attribute="value" value-key="value"
size="sm" size="sm"
class="w-full sm:w-52" class="w-full sm:w-52"
/> />
@@ -204,24 +205,24 @@
<div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md"> <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
<UTable <UTable
v-model="selectedExecutionRows" v-model="selectedExecutionRows"
:rows="filteredExecutionList" :data="filteredExecutionList"
:columns="executionColumns" :columns="normalizeTableColumns(executionColumns)"
:ui="{ th: { base: 'whitespace-nowrap' } }" :ui="{ th: { base: 'whitespace-nowrap' } }"
> >
<template #partner-data="{row}"> <template #partner-cell="{row}">
{{row.customer ? row.customer.name : "-"}} {{row.original.customer ? row.original.customer.name : "-"}}
</template> </template>
<template #amount-data="{row}"> <template #amount-cell="{row}">
{{displayCurrency(calculateDocSum(row))}} {{displayCurrency(calculateDocSum(row.original))}}
</template> </template>
<template #serialConfig.intervall-data="{row}"> <template #serialConfig.intervall-cell="{row}">
{{ getIntervallLabel(row.serialConfig?.intervall) }} {{ getIntervallLabel(row.original.serialConfig?.intervall) }}
</template> </template>
<template #contract-data="{row}"> <template #contract-cell="{row}">
{{row.contract?.contractNumber}} - {{row.contract?.name}} {{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
</template> </template>
<template #plant-data="{row}"> <template #plant-cell="{row}">
{{ row.plant?.name || "-" }} {{ row.original.plant?.name || "-" }}
</template> </template>
</UTable> </UTable>
</div> </div>
@@ -231,58 +232,61 @@
</div> </div>
</div> </div>
<template #footer> <template #footer>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton> <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
<UButton <UButton
color="primary" color="primary"
:loading="isExecuting" :loading="isExecuting"
:disabled="selectedExecutionRows.length === 0" :disabled="selectedExecutionRows.length === 0"
@click="executeSerialInvoices" @click="executeSerialInvoices"
> >
Jetzt ausführen Jetzt ausführen
</UButton> </UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
<USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }"> <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <template #body>
<template #header> <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Alle Ausführungen <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Alle Ausführungen
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
</template>
<div class="space-y-4 overflow-y-auto h-full p-1">
<div v-if="executionsLoading" class="flex justify-center py-4">
<UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
</div>
<div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
Keine abgeschlossenen Ausführungen gefunden.
</div>
<div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
<UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
{{ getStatusLabel(exec.status) }}
</UBadge>
</div> </div>
<div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2"> </template>
<div>
<UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" /> <div class="space-y-4 overflow-y-auto h-full p-1">
{{exec.summary}} <div v-if="executionsLoading" class="flex justify-center py-4">
<UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
</div>
<div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
Keine abgeschlossenen Ausführungen gefunden.
</div>
<div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
<UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
{{ getStatusLabel(exec.status) }}
</UBadge>
</div>
<div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
<div>
<UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
{{exec.summary}}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </UCard>
</UCard> </template>
</USlideover> </USlideover>
</template> </template>

2
frontend/pages/createDocument/show/[id].vue
View File

@@ -94,7 +94,7 @@ const openBankstatements = () => {
<UButton <UButton
@click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)" @click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)"
variant="outline" variant="outline"
color="rose" color="error"
:disabled="links.find(i => i.type === 'cancellationInvoices')" :disabled="links.find(i => i.type === 'cancellationInvoices')"
> >
Stornieren Stornieren

9
frontend/pages/createdletters/[mode]/[[id]].vue
View File

@@ -13,6 +13,7 @@ const itemInfo = ref({
}) })
const showDocument = ref(false) const showDocument = ref(false)
const uri = ref("") const uri = ref("")
const openTab = ref("0")
const setupPage = async () => { const setupPage = async () => {
letterheads.value = await useEntities("letterheads").select("*") letterheads.value = await useEntities("letterheads").select("*")
@@ -23,7 +24,9 @@ const setupPage = async () => {
setupPage() setupPage()
const onChangeTab = (index) => { const onChangeTab = (index) => {
if(index === 1) { openTab.value = String(index)
if(String(index) === "1") {
generateDocument() generateDocument()
} }
} }
@@ -78,8 +81,8 @@ const contentChanged = (content) => {
<UDashboardNavbar title="Anschreiben bearbeiten"/> <UDashboardNavbar title="Anschreiben bearbeiten"/>
{{itemInfo}} {{itemInfo}}
<UDashboardPanelContent> <UDashboardPanelContent>
<UTabs @change="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]"> <UTabs v-model="openTab" @update:model-value="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
<template #item="{item}"> <template #content="{item}">
<div v-if="item.label === 'Editor'"> <div v-if="item.label === 'Editor'">
<Tiptap <Tiptap
class="mt-3" class="mt-3"

32
frontend/pages/email/new.vue
View File

@@ -162,7 +162,7 @@ const sendEmail = async () => {
if(!res.success) { if(!res.success) {
toast.add({title: "Fehler beim Absenden der E-Mail", color: "rose"}) toast.add({title: "Fehler beim Absenden der E-Mail", color: "error"})
} else { } else {
navigateTo("/") navigateTo("/")
@@ -210,34 +210,34 @@ const sendEmail = async () => {
<div class="scrollContainer mt-3"> <div class="scrollContainer mt-3">
<div class="flex-col flex w-full"> <div class="flex-col flex w-full">
<UFormGroup <UFormField
label="Absender" label="Absender"
> >
<USelectMenu <USelectMenu
:options="emailAccounts" :items="emailAccounts"
option-attribute="email" label-key="email"
value-attribute="id" value-key="id"
v-model="emailData.account" v-model="emailData.account"
/> />
</UFormGroup> </UFormField>
<UDivider class="my-3"/> <USeparator class="my-3"/>
<UFormGroup <UFormField
label="Empfänger" label="Empfänger"
> >
<UInput <UInput
class="w-full my-1" class="w-full my-1"
v-model="emailData.to" v-model="emailData.to"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Kopie" label="Kopie"
> >
<UInput <UInput
class="w-full my-1" class="w-full my-1"
v-model="emailData.cc" v-model="emailData.cc"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Blindkopie" label="Blindkopie"
> >
<UInput <UInput
@@ -245,17 +245,17 @@ const sendEmail = async () => {
placeholder="" placeholder=""
v-model="emailData.bcc" v-model="emailData.bcc"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Betreff" label="Betreff"
> >
<UInput <UInput
class="w-full my-1" class="w-full my-1"
v-model="emailData.subject" v-model="emailData.subject"
/> />
</UFormGroup> </UFormField>
</div> </div>
<UDivider class="my-3"/> <USeparator class="my-3"/>
<div id="parentAttachments" class="flex flex-col justify-center mt-3"> <div id="parentAttachments" class="flex flex-col justify-center mt-3">
<span class="font-medium mb-2 text-xl">Anhänge</span> <span class="font-medium mb-2 text-xl">Anhänge</span>
<!-- <UIcon <!-- <UIcon

2
frontend/pages/export/create/sepa.vue
View File

@@ -39,7 +39,7 @@ const createExport = async () => {
:loading="true" :loading="true"
v-model="selected" v-model="selected"
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }" :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
:rows="createddocuments" /> :data="createddocuments" />
</template> </template>
<style scoped> <style scoped>

64
frontend/pages/export/index.vue
View File

@@ -89,7 +89,7 @@ const createExport = async () => {
if(res.success) { if(res.success) {
toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."}) toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
} else { } else {
toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"}) toast.add({title: "Es gab einen Fehler beim erstellen", color: "error"})
} }
} }
@@ -110,38 +110,39 @@ const createExport = async () => {
</UDashboardNavbar> </UDashboardNavbar>
<UTable <UTable
:rows="filteredExports" :data="filteredExports"
:columns="[ :columns="normalizeTableColumns([
{ key: 'created_at', label: 'Erstellt am' }, { key: 'created_at', label: 'Erstellt am' },
{ key: 'start_date', label: 'Start' }, { key: 'start_date', label: 'Start' },
{ key: 'end_date', label: 'Ende' }, { key: 'end_date', label: 'Ende' },
{ key: 'valid_until', label: 'Gültig bis' }, { key: 'valid_until', label: 'Gültig bis' },
{ key: 'type', label: 'Typ' }, { key: 'type', label: 'Typ' },
{ key: 'download', label: 'Download' }, { key: 'download', label: 'Download' },
]" ])"
> >
<template #created_at-data="{row}"> <template #created_at-cell="{row}">
{{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}} {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
</template> </template>
<template #start_date-data="{row}"> <template #start_date-cell="{row}">
{{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}} {{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
</template> </template>
<template #end_date-data="{row}"> <template #end_date-cell="{row}">
{{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}} {{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
</template> </template>
<template #valid_until-data="{row}"> <template #valid_until-cell="{row}">
{{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}} {{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
</template> </template>
<template #download-data="{row}"> <template #download-cell="{row}">
<UButton @click="downloadFile(row)">Download</UButton> <UButton @click="downloadFile(row.original)">Download</UButton>
</template> </template>
</UTable> </UTable>
<UModal v-model="showCreateExportModal"> <UModal v-model:open="showCreateExportModal">
<UCard> <template #content>
<template #header> <UCard>
Export erstellen <template #header>
</template> Export erstellen
</template>
<div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700"> <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div> <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
@@ -180,7 +181,7 @@ const createExport = async () => {
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4">
<UFormGroup label="Start:" class="flex-1"> <UFormField label="Start:" class="flex-1">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
<UButton <UButton
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
@@ -192,9 +193,9 @@ const createExport = async () => {
<LazyDatePicker v-model="createExportData.start_date" @close="close" /> <LazyDatePicker v-model="createExportData.start_date" @close="close" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup label="Ende:" class="flex-1"> <UFormField label="Ende:" class="flex-1">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
<UButton <UButton
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
@@ -206,18 +207,19 @@ const createExport = async () => {
<LazyDatePicker v-model="createExportData.end_date" @close="close" /> <LazyDatePicker v-model="createExportData.end_date" @close="close" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
</div> </div>
<template #footer> <template #footer>
<div class="flex justify-end"> <div class="flex justify-end">
<UButton @click="createExport"> <UButton @click="createExport">
Erstellen Erstellen
</UButton> </UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

68
frontend/pages/files/index.vue
View File

@@ -350,8 +350,8 @@ const syncdokubox = async () => {
<UBreadcrumb :links="breadcrumbLinks"/> <UBreadcrumb :links="breadcrumbLinks"/>
</template> </template>
<template #right> <template #right>
<USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }"> <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">
<template #label> <template #default>
<UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/> <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/>
<span>{{ displayModes.find(i => i.key === displayMode).label }}</span> <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
</template> </template>
@@ -453,30 +453,31 @@ const syncdokubox = async () => {
</div> </div>
</UDashboardPanelContent> </UDashboardPanelContent>
<UModal v-model="createFolderModalOpen"> <UModal v-model:open="createFolderModalOpen">
<UCard> <template #content>
<template #header><h3 class="font-bold">Ordner erstellen</h3></template> <UCard>
<template #header><h3 class="font-bold">Ordner erstellen</h3></template>
<div class="space-y-4"> <div class="space-y-4">
<UFormGroup label="Name" required> <UFormField label="Name" required>
<UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/> <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Standard Dateityp (Tag)" label="Standard Dateityp (Tag)"
:help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''" :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
> >
<USelectMenu <USelectMenu
v-model="createFolderData.standardFiletype" v-model="createFolderData.standardFiletype"
:options="filetags" :items="filetags"
value-attribute="id" value-key="id"
option-attribute="name" label-key="name"
placeholder="Kein Standardtyp" placeholder="Kein Standardtyp"
searchable searchable
clear-search-on-close clear-search-on-close
:disabled="isParentTypeMandatory" :disabled="isParentTypeMandatory"
/> />
</UFormGroup> </UFormField>
<UCheckbox <UCheckbox
v-model="createFolderData.standardFiletypeIsOptional" v-model="createFolderData.standardFiletypeIsOptional"
@@ -485,27 +486,30 @@ const syncdokubox = async () => {
/> />
</div> </div>
<template #footer> <template #footer>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton> <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
<UButton color="primary" @click="createFolder">Erstellen</UButton> <UButton color="primary" @click="createFolder">Erstellen</UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
<UModal v-model="renameModalOpen"> <UModal v-model:open="renameModalOpen">
<UCard> <template #content>
<template #header><h3 class="font-bold">Umbenennen</h3></template> <UCard>
<UFormGroup label="Neuer Name"> <template #header><h3 class="font-bold">Umbenennen</h3></template>
<UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/> <UFormField label="Neuer Name">
</UFormGroup> <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
<template #footer> </UFormField>
<div class="flex justify-end gap-2"> <template #footer>
<UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton> <div class="flex justify-end gap-2">
<UButton color="primary" @click="updateName">Speichern</UButton> <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
</div> <UButton color="primary" @click="updateName">Speichern</UButton>
</template> </div>
</UCard> </template>
</UCard>
</template>
</UModal> </UModal>
</template> </template>

62
frontend/pages/incomingInvoices/[mode]/[id].vue
View File

@@ -157,7 +157,7 @@ const updateIncomingInvoice = async (setBooked = false) => {
toast.add({ toast.add({
title: "Buchen nicht möglich", title: "Buchen nicht möglich",
description: "Bitte beheben Sie zuerst die rot markierten Pflichtfehler.", description: "Bitte beheben Sie zuerst die rot markierten Pflichtfehler.",
color: "rose" color: "error"
}) })
return return
} }
@@ -220,7 +220,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<template #right> <template #right>
<ArchiveButton <ArchiveButton
v-if="mode !== 'show'" v-if="mode !== 'show'"
color="rose" color="error"
variant="outline" variant="outline"
type="incominginvoices" type="incominginvoices"
@confirmed="useEntities('incominginvoices').archive(route.params.id)" @confirmed="useEntities('incominginvoices').archive(route.params.id)"
@@ -286,7 +286,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<UAlert <UAlert
v-if="findIncomingInvoiceErrors.length > 0" v-if="findIncomingInvoiceErrors.length > 0"
title="Prüfung erforderlich" title="Prüfung erforderlich"
:color="hasBlockingIncomingInvoiceErrors ? 'rose' : 'orange'" :color="hasBlockingIncomingInvoiceErrors ? 'error' : 'orange'"
variant="soft" variant="soft"
icon="i-heroicons-exclamation-triangle" icon="i-heroicons-exclamation-triangle"
> >
@@ -323,14 +323,14 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h3 class="font-semibold">Stammdaten</h3> <h3 class="font-semibold">Stammdaten</h3>
<div class="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg"> <div class="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
<UButton size="xs" :variant="itemInfo.expense ? 'solid' : 'ghost'" color="rose" @click="itemInfo.expense = true" :disabled="mode === 'show'">Ausgabe</UButton> <UButton size="xs" :variant="itemInfo.expense ? 'solid' : 'ghost'" color="error" @click="itemInfo.expense = true" :disabled="mode === 'show'">Ausgabe</UButton>
<UButton size="xs" :variant="!itemInfo.expense ? 'solid' : 'ghost'" color="emerald" @click="itemInfo.expense = false" :disabled="mode === 'show'">Einnahme</UButton> <UButton size="xs" :variant="!itemInfo.expense ? 'solid' : 'ghost'" color="emerald" @click="itemInfo.expense = false" :disabled="mode === 'show'">Einnahme</UButton>
</div> </div>
</div> </div>
</template> </template>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<UFormGroup label="Lieferant / Partner" class="md:col-span-2"> <UFormField label="Lieferant / Partner" class="md:col-span-2">
<div class="flex gap-2"> <div class="flex gap-2">
<USelectMenu <USelectMenu
class="w-full" class="w-full"
@@ -354,7 +354,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
v-if="mode !== 'show'" v-if="mode !== 'show'"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
color="rose" color="error"
:disabled="!itemInfo.vendor" :disabled="!itemInfo.vendor"
@click="itemInfo.vendor = null" @click="itemInfo.vendor = null"
/> />
@@ -365,37 +365,37 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
@return-data="(data) => itemInfo.vendor = data.id" @return-data="(data) => itemInfo.vendor = data.id"
/> />
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Rechnungsnummer"> <UFormField label="Rechnungsnummer">
<UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" /> <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
</UFormGroup> </UFormField>
<UFormGroup label="Zahlart"> <UFormField label="Zahlart">
<USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" /> <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
</UFormGroup> </UFormField>
<UFormGroup label="Rechnungsdatum"> <UFormField label="Rechnungsdatum">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
<UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" /> <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
<template #panel="{ close }"> <template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" /> <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup label="Fälligkeitsdatum"> <UFormField label="Fälligkeitsdatum">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :popper="{ placement: 'bottom-start' }">
<UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" /> <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
<template #panel="{ close }"> <template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.dueDate" @close="close" /> <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup label="Beschreibung / Notiz" class="md:col-span-2"> <UFormField label="Beschreibung / Notiz" class="md:col-span-2">
<UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" /> <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
</UFormGroup> </UFormField>
</div> </div>
</UCard> </UCard>
@@ -404,7 +404,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<h3 class="font-semibold text-lg">Positionen</h3> <h3 class="font-semibold text-lg">Positionen</h3>
<div class="flex items-center gap-2 text-sm"> <div class="flex items-center gap-2 text-sm">
<span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span> <span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span>
<UToggle v-model="useNetMode" color="primary" :disabled="mode === 'show'" /> <USwitch v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
<span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span> <span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span>
</div> </div>
</div> </div>
@@ -419,7 +419,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<UButton <UButton
v-if="itemInfo.accounts.length > 1 && mode !== 'show'" v-if="itemInfo.accounts.length > 1 && mode !== 'show'"
icon="i-heroicons-trash" icon="i-heroicons-trash"
color="rose" color="error"
variant="ghost" variant="ghost"
size="xs" size="xs"
class="absolute top-2 right-2" class="absolute top-2 right-2"
@@ -428,7 +428,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<div class="grid grid-cols-12 gap-3"> <div class="grid grid-cols-12 gap-3">
<div class="col-span-12 md:col-span-6"> <div class="col-span-12 md:col-span-6">
<UFormGroup label="Konto / Kategorie"> <UFormField label="Konto / Kategorie">
<USelectMenu <USelectMenu
v-model="item.account" v-model="item.account"
:options="accounts" :options="accounts"
@@ -446,11 +446,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
{{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }} {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 md:col-span-6"> <div class="col-span-12 md:col-span-6">
<UFormGroup label="Kostenstelle"> <UFormField label="Kostenstelle">
<USelectMenu <USelectMenu
v-model="item.costCentre" v-model="item.costCentre"
:options="costcentres" :options="costcentres"
@@ -464,11 +464,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
{{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }} {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<UFormGroup label="Betrag (Netto)"> <UFormField label="Betrag (Netto)">
<UInput <UInput
type="number" type="number"
step="0.01" step="0.01"
@@ -478,11 +478,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
> >
<template #trailing>€</template> <template #trailing>€</template>
</UInput> </UInput>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 md:col-span-3"> <div class="col-span-12 md:col-span-3">
<UFormGroup label="Betrag (Brutto)"> <UFormField label="Betrag (Brutto)">
<UInput <UInput
type="number" type="number"
step="0.01" step="0.01"
@@ -492,11 +492,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
> >
<template #trailing>€</template> <template #trailing>€</template>
</UInput> </UInput>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-6 md:col-span-3"> <div class="col-span-6 md:col-span-3">
<UFormGroup label="Steuerschlüssel"> <UFormField label="Steuerschlüssel">
<USelectMenu <USelectMenu
v-model="item.taxType" v-model="item.taxType"
:options="taxOptions" :options="taxOptions"
@@ -505,15 +505,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
:disabled="mode === 'show'" :disabled="mode === 'show'"
@change="recalculateItem(item, 'taxType')" @change="recalculateItem(item, 'taxType')"
/> />
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-6 md:col-span-3"> <div class="col-span-6 md:col-span-3">
<UFormGroup label="Steuerbetrag" help="Automatisch berechnet"> <UFormField label="Steuerbetrag" help="Automatisch berechnet">
<UInput :model-value="item.amountTax" disabled color="gray" > <UInput :model-value="item.amountTax" disabled color="gray" >
<template #trailing>€</template> <template #trailing>€</template>
</UInput> </UInput>
</UFormGroup> </UFormField>
</div> </div>
<div class="col-span-12 flex justify-end gap-2"> <div class="col-span-12 flex justify-end gap-2">

62
frontend/pages/incomingInvoices/index.vue
View File

@@ -191,7 +191,7 @@ const selectIncomingInvoice = (invoice) => {
<UButton <UButton
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
color="rose" color="error"
@click="clearSearchString()" @click="clearSearchString()"
v-if="searchString.length > 0" v-if="searchString.length > 0"
/> />
@@ -203,15 +203,15 @@ const selectIncomingInvoice = (invoice) => {
<USelectMenu <USelectMenu
v-model="selectedColumns" v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)" :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
by="key" by="key"
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'" :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
@change="tempStore.modifyColumns(type,selectedColumns)" @change="tempStore.modifyColumns(type,selectedColumns)"
> >
<template #label> <template #default>
Spalten Spalten
</template> </template>
</USelectMenu> </USelectMenu>
@@ -220,11 +220,11 @@ const selectIncomingInvoice = (invoice) => {
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
multiple multiple
v-model="selectedFilters" v-model="selectedFilters"
:options="selectableFilters" :items="selectableFilters"
:color="selectedFilters.length > 0 ? 'primary' : 'white'" :color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
> >
<template #label> <template #default>
Filter Filter
</template> </template>
</USelectMenu> </USelectMenu>
@@ -244,42 +244,42 @@ const selectIncomingInvoice = (invoice) => {
{{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}} {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
</UBadge> </UBadge>
</template> </template>
<template #item="{item}"> <template #content="{item}">
<div style="height: 80dvh; overflow-y: scroll"> <div style="height: 80dvh; overflow-y: scroll">
<UTable <UTable
v-model:sort="sort" v-model:sorting="sort"
sort-mode="manual" sort-mode="manual"
@update:sort="setupPage" @update:sorting="setupPage"
:rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )" :data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => selectIncomingInvoice(i) " :on-select="(i) => selectIncomingInvoice(i) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
> >
<template #reference-data="{row}"> <template #reference-cell="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span> <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
<span v-else>{{row.reference}}</span> <span v-else>{{row.original.reference}}</span>
</template> </template>
<template #state-data="{row}"> <template #state-cell="{row}">
<span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span> <span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
<span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span> <span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
<span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span> <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
</template> </template>
<template #date-data="{row}"> <template #date-cell="{row}">
{{dayjs(row.date).format("DD.MM.YYYY")}} {{dayjs(row.original.date).format("DD.MM.YYYY")}}
</template> </template>
<template #vendor-data="{row}"> <template #vendor-cell="{row}">
{{row.vendor ? row.vendor.name : ""}} {{row.original.vendor ? row.original.vendor.name : ""}}
</template> </template>
<template #amount-data="{row}"> <template #amount-cell="{row}">
{{displayCurrency(sum.getIncomingInvoiceSum(row))}} {{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
</template> </template>
<template #dueDate-data="{row}"> <template #dueDate-cell="{row}">
<span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span> <span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
</template> </template>
<template #paid-data="{row}"> <template #paid-cell="{row}">
<span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span> <span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
<span v-else class="text-rose-600">Offen</span> <span v-else class="text-rose-600">Offen</span>
</template> </template>
</UTable> </UTable>

102
frontend/pages/index.client.vue
View File

@@ -382,8 +382,7 @@ onBeforeUnmount(() => {
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardPanelContent> <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto">
<div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid">
<div <div
v-for="widget in visibleWidgets" v-for="widget in visibleWidgets"
:key="widget.id" :key="widget.id"
@@ -396,9 +395,9 @@ onBeforeUnmount(() => {
:gs-min-w="widget.minW" :gs-min-w="widget.minW"
:gs-min-h="widget.minH" :gs-min-h="widget.minH"
> >
<div class="grid-stack-item-content dashboard-grid-item"> <div class="grid-stack-item-content dashboard-grid-item">
<div class="dashboard-widget-card border border-gray-200 dark:border-gray-800"> <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
<div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800"> <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="min-w-0"> <div class="min-w-0">
<div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']"> <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
@@ -449,57 +448,58 @@ onBeforeUnmount(() => {
Karte hinzufügen Karte hinzufügen
</UButton> </UButton>
</div> </div>
</UDashboardPanelContent>
<UModal v-model="manageCardsOpen"> <UModal v-model:open="manageCardsOpen">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between gap-3"> <template #header>
<div> <div class="flex items-center justify-between gap-3">
<h2 class="font-semibold">Dashboard-Karten</h2> <div>
<p class="text-sm"> <h2 class="font-semibold">Dashboard-Karten</h2>
Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen. <p class="text-sm">
</p> Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
</p>
</div>
<UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard">
Zurücksetzen
</UButton>
</div> </div>
<UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard"> </template>
Zurücksetzen
</UButton>
</div>
</template>
<div class="space-y-3"> <div class="space-y-3">
<div <div
v-for="definition in DASHBOARD_WIDGETS" v-for="definition in DASHBOARD_WIDGETS"
:key="definition.id" :key="definition.id"
class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3" class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
> >
<div> <div>
<p class="font-medium">{{ definition.title }}</p> <p class="font-medium">{{ definition.title }}</p>
<p class="text-sm">{{ definition.description }}</p> <p class="text-sm">{{ definition.description }}</p>
</div>
<UButton
v-if="getWidgetLayout(definition.id)?.visible"
color="gray"
variant="soft"
icon="i-heroicons-minus"
:disabled="visibleWidgets.length <= 1"
@click="removeWidget(definition.id)"
>
Entfernen
</UButton>
<UButton
v-else
color="primary"
variant="soft"
icon="i-heroicons-plus"
@click="addWidget(definition.id)"
>
Hinzufügen
</UButton>
</div> </div>
<UButton
v-if="getWidgetLayout(definition.id)?.visible"
color="gray"
variant="soft"
icon="i-heroicons-minus"
:disabled="visibleWidgets.length <= 1"
@click="removeWidget(definition.id)"
>
Entfernen
</UButton>
<UButton
v-else
color="primary"
variant="soft"
icon="i-heroicons-plus"
@click="addWidget(definition.id)"
>
Hinzufügen
</UButton>
</div> </div>
</div> </UCard>
</UCard> </template>
</UModal> </UModal>
</div> </div>
</template> </template>

2
frontend/pages/login.vue
View File

@@ -16,7 +16,7 @@ const doLogin = async (data:any) => {
await router.push("/") await router.push("/")
} catch (err: any) { } catch (err: any) {
toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"}) toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"error"})
} }
} }
</script> </script>

78
frontend/pages/organisation/plantafel.vue
View File

@@ -423,7 +423,7 @@ onMounted(() => {
Urlaub Urlaub
</UButton> </UButton>
<UButton <UButton
color="rose" color="error"
variant="soft" variant="soft"
icon="i-heroicons-heart" icon="i-heroicons-heart"
@click="openAbsenceModal('sick')" @click="openAbsenceModal('sick')"
@@ -453,25 +453,26 @@ onMounted(() => {
/> />
</UDashboardPanelContent> </UDashboardPanelContent>
<UModal v-model="isAbsenceModalOpen"> <UModal v-model:open="isAbsenceModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <template #content>
<template #header> <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
{{ absenceModalTitle }} <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> {{ absenceModalTitle }}
<UButton </h3>
color="gray" <UButton
variant="ghost" color="gray"
icon="i-heroicons-x-mark-20-solid" variant="ghost"
class="-my-1" icon="i-heroicons-x-mark-20-solid"
@click="isAbsenceModalOpen = false" class="-my-1"
/> @click="isAbsenceModalOpen = false"
</div> />
</template> </div>
</template>
<div class="space-y-4"> <div class="space-y-4">
<UFormGroup label="Profil"> <UFormField label="Profil">
<USelectMenu <USelectMenu
v-model="absenceForm.userId" v-model="absenceForm.userId"
:options="profileOptions" :options="profileOptions"
@@ -479,51 +480,52 @@ onMounted(() => {
option-attribute="label" option-attribute="label"
searchable searchable
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Typ"> <UFormField label="Typ">
<USelectMenu <USelectMenu
v-model="absenceForm.type" v-model="absenceForm.type"
:options="absenceTypeOptions" :options="absenceTypeOptions"
value-attribute="value" value-attribute="value"
option-attribute="label" option-attribute="label"
/> />
</UFormGroup> </UFormField>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<UFormGroup label="Start"> <UFormField label="Start">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput v-model="absenceForm.startDate" type="date" class="flex-1" /> <UInput v-model="absenceForm.startDate" type="date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('startDate')" /> <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('startDate')" />
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Ende"> <UFormField label="Ende">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput v-model="absenceForm.endDate" type="date" class="flex-1" /> <UInput v-model="absenceForm.endDate" type="date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('endDate')" /> <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('endDate')" />
</div> </div>
</UFormGroup> </UFormField>
</div> </div>
<UFormGroup label="Notiz"> <UFormField label="Notiz">
<UTextarea <UTextarea
v-model="absenceForm.description" v-model="absenceForm.description"
:placeholder="absenceForm.type === 'sick' ? 'z. B. Krankmeldung eingegangen' : 'z. B. Sommerurlaub'" :placeholder="absenceForm.type === 'sick' ? 'z. B. Krankmeldung eingegangen' : 'z. B. Sommerurlaub'"
/> />
</UFormGroup> </UFormField>
</div> </div>
<template #footer> <template #footer>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false"> <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
Abbrechen Abbrechen
</UButton> </UButton>
<UButton color="primary" :loading="savingAbsence" @click="saveAbsence"> <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
Speichern Speichern
</UButton> </UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</div> </div>
</template> </template>

2
frontend/pages/password-change.vue
View File

@@ -24,7 +24,7 @@ const doChange = async (data:any) => {
await auth.logout() await auth.logout()
return navigateTo("/login") return navigateTo("/login")
} catch (err: any) { } catch (err: any) {
toast.add({title:"Es gab ein Problem beim ändern",color:"rose"}) toast.add({title:"Es gab ein Problem beim ändern",color:"error"})
} }
} }
</script> </script>

2
frontend/pages/password-reset.vue
View File

@@ -22,7 +22,7 @@ const doReset = async (data:any) => {
toast.add({title:"Zurücksetzen erfolgreich"}) toast.add({title:"Zurücksetzen erfolgreich"})
return navigateTo("/login") return navigateTo("/login")
} catch (err: any) { } catch (err: any) {
toast.add({title:"Problem beim zurücksetzen",color:"rose"}) toast.add({title:"Problem beim zurücksetzen",color:"error"})
} }
} }
</script> </script>

86
frontend/pages/projecttypes/[mode]/[[id]].vue
View File

@@ -9,18 +9,20 @@ defineShortcuts({
router.push("/projecttypes") router.push("/projecttypes")
}, },
'arrowleft': () => { 'arrowleft': () => {
if(openTab.value > 0){ const currentIndex = Number(openTab.value)
openTab.value -= 1 if(currentIndex > 0){
openTab.value = String(currentIndex - 1)
} }
}, },
'arrowright': () => { 'arrowright': () => {
if(openTab.value < 3) { const currentIndex = Number(openTab.value)
openTab.value += 1 if(currentIndex < 3) {
openTab.value = String(currentIndex + 1)
} }
}, },
}) })
const openTab = ref(0) const openTab = ref("0")
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const toast = useToast() const toast = useToast()
@@ -129,7 +131,7 @@ const addPhase = () => {
v-if="itemInfo.id && mode == 'show'" v-if="itemInfo.id && mode == 'show'"
v-model="openTab" v-model="openTab"
> >
<template #item="{ item }"> <template #content="{ item }">
<div v-if="item.label === 'Informationen'" class="flex flex-row"> <div v-if="item.label === 'Informationen'" class="flex flex-row">
<div class="w-1/2 mr-3"> <div class="w-1/2 mr-3">
<UCard class="mt-5"> <UCard class="mt-5">
@@ -152,24 +154,24 @@ const addPhase = () => {
<UForm v-else-if="mode === 'edit' || mode === 'create'"> <UForm v-else-if="mode === 'edit' || mode === 'create'">
<UAlert <UAlert
color="rose" color="error"
variant="outline" variant="outline"
class="mb-5" class="mb-5"
v-if="mode === 'edit'" v-if="mode === 'edit'"
description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert." description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert."
/> />
<UFormGroup <UFormField
label="Name:" label="Name:"
> >
<UInput <UInput
v-model="itemInfo.name" v-model="itemInfo.name"
/> />
</UFormGroup> </UFormField>
<UDivider class="mt-5"> <USeparator class="mt-5">
Initiale Phasen Initiale Phasen
</UDivider> </USeparator>
<UButton <UButton
class="mt-3" class="mt-3"
@click="addPhase" @click="addPhase"
@@ -247,44 +249,46 @@ const addPhase = () => {
{{ button.label }} {{ button.label }}
</UButton> </UButton>
<UModal v-model="openQuickActionModal"> <UModal v-model:open="openQuickActionModal">
<UCard> <template #content>
<div class="flex items-center justify-between"> <UCard>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Schnellaktion hinzufügen <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Schnellaktion hinzufügen
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" /> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
<div class="flex flex-col"> </div>
<UButton <div class="flex flex-col">
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton> class="my-1"
<UButton @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton> class="my-1"
<UButton @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton> class="my-1"
<UButton @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton> class="my-1"
<UButton @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton> class="my-1"
<UButton @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
class="my-1" <UButton
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton> class="my-1"
@click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
</div> </div>
</UCard> </UCard>
</template>
</UModal> </UModal>
</td> </td>
<td> <td>
<UButton <UButton
class="my-2 ml-2" class="my-2 ml-2"
variant="outline" variant="outline"
color="rose" color="error"
@click="itemInfo.initialPhases = itemInfo.initialPhases.filter(i => i !== phase)" @click="itemInfo.initialPhases = itemInfo.initialPhases.filter(i => i !== phase)"
>X</UButton> >X</UButton>
</td> </td>

14
frontend/pages/projecttypes/index.vue
View File

@@ -87,16 +87,16 @@ const filteredRows = computed(() => {
</UDashboardNavbar> </UDashboardNavbar>
<UTable <UTable
:rows="filteredRows" :data="filteredRows"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/projecttypes/show/${i.id}`) " :on-select="(i) => router.push(`/projecttypes/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
> >
<template #name-data="{row}"> <template #name-cell="{row}">
<span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{ row.name }}</span> <span class="text-primary-500 font-bold" v-if="row.original === filteredRows[selectedItem]">{{ row.original.name }}</span>
<span v-else>{{ row.name }}</span> <span v-else>{{ row.original.name }}</span>
</template> </template>
</UTable> </UTable>

26
frontend/pages/roles/[mode]/[[id]].vue
View File

@@ -8,13 +8,15 @@ defineShortcuts({
router.push("/roles") router.push("/roles")
}, },
'arrowleft': () => { 'arrowleft': () => {
if(openTab.value > 0){ const currentIndex = Number(openTab.value)
openTab.value -= 1 if(currentIndex > 0){
openTab.value = String(currentIndex - 1)
} }
}, },
'arrowright': () => { 'arrowright': () => {
if(openTab.value < 3) { const currentIndex = Number(openTab.value)
openTab.value += 1 if(currentIndex < 3) {
openTab.value = String(currentIndex + 1)
} }
}, },
}) })
@@ -32,7 +34,7 @@ const mode = ref(route.params.mode || "show")
const itemInfo = ref({ const itemInfo = ref({
rights: [] rights: []
}) })
const openTab = ref(0) const openTab = ref("0")
//Functions //Functions
const setupPage = async () => { const setupPage = async () => {
@@ -120,7 +122,7 @@ setupPage()
class="p-5" class="p-5"
v-model="openTab" v-model="openTab"
> >
<template #item="{item}"> <template #content="{item}">
<div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row"> <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
<div class="w-1/2 mr-5"> <div class="w-1/2 mr-5">
<UCard> <UCard>
@@ -157,15 +159,15 @@ setupPage()
v-else-if="mode == 'edit' || mode == 'create'" v-else-if="mode == 'edit' || mode == 'create'"
class="p-5" class="p-5"
> >
<UFormGroup <UFormField
label="Name:" label="Name:"
> >
<UInput <UInput
v-model="itemInfo.name" v-model="itemInfo.name"
autofocus autofocus
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Rechte:" label="Rechte:"
> >
<USelectMenu <USelectMenu
@@ -176,14 +178,14 @@ setupPage()
multiple multiple
> >
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Beschreibung:" label="Beschreibung:"
> >
<UTextarea <UTextarea
v-model="itemInfo.description" v-model="itemInfo.description"
/> />
</UFormGroup> </UFormField>
</UForm> </UForm>
</template> </template>

160
frontend/pages/settings/admin.vue
View File

@@ -51,7 +51,7 @@ const savingUser = ref(false)
const savingTenant = ref(false) const savingTenant = ref(false)
const creatingUser = ref(false) const creatingUser = ref(false)
const creatingTenant = ref(false) const creatingTenant = ref(false)
const activeTab = ref(0) const activeTab = ref("0")
const createUserModalOpen = ref(false) const createUserModalOpen = ref(false)
const createTenantModalOpen = ref(false) const createTenantModalOpen = ref(false)
const createdUserPassword = ref("") const createdUserPassword = ref("")
@@ -105,12 +105,14 @@ const userTableColumns = [
{ key: "tenant_count", label: "Tenants" }, { key: "tenant_count", label: "Tenants" },
{ key: "is_admin", label: "Admin" }, { key: "is_admin", label: "Admin" },
] ]
const normalizedUserTableColumns = normalizeTableColumns(userTableColumns)
const tenantTableColumns = [ const tenantTableColumns = [
{ key: "name", label: "Tenant" }, { key: "name", label: "Tenant" },
{ key: "short", label: "Kürzel" }, { key: "short", label: "Kürzel" },
{ key: "user_count", label: "Benutzer" }, { key: "user_count", label: "Benutzer" },
] ]
const normalizedTenantTableColumns = normalizeTableColumns(tenantTableColumns)
const userTableRows = computed(() => const userTableRows = computed(() =>
sortedUsers.value.map((user) => ({ sortedUsers.value.map((user) => ({
@@ -470,7 +472,7 @@ onMounted(async () => {
:items="tabItems" :items="tabItems"
class="admin-tabs h-full" class="admin-tabs h-full"
> >
<template #item="{ item }"> <template #content="{ item }">
<div v-if="item.label === 'Benutzer'" class="admin-grid mt-5 grid grid-cols-1 xl:grid-cols-3 gap-5"> <div v-if="item.label === 'Benutzer'" class="admin-grid mt-5 grid grid-cols-1 xl:grid-cols-3 gap-5">
<UCard class="admin-card xl:col-span-1"> <UCard class="admin-card xl:col-span-1">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
@@ -490,9 +492,9 @@ onMounted(async () => {
<div class="admin-scroll"> <div class="admin-scroll">
<UTable <UTable
v-if="!loading" v-if="!loading"
:rows="userTableRows" :data="userTableRows"
:columns="userTableColumns" :columns="normalizedUserTableColumns"
@select="selectUser" :on-select="selectUser"
/> />
<USkeleton v-else class="h-80" /> <USkeleton v-else class="h-80" />
@@ -517,53 +519,53 @@ onMounted(async () => {
</div> </div>
<UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6"> <UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<UFormGroup label="E-Mail"> <UFormField label="E-Mail">
<UInput v-model="userForm.email" /> <UInput v-model="userForm.email" />
</UFormGroup> </UFormField>
<UFormGroup label="Profil Vorname"> <UFormField label="Profil Vorname">
<UInput v-model="userForm.profile_defaults.first_name" /> <UInput v-model="userForm.profile_defaults.first_name" />
</UFormGroup> </UFormField>
<UFormGroup label="Profil Nachname"> <UFormField label="Profil Nachname">
<UInput v-model="userForm.profile_defaults.last_name" /> <UInput v-model="userForm.profile_defaults.last_name" />
</UFormGroup> </UFormField>
<UFormGroup label="Tenants"> <UFormField label="Tenants">
<USelectMenu <USelectMenu
:model-value="userForm.tenant_ids" :model-value="userForm.tenant_ids"
:options="tenantOptions" :items="tenantOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
multiple multiple
@update:model-value="updateUserTenants" @update:model-value="updateUserTenants"
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Administrative Freigabe"> <UFormField label="Administrative Freigabe">
<div class="flex items-center gap-3 h-10"> <div class="flex items-center gap-3 h-10">
<UToggle v-model="userForm.is_admin" /> <USwitch v-model="userForm.is_admin" />
<span class="text-sm text-gray-600">Darf Administrationsseite und Admin-API nutzen</span> <span class="text-sm text-gray-600">Darf Administrationsseite und Admin-API nutzen</span>
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Multi-Tenant"> <UFormField label="Multi-Tenant">
<div class="flex items-center gap-3 h-10"> <div class="flex items-center gap-3 h-10">
<UToggle v-model="userForm.multiTenant" /> <USwitch v-model="userForm.multiTenant" />
<span class="text-sm text-gray-600">Benutzer darf mehreren Tenants zugeordnet sein</span> <span class="text-sm text-gray-600">Benutzer darf mehreren Tenants zugeordnet sein</span>
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Passwortwechsel erzwingen"> <UFormField label="Passwortwechsel erzwingen">
<div class="flex items-center gap-3 h-10"> <div class="flex items-center gap-3 h-10">
<UToggle v-model="userForm.must_change_password" /> <USwitch v-model="userForm.must_change_password" />
<span class="text-sm text-gray-600">Beim nächsten Login muss das Passwort geändert werden</span> <span class="text-sm text-gray-600">Beim nächsten Login muss das Passwort geändert werden</span>
</div> </div>
</UFormGroup> </UFormField>
</UForm> </UForm>
<div> <div>
<UDivider label="Rollen pro Tenant" class="mb-4" /> <USeparator label="Rollen pro Tenant" class="mb-4" />
<div <div
v-if="userForm.tenant_ids.length" v-if="userForm.tenant_ids.length"
@@ -584,33 +586,33 @@ onMounted(async () => {
</div> </div>
</div> </div>
<UFormGroup label="Rolle"> <UFormField label="Rolle">
<USelectMenu <USelectMenu
:model-value="getRoleForTenant(tenantId)" :model-value="getRoleForTenant(tenantId)"
:options="getRoleOptionsForTenant(tenantId)" :items="getRoleOptionsForTenant(tenantId)"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
placeholder="Rolle auswählen" placeholder="Rolle auswählen"
@update:model-value="(value) => setRoleForTenant(tenantId, value)" @update:model-value="(value) => setRoleForTenant(tenantId, value)"
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Freies Profil"> <UFormField label="Freies Profil">
<USelectMenu <USelectMenu
:model-value="getProfileAssignmentForTenant(tenantId)" :model-value="getProfileAssignmentForTenant(tenantId)"
:options="[ :items="[
{ label: 'Neues Profil erzeugen', value: null }, { label: 'Neues Profil erzeugen', value: null },
...getFreeProfilesForTenant(tenantId).map((profile) => ({ ...getFreeProfilesForTenant(tenantId).map((profile) => ({
label: profile.full_name || `${profile.first_name} ${profile.last_name}`, label: profile.full_name || `${profile.first_name} ${profile.last_name}`,
value: profile.id, value: profile.id,
})) }))
]" ]"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
placeholder="Profil auswählen" placeholder="Profil auswählen"
@update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)" @update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
/> />
</UFormGroup> </UFormField>
</div> </div>
</UCard> </UCard>
</div> </div>
@@ -625,7 +627,7 @@ onMounted(async () => {
</div> </div>
<div> <div>
<UDivider label="Profile im System" class="mb-4" /> <USeparator label="Profile im System" class="mb-4" />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<UBadge <UBadge
v-for="profile in userForm.profiles" v-for="profile in userForm.profiles"
@@ -672,9 +674,9 @@ onMounted(async () => {
<div class="admin-scroll"> <div class="admin-scroll">
<UTable <UTable
v-if="!loading" v-if="!loading"
:rows="tenantTableRows" :data="tenantTableRows"
:columns="tenantTableColumns" :columns="normalizedTenantTableColumns"
@select="selectTenant" :on-select="selectTenant"
/> />
<USkeleton v-else class="h-80" /> <USkeleton v-else class="h-80" />
@@ -699,17 +701,17 @@ onMounted(async () => {
</div> </div>
<UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6"> <UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<UFormGroup label="Name"> <UFormField label="Name">
<UInput v-model="tenantForm.name" /> <UInput v-model="tenantForm.name" />
</UFormGroup> </UFormField>
<UFormGroup label="Kürzel"> <UFormField label="Kürzel">
<UInput v-model="tenantForm.short" /> <UInput v-model="tenantForm.short" />
</UFormGroup> </UFormField>
</UForm> </UForm>
<div> <div>
<UDivider label="Zugeordnete Benutzer" class="mb-4" /> <USeparator label="Zugeordnete Benutzer" class="mb-4" />
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<UBadge <UBadge
v-for="user in getUsersForTenant(tenantForm.id)" v-for="user in getUsersForTenant(tenantForm.id)"
@@ -740,50 +742,51 @@ onMounted(async () => {
</UTabs> </UTabs>
</UDashboardPanelContent> </UDashboardPanelContent>
<UModal v-model="createUserModalOpen"> <UModal v-model:open="createUserModalOpen">
<UCard> <template #content>
<template #header> <UCard>
<div class="text-lg font-semibold">Benutzer anlegen</div> <template #header>
</template> <div class="text-lg font-semibold">Benutzer anlegen</div>
</template>
<UForm <UForm
:state="createUserForm" :state="createUserForm"
class="space-y-4" class="space-y-4"
@submit.prevent="createUser" @submit.prevent="createUser"
> >
<UFormGroup label="E-Mail"> <UFormField label="E-Mail">
<UInput v-model="createUserForm.email" type="email" /> <UInput v-model="createUserForm.email" type="email" />
</UFormGroup> </UFormField>
<UFormGroup label="Initialpasswort"> <UFormField label="Initialpasswort">
<UInput <UInput
v-model="createUserForm.password" v-model="createUserForm.password"
type="text" type="text"
placeholder="Leer lassen für automatisches Passwort" placeholder="Leer lassen für automatisches Passwort"
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Vorname für neues Profil"> <UFormField label="Vorname für neues Profil">
<UInput v-model="createUserForm.first_name" /> <UInput v-model="createUserForm.first_name" />
</UFormGroup> </UFormField>
<UFormGroup label="Nachname für neues Profil"> <UFormField label="Nachname für neues Profil">
<UInput v-model="createUserForm.last_name" /> <UInput v-model="createUserForm.last_name" />
</UFormGroup> </UFormField>
<UFormGroup label="Administrative Freigabe"> <UFormField label="Administrative Freigabe">
<div class="flex items-center gap-3 h-10"> <div class="flex items-center gap-3 h-10">
<UToggle v-model="createUserForm.is_admin" /> <USwitch v-model="createUserForm.is_admin" />
<span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span> <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Multi-Tenant"> <UFormField label="Multi-Tenant">
<div class="flex items-center gap-3 h-10"> <div class="flex items-center gap-3 h-10">
<UToggle v-model="createUserForm.multiTenant" /> <USwitch v-model="createUserForm.multiTenant" />
<span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span> <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
</div> </div>
</UFormGroup> </UFormField>
<div class="flex justify-end gap-3 pt-2"> <div class="flex justify-end gap-3 pt-2">
<UButton color="gray" variant="soft" @click="createUserModalOpen = false"> <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
@@ -793,28 +796,30 @@ onMounted(async () => {
Benutzer anlegen Benutzer anlegen
</UButton> </UButton>
</div> </div>
</UForm> </UForm>
</UCard> </UCard>
</template>
</UModal> </UModal>
<UModal v-model="createTenantModalOpen"> <UModal v-model:open="createTenantModalOpen">
<UCard> <template #content>
<template #header> <UCard>
<div class="text-lg font-semibold">Tenant anlegen</div> <template #header>
</template> <div class="text-lg font-semibold">Tenant anlegen</div>
</template>
<UForm <UForm
:state="createTenantForm" :state="createTenantForm"
class="space-y-4" class="space-y-4"
@submit.prevent="createTenant" @submit.prevent="createTenant"
> >
<UFormGroup label="Name"> <UFormField label="Name">
<UInput v-model="createTenantForm.name" /> <UInput v-model="createTenantForm.name" />
</UFormGroup> </UFormField>
<UFormGroup label="Kürzel"> <UFormField label="Kürzel">
<UInput v-model="createTenantForm.short" /> <UInput v-model="createTenantForm.short" />
</UFormGroup> </UFormField>
<UAlert <UAlert
title="Seed-Daten" title="Seed-Daten"
@@ -831,8 +836,9 @@ onMounted(async () => {
Tenant anlegen Tenant anlegen
</UButton> </UButton>
</div> </div>
</UForm> </UForm>
</UCard> </UCard>
</template>
</UModal> </UModal>
<div class="mx-5 mb-5"> <div class="mx-5 mb-5">

116
frontend/pages/settings/banking/index.vue
View File

@@ -68,7 +68,7 @@ const addAccount = async (account) => {
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.add({title: "Es gab einen Fehler beim Hinzufügen des Accounts", color:"rose"}) toast.add({title: "Es gab einen Fehler beim Hinzufügen des Accounts", color:"error"})
} }
} }
@@ -85,7 +85,7 @@ const updateAccount = async (account) => {
setupPage() setupPage()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
toast.add({title: "Es gab einen Fehler beim Aktualisieren des Accounts", color:"rose"}) toast.add({title: "Es gab einen Fehler beim Aktualisieren des Accounts", color:"error"})
} }
} }
@@ -101,16 +101,17 @@ setupPage()
+ Bankverbindung + Bankverbindung
</UButton> </UButton>
<USlideover <USlideover
v-model="showAddBankRequisition" v-model:open="showAddBankRequisition"
> >
<UCard <template #body>
class="h-full" <UCard
> class="h-full"
<template #header> >
<p>Bankverbindung hinzufügen</p> <template #header>
</template> <p>Bankverbindung hinzufügen</p>
</template>
<UFormGroup <UFormField
label="BIC:" label="BIC:"
class="flex-auto" class="flex-auto"
> >
@@ -127,7 +128,7 @@ setupPage()
</UButton> </UButton>
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
<UAlert <UAlert
v-if="showAlert && bankData.id && bankData.countries.includes('DE')" v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
title="Bank gefunden" title="Bank gefunden"
@@ -137,51 +138,54 @@ setupPage()
class="mt-3" class="mt-3"
:actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]" :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
/> />
<UAlert <UAlert
v-else-if="showAlert && !bankData.id" v-else-if="showAlert && !bankData.id"
title="Bank nicht gefunden" title="Bank nicht gefunden"
icon="i-heroicons-x-circle" icon="i-heroicons-x-circle"
color="rose" color="error"
variant="outline" variant="outline"
class="mt-3" class="mt-3"
/> />
</UCard> </UCard>
</template>
</USlideover> </USlideover>
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UModal v-model="showReqData"> <UModal v-model:open="showReqData">
<UCard> <template #content>
<template #header> <UCard>
Verfügbare Bankkonten <template #header>
</template> Verfügbare Bankkonten
<div </template>
v-for="account in reqData.accounts" <div
:key="account.id" v-for="account in reqData.accounts"
class="p-2 m-3 flex justify-between" :key="account.id"
> class="p-2 m-3 flex justify-between"
{{account.iban}} - {{account.owner_name}} >
{{account.iban}} - {{account.owner_name}}
<UButton <UButton
@click="addAccount(account)" @click="addAccount(account)"
v-if="!bankaccounts.find(i => i.iban === account.iban)" v-if="!bankaccounts.find(i => i.iban === account.iban)"
> >
Hinzufügen Hinzufügen
</UButton> </UButton>
<UButton <UButton
@click="updateAccount(account)" @click="updateAccount(account)"
v-else v-else
> >
Aktualisieren Aktualisieren
</UButton> </UButton>
</div> </div>
</UCard> </UCard>
</template>
</UModal> </UModal>
<UTable <UTable
:rows="bankaccounts" :data="bankaccounts"
:columns="[ :columns="normalizeTableColumns([
{ {
key: 'expired', key: 'expired',
label: 'Aktiv' label: 'Aktiv'
@@ -198,23 +202,23 @@ setupPage()
key: 'balance', key: 'balance',
label: 'Saldo' label: 'Saldo'
}, },
]" ])"
> >
<template #expired-data="{row}"> <template #expired-cell="{ row }">
<span v-if="row.expired" class="text-rose-600">Ausgelaufen</span> <span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
<span v-else class="text-primary">Aktiv</span> <span v-else class="text-primary">Aktiv</span>
<UButton <UButton
v-if="row.expired" v-if="row.original.expired"
variant="outline" variant="outline"
class="ml-2" class="ml-2"
@click="generateLink(row.bankId)" @click="generateLink(row.original.bankId)"
>Aktualisieren</UButton> >Aktualisieren</UButton>
</template> </template>
<template #balance-data="{row}"> <template #balance-cell="{ row }">
{{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}} {{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
</template> </template>
<template #iban-data="{row}"> <template #iban-cell="{ row }">
{{row.iban.match(/.{1,5}/g).join(" ")}} {{ row.original.iban.match(/.{1,5}/g).join(" ") }}
</template> </template>
</UTable> </UTable>

40
frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
View File

@@ -57,15 +57,15 @@ const saveAccount = async () => {
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UForm class="w-2/3 mx-auto mt-5"> <UForm class="w-2/3 mx-auto mt-5">
<UFormGroup <UFormField
label="E-Mail Adresse" label="E-Mail Adresse"
> >
<UInput <UInput
v-model="itemInfo.email" v-model="itemInfo.email"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Passwort" label="Passwort"
> >
<UInput <UInput
@@ -73,61 +73,61 @@ const saveAccount = async () => {
v-model="itemInfo.password" v-model="itemInfo.password"
placeholder="********" placeholder="********"
/> />
</UFormGroup> </UFormField>
<UDivider> IMAP </UDivider> <USeparator label="IMAP"/>
<UFormGroup <UFormField
label="IMAP Host" label="IMAP Host"
> >
<UInput <UInput
v-model="itemInfo.imap_host" v-model="itemInfo.imap_host"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="IMAP Port" label="IMAP Port"
> >
<UInput <UInput
type="number" type="number"
v-model="itemInfo.imap_port" v-model="itemInfo.imap_port"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="IMAP SSL" label="IMAP SSL"
> >
<UToggle <USwitch
v-model="itemInfo.imap_ssl" v-model="itemInfo.imap_ssl"
/> />
</UFormGroup> </UFormField>
<UDivider> SMTP </UDivider> <USeparator label="SMTP"/>
<UFormGroup <UFormField
label="SMTP Host" label="SMTP Host"
> >
<UInput <UInput
v-model="itemInfo.smtp_host" v-model="itemInfo.smtp_host"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="SMTP Port" label="SMTP Port"
> >
<UInput <UInput
type="number" type="number"
v-model="itemInfo.smtp_port" v-model="itemInfo.smtp_port"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="SMTP SSL" label="SMTP SSL"
> >
<UToggle <USwitch
v-model="itemInfo.smtp_ssl" v-model="itemInfo.smtp_ssl"
/> />
</UFormGroup> </UFormField>
</UForm> </UForm>
</template> </template>

44
frontend/pages/settings/emailaccounts/index.vue
View File

@@ -32,22 +32,23 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
<template> <template>
<UModal <UModal
v-model="showEmailAddressModal" v-model:open="showEmailAddressModal"
> >
<UCard> <template #content>
<template #header> <UCard>
E-Mail Adresse <template #header>
</template> E-Mail Adresse
<!-- <UFormGroup </template>
<!-- <UFormField
label="E-Mail Adresse:" label="E-Mail Adresse:"
> >
</UFormGroup>--> </UFormField>-->
<UInput <UInput
v-model="createEMailAddress" v-model="createEMailAddress"
/> />
<!-- <UFormGroup <!-- <UFormField
label="Account Typ:" label="Account Typ:"
> >
<USelectMenu <USelectMenu
@@ -56,15 +57,16 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
value-attribute="key" value-attribute="key"
v-model="createEMailType" v-model="createEMailType"
/> />
</UFormGroup>--> </UFormField>-->
<template #footer> <template #footer>
<UButton <UButton
@click="createAccount" @click="createAccount"
> >
Erstellen Erstellen
</UButton> </UButton>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
<UDashboardNavbar title="E-Mail Konten"> <UDashboardNavbar title="E-Mail Konten">
@@ -80,12 +82,12 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UTable <UTable
:rows="items" :data="items"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
@select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)" :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
> >
</UTable> </UTable>
</template> </template>

4
frontend/pages/settings/externalDevices.vue
View File

@@ -33,13 +33,13 @@ const labelPrinterURI = ref("")
Etikettendrucker Etikettendrucker
</template> </template>
<UFormGroup <UFormField
label="IP-Adresse:" label="IP-Adresse:"
> >
<UInput <UInput
v-model="labelPrinterURI" v-model="labelPrinterURI"
/> />
</UFormGroup> </UFormField>
<UButton <UButton
@click="setupPrinter" @click="setupPrinter"

8
frontend/pages/settings/index.vue
View File

@@ -37,11 +37,11 @@ const isLight = computed({
:items="items" :items="items"
class="h-100 p-5" class="h-100 p-5"
> >
<template #item="{item}"> <template #content="{item}">
<UCard class="mt-5"> <UCard class="mt-5">
<div v-if="item.label === 'Profil'"> <div v-if="item.label === 'Profil'">
<UDivider <USeparator
class="my-3" class="my-3"
label="Profil" label="Profil"
/> />
@@ -58,12 +58,12 @@ const isLight = computed({
</div> </div>
<div v-else-if="item.label === 'Projekte'"> <div v-else-if="item.label === 'Projekte'">
<UDivider <USeparator
label="Phasenvorlagen" label="Phasenvorlagen"
/> />
</div> </div>
<div v-else-if="item.label === 'Dokumente'"> <div v-else-if="item.label === 'Dokumente'">
<UDivider <USeparator
label="Tags" label="Tags"
class="mb-3" class="mb-3"
/> />

2
frontend/pages/settings/numberRanges.vue
View File

@@ -80,7 +80,7 @@ const updateNumberRanges = async (range) => {
<UDashboardToolbar> <UDashboardToolbar>
<UAlert <UAlert
title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge." title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
color="rose" color="error"
variant="outline" variant="outline"
icon="i-heroicons-exclamation-triangle" icon="i-heroicons-exclamation-triangle"
/> />

36
frontend/pages/settings/tenant.vue
View File

@@ -168,7 +168,7 @@ setupPage()
} }
]" ]"
> >
<template #item="{item}"> <template #content="{item}">
<div v-if="item.label === 'Dokubox'"> <div v-if="item.label === 'Dokubox'">
<UAlert <UAlert
class="mt-5" class="mt-5"
@@ -190,17 +190,17 @@ setupPage()
<div v-if="item.label === 'Rechnung & Kontakt'"> <div v-if="item.label === 'Rechnung & Kontakt'">
<UCard class="mt-5"> <UCard class="mt-5">
<UForm class="w-1/2"> <UForm class="w-1/2">
<UFormGroup <UFormField
label="Firmenname:" label="Firmenname:"
> >
<UInput v-model="businessInfo.name"/> <UInput v-model="businessInfo.name"/>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Straße + Hausnummer:" label="Straße + Hausnummer:"
> >
<UInput v-model="businessInfo.street"/> <UInput v-model="businessInfo.street"/>
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="PLZ + Ort" label="PLZ + Ort"
class="w-full" class="w-full"
> >
@@ -208,41 +208,41 @@ setupPage()
<UInput v-model="businessInfo.zip"/> <UInput v-model="businessInfo.zip"/>
<UInput v-model="businessInfo.city" class="flex-auto"/> <UInput v-model="businessInfo.city" class="flex-auto"/>
</InputGroup> </InputGroup>
</UFormGroup> </UFormField>
<UButton <UButton
class="mt-3" class="mt-3"
@click="updateTenant({businessInfo: businessInfo})" @click="updateTenant({businessInfo: businessInfo})"
> >
Speichern Speichern
</UButton> </UButton>
<UFormGroup <UFormField
label="Kontenrahmen:" label="Kontenrahmen:"
class="mt-6" class="mt-6"
> >
<USelectMenu <USelectMenu
v-model="accountChart" v-model="accountChart"
:options="accountChartOptions" :items="accountChartOptions"
option-attribute="label" label-key="label"
value-attribute="value" value-key="value"
/> />
</UFormGroup> </UFormField>
<UButton <UButton
class="mt-3" class="mt-3"
@click="updateTenant({accountChart: accountChart})" @click="updateTenant({accountChart: accountChart})"
> >
Kontenrahmen speichern Kontenrahmen speichern
</UButton> </UButton>
<UFormGroup <UFormField
label="USt-Auswertung:" label="USt-Auswertung:"
class="mt-6" class="mt-6"
> >
<USelectMenu <USelectMenu
v-model="taxEvaluationPeriod" v-model="taxEvaluationPeriod"
:options="TAX_EVALUATION_PERIOD_OPTIONS" :items="TAX_EVALUATION_PERIOD_OPTIONS"
option-attribute="label" label-key="label"
value-attribute="value" value-key="value"
/> />
</UFormGroup> </UFormField>
<UButton <UButton
class="mt-3" class="mt-3"
@click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})" @click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})"
@@ -258,7 +258,7 @@ setupPage()
<UAlert <UAlert
title="Funktionen ausblenden" title="Funktionen ausblenden"
description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen." description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
color="rose" color="error"
variant="outline" variant="outline"
class="mb-5" class="mb-5"
/> />

132
frontend/pages/settings/texttemplates.vue
View File

@@ -49,7 +49,7 @@ const refreshData = async () => {
// select() filtert bereits archivierte Einträge, wenn dataType.isArchivable true ist // select() filtert bereits archivierte Einträge, wenn dataType.isArchivable true ist
texttemplates.value = await select() texttemplates.value = await select()
} catch (e) { } catch (e) {
toast.add({ title: 'Fehler beim Laden', description: e.message, color: 'rose' }) toast.add({ title: 'Fehler beim Laden', description: e.message, color: 'error' })
} finally { } finally {
loading.value = false loading.value = false
} }
@@ -93,7 +93,7 @@ const handleCreate = async () => {
editTemplateModalOpen.value = false editTemplateModalOpen.value = false
await refreshData() await refreshData()
} catch (e) { } catch (e) {
toast.add({ title: 'Fehler', description: 'Konnte nicht erstellt werden.', color: 'rose' }) toast.add({ title: 'Fehler', description: 'Konnte nicht erstellt werden.', color: 'error' })
} finally { } finally {
isSaving.value = false isSaving.value = false
} }
@@ -109,7 +109,7 @@ const handleUpdate = async () => {
editTemplateModalOpen.value = false editTemplateModalOpen.value = false
await refreshData() await refreshData()
} catch (e) { } catch (e) {
toast.add({title: 'Fehler', description: 'Konnte nicht gespeichert werden.', color: 'rose'}) toast.add({title: 'Fehler', description: 'Konnte nicht gespeichert werden.', color: 'error'})
} finally { } finally {
isSaving.value = false isSaving.value = false
} }
@@ -122,7 +122,7 @@ const handleArchive = async (row) => {
await refreshData() await refreshData()
} catch (e) { } catch (e) {
toast.add({title: 'Fehler', description: 'Konnte nicht archiviert werden.', color: 'rose'}) toast.add({title: 'Fehler', description: 'Konnte nicht archiviert werden.', color: 'error'})
} }
} }
@@ -160,45 +160,45 @@ const getDocLabel = (type) => {
<UTable <UTable
class="mt-3" class="mt-3"
:rows="texttemplates" :data="texttemplates"
:loading="loading" :loading="loading"
v-model:expand="expand" v-model:expand="expand"
:empty-state="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }" :empty="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
:columns="[ :columns="normalizeTableColumns([
{ key: 'name', label: 'Bezeichnung' }, { key: 'name', label: 'Bezeichnung' },
{ key: 'documentType', label: 'Verwendung' }, { key: 'documentType', label: 'Verwendung' },
{ key: 'pos', label: 'Position' }, { key: 'pos', label: 'Position' },
{ key: 'default', label: 'Standard' }, { key: 'default', label: 'Standard' },
{ key: 'actions', label: '' } { key: 'actions', label: '' }
]" ])"
> >
<template #name-data="{ row }"> <template #name-cell="{ row }">
<span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span> <span class="font-medium text-gray-900 dark:text-white">{{ row.original.name }}</span>
</template> </template>
<template #documentType-data="{ row }"> <template #documentType-cell="{ row }">
<UBadge color="gray" variant="soft"> <UBadge color="gray" variant="soft">
{{ getDocLabel(row.documentType) }} {{ getDocLabel(row.original.documentType) }}
</UBadge> </UBadge>
</template> </template>
<template #pos-data="{ row }"> <template #pos-cell="{ row }">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UIcon <UIcon
:name="row.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'" :name="row.original.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'"
class="w-4 h-4 text-gray-500" class="w-4 h-4 text-gray-500"
/> />
<span>{{ row.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span> <span>{{ row.original.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
</div> </div>
</template> </template>
<template #default-data="{ row }"> <template #default-cell="{ row }">
<UIcon v-if="row.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/> <UIcon v-if="row.original.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
<span v-else class="text-gray-400">-</span> <span v-else class="text-gray-400">-</span>
</template> </template>
<template #actions-data="{ row }"> <template #actions-cell="{ row }">
<UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row)"/> <UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row.original)"/>
</template> </template>
<template #expand="{ row }"> <template #expand="{ row }">
@@ -206,13 +206,13 @@ const getDocLabel = (type) => {
<div class="mb-4"> <div class="mb-4">
<h4 class="text-sm font-bold uppercase text-gray-500 mb-1">Vorschau</h4> <h4 class="text-sm font-bold uppercase text-gray-500 mb-1">Vorschau</h4>
<p class="text-gray-800 dark:text-gray-200 whitespace-pre-line p-3 bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 text-sm"> <p class="text-gray-800 dark:text-gray-200 whitespace-pre-line p-3 bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 text-sm">
{{ row.text }} {{ row.original.text }}
</p> </p>
</div> </div>
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<ButtonWithConfirm <ButtonWithConfirm
color="rose" color="error"
variant="soft" variant="soft"
icon="i-heroicons-archive-box" icon="i-heroicons-archive-box"
@confirmed="handleArchive(row)" @confirmed="handleArchive(row)"
@@ -236,26 +236,27 @@ const getDocLabel = (type) => {
</UTable> </UTable>
</UDashboardPanelContent> </UDashboardPanelContent>
<UModal v-model="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }"> <UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex justify-between items-center"> <template #header>
<h3 class="text-lg font-semibold"> <div class="flex justify-between items-center">
{{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }} <h3 class="text-lg font-semibold">
</h3> {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/> </h3>
</div> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
</template> </div>
</template>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-4"> <div class="lg:col-span-2 space-y-4">
<UFormGroup label="Bezeichnung" required> <UFormField label="Bezeichnung" required>
<UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/> <UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/>
</UFormGroup> </UFormField>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<UFormGroup label="Dokumententyp" required> <UFormField label="Dokumententyp" required>
<USelectMenu <USelectMenu
v-model="itemInfo.documentType" v-model="itemInfo.documentType"
:options="Object.keys(dataStore.documentTypesForCreation || {}) :options="Object.keys(dataStore.documentTypesForCreation || {})
@@ -264,9 +265,9 @@ const getDocLabel = (type) => {
option-attribute="label" option-attribute="label"
value-attribute="key" value-attribute="key"
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Position" required> <UFormField label="Position" required>
<USelectMenu <USelectMenu
v-model="itemInfo.pos" v-model="itemInfo.pos"
:options="[ :options="[
@@ -276,10 +277,10 @@ const getDocLabel = (type) => {
option-attribute="label" option-attribute="label"
value-attribute="key" value-attribute="key"
/> />
</UFormGroup> </UFormField>
</div> </div>
<UFormGroup label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen."> <UFormField label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
<UTextarea <UTextarea
ref="textareaRef" ref="textareaRef"
v-model="itemInfo.text" v-model="itemInfo.text"
@@ -287,7 +288,7 @@ const getDocLabel = (type) => {
placeholder="Sehr geehrte Damen und Herren..." placeholder="Sehr geehrte Damen und Herren..."
class="font-mono text-sm" class="font-mono text-sm"
/> />
</UFormGroup> </UFormField>
<UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/> <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
</div> </div>
@@ -342,34 +343,35 @@ const getDocLabel = (type) => {
</div> </div>
<template #footer> <template #footer>
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false"> <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
Abbrechen Abbrechen
</UButton> </UButton>
<UButton <UButton
v-if="!itemInfo.id" v-if="!itemInfo.id"
color="primary" color="primary"
:loading="isSaving" :loading="isSaving"
@click="handleCreate" @click="handleCreate"
icon="i-heroicons-plus" icon="i-heroicons-plus"
> >
Erstellen Erstellen
</UButton> </UButton>
<UButton <UButton
v-else v-else
color="primary" color="primary"
:loading="isSaving" :loading="isSaving"
@click="handleUpdate" @click="handleUpdate"
icon="i-heroicons-check" icon="i-heroicons-check"
> >
Speichern Speichern
</UButton> </UButton>
</div> </div>
</template> </template>
</UCard> </UCard>
</template>
</UModal> </UModal>
</template> </template>

100
frontend/pages/staff/profiles/[id].vue
View File

@@ -179,99 +179,99 @@ onMounted(fetchProfile)
</div> </div>
</div> </div>
<UDivider label="Persönliche Daten" /> <USeparator label="Persönliche Daten" />
<UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4"> <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<UFormGroup label="Vorname"> <UFormField label="Vorname">
<UInput v-model="profile.first_name" /> <UInput v-model="profile.first_name" />
</UFormGroup> </UFormField>
<UFormGroup label="Nachname"> <UFormField label="Nachname">
<UInput v-model="profile.last_name" /> <UInput v-model="profile.last_name" />
</UFormGroup> </UFormField>
<UFormGroup label="E-Mail"> <UFormField label="E-Mail">
<UInput v-model="profile.email" /> <UInput v-model="profile.email" />
</UFormGroup> </UFormField>
<UFormGroup label="Telefon (Mobil)"> <UFormField label="Telefon (Mobil)">
<UInput v-model="profile.mobile_tel" /> <UInput v-model="profile.mobile_tel" />
</UFormGroup> </UFormField>
<UFormGroup label="Telefon (Festnetz)"> <UFormField label="Telefon (Festnetz)">
<UInput v-model="profile.fixed_tel" /> <UInput v-model="profile.fixed_tel" />
</UFormGroup> </UFormField>
<UFormGroup label="Geburtstag"> <UFormField label="Geburtstag">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput type="date" v-model="profile.birthday" class="flex-1" /> <UInput type="date" v-model="profile.birthday" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('birthday')" /> <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('birthday')" />
</div> </div>
</UFormGroup> </UFormField>
</UForm> </UForm>
</UCard> </UCard>
<UCard v-if="!pending && profile" class="mt-3"> <UCard v-if="!pending && profile" class="mt-3">
<UDivider label="Vertragsinformationen" /> <USeparator label="Vertragsinformationen" />
<UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4"> <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<UFormGroup label="Vertragsart"> <UFormField label="Vertragsart">
<UInput v-model="profile.contract_type"/> <UInput v-model="profile.contract_type"/>
</UFormGroup> </UFormField>
<UFormGroup label="Status"> <UFormField label="Status">
<UInput v-model="profile.status"/> <UInput v-model="profile.status"/>
</UFormGroup> </UFormField>
<UFormGroup label="Position"> <UFormField label="Position">
<UInput v-model="profile.position"/> <UInput v-model="profile.position"/>
</UFormGroup> </UFormField>
<UFormGroup label="Qualifikation"> <UFormField label="Qualifikation">
<UInput v-model="profile.qualification"/> <UInput v-model="profile.qualification"/>
</UFormGroup> </UFormField>
<UFormGroup label="Eintrittsdatum"> <UFormField label="Eintrittsdatum">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UInput type="date" v-model="profile.entry_date" class="flex-1" /> <UInput type="date" v-model="profile.entry_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('entry_date')" /> <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('entry_date')" />
</div> </div>
</UFormGroup> </UFormField>
<UFormGroup label="Wöchentliche Arbeitszeit (Std)"> <UFormField label="Wöchentliche Arbeitszeit (Std)">
<UInput type="number" v-model="profile.weekly_working_hours" /> <UInput type="number" v-model="profile.weekly_working_hours" />
</UFormGroup> </UFormField>
<UFormGroup label="Bezahlte Urlaubstage (Jahr)"> <UFormField label="Bezahlte Urlaubstage (Jahr)">
<UInput type="number" v-model="profile.annual_paid_leave_days" /> <UInput type="number" v-model="profile.annual_paid_leave_days" />
</UFormGroup> </UFormField>
<UFormGroup label="Aktiv"> <UFormField label="Aktiv">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<UToggle v-model="profile.active" color="primary" /> <USwitch v-model="profile.active" color="primary" />
<span class="text-sm text-gray-600"> <span class="text-sm text-gray-600">
</span> </span>
</div> </div>
</UFormGroup> </UFormField>
</UForm> </UForm>
</UCard> </UCard>
<UCard v-if="!pending && profile" class="mt-3"> <UCard v-if="!pending && profile" class="mt-3">
<UDivider label="Adresse & Standort" /> <USeparator label="Adresse & Standort" />
<UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4"> <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<UFormGroup label="Straße und Hausnummer"> <UFormField label="Straße und Hausnummer">
<UInput v-model="profile.address_street"/> <UInput v-model="profile.address_street"/>
</UFormGroup> </UFormField>
<UFormGroup label="PLZ"> <UFormField label="PLZ">
<UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/> <UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
</UFormGroup> </UFormField>
<UFormGroup label="Ort"> <UFormField label="Ort">
<UInput v-model="profile.address_city"/> <UInput v-model="profile.address_city"/>
</UFormGroup> </UFormField>
<UFormGroup label="Bundesland"> <UFormField label="Bundesland">
<USelectMenu <USelectMenu
v-model="profile.state_code" v-model="profile.state_code"
:options="bundeslaender" :options="bundeslaender"
@@ -279,13 +279,13 @@ onMounted(fetchProfile)
option-attribute="name" option-attribute="name"
placeholder="Bundesland auswählen" placeholder="Bundesland auswählen"
/> />
</UFormGroup> </UFormField>
</UForm> </UForm>
</UCard> </UCard>
<UCard v-if="!pending && profile" class="mt-3"> <UCard v-if="!pending && profile" class="mt-3">
<UDivider label="Wöchentliche Arbeitsstunden" /> <USeparator label="Wöchentliche Arbeitsstunden" />
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div <div
@@ -313,23 +313,23 @@ onMounted(fetchProfile)
</UCard> </UCard>
<UCard v-if="!pending && profile" class="mt-3"> <UCard v-if="!pending && profile" class="mt-3">
<UDivider label="Sonstiges" /> <USeparator label="Sonstiges" />
<UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4"> <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<UFormGroup label="Kleidergröße (Oberteil)"> <UFormField label="Kleidergröße (Oberteil)">
<UInput v-model="profile.clothing_size_top" /> <UInput v-model="profile.clothing_size_top" />
</UFormGroup> </UFormField>
<UFormGroup label="Kleidergröße (Hose)"> <UFormField label="Kleidergröße (Hose)">
<UInput v-model="profile.clothing_size_bottom" /> <UInput v-model="profile.clothing_size_bottom" />
</UFormGroup> </UFormField>
<UFormGroup label="Schuhgröße"> <UFormField label="Schuhgröße">
<UInput v-model="profile.clothing_size_shoe" /> <UInput v-model="profile.clothing_size_shoe" />
</UFormGroup> </UFormField>
<UFormGroup label="Token-ID"> <UFormField label="Token-ID">
<UInput v-model="profile.token_id" /> <UInput v-model="profile.token_id" />
</UFormGroup> </UFormField>
</UForm> </UForm>
</UCard> </UCard>

6
frontend/pages/staff/profiles/index.vue
View File

@@ -39,9 +39,9 @@
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UTable <UTable
:rows="items" :data="items"
:columns="columns" :columns="normalizeTableColumns(columns)"
@select="(i) => navigateTo(`/staff/profiles/${i.id}`)" :on-select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
> >
</UTable> </UTable>

122
frontend/pages/staff/time/[id]/evaluate.vue
View File

@@ -29,7 +29,16 @@ const platformIsNative = ref(false)
const selectedPresetRange = ref("Dieser Monat bis heute") const selectedPresetRange = ref("Dieser Monat bis heute")
const selectedStartDay = ref("") const selectedStartDay = ref("")
const selectedEndDay = ref("") const selectedEndDay = ref("")
const openTab = ref(0) const openTab = ref("0")
const presetRangeItems = [
'Dieser Monat bis heute',
'Diese Woche',
'Dieser Monat',
'Dieses Jahr',
'Letzte Woche',
'Letzter Monat',
'Letztes Jahr'
]
const showDocument = ref(false) const showDocument = ref(false)
const uri = ref("") const uri = ref("")
@@ -131,7 +140,7 @@ async function loadWorkingTimeInfo() {
workingTimeInfo.value = data; workingTimeInfo.value = data;
openTab.value = 0 openTab.value = "0"
} }
// 📄 PDF generieren // 📄 PDF generieren
@@ -172,12 +181,12 @@ async function saveFile() {
toast.add({title:"Auswertung erfolgreich gespeichert"}) toast.add({title:"Auswertung erfolgreich gespeichert"})
fileSaved.value = true fileSaved.value = true
} catch (error) { } catch (error) {
toast.add({title:"Fehler beim Speichern der Auswertung", color: "rose"}) toast.add({title:"Fehler beim Speichern der Auswertung", color: "error"})
} }
} }
async function onTabChange(index: number) { async function onTabChange(index: string | number) {
if (index === 1) await generateDocument() if (String(index) === "1") await generateDocument()
} }
// Initialisierung // Initialisierung
@@ -204,52 +213,44 @@ await setupPage()
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardToolbar> <UDashboardToolbar class="py-3">
<template #left> <template #left>
<UFormGroup label="Zeitraum:"> <UFormField label="Zeitraum:">
<USelectMenu <USelectMenu
:options="[ :items="presetRangeItems"
'Dieser Monat bis heute',
'Diese Woche',
'Dieser Monat',
'Dieses Jahr',
'Letzte Woche',
'Letzter Monat',
'Letztes Jahr'
]"
v-model="selectedPresetRange" v-model="selectedPresetRange"
@change="changeRange" @change="changeRange"
/> />
</UFormGroup> </UFormField>
<UFormGroup label="Start:"> <UFormField label="Start:">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :content="{ side: 'bottom', align: 'start' }">
<UButton <UButton
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="selectedStartDay ? $dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum wählen'" :label="selectedStartDay ? $dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum wählen'"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" /> <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
<UFormGroup label="Ende:"> <UFormField label="Ende:">
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :content="{ side: 'bottom', align: 'start' }">
<UButton <UButton
icon="i-heroicons-calendar-days-20-solid" icon="i-heroicons-calendar-days-20-solid"
:label="selectedEndDay ? $dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum wählen'" :label="selectedEndDay ? $dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum wählen'"
/> />
<template #panel="{ close }"> <template #content>
<LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" /> <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
</template> </template>
</UPopover> </UPopover>
</UFormGroup> </UFormField>
</template> </template>
<template #right> <template #right>
<UTooltip <UTooltip
:text="fileSaved ? 'Bericht bereits gespeichert' : 'Bericht speichern'" :text="fileSaved ? 'Bericht bereits gespeichert' : 'Bericht speichern'"
v-if="openTab === 1 && uri" v-if="openTab === '1' && uri"
> >
<UButton <UButton
icon="i-mdi-content-save" icon="i-mdi-content-save"
@@ -265,9 +266,9 @@ await setupPage()
<UTabs <UTabs
:items="[{ label: 'Information' }, { label: 'Bericht' }]" :items="[{ label: 'Information' }, { label: 'Bericht' }]"
v-model="openTab" v-model="openTab"
@change="onTabChange" @update:model-value="onTabChange"
> >
<template #item="{ item }"> <template #content="{ item }">
<div v-if="item.label === 'Information'"> <div v-if="item.label === 'Information'">
<UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5"> <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5">
@@ -294,39 +295,39 @@ await setupPage()
<UDashboardPanel> <UDashboardPanel>
<UTable <UTable
v-if="workingTimeInfo" v-if="workingTimeInfo"
:rows="workingTimeInfo.spans" :data="workingTimeInfo.spans"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
:columns="[ :columns="normalizeTableColumns([
{ key: 'status', label: 'Status' }, { key: 'status', label: 'Status' },
{ key: 'startedAt', label: 'Start' }, { key: 'startedAt', label: 'Start' },
{ key: 'endedAt', label: 'Ende' }, { key: 'endedAt', label: 'Ende' },
{ key: 'duration', label: 'Dauer' }, { key: 'duration', label: 'Dauer' },
{ key: 'type', label: 'Typ' } { key: 'type', label: 'Typ' }
]" ])"
@select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)" :on-select="(row) => router.push(`/workingtimes/edit/${row.original.sourceEventIds[0]}`)"
> >
<template #status-data="{row}"> <template #status-cell="{ row }">
<span v-if="row.status === 'approved'" class="text-primary-500">Genehmigt</span> <span v-if="row.original.status === 'approved'" class="text-primary-500">Genehmigt</span>
<span v-else-if="row.status === 'submitted'" class="text-cyan-500">Eingereicht</span> <span v-else-if="row.original.status === 'submitted'" class="text-cyan-500">Eingereicht</span>
<span v-else-if="row.status === 'factual'" class="text-gray-500">Faktisch</span> <span v-else-if="row.original.status === 'factual'" class="text-gray-500">Faktisch</span>
<span v-else-if="row.status === 'draft'" class="text-red-500">Entwurf</span> <span v-else-if="row.original.status === 'draft'" class="text-error-500">Entwurf</span>
<span v-else>{{ row.status }}</span> <span v-else>{{ row.original.status }}</span>
</template> </template>
<template #startedAt-data="{ row }"> <template #startedAt-cell="{ row }">
{{ $dayjs(row.startedAt).format('HH:mm DD.MM.YY') }} Uhr {{ $dayjs(row.original.startedAt).format('HH:mm DD.MM.YY') }} Uhr
</template> </template>
<template #endedAt-data="{ row }"> <template #endedAt-cell="{ row }">
{{ $dayjs(row.endedAt).format('HH:mm DD.MM.YY') }} Uhr {{ $dayjs(row.original.endedAt).format('HH:mm DD.MM.YY') }} Uhr
</template> </template>
<template #duration-data="{ row }"> <template #duration-cell="{ row }">
{{ formatSpanDuration(row.startedAt, row.endedAt) }} {{ formatSpanDuration(row.original.startedAt, row.original.endedAt) }}
</template> </template>
<template #type-data="{ row }"> <template #type-cell="{ row }">
{{ row.type.charAt(0).toUpperCase() + row.type.slice(1).replace('_', ' ') }} {{ row.original.type.charAt(0).toUpperCase() + row.original.type.slice(1).replace('_', ' ') }}
</template> </template>
</UTable> </UTable>
</UDashboardPanel> </UDashboardPanel>
@@ -360,15 +361,7 @@ await setupPage()
<div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900"> <div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900">
<USelectMenu <USelectMenu
v-model="selectedPresetRange" v-model="selectedPresetRange"
:options="[ :items="presetRangeItems"
'Dieser Monat bis heute',
'Diese Woche',
'Dieser Monat',
'Dieses Jahr',
'Letzte Woche',
'Letzter Monat',
'Letztes Jahr'
]"
@change="changeRange" @change="changeRange"
placeholder="Zeitraum wählen" placeholder="Zeitraum wählen"
class="w-full" class="w-full"
@@ -377,13 +370,13 @@ await setupPage()
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<p class="text-xs text-gray-500 mb-1">Start</p> <p class="text-xs text-gray-500 mb-1">Start</p>
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :content="{ side: 'bottom', align: 'start' }">
<UButton <UButton
icon="i-heroicons-calendar" icon="i-heroicons-calendar"
class="w-full" class="w-full"
:label="$dayjs(selectedStartDay).format('DD.MM.YYYY')" :label="$dayjs(selectedStartDay).format('DD.MM.YYYY')"
/> />
<template #panel> <template #content>
<LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" /> <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
</template> </template>
</UPopover> </UPopover>
@@ -391,13 +384,13 @@ await setupPage()
<div> <div>
<p class="text-xs text-gray-500 mb-1">Ende</p> <p class="text-xs text-gray-500 mb-1">Ende</p>
<UPopover :popper="{ placement: 'bottom-start' }"> <UPopover :content="{ side: 'bottom', align: 'start' }">
<UButton <UButton
icon="i-heroicons-calendar" icon="i-heroicons-calendar"
class="w-full" class="w-full"
:label="$dayjs(selectedEndDay).format('DD.MM.YYYY')" :label="$dayjs(selectedEndDay).format('DD.MM.YYYY')"
/> />
<template #panel> <template #content>
<LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" /> <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
</template> </template>
</UPopover> </UPopover>
@@ -408,12 +401,11 @@ await setupPage()
<UTabs <UTabs
:items="[{ label: 'Information' }, { label: 'Bericht' }]" :items="[{ label: 'Information' }, { label: 'Bericht' }]"
v-model="openTab" v-model="openTab"
@change="onTabChange" @update:model-value="onTabChange"
class="mt-3 mx-3" class="mt-3 mx-3"
> >
<template #item="{ item }"> <template #content="{ item }">
<div v-if="item.label === 'Information'" class="space-y-4">
<div v-if="item.label === 'Information'" class="space-y-4">
<UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3"> <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3">
<template #header> <template #header>
@@ -459,7 +451,7 @@ await setupPage()
<div v-else-if="item.label === 'Bericht'"> <div v-else-if="item.label === 'Bericht'">
<UButton <UButton
v-if="uri && !fileSaved" v-if="openTab === '1' && uri && !fileSaved"
icon="i-mdi-content-save" icon="i-mdi-content-save"
color="primary" color="primary"
class="w-full mb-3" class="w-full mb-3"

140
frontend/pages/staff/time/index.vue
View File

@@ -32,6 +32,10 @@ const rejectReason = ref("")
const users = ref([]) const users = ref([])
const selectedUser = ref(auth.user.id) const selectedUser = ref(auth.user.id)
const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all')) const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
const userItems = computed(() => users.value.map(u => ({
label: u.full_name || u.email,
value: u.user_id
})))
// DATA // DATA
const entries = ref([]) const entries = ref([])
@@ -61,7 +65,7 @@ const typeLabel = {
const typeColor = { const typeColor = {
work: "gray", work: "gray",
vacation: "yellow", vacation: "yellow",
sick: "rose", sick: "error",
holiday: "blue", holiday: "blue",
other: "gray" other: "gray"
} }
@@ -130,7 +134,7 @@ async function confirmReject() {
showRejectModal.value = false showRejectModal.value = false
await load() await load()
} catch (e) { } catch (e) {
toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' }) toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'error' })
} finally { } finally {
loading.value = false loading.value = false
entryToReject.value = null entryToReject.value = null
@@ -167,10 +171,10 @@ onMounted(async () => {
<div v-if="canViewAll" class="flex items-center gap-2"> <div v-if="canViewAll" class="flex items-center gap-2">
<USelectMenu <USelectMenu
v-model="selectedUser" v-model="selectedUser"
:options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))" :items="userItems"
placeholder="Benutzer auswählen" placeholder="Benutzer auswählen"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
class="min-w-[220px]" class="min-w-[220px]"
:clearable="false" :clearable="false"
/> />
@@ -211,11 +215,11 @@ onMounted(async () => {
</div> </div>
<template v-if="isViewingSelf"> <template v-if="isViewingSelf">
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" /> <UButton v-if="active" color="error" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" /> <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" />
</template> </template>
<template v-else-if="active && canViewAll"> <template v-else-if="active && canViewAll">
<UButton color="red" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" /> <UButton color="error" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
</template> </template>
<UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" /> <UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
@@ -227,8 +231,8 @@ onMounted(async () => {
<UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }"> <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
<UTable <UTable
:rows="entries" :data="entries"
:columns="[ :columns="normalizeTableColumns([
{ key: 'actions', label: 'Aktionen', class: 'w-32' }, { key: 'actions', label: 'Aktionen', class: 'w-32' },
{ key: 'state', label: 'Status' }, { key: 'state', label: 'Status' },
{ key: 'started_at', label: 'Start' }, { key: 'started_at', label: 'Start' },
@@ -236,50 +240,50 @@ onMounted(async () => {
{ key: 'duration_minutes', label: 'Dauer' }, { key: 'duration_minutes', label: 'Dauer' },
{ key: 'type', label: 'Typ' }, { key: 'type', label: 'Typ' },
{ key: 'description', label: 'Beschreibung' }, { key: 'description', label: 'Beschreibung' },
]" ])"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
> >
<template #state-data="{ row }"> <template #state-cell="{ row }">
<UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge> <UBadge v-if="row.original.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
<UBadge v-else-if="row.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge> <UBadge v-else-if="row.original.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
<UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge> <UBadge v-else-if="row.original.state === 'rejected'" color="error" variant="subtle">Abgelehnt</UBadge>
<UBadge v-else color="gray" variant="subtle">Entwurf</UBadge> <UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
</template> </template>
<template #type-data="{ row }"> <template #type-cell="{ row }">
<UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge> <UBadge :color="typeColor[row.original.type] || 'gray'" variant="soft">{{ typeLabel[row.original.type] || row.original.type }}</UBadge>
</template> </template>
<template #started_at-data="{ row }"> <template #started_at-cell="{ row }">
<span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span> <span v-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span> <span v-else>{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY HH:mm") }}</span>
</template> </template>
<template #stopped_at-data="{ row }"> <template #stopped_at-cell="{ row }">
<span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span> <span v-if="!row.original.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
<span v-else-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}</span> <span v-else-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span> <span v-else>{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY HH:mm") }}</span>
</template> </template>
<template #duration_minutes-data="{ row }"> <template #duration_minutes-cell="{ row }">
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }} {{ row.original.duration_minutes ? useFormatDuration(row.original.duration_minutes) : "-" }}
</template> </template>
<template #actions-data="{ row }"> <template #actions-cell="{ row }">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at"> <UTooltip text="Einreichen" v-if="(row.original.state === 'draft' || row.original.state === 'factual') && row.original.stopped_at">
<UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" /> <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row.original)" :loading="loading" />
</UTooltip> </UTooltip>
<UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll"> <UTooltip text="Genehmigen" v-if="row.original.state === 'submitted' && canViewAll">
<UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" /> <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row.original)" :loading="loading" />
</UTooltip> </UTooltip>
<UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll"> <UTooltip text="Ablehnen" v-if="(row.original.state === 'submitted' || row.original.state === 'approved') && canViewAll">
<UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" /> <UButton size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row.original)" :loading="loading" />
</UTooltip> </UTooltip>
<UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)"> <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.original.state)">
<UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" /> <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row.original)" />
</UTooltip> </UTooltip>
</div> </div>
</template> </template>
<template #description-data="{ row }"> <template #description-cell="{ row }">
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span> <span v-if="row.original.type === 'vacation'">{{ row.original.vacation_reason }}</span>
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span> <span v-else-if="row.original.type === 'sick'">{{ row.original.sick_reason }}</span>
<span v-else>{{row.description}}</span> <span v-else>{{ row.original.description }}</span>
</template> </template>
</UTable> </UTable>
</UCard> </UCard>
@@ -334,7 +338,7 @@ onMounted(async () => {
<UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge> <UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
<UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge> <UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
<UBadge v-else-if="entry.state === 'rejected'" color="red" size="xs" variant="solid">Abgelehnt</UBadge> <UBadge v-else-if="entry.state === 'rejected'" color="error" size="xs" variant="solid">Abgelehnt</UBadge>
<UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge> <UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
</div> </div>
</div> </div>
@@ -363,7 +367,7 @@ onMounted(async () => {
<UButton <UButton
v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll" v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen" size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
@click="openRejectModal(entry)" :loading="loading" @click="openRejectModal(entry)" :loading="loading"
/> />
@@ -403,7 +407,7 @@ onMounted(async () => {
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<template v-if="isViewingSelf"> <template v-if="isViewingSelf">
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" @click="handleStop" /> <UButton v-if="active" color="error" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" /> <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
</template> </template>
</div> </div>
@@ -422,7 +426,7 @@ onMounted(async () => {
</div> </div>
<UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge> <UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
<UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge> <UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
<UBadge v-else-if="row.state === 'rejected'" color="red">Abgelehnt</UBadge> <UBadge v-else-if="row.state === 'rejected'" color="error">Abgelehnt</UBadge>
<UBadge v-else color="gray">Entwurf</UBadge> <UBadge v-else color="gray">Entwurf</UBadge>
</div> </div>
<p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p> <p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p>
@@ -444,30 +448,32 @@ onMounted(async () => {
:default-user-id="selectedUser" :default-user-id="selectedUser"
/> />
<UModal v-model="showRejectModal"> <UModal v-model:open="showRejectModal">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <template #content>
<template #header> <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <div class="flex items-center justify-between">
Zeiteintrag ablehnen <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
</h3> Zeiteintrag ablehnen
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" /> </h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
</div>
</template>
<div class="space-y-4">
<p class="text-sm text-gray-500">
Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
</p>
<UFormField label="Grund (optional)" name="reason">
<UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
</UFormField>
</div> </div>
</template> <template #footer>
<div class="space-y-4"> <div class="flex justify-end gap-2">
<p class="text-sm text-gray-500"> <UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt. <UButton color="error" :loading="loading" @click="confirmReject">Bestätigen</UButton>
</p> </div>
<UFormGroup label="Grund (optional)" name="reason"> </template>
<UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus /> </UCard>
</UFormGroup> </template>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
<UButton color="red" :loading="loading" @click="confirmReject">Bestätigen</UButton>
</div>
</template>
</UCard>
</UModal> </UModal>
</template> </template>

239
frontend/pages/standardEntity/[type]/index.vue
View File

@@ -73,6 +73,24 @@ const sort = ref({
column: dataType.sortColumn || "created_at", column: dataType.sortColumn || "created_at",
direction: 'desc' direction: 'desc'
}) })
const sorting = computed({
get: () => [{
id: sort.value.column,
desc: sort.value.direction === 'desc'
}],
set: (value) => {
const nextSort = Array.isArray(value) ? value[0] : undefined
if (!nextSort?.id) {
return
}
sort.value = {
column: nextSort.id,
direction: nextSort.desc ? 'desc' : 'asc'
}
setupPage()
}
})
const columnsToFilter = ref({}) const columnsToFilter = ref({})
@@ -282,6 +300,19 @@ const handleFilterChange = async (action,column) => {
setupPage() setupPage()
} }
const truncateValue = (value, maxLength) => {
if (value === null || value === undefined || value === '') {
return '\u00A0'
}
const stringValue = String(value)
if (!maxLength || stringValue.length <= maxLength) {
return stringValue
}
return `${stringValue.substring(0, maxLength)}...`
}
</script> </script>
@@ -313,7 +344,7 @@ const handleFilterChange = async (action,column) => {
<UButton <UButton
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="outline" variant="outline"
color="rose" color="error"
@click="clearSearchString()" @click="clearSearchString()"
/> />
@@ -336,10 +367,10 @@ const handleFilterChange = async (action,column) => {
<template #left> <template #left>
<UTooltip :text="`${dataType.label} pro Seite`"> <UTooltip :text="`${dataType.label} pro Seite`">
<USelectMenu <USelectMenu
:options="[{value:10},{value:15, disabled: itemsMeta.total < 15},{value:25, disabled: itemsMeta.total < 25},{value:50, disabled: itemsMeta.total < 50},{value:100, disabled: itemsMeta.total < 100},{value:250, disabled: itemsMeta.total < 250}]" :items="[{value:10},{value:15, disabled: itemsMeta.total < 15},{value:25, disabled: itemsMeta.total < 25},{value:50, disabled: itemsMeta.total < 50},{value:100, disabled: itemsMeta.total < 100},{value:250, disabled: itemsMeta.total < 250}]"
v-model="pageLimit" v-model="pageLimit"
value-attribute="value" value-key="value"
option-attribute="value" label-key="value"
@change="setupPage" @change="setupPage"
/> />
</UTooltip> </UTooltip>
@@ -363,15 +394,15 @@ const handleFilterChange = async (action,column) => {
<USelectMenu <USelectMenu
v-model="selectedColumns" v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid" icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)" :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple multiple
class="hidden lg:block" class="hidden lg:block"
by="key" by="key"
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'" :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
@change="tempStore.modifyColumns(type,selectedColumns)" @change="tempStore.modifyColumns(type,selectedColumns)"
> >
<template #label> <template #default>
Spalten Spalten
</template> </template>
</USelectMenu> </USelectMenu>
@@ -382,18 +413,15 @@ const handleFilterChange = async (action,column) => {
<div v-if="!platformIsNative"> <div v-if="!platformIsNative">
<UTable <UTable
:loading="loading" :loading="loading"
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }" v-model:sorting="sorting"
sort-mode="manual"
v-model:sort="sort"
@update:sort="setupPage"
v-if="dataType && columns && items.length > 0 && !loading" v-if="dataType && columns && items.length > 0 && !loading"
:rows="items" :data="items"
:columns="columns" :columns="normalizeTableColumns(columns)"
class="w-full" class="w-full"
style="height: 85dvh" style="height: 85dvh"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) " :on-select="(row) => router.push(`/standardEntity/${type}/show/${row.original.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }" :empty="`Keine ${dataType.label} anzuzeigen`"
> >
<template <template
v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)" v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
@@ -414,21 +442,20 @@ const handleFilterChange = async (action,column) => {
:text="!columnsToFilter[column.key]?.length > 0 ? `Keine Einträge für ${column.label} verfügbar` : `${column.label} Spalte nach Einträgen filtern`" :text="!columnsToFilter[column.key]?.length > 0 ? `Keine Einträge für ${column.label} verfügbar` : `${column.label} Spalte nach Einträgen filtern`"
> >
<USelectMenu <USelectMenu
:options="itemsMeta?.distinctValues?.[column.key]" :items="(itemsMeta?.distinctValues?.[column.key] || []).map(value => ({ label: value, value }))"
v-model="columnsToFilter[column.key]" v-model="columnsToFilter[column.key]"
multiple multiple
@change="handleFilterChange('change', column.key)" @change="handleFilterChange('change', column.key)"
searchable :search-input="{ placeholder: 'Suche...' }"
searchable-placeholder="Suche..." value-key="value"
:search-attributes="[column.key]" label-key="label"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
clear-search-on-close
> >
<template #empty> <template #empty>
Keine Einträge in der Spalte {{column.label}} Keine Einträge in der Spalte {{column.label}}
</template> </template>
<template #default="{open}"> <template #default="slotProps">
<UButton <UButton
:disabled="!columnsToFilter[column.key]?.length > 0" :disabled="!columnsToFilter[column.key]?.length > 0"
:variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'" :variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'"
@@ -436,7 +463,7 @@ const handleFilterChange = async (action,column) => {
> >
<span class="truncate">{{ column.label }}</span> <span class="truncate">{{ column.label }}</span>
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" /> <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[slotProps?.open && 'transform rotate-90']" />
</UButton> </UButton>
</template> </template>
@@ -458,7 +485,7 @@ const handleFilterChange = async (action,column) => {
<UButton <UButton
@click="handleFilterChange('reset',column.key)" @click="handleFilterChange('reset',column.key)"
variant="outline" variant="outline"
color="rose" color="error"
> >
X X
</UButton> </UButton>
@@ -468,48 +495,54 @@ const handleFilterChange = async (action,column) => {
</InputGroup> </InputGroup>
</template> </template>
<template #name-data="{row}"> <template #name-cell="{row}">
<span <span
v-if="row.id === items[selectedItem].id" v-if="row.original.id === items[selectedItem]?.id"
class="text-primary-500 font-bold"> class="block truncate text-primary-500 font-bold">
<UTooltip <UTooltip
:text="row.name" :text="row.original.name"
> >
{{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}} <span class="block truncate">
{{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
</span>
</UTooltip> </span> </UTooltip> </span>
<span v-else> <span v-else class="block truncate">
<UTooltip <UTooltip
:text="row.name" :text="row.original.name"
> >
{{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}} <span class="block truncate">
{{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
</span>
</UTooltip> </UTooltip>
</span> </span>
</template> </template>
<template #fullName-data="{row}"> <template #fullName-cell="{row}">
<span <span
v-if="row.id === items[selectedItem].id" v-if="row.original.id === items[selectedItem]?.id"
class="text-primary-500 font-bold">{{row.fullName}} class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
</span> </span>
<span v-else> <span v-else class="block truncate">
{{row.fullName}} {{ row.original.fullName }}
</span> </span>
</template> </template>
<template #licensePlate-data="{row}"> <template #licensePlate-cell="{row}">
<span <span
v-if="row.id === items[selectedItem].id" v-if="row.original.id === items[selectedItem]?.id"
class="text-primary-500 font-bold">{{row.licensePlate}} class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
</span> </span>
<span v-else> <span v-else class="block truncate">
{{row.licensePlate}} {{ row.original.licensePlate }}
</span> </span>
</template> </template>
<template <template
v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)" v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
v-slot:[`${column.key}-data`]="{row}"> v-slot:[`${column.key}-cell`]="{row}">
<component v-if="column.component" :is="column.component" :row="row"></component> <component v-if="column.component" :is="column.component" :row="row.original"></component>
<span v-else-if="row[column.key]"> <span v-else-if="row.original[column.key]" class="block truncate">
<UTooltip :text="row[column.key]"> <UTooltip :text="String(row.original[column.key])">
{{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}} <span class="block truncate">
{{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
</span>
</UTooltip> </UTooltip>
</span> </span>
@@ -550,7 +583,7 @@ const handleFilterChange = async (action,column) => {
v-if="searchString.length > 0" v-if="searchString.length > 0"
icon="i-heroicons-x-mark" icon="i-heroicons-x-mark"
variant="ghost" variant="ghost"
color="rose" color="error"
@click="clearSearchString()" @click="clearSearchString()"
/> />
@@ -639,70 +672,72 @@ const handleFilterChange = async (action,column) => {
</UDashboardPanelContent> </UDashboardPanelContent>
<!-- Mobile Filter Slideover --> <!-- Mobile Filter Slideover -->
<USlideover <USlideover
v-model="showMobileFilter" v-model:open="showMobileFilter"
side="bottom" side="bottom"
:ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }" :ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }"
class="pb-[env(safe-area-inset-bottom)]" class="pb-[env(safe-area-inset-bottom)]"
> >
<!-- Header --> <template #body>
<div class="p-4 border-b flex items-center justify-between flex-shrink-0"> <!-- Header -->
<h2 class="text-xl font-bold">Filter</h2> <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
<UButton <h2 class="text-xl font-bold">Filter</h2>
icon="i-heroicons-x-mark" <UButton
variant="ghost" icon="i-heroicons-x-mark"
@click="showMobileFilter = false" variant="ghost"
/> @click="showMobileFilter = false"
</div>
<!-- Scrollable content -->
<div class="flex-1 overflow-y-auto p-4 space-y-6">
<div
v-for="column in dataType.templateColumns.filter(c => c.distinct)"
:key="column.key"
class="space-y-2"
>
<p class="font-semibold">{{ column.label }}</p>
<USelectMenu
v-model="columnsToFilter[column.key]"
:options="itemsMeta?.distinctValues?.[column.key]"
multiple
searchable
:search-attributes="[column.key]"
placeholder="Auswählen…"
:ui-menu="{ width: '100%' }"
/> />
</div> </div>
</div> <!-- Scrollable content -->
<div class="flex-1 overflow-y-auto p-4 space-y-6">
<!-- Footer FIXED in card --> <div
<div v-for="column in dataType.templateColumns.filter(c => c.distinct)"
class=" :key="column.key"
flex justify-between gap-3 class="space-y-2"
px-4 py-4 border-t flex-shrink-0 >
bg-white dark:bg-gray-900 <p class="font-semibold">{{ column.label }}</p>
rounded-b-2xl
"
>
<UButton
color="rose"
variant="outline"
class="flex-1"
@click="resetMobileFilters"
>
Zurücksetzen
</UButton>
<UButton <USelectMenu
color="primary" v-model="columnsToFilter[column.key]"
class="flex-1" :options="itemsMeta?.distinctValues?.[column.key]"
@click="applyMobileFilters" multiple
searchable
:search-attributes="[column.key]"
placeholder="Auswählen…"
:ui-menu="{ width: '100%' }"
/>
</div>
</div>
<!-- Footer FIXED in card -->
<div
class="
flex justify-between gap-3
px-4 py-4 border-t flex-shrink-0
bg-white dark:bg-gray-900
rounded-b-2xl
"
> >
Anwenden <UButton
</UButton> color="error"
</div> variant="outline"
class="flex-1"
@click="resetMobileFilters"
>
Zurücksetzen
</UButton>
<UButton
color="primary"
class="flex-1"
@click="applyMobileFilters"
>
Anwenden
</UButton>
</div>
</template>
</USlideover> </USlideover>

55
frontend/pages/support/[id].vue
View File

@@ -50,60 +50,7 @@ const addMessage = async () => {
<template #center> <template #center>
{{itemInfo.title}} {{itemInfo.title}}
</template> </template>
<template #right> <template #right />
<!-- <UButton
v-if="profileStore.currentTenant === 5"
variant="outline"
@click="closeTicket"
>
Ticket Schließen
</UButton>
<UButton
v-if="profileStore.currentTenant === 5"
variant="outline"
@click="showAddEntryModal = true"
>
+ Eintrag
</UButton>
<UModal v-model="showAddEntryModal">
<UCard>
<template #header>
Eintrag hinzufügen
</template>
<UFormGroup
label="Intern:"
>
<UToggle
v-model="addEntryData.internal"
/>
</UFormGroup>
<UFormGroup
label="Typ:"
>
<USelectMenu
v-model="addEntryData.type"
:options="['Nachricht','Notiz','Anruf','Externe Kommunikation']"
/>
</UFormGroup>
<UFormGroup
label="Inhalt:"
>
<UTextarea
v-model="addEntryData.content"
/>
</UFormGroup>
<template #footer>
<UButton
@click="addEntry"
>
Erstellen
</UButton>
</template>
</UCard>
</UModal>-->
</template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardPanelContent v-if="loaded"> <UDashboardPanelContent v-if="loaded">

8
frontend/pages/support/create.vue
View File

@@ -40,20 +40,20 @@ const createTicket = async () => {
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UForm class="w-2/3 mx-auto mt-5"> <UForm class="w-2/3 mx-auto mt-5">
<UFormGroup <UFormField
label="Titel:" label="Titel:"
> >
<UInput <UInput
v-model="itemInfo.title" v-model="itemInfo.title"
/> />
</UFormGroup> </UFormField>
<UFormGroup <UFormField
label="Nachricht:" label="Nachricht:"
> >
<UTextarea <UTextarea
v-model="itemInfo.content" v-model="itemInfo.content"
/> />
</UFormGroup> </UFormField>
</UForm> </UForm>
</template> </template>

40
frontend/pages/support/index.vue
View File

@@ -59,39 +59,39 @@ const filteredRows = computed(() => {
/> />
<USelectMenu <USelectMenu
v-if="profileStore.currentTenant === 5" v-if="profileStore.currentTenant === 5"
:ui-menu="{ width: 'min-w-max' }" :content="{ width: 'min-w-max' }"
:options="tenants" :items="tenants"
option-attribute="name" label-key="name"
value-attribute="id" value-key="id"
v-model="selectedTenant" v-model="selectedTenant"
> >
<template #label> <template #default>
{{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}} {{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}}
</template> </template>
</USelectMenu> </USelectMenu>
</template> </template>
</UDashboardToolbar> </UDashboardToolbar>
<UTable <UTable
:rows="filteredRows" :data="filteredRows"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }" :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
@select="(i) => router.push(`/support/${i.id}`)" :on-select="(i) => router.push(`/support/${i.id}`)"
:columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]" :columns="normalizeTableColumns([{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}])"
> >
<template #tenant-data="{ row }"> <template #tenant-cell="{ row }">
{{row.tenant.name}} {{row.original.tenant.name}}
</template> </template>
<template #status-data="{ row }"> <template #status-cell="{ row }">
<span v-if="row.status === 'Offen'" class="text-yellow-500">Offen</span> <span v-if="row.original.status === 'Offen'" class="text-yellow-500">Offen</span>
<span v-else-if="row.status === 'Geschlossen'" class="text-primary">Geschlossen</span> <span v-else-if="row.original.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
</template> </template>
<template #created_by-data="{ row }"> <template #created_by-cell="{ row }">
{{row.created_by.fullName}} {{row.original.created_by.fullName}}
</template> </template>
<template #created_at-data="{ row }"> <template #created_at-cell="{ row }">
{{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}} {{dayjs(row.original.created_at).format('DD.MM.YYYY HH:mm')}}
</template> </template>
<template #ticketmessages-data="{ row }"> <template #ticketmessages-cell="{ row }">
{{row.ticketmessages.length}} {{row.original.ticketmessages.length}}
</template> </template>
</UTable> </UTable>
</template> </template>

155
frontend/pages/tasks/index.vue
View File

@@ -88,6 +88,7 @@ const listColumns = [
{ key: "customer", label: "Kunde" }, { key: "customer", label: "Kunde" },
{ key: "plant", label: "Objekt" } { key: "plant", label: "Objekt" }
] ]
const normalizedListColumns = normalizeTableColumns(listColumns)
function getEmptyTask() { function getEmptyTask() {
return { return {
@@ -457,36 +458,36 @@ onMounted(async () => {
</div> </div>
<UTable <UTable
v-else-if="filteredTasks.length" v-else-if="filteredTasks.length"
:rows="filteredTasks" :data="filteredTasks"
:columns="listColumns" :columns="normalizedListColumns"
@select="(task) => openTaskViaRoute(task)" :on-select="(task) => openTaskViaRoute(task)"
> >
<template #actions-data="{ row }"> <template #actions-cell="{ row }">
<UButton <UButton
v-if="normalizeStatus(row.categorie) !== 'Abgeschlossen' && canCreate" v-if="normalizeStatus(row.original.categorie) !== 'Abgeschlossen' && canCreate"
size="xs" size="xs"
variant="soft" variant="soft"
icon="i-heroicons-check" icon="i-heroicons-check"
:loading="quickCompleteLoadingId === row.id" :loading="quickCompleteLoadingId === row.original.id"
@click.stop="completeTaskQuick(row)" @click.stop="completeTaskQuick(row.original)"
> >
Erledigt Erledigt
</UButton> </UButton>
</template> </template>
<template #categorie-data="{ row }"> <template #categorie-cell="{ row }">
<UBadge variant="soft">{{ normalizeStatus(row.categorie) }}</UBadge> <UBadge variant="soft">{{ normalizeStatus(row.original.categorie) }}</UBadge>
</template> </template>
<template #assignee-data="{ row }"> <template #assignee-cell="{ row }">
{{ getAssigneeLabel(row) }} {{ getAssigneeLabel(row.original) }}
</template> </template>
<template #project-data="{ row }"> <template #project-cell="{ row }">
{{ getEntityLabel(projectOptions, row.project?.id || row.project) || "-" }} {{ getEntityLabel(projectOptions, row.original.project?.id || row.original.project) || "-" }}
</template> </template>
<template #customer-data="{ row }"> <template #customer-cell="{ row }">
{{ getEntityLabel(customerOptions, row.customer?.id || row.customer) || "-" }} {{ getEntityLabel(customerOptions, row.original.customer?.id || row.original.customer) || "-" }}
</template> </template>
<template #plant-data="{ row }"> <template #plant-cell="{ row }">
{{ getEntityLabel(plantOptions, row.plant?.id || row.plant) || "-" }} {{ getEntityLabel(plantOptions, row.original.plant?.id || row.original.plant) || "-" }}
</template> </template>
</UTable> </UTable>
<UAlert <UAlert
@@ -497,14 +498,15 @@ onMounted(async () => {
/> />
</UDashboardPanelContent> </UDashboardPanelContent>
<UModal v-model="isModalOpen" :prevent-close="saving || deleting"> <UModal v-model:open="isModalOpen" :prevent-close="saving || deleting">
<UCard> <template #content>
<template #header> <UCard>
<div class="flex items-center justify-between"> <template #header>
<h3 class="font-semibold">{{ modalTitle }}</h3> <div class="flex items-center justify-between">
<UBadge variant="subtle">{{ taskForm.id ? `#${taskForm.id}` : "Neu" }}</UBadge> <h3 class="font-semibold">{{ modalTitle }}</h3>
</div> <UBadge variant="subtle">{{ taskForm.id ? `#${taskForm.id}` : "Neu" }}</UBadge>
</template> </div>
</template>
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
@@ -518,105 +520,106 @@ onMounted(async () => {
<USelectMenu <USelectMenu
v-model="taskForm.categorie" v-model="taskForm.categorie"
:options="STATUS_COLUMNS.map((status) => ({ label: status, value: status }))" :items="STATUS_COLUMNS.map((status) => ({ label: status, value: status }))"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
:disabled="isFormReadonly || !canCreate" :disabled="isFormReadonly || !canCreate"
> >
<template #label> <template #default>
{{ taskForm.categorie || "Status auswählen" }} {{ taskForm.categorie || "Status auswählen" }}
</template> </template>
</USelectMenu> </USelectMenu>
<USelectMenu <USelectMenu
v-model="taskForm.userId" v-model="taskForm.userId"
:options="assigneeOptions" :items="assigneeOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
:disabled="isFormReadonly || !canCreate" :disabled="isFormReadonly || !canCreate"
searchable searchable
> >
<template #label> <template #default>
{{ assigneeOptions.find((option) => option.value === taskForm.userId)?.label || "Zuweisung" }} {{ assigneeOptions.find((option) => option.value === taskForm.userId)?.label || "Zuweisung" }}
</template> </template>
</USelectMenu> </USelectMenu>
<USelectMenu <USelectMenu
v-model="taskForm.project" v-model="taskForm.project"
:options="projectOptions" :items="projectOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
:disabled="isFormReadonly || !canCreate" :disabled="isFormReadonly || !canCreate"
searchable searchable
clear-search-on-close clear-search-on-close
> >
<template #label> <template #default>
{{ getEntityLabel(projectOptions, taskForm.project) || "Projekt" }} {{ getEntityLabel(projectOptions, taskForm.project) || "Projekt" }}
</template> </template>
</USelectMenu> </USelectMenu>
<USelectMenu <USelectMenu
v-model="taskForm.customer" v-model="taskForm.customer"
:options="customerOptions" :items="customerOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
:disabled="isFormReadonly || !canCreate" :disabled="isFormReadonly || !canCreate"
searchable searchable
clear-search-on-close clear-search-on-close
> >
<template #label> <template #default>
{{ getEntityLabel(customerOptions, taskForm.customer) || "Kunde" }} {{ getEntityLabel(customerOptions, taskForm.customer) || "Kunde" }}
</template> </template>
</USelectMenu> </USelectMenu>
<USelectMenu <USelectMenu
v-model="taskForm.plant" v-model="taskForm.plant"
:options="plantOptions" :items="plantOptions"
value-attribute="value" value-key="value"
option-attribute="label" label-key="label"
:disabled="isFormReadonly || !canCreate" :disabled="isFormReadonly || !canCreate"
searchable searchable
clear-search-on-close clear-search-on-close
> >
<template #label> <template #default>
{{ getEntityLabel(plantOptions, taskForm.plant) || "Objekt" }} {{ getEntityLabel(plantOptions, taskForm.plant) || "Objekt" }}
</template> </template>
</USelectMenu> </USelectMenu>
</div> </div>
<template #footer> <template #footer>
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<UButton <UButton
v-if="taskForm.id && canCreate" v-if="taskForm.id && canCreate"
variant="soft" variant="soft"
:loading="deleting" :loading="deleting"
@click="archiveTask" @click="archiveTask"
> >
Archivieren Archivieren
</UButton> </UButton>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<UButton variant="ghost" @click="closeModal">Schließen</UButton> <UButton variant="ghost" @click="closeModal">Schließen</UButton>
<UButton <UButton
v-if="modalMode === 'show' && canCreate" v-if="modalMode === 'show' && canCreate"
variant="soft" variant="soft"
@click="modalMode = 'edit'" @click="modalMode = 'edit'"
> >
Bearbeiten Bearbeiten
</UButton> </UButton>
<UButton <UButton
v-if="modalMode !== 'show' && canCreate" v-if="modalMode !== 'show' && canCreate"
:loading="saving" :loading="saving"
@click="saveTask" @click="saveTask"
> >
Speichern Speichern
</UButton> </UButton>
</div>
</div> </div>
</div> </template>
</template> </UCard>
</UCard> </template>
</UModal> </UModal>
</template> </template>

54
frontend/pages/wiki/[[id]].vue
View File

@@ -91,34 +91,36 @@
</div> </div>
</main> </main>
<UModal v-model="isModalOpen"> <UModal v-model:open="isModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <template #content>
<template #header> <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<div class="flex items-center justify-between"> <template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3> <div class="flex items-center justify-between">
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" /> <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
</div>
</template>
<div v-if="modalState.type === 'create'" class="space-y-4">
<UFormField label="Titel" name="title">
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
</UFormField>
</div> </div>
</template> <div v-else-if="modalState.type === 'delete'">
<div v-if="modalState.type === 'create'" class="space-y-4"> <p class="text-sm text-gray-500 dark:text-gray-300">
<UFormGroup label="Titel" name="title"> Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" /> <br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
</UFormGroup> </p>
</div>
<div v-else-if="modalState.type === 'delete'">
<p class="text-sm text-gray-500 dark:text-gray-300">
Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
<br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
</p>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
<UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
</UButton>
</div> </div>
</template> <template #footer>
</UCard> <div class="flex justify-end gap-2">
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
<UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
</UButton>
</div>
</template>
</UCard>
</template>
</UModal> </UModal>
</div> </div>