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

Compare commits

base: flfeders:8dfcffc92b2447a33741bca3727d09ad4849dde4
Branches Tags
flfeders:main flfeders:dev flfeders:uichange
...
compare: flfeders:uichange
Branches Tags
flfeders:dev flfeders:uichange flfeders:main

6 Commits
8dfcffc92b ... 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
florianfederspiel
cfd84b773f Revert "Added missing files"
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 53s
Details 
This reverts commit 6c3c318f86.
 2026-03-21 17:57:26 +01:00
florianfederspiel
8038f03406 Added missing files 2026-03-21 17:57:23 +01:00
florianfederspiel
6c3c318f86 Added missing files 2026-03-21 17:56:39 +01:00
103 changed files with 5375 additions and 3996 deletions
Expand all files Collapse all files

8
frontend/app.config.ts
View File

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

20
frontend/app.vue
View File

@@ -47,14 +47,16 @@ useSeoMeta({
</script>
<template>
<div class="safearea">
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
<UNotifications/>
<USlideovers />
<UModals/>
</div>
<UApp>
<div class="safearea">
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
<UNotifications/>
<USlideovers />
<UModals/>
</div>
</UApp>
@@ -136,4 +138,4 @@ useSeoMeta({
.scroll {
overflow-y: scroll;
}
</style>
</style>

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);
}

56
frontend/components/ArchiveButton.vue
View File

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

80
frontend/components/BankAccountAssignInput.vue
View File

@@ -49,7 +49,7 @@ const assignByIban = async () => {
const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
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
}
@@ -68,7 +68,7 @@ const removeAssigned = (id) => {
const createAndAssign = async () => {
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
}
@@ -140,43 +140,45 @@ loadAccounts()
</InputGroup>
</div>
<UModal v-model="showCreate">
<UCard>
<template #header>Neue Bankverbindung erstellen</template>
<div class="space-y-3">
<UFormGroup label="IBAN">
<InputGroup>
<UInput
v-model="createPayload.iban"
@blur="resolveCreatePayloadFromIban"
@keydown.enter.prevent="resolveCreatePayloadFromIban"
/>
<UButton
color="gray"
variant="outline"
:loading="resolvingIban"
@click="resolveCreatePayloadFromIban"
>
Ermitteln
</UButton>
</InputGroup>
</UFormGroup>
<UFormGroup label="BIC">
<UInput v-model="createPayload.bic" />
</UFormGroup>
<UFormGroup label="Bankinstitut">
<UInput v-model="createPayload.bankName" />
</UFormGroup>
<UFormGroup label="Beschreibung (optional)">
<UInput v-model="createPayload.description" />
</UFormGroup>
</div>
<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>
<UModal v-model:open="showCreate">
<template #content>
<UCard>
<template #header>Neue Bankverbindung erstellen</template>
<div class="space-y-3">
<UFormField label="IBAN">
<InputGroup>
<UInput
v-model="createPayload.iban"
@blur="resolveCreatePayloadFromIban"
@keydown.enter.prevent="resolveCreatePayloadFromIban"
/>
<UButton
color="gray"
variant="outline"
:loading="resolvingIban"
@click="resolveCreatePayloadFromIban"
>
Ermitteln
</UButton>
</InputGroup>
</UFormField>
<UFormField label="BIC">
<UInput v-model="createPayload.bic" />
</UFormField>
<UFormField label="Bankinstitut">
<UInput v-model="createPayload.bankName" />
</UFormField>
<UFormField label="Beschreibung (optional)">
<UInput v-model="createPayload.description" />
</UFormField>
</div>
</template>
</UCard>
<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>
</template>
</UCard>
</template>
</UModal>
</template>

56
frontend/components/ButtonWithConfirm.vue
View File

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

15
frontend/components/Calculator.vue
View File

@@ -51,8 +51,8 @@
<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 (+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 (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</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="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="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
@@ -227,9 +227,14 @@ defineShortcuts({
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
@apply bg-transparent;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-gray-200 dark:bg-gray-700 rounded-full;
background: #e5e7eb;
border-radius: 9999px;
}
</style>
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
background: #374151;
}
</style>

58
frontend/components/DocumentDisplayModal.vue
View File

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

142
frontend/components/DocumentUploadModal.vue
View File

@@ -78,84 +78,86 @@ const fileNames = computed(() => {
<template>
<UModal>
<div ref="dropZoneRef" class="relative h-full flex flex-col">
<template #content>
<div ref="dropZoneRef" class="relative h-full flex flex-col">
<div
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"
>
<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'"
<div
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"
>
<UInput
v-if="selectedFiles.length === 0"
type="file"
id="fileUploadInput"
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
@change="onFileInputChange"
/>
<span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
Dateien hier ablegen
</span>
</div>
<div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
</div>
</UFormGroup>
<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="Typ:"
class="mt-3"
>
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
:disabled="!props.fileData.typeEnabled"
<UFormField
label="Datei:"
:help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
>
<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>
</UFormGroup>
<UInput
v-if="selectedFiles.length === 0"
type="file"
id="fileUploadInput"
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
@change="onFileInputChange"
/>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
:disabled="uploadInProgress || selectedFiles.length === 0"
>Hochladen</UButton>
</template>
</UCard>
</div>
<div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
</div>
</UFormField>
<UFormField
label="Typ:"
class="mt-3"
>
<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>
</template>
<style scoped>
/* Optional: Animationen für das Overlay */
</style>
</style>

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

24
frontend/components/EntityList.vue
View File

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

19
frontend/components/EntityShow.vue
View File

@@ -28,14 +28,16 @@ defineShortcuts({
router.back()
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
const currentIndex = Number(openTab.value)
if(currentIndex > 0){
openTab.value = String(currentIndex - 1)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
}
},
'arrowright': () => {
if(openTab.value < dataType.showTabs.length - 1) {
openTab.value += 1
const currentIndex = Number(openTab.value)
if(currentIndex < dataType.showTabs.length - 1) {
openTab.value = String(currentIndex + 1)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
}
},
@@ -51,7 +53,7 @@ const auth = useAuthStore()
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) => {
router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
openTab.value = String(index)
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
}
const changePinned = async () => {
@@ -255,9 +258,9 @@ const openCustomerInventoryLabelPrint = () => {
v-if="props.item.id && platform !== 'mobile'"
class="p-5"
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">
<EntityShowSubInformation

8
frontend/components/EntityShowSub.vue
View File

@@ -96,15 +96,15 @@ setup()
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)"
:items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple
class="hidden lg:block"
by="key"
: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)"
>
<template #label>
<template #default>
Spalten
</template>
</USelectMenu>
@@ -114,7 +114,7 @@ setup()
<div class="scroll" style="height: 70vh">
<EntityTable
:type="type"
:columns="columns"
:columns="normalizeTableColumns(columns)"
:rows="props.item[type]"
style
/>

134
frontend/components/EntityShowSubCreatedDocuments.vue
View File

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

66
frontend/components/EntityShowSubFiles.vue
View File

@@ -94,41 +94,43 @@ function isImage(file) {
</UCard>
<!-- 📱 PDF / IMG Viewer Slideover -->
<UModal v-model="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
<!-- Header -->
<div class="p-4 border-b flex justify-between items-center flex-shrink-0">
<h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
<UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
</div>
<!-- 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"
/>
<UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
<template #content>
<!-- Header -->
<div class="p-4 border-b flex justify-between items-center flex-shrink-0">
<h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
<UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
</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"
<!-- 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>
<!-- 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>
<UAlert
v-else
title="Nicht unterstützter Dateityp"
icon="i-heroicons-exclamation-triangle"
/>
</div>
</template>
</UModal>
</template>

2
frontend/components/EntityShowSubInformation.vue
View File

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

24
frontend/components/EntityShowSubOwnAccountsStatements.vue
View File

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

10
frontend/components/EntityShowSubPhases.vue
View File

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

42
frontend/components/EntityShowSubTimes.vue
View File

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

113
frontend/components/EntityTable.vue
View File

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

2
frontend/components/EntityTableMobile.vue
View File

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

26
frontend/components/GlobalMessages.vue
View File

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

20
frontend/components/GlobalSearch.vue
View File

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

189
frontend/components/HelpSlideover.vue
View File

@@ -2,9 +2,16 @@
import dayjs from 'dayjs'
const { isHelpSlideoverOpen } = useDashboard()
const { metaSymbol } = useShortcuts()
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 query = ref('')
const toast = useToast()
@@ -125,7 +132,7 @@ const addContactRequest = async () => {
toast.add({title: "Anfrage erfolgreich erstellt"})
resetContactRequest()
} else {
toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
toast.add({title: "Anfrage konnte nicht erstellt werden",color:"error"})
}
loadingContactRequest.value = false
}
@@ -154,7 +161,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</script>
<template>
<UDashboardSlideover v-model="isHelpSlideoverOpen">
<USlideover v-model:open="isHelpSlideoverOpen" side="right">
<template #title>
<UButton
v-if="shortcuts"
@@ -168,93 +175,94 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
{{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
</template>
<div v-if="shortcuts" class="space-y-6">
<UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
<template #body>
<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">
<p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
{{ category.title }}
</p>
<div v-for="(category, index) in filteredCategories" :key="index">
<p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
{{ category.title }}
</p>
<div class="space-y-2">
<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>
<div class="space-y-2">
<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>
<div class="flex items-center justify-end flex-shrink-0 gap-0.5">
<UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
{{ shortcut }}
</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 class="flex items-center justify-end flex-shrink-0 gap-0.5">
<UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
{{ shortcut }}
</UKbd>
</div>
<UBadge color="gray" variant="subtle">
{{ entry.shortHash }}
</UBadge>
</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">
Es sind noch keine Changelog-Einträge verfügbar.
</p>
</UCard>
</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>
<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">
<h1 class="font-semibold">Kontaktanfrage:</h1>
<UForm
@@ -262,29 +270,29 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
@submit="addContactRequest"
@reset="resetContactRequest"
>
&lt;!&ndash; <UFormGroup
&lt;!&ndash; <UFormField
label="Art:"
>
<USelectMenu
:options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
v-model="contactRequestData.contactType"
/>
</UFormGroup>&ndash;&gt;
<UFormGroup
</UFormField>&ndash;&gt;
<UFormField
label="Titel:"
>
<UInput
v-model="contactRequestData.title"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="Nachricht:"
>
<UTextarea
v-model="contactRequestData.message"
rows="6"
/>
</UFormGroup>
</UFormField>
<InputGroup class="mt-3">
<UButton
type="submit"
@@ -294,7 +302,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</UButton>
<UButton
type="reset"
color="rose"
color="error"
variant="outline"
:disabled="!contactRequestData.title && !contactRequestData.message"
>
@@ -305,5 +313,6 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
</UForm>
</div>
<UProgress class="mt-5" animation="carousel" v-else/>-->
</UDashboardSlideover>
</template>
</USlideover>
</template>

58
frontend/components/HistoryDisplay.vue
View File

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

2
frontend/components/InboxList.vue
View File

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

4
frontend/components/InboxMail.vue
View File

@@ -34,7 +34,7 @@ defineProps({
</p>
</div>
<UDivider class="my-5" />
<USeparator class="my-5" />
<div class="flex-1">
<p class="text-lg">
@@ -42,7 +42,7 @@ defineProps({
</p>
</div>
<UDivider class="my-5" />
<USeparator class="my-5" />
<form @submit.prevent>
<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>
<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>
<div class="flex items-center justify-between">
@@ -133,6 +134,7 @@ watch(() => labelPrinter.connected, (connected) => {
</div>
</template>
</UCard>
</UCard>
</template>
</UModal>
</template>

34
frontend/components/LabelPrinterButton.vue
View File

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

195
frontend/components/MainNav.vue
View File

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

46
frontend/components/NotificationsSlideover.vue
View File

@@ -36,28 +36,30 @@ const setNotificationAsRead = async (notification) => {
</script>
<template>
<UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
<NuxtLink
v-for="notification in notifications"
:key="notification.id"
:to="notification.link"
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>
<USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
<template #body>
<NuxtLink
v-for="notification in notifications"
:key="notification.id"
:to="notification.link"
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>
<div class="text-sm flex-1">
<p class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
<div class="text-sm flex-1">
<p class="flex items-center justify-between">
<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))" />
</p>
<p class="text-gray-500 dark:text-gray-400">
{{ notification.message }}
</p>
</div>
</NuxtLink>
</UDashboardSlideover>
<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 class="text-gray-500 dark:text-gray-400">
{{ notification.message }}
</p>
</div>
</NuxtLink>
</template>
</USlideover>
</template>

46
frontend/components/PublicDynamicForm.vue
View File

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

44
frontend/components/SessionRefreshModal.vue
View File

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

102
frontend/components/StaffTimeEntryModal.vue
View File

@@ -116,7 +116,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
emit('saved')
isOpen.value = false
} catch (error: any) {
toast.add({ title: 'Fehler', description: error.message, color: 'red' })
toast.add({ title: 'Fehler', description: error.message, color: 'error' })
} finally {
loading.value = false
}
@@ -124,57 +124,63 @@ async function onSubmit(event: FormSubmitEvent<any>) {
</script>
<template>
<UModal v-model="isOpen">
<UCard :ui="{ 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">
{{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<UModal v-model:open="isOpen">
<template #content>
<UCard :ui="{ 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">
{{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</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">
<USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
</UFormGroup>
<div class="grid grid-cols-2 gap-4">
<UFormField label="Start Datum" name="start_date">
<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">
<UFormGroup label="Start Datum" name="start_date">
<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>
</UFormGroup>
<UFormGroup label="Start Zeit" name="start_time">
<UInput type="time" v-model="state.start_time" />
</UFormGroup>
</div>
<div class="grid grid-cols-2 gap-4">
<UFormField label="Ende Datum" name="end_date">
<div class="flex items-center gap-2">
<UInput type="date" v-model="state.end_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
</div>
</UFormField>
<UFormField label="Ende Zeit" name="end_time">
<UInput type="time" v-model="state.end_time" />
</UFormField>
</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">
<UFormGroup label="Ende Datum" name="end_date">
<div class="flex items-center gap-2">
<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>
<UFormField label="Beschreibung / Notiz" name="description">
<UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
</UFormField>
<UFormGroup label="Beschreibung / Notiz" name="description">
<UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
</UFormGroup>
<div class="flex justify-end gap-2 pt-4">
<UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
<UButton type="submit" label="Speichern" color="primary" :loading="loading" />
</div>
</UForm>
</UCard>
<div class="flex justify-end gap-2 pt-4">
<UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
<UButton type="submit" label="Speichern" color="primary" :loading="loading" />
</div>
</UForm>
</UCard>
</template>
</UModal>
</template>

56
frontend/components/StandardEntityModal.vue
View File

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

62
frontend/components/TenantDropdown.vue
View File

@@ -1,27 +1,59 @@
<script setup>
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>
<template>
<USelectMenu
:options="auth.tenants"
value-attribute="id"
class="w-40"
@change="auth.switchTenant(selectedTenant)"
v-model="selectedTenant"
:items="tenantItems"
:content="{ align: 'start', side: 'bottom', sideOffset: 6 }"
:ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
class="block w-40"
:avatar="{
alt: activeTenantName,
text: tenantInitials,
loading: 'lazy'
}"
>
<UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
<UAvatar :alt="auth.activeTenantData?.name" size="md" />
<span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span>
</UButton>
<template #option="{option}">
{{option.name}}
<template #default="{ open }">
<UButton
color="gray"
variant="ghost"
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']"
>
<span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
{{ activeTenantName }}
</span>
</UButton>
</template>
</USelectMenu>
</template>
</template>

2
frontend/components/Toolbar.vue
View File

@@ -11,7 +11,7 @@
<slot name="right"/>
</InputGroup>
</div>
<UDivider class="my-3"/>
<USeparator class="my-3"/>
</template>
<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>
const { isHelpSlideoverOpen } = useDashboard()
const { isDashboardSearchModalOpen } = useUIState()
const { metaSymbol } = useShortcuts()
const auth = useAuthStore()
const items = computed(() => [
[{
slot: 'account',
label: '',
disabled: true
}], [/*{
label: 'Mein Profil',
icon: 'i-heroicons-user',
to: `/profiles/show/${profileStore.activeProfile.id}`
},*/{
label: 'Passwort ändern',
const userItems = computed(() => [[
{
label: 'Passwort aendern',
icon: 'i-heroicons-shield-check',
to: `/password-change`
},{
to: '/password-change'
},
{
label: 'Abmelden',
icon: 'i-heroicons-arrow-left-on-rectangle',
click: async () => {
onSelect: async () => {
await auth.logout()
}
}]
])
}
]])
</script>
<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 }">
<UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
<!-- <template #leading>
<UAvatar :alt="auth.user.email" size="xs" />
</template>-->
<UButton
color="gray"
variant="ghost"
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>
<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>
</UButton>
</template>
<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>
</UDropdownMenu>
</template>

8
frontend/components/copyCreatedDocumentModal.vue
View File

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

36
frontend/components/displayIncomeAndExpenditure.vue
View File

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

6
frontend/components/displayOpenTasks.vue
View File

@@ -23,9 +23,9 @@ setupPage()
<template>
<UTable
v-if="openTasks.length > 0"
:rows="openTasks"
:columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]"
@select="(i) => router.push(`/tasks/show/${i.id}`)"
:data="openTasks"
:columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
:on-select="(i) => router.push(`/tasks/show/${i.id}`)"
/>
<div v-else>
<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()
} catch (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) {
console.log(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>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"
label="Notizen:"
>
<UTextarea
v-model="runningTimeInfo.notes"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
class="mt-2"
label="Projekt:"
>
@@ -74,7 +74,7 @@ const stopStartedTime = async () => {
value-attribute="id"
option-attribute="name"
/>
</UFormGroup>
</UFormField>
<UButton
class="mt-3"
@click="stopStartedTime"

8
frontend/components/displayRunningWorkingTime.vue
View File

@@ -25,7 +25,7 @@ const startTime = async () => {
await setupPage()
} catch (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) {
console.log(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>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"
label="Notizen:"
>
<UTextarea
v-model="runningTimeInfo.notes"
/>
</UFormGroup>
</UFormField>
<UButton
class="mt-3"
@click="stopStartedTime"

183
frontend/components/displayTaxSummary.vue Normal file
View File

@@ -0,0 +1,183 @@
<script setup lang="ts">
import dayjs from "dayjs"
import customParseFormat from "dayjs/plugin/customParseFormat"
import {
formatTaxEvaluationPeriodLabel,
formatTaxEvaluationPeriodRange,
getCreatedDocumentTaxBreakdown,
getIncomingInvoiceTaxBreakdown,
getTaxEvaluationPeriodBounds,
normalizeTaxEvaluationPeriod
} from "~/composables/useTaxEvaluation"
dayjs.extend(customParseFormat)
const auth = useAuthStore()
const loading = ref(true)
const summary = ref({
label: "",
range: "",
outputTax: 0,
inputTax: 0,
balance: 0,
outputCount: 0,
inputCount: 0,
})
const formatCurrency = (value: number) => {
return new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR"
}).format(Number(value || 0))
}
const loadSummary = async () => {
loading.value = true
try {
const periodType = normalizeTaxEvaluationPeriod(auth.activeTenantData?.taxEvaluationPeriod)
const bounds = getTaxEvaluationPeriodBounds(dayjs(), periodType)
const [docs, incoming] = await Promise.all([
useEntities("createddocuments").select(),
useEntities("incominginvoices").select()
])
const outputDocs = (docs || []).filter((doc: any) => {
if (doc?.state !== "Gebucht") return false
if (!["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)) return false
const date = dayjs(doc.documentDate)
return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
})
const inputDocs = (incoming || []).filter((invoice: any) => {
if (invoice?.state !== "Gebucht" || !invoice?.date) return false
const date = dayjs(invoice.date)
return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
})
const outputTax = outputDocs.reduce((sum: number, doc: any) => {
const breakdown = getCreatedDocumentTaxBreakdown(doc)
return sum + breakdown.tax19 + breakdown.tax7
}, 0)
const inputTax = inputDocs.reduce((sum: number, invoice: any) => {
const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
return sum + breakdown.tax19 + breakdown.tax7
}, 0)
summary.value = {
label: formatTaxEvaluationPeriodLabel(bounds.start, periodType),
range: formatTaxEvaluationPeriodRange(bounds.start, periodType),
outputTax: Number(outputTax.toFixed(2)),
inputTax: Number(inputTax.toFixed(2)),
balance: Number((outputTax - inputTax).toFixed(2)),
outputCount: outputDocs.length,
inputCount: inputDocs.length,
}
} finally {
loading.value = false
}
}
onMounted(loadSummary)
</script>
<template>
<div class="space-y-3">
<div class="tax-summary-top">
<div>
<p class="tax-summary-period">{{ summary.label }}</p>
<p class="tax-summary-range">{{ summary.range }}</p>
</div>
<UButton
size="xs"
variant="soft"
color="gray"
icon="i-heroicons-arrow-top-right-on-square"
@click="navigateTo('/accounting/tax')"
>
Details
</UButton>
</div>
<div class="tax-summary-row">
<span class="tax-summary-label">USt Rechnungen</span>
<span class="tax-summary-value text-amber-600 dark:text-amber-400">
{{ loading ? "..." : formatCurrency(summary.outputTax) }}
</span>
</div>
<div class="tax-summary-row">
<span class="tax-summary-label">Vorsteuer</span>
<span class="tax-summary-value text-sky-600 dark:text-sky-400">
{{ loading ? "..." : formatCurrency(summary.inputTax) }}
</span>
</div>
<div class="tax-summary-row">
<span class="tax-summary-label">Ergebnis</span>
<span
class="tax-summary-value"
:class="summary.balance >= 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
>
{{ loading ? "..." : formatCurrency(summary.balance) }}
</span>
</div>
<div class="tax-summary-meta">
{{ summary.outputCount }} Ausgangsbelege | {{ summary.inputCount }} Eingangsbelege
</div>
</div>
</template>
<style scoped>
.tax-summary-top {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}
.tax-summary-period {
margin: 0;
font-weight: 700;
color: rgb(17 24 39);
}
.tax-summary-range,
.tax-summary-meta {
margin: 0;
font-size: 0.875rem;
color: rgb(107 114 128);
}
.tax-summary-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
}
.tax-summary-label {
color: rgb(55 65 81);
}
.tax-summary-value {
font-weight: 700;
text-align: right;
}
:deep(.dark) .tax-summary-period {
color: rgb(243 244 246);
}
:deep(.dark) .tax-summary-range,
:deep(.dark) .tax-summary-meta,
:deep(.dark) .tax-summary-label {
color: rgb(156 163 175);
}
</style>

28
frontend/components/materialComposing.vue
View File

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

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

@@ -53,7 +53,10 @@ const emit = defineEmits(["click"])
<style scoped>
/* FAB Basis */
.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 Label + Icon → Extended FAB */
@@ -61,6 +64,12 @@ const emit = defineEmits(["click"])
/* Optional: Auto-Kreisen wenn kein 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>

12
frontend/components/nimbot.vue
View File

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

30
frontend/components/personalComposing.vue
View File

@@ -12,6 +12,10 @@ const props = defineProps({
const hourrates = ref([])
const units = ref([])
const hourrateSearchInput = {
placeholder: 'Stundensatz suchen...'
}
const setup = async () => {
hourrates.value = await useEntities("hourrates").select()
units.value = await useEntities("units").selectSpecial()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
>
<td>
<USelectMenu
searchable
:search-attributes="['name']"
:options="hourrates"
value-attribute="id"
option-attribute="name"
v-model="row.hourrate"
:color="row.hourrate ? 'primary' : 'rose'"
@change="setRowData(row)"
:items="hourrates"
label-key="name"
value-key="id"
:search-input="hourrateSearchInput"
:filter-fields="['name']"
v-model="row.hourrate"
:color="row.hourrate ? 'primary' : 'error'"
@change="setRowData(row)"
>
<!-- <template #label>
{{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>
<USelectMenu
:options="units"
:items="units"
disabled
value-attribute="id"
option-attribute="name"
label-key="name"
value-key="id"
v-model="row.unit"
></USelectMenu>
</td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
icon="i-heroicons-x-mark"
@click="removeRowFromPersonalComposition(row.id)"
variant="outline"
color="rose"
color="error"
/>
</td>
</tr>
@@ -146,4 +150,4 @@ const setRowData = (row) => {
td {
margin-bottom: 0.5em;
}
</style>
</style>

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

@@ -206,16 +206,62 @@ const addVideo = () => {
<style scoped>
/* Toolbar & Buttons */
.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 {
@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 {
@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 {
@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 */
@@ -235,20 +281,48 @@ const addVideo = () => {
/* MENTION */
.wiki-mention {
/* 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;
}
.wiki-mention::before {
@apply text-gray-400 dark:text-gray-500 mr-0.5;
color: #9ca3af;
margin-right: 0.125rem;
}
.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;
}
: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 { 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; }
@@ -258,7 +332,7 @@ const addVideo = () => {
.column-resize-handle { background-color: #3b82f6; width: 4px; }
/* 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; }
/* IMG */
@@ -269,4 +343,4 @@ const addVideo = () => {
mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
.ProseMirror-selectednode { outline: 2px solid #3b82f6; }
}
</style>
</style>

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

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

155
frontend/composables/useChangelog.ts Normal file
View File

@@ -0,0 +1,155 @@
import { createSharedComposable } from '@vueuse/core'
type ChangelogEntry = {
hash: string
shortHash: string
subject: string
authorName: string
committedAt: string
}
type ChangelogSeenState = {
lastOpenedAt: string | null
latestSeenHash: string | null
}
const defaultSeenState = (): ChangelogSeenState => ({
lastOpenedAt: null,
latestSeenHash: null
})
let changelogRequest: Promise<void> | null = null
const _useChangelog = () => {
const auth = useAuthStore()
const entries = useState<ChangelogEntry[]>('changelog:entries', () => [])
const pending = useState<boolean>('changelog:pending', () => false)
const error = useState<string | null>('changelog:error', () => null)
const loadedKey = useState<string | null>('changelog:loaded-key', () => null)
const seenState = useState<ChangelogSeenState>('changelog:seen-state', defaultSeenState)
const scopeKey = computed(() => {
const userId = auth.user?.id
const tenantId = auth.activeTenant
if (!userId || !tenantId) return null
return `${userId}:${tenantId}`
})
const storageKey = computed(() => {
if (!scopeKey.value) return null
return `fedeo:changelog:last-opened:${scopeKey.value}`
})
const latestEntry = computed(() => entries.value[0] || null)
const hasUnread = computed(() => {
if (!latestEntry.value?.hash) return false
return latestEntry.value.hash !== seenState.value.latestSeenHash
})
function loadSeenState() {
if (!process.client || !storageKey.value) {
seenState.value = defaultSeenState()
return
}
try {
const raw = localStorage.getItem(storageKey.value)
if (!raw) {
seenState.value = defaultSeenState()
return
}
const parsed = JSON.parse(raw)
seenState.value = {
lastOpenedAt: parsed?.lastOpenedAt || null,
latestSeenHash: parsed?.latestSeenHash || null
}
} catch (err) {
console.error('Could not parse changelog seen state', err)
seenState.value = defaultSeenState()
}
}
async function refresh(force = false) {
if (!process.client || !scopeKey.value) return
if (!force && loadedKey.value === scopeKey.value && entries.value.length) return
if (changelogRequest) return changelogRequest
changelogRequest = (async () => {
pending.value = true
error.value = null
try {
const response = await useNuxtApp().$api('/api/functions/changelog', {
query: { limit: 20 }
})
entries.value = Array.isArray(response?.entries) ? response.entries : []
loadedKey.value = scopeKey.value
} catch (err: any) {
error.value = err?.data?.error || err?.message || 'Changelog konnte nicht geladen werden.'
} finally {
pending.value = false
}
})()
try {
await changelogRequest
} finally {
changelogRequest = null
}
}
function markAsSeen() {
if (!process.client || !storageKey.value) return
const nextState = {
lastOpenedAt: new Date().toISOString(),
latestSeenHash: latestEntry.value?.hash || null
}
seenState.value = nextState
try {
localStorage.setItem(storageKey.value, JSON.stringify(nextState))
} catch (err) {
console.error('Could not persist changelog seen state', err)
}
}
watch(storageKey, () => {
loadSeenState()
}, { immediate: true })
watch(scopeKey, (nextScopeKey, previousScopeKey) => {
if (!process.client || !nextScopeKey) return
if (nextScopeKey !== previousScopeKey) {
entries.value = []
loadedKey.value = null
}
void refresh(true)
}, { immediate: true })
return {
entries,
pending,
error,
latestEntry,
hasUnread,
seenState,
refresh,
markAsSeen
}
}
export const useChangelog = createSharedComposable(_useChangelog)

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
}
})
}

162
frontend/composables/useTaxEvaluation.ts Normal file
View File

@@ -0,0 +1,162 @@
import dayjs from "dayjs"
import customParseFormat from "dayjs/plugin/customParseFormat"
dayjs.extend(customParseFormat)
export const TAX_EVALUATION_PERIOD_OPTIONS = [
{ label: "Monatlich", value: "monthly" },
{ label: "Quartalsweise", value: "quarterly" },
{ label: "Jährlich", value: "yearly" },
]
export const normalizeTaxEvaluationPeriod = (value?: string) => {
if (value === "quarterly" || value === "yearly") return value
return "monthly"
}
const ZERO_BREAKDOWN = () => ({
net19: 0,
tax19: 0,
net7: 0,
tax7: 0,
net0: 0,
})
const isTaxFreeDocument = (taxType?: string | null) => {
return ["13b UStG", "19 UStG", "12.3 UStG"].includes(String(taxType || ""))
}
export const getTaxEvaluationPeriodBounds = (
referenceDate: dayjs.ConfigType,
period: string
) => {
const normalized = normalizeTaxEvaluationPeriod(period)
const base = dayjs(referenceDate)
if (normalized === "yearly") {
return {
start: base.startOf("year"),
end: base.endOf("year"),
}
}
if (normalized === "quarterly") {
const quarterStartMonth = Math.floor(base.month() / 3) * 3
const start = base.month(quarterStartMonth).startOf("month")
return {
start,
end: start.add(2, "month").endOf("month"),
}
}
return {
start: base.startOf("month"),
end: base.endOf("month"),
}
}
export const shiftTaxEvaluationPeriodStart = (
periodStart: dayjs.ConfigType,
period: string,
offset: number
) => {
const normalized = normalizeTaxEvaluationPeriod(period)
const base = dayjs(periodStart)
if (normalized === "yearly") return base.add(offset, "year").startOf("year")
if (normalized === "quarterly") return base.add(offset * 3, "month").startOf("month")
return base.add(offset, "month").startOf("month")
}
export const formatTaxEvaluationPeriodLabel = (
periodStart: dayjs.ConfigType,
period: string
) => {
const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
const normalized = normalizeTaxEvaluationPeriod(period)
if (normalized === "yearly") {
return start.format("YYYY")
}
if (normalized === "quarterly") {
return `Q${Math.floor(start.month() / 3) + 1} ${start.format("YYYY")}`
}
return start.format("MMMM YYYY")
}
export const formatTaxEvaluationPeriodRange = (
periodStart: dayjs.ConfigType,
period: string
) => {
const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
return `${start.format("DD.MM.YYYY")} - ${end.format("DD.MM.YYYY")}`
}
export const getCreatedDocumentTaxBreakdown = (doc: any) => {
const breakdown = ZERO_BREAKDOWN()
if (!doc || isTaxFreeDocument(doc.taxType)) {
return breakdown
}
;(doc.rows || []).forEach((row: any) => {
if (!row || ["pagebreak", "title", "text"].includes(row.mode)) return
const quantity = Number(row.quantity || 0)
const price = Number(row.price || 0)
const discountPercent = Number(row.discountPercent || 0)
const taxPercent = Number(row.taxPercent || 0)
const net = Number((quantity * price * (1 - discountPercent / 100)).toFixed(2))
if (!Number.isFinite(net) || net === 0) return
if (taxPercent === 19) {
breakdown.net19 += net
breakdown.tax19 += Number((net * 0.19).toFixed(2))
} else if (taxPercent === 7) {
breakdown.net7 += net
breakdown.tax7 += Number((net * 0.07).toFixed(2))
} else {
breakdown.net0 += net
}
})
return {
net19: Number(breakdown.net19.toFixed(2)),
tax19: Number(breakdown.tax19.toFixed(2)),
net7: Number(breakdown.net7.toFixed(2)),
tax7: Number(breakdown.tax7.toFixed(2)),
net0: Number(breakdown.net0.toFixed(2)),
}
}
export const getIncomingInvoiceTaxBreakdown = (invoice: any) => {
const breakdown = ZERO_BREAKDOWN()
;(invoice?.accounts || []).forEach((account: any) => {
const taxType = String(account?.taxType || "")
const amountNet = Number(account?.amountNet || 0)
const amountTax = Number(account?.amountTax || 0)
if (taxType === "19") {
breakdown.net19 += amountNet
breakdown.tax19 += amountTax
} else if (taxType === "7") {
breakdown.net7 += amountNet
breakdown.tax7 += amountTax
} else {
breakdown.net0 += amountNet
}
})
return {
net19: Number(breakdown.net19.toFixed(2)),
tax19: Number(breakdown.tax19.toFixed(2)),
net7: Number(breakdown.net7.toFixed(2)),
tax7: Number(breakdown.tax7.toFixed(2)),
net0: Number(breakdown.net0.toFixed(2)),
}
}

65
frontend/layouts/default.vue
View File

@@ -240,26 +240,42 @@ onMounted(() => {
</UCard>
</UContainer>
</div>
<UDashboardLayout class="safearea" v-else>
<UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
<UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;"
:class="['!border-transparent']" :ui="{ left: 'flex-1' }">
<template #left>
<div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
<!-- <div
class="border-b border-default bg-default px-3 py-2"
style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
>
<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"/>
</template>
</UDashboardNavbar>
<UDashboardSidebar id="sidebar">
<MainNav/>
<div class="flex-1"/>
<template #footer>
<template #default="{ collapsed }">
<MainNav :collapsed="collapsed" />
</template>
<template #footer="{ collapsed }">
<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"/>
<div class="flex flex-col gap-1">
@@ -272,34 +288,33 @@ onMounted(() => {
:icon="item.icon"
@click="item.click ? item.click() : null"
>
{{ item.label }}
<span v-if="!collapsed">{{ item.label }}</span>
<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 }}
</UBadge>
</template>
</UButton>
</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"/>
</div>
</template>
</UDashboardSidebar>
</UDashboardPanel>
<UDashboardPage>
<UDashboardPanel grow>
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<slot/>
</UDashboardPanel>
</UDashboardPage>
</div>
</UDashboardGroup>
<HelpSlideover/>
<Calculator v-if="calculatorStore.isOpen"/>
</UDashboardLayout>
</div>
</div>
<div
@@ -330,7 +345,7 @@ onMounted(() => {
</div>
<UButton
variant="outline"
color="rose"
color="error"
@click="auth.logout()"
>Abmelden
</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,
@@ -15,14 +15,12 @@ export default defineNuxtConfig({
dirs: ['stores']
},
extends: [
'@nuxt/ui-pro'
],
components: [{
path: '~/components'
}],
css: ['~/assets/css/main.css'],
build: {
transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
'lowlight',]
@@ -74,10 +72,6 @@ export default defineNuxtConfig({
},
},
ui: {
icons: ['heroicons', 'mdi', 'simple-icons']
},
colorMode: {
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",
"@iconify/json": "^2.2.171",
"@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/google-fonts": "^3.1.0",
"@nuxtjs/strapi": "^1.9.3",

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

@@ -253,34 +253,34 @@ onMounted(loadData)
</template>
<UTable
:columns="columns"
:rows="periods"
:columns="normalizeTableColumns(columns)"
:data="periods"
: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">
<span>{{ row.label }}</span>
<UBadge v-if="row.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
<span>{{ row.original.label }}</span>
<UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
</div>
</template>
<template #outputTax-data="{ row }">
{{ formatCurrency(row.outputTax) }}
<template #outputTax-cell="{ row }">
{{ formatCurrency(row.original.outputTax) }}
</template>
<template #inputTax-data="{ row }">
{{ formatCurrency(row.inputTax) }}
<template #inputTax-cell="{ row }">
{{ formatCurrency(row.original.inputTax) }}
</template>
<template #balance-data="{ row }">
<span :class="row.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
{{ formatCurrency(row.balance) }}
<template #balance-cell="{ row }">
<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.original.balance) }}
</span>
</template>
<template #documents-data="{ row }">
{{ row.outputCount }} / {{ row.inputCount }}
<template #documents-cell="{ row }">
{{ row.original.outputCount }} / {{ row.original.inputCount }}
</template>
</UTable>
</UCard>

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

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

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

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

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

@@ -504,7 +504,7 @@ onMounted(() => {
placeholder="Konten"
class="w-48"
/>
<UDivider orientation="vertical" class="h-6"/>
<USeparator orientation="vertical" class="h-6"/>
<div class="flex items-center gap-2">
<USelectMenu
v-model="selectedPeriod"
@@ -601,17 +601,18 @@ onMounted(() => {
</div>
<PageLeaveGuard :when="isSyncing"/>
<UModal v-model="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
<UCard>
<template #header>
<div class="flex items-center justify-between gap-3">
<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>
<UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
<template #content>
<UCard>
<template #header>
<div class="flex items-center justify-between gap-3">
<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>
<UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
</div>
</template>
</template>
<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">
@@ -633,7 +634,7 @@ onMounted(() => {
</div>
<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?.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>
@@ -690,7 +691,7 @@ onMounted(() => {
</UBadge>
</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
</UButton>
<UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionKey, $event)">
@@ -701,10 +702,11 @@ onMounted(() => {
</div>
</div>
<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"/>
<p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
</div>
</UCard>
<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"/>
<p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
</div>
</UCard>
</template>
</UModal>
</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>
</template>
<template #right>
<ArchiveButton color="rose" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
<ArchiveButton color="error" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
</template>
</UDashboardNavbar>
@@ -552,7 +552,7 @@ setup()
<div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div>
<UButton
icon="i-heroicons-trash"
color="rose"
color="error"
variant="ghost"
size="xs"
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">
<div class="grid grid-cols-12 gap-4 items-end">
<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">
<template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
</UInput>
</UFormGroup>
</UFormField>
</div>
<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">
<USelectMenu
class="w-full"
@@ -607,7 +607,7 @@ setup()
/>
</UTooltip>
</div>
</UFormGroup>
</UFormField>
</div>
<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"
@@ -747,7 +747,7 @@ setup()
</div>
<UButton
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'})"
>
Beleg zuweisen
@@ -867,7 +867,7 @@ setup()
v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
icon="i-heroicons-check"
size="sm"
color="rose"
color="error"
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})"
/>

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

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

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

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

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

@@ -44,15 +44,15 @@
<USelectMenu
v-model="selectedFilters"
icon="i-heroicons-adjustments-horizontal-solid"
:options="filterOptions"
option-attribute="name"
value-attribute="name"
:items="filterOptions"
label-key="name"
value-key="name"
multiple
class="hidden lg:block"
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }"
:content="{ width: 'min-w-max' }"
>
<template #label>
<template #default>
Filter
</template>
</USelectMenu>
@@ -93,16 +93,16 @@
</div>
<UTable
:rows="filteredRows"
:columns="columns"
:data="filteredRows"
:columns="normalizeTableColumns(columns)"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(row) => router.push(`/createDocument/edit/${row.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
:on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #actions-data="{ row }">
<template #actions-cell="{ row }">
<div @click.stop>
<UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
<UDropdown :items="getActionItems(row.original)" :popper="{ placement: 'bottom-end' }">
<UButton
color="gray"
variant="ghost"
@@ -112,53 +112,54 @@
</div>
</template>
<template #type-data="{row}">
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
<template #type-cell="{row}">
{{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
</template>
<template #partner-data="{row}">
<span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
<template #partner-cell="{row}">
<span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
</template>
<template #amount-data="{row}">
{{displayCurrency(calculateDocSum(row))}}
<template #amount-cell="{row}">
{{displayCurrency(calculateDocSum(row.original))}}
</template>
<template #serialConfig.active-data="{row}">
<span v-if="row.serialConfig.active" class="text-primary">Ja</span>
<template #serialConfig.active-cell="{row}">
<span v-if="row.original.serialConfig.active" class="text-primary">Ja</span>
<span v-else class="text-rose-600">Nein</span>
</template>
<template #contract-data="{row}">
<span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
<template #contract-cell="{row}">
<span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
</template>
<template #serialConfig.intervall-data="{row}">
<span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
<span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
<template #serialConfig.intervall-cell="{row}">
<span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
<span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
</template>
<template #payment_type-data="{row}">
<span v-if="row.payment_type === 'transfer'">Überweisung</span>
<span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
<template #payment_type-cell="{row}">
<span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
<span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
</template>
</UTable>
<UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Serienrechnungen manuell ausführen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
</div>
</template>
<UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
<template #content>
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Serienrechnungen manuell ausführen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
</div>
</template>
<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">
<UInput type="date" v-model="executionDate" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" />
</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 gap-2 w-full sm:w-auto">
@@ -172,9 +173,9 @@
<USelectMenu
v-model="selectedExecutionIntervall"
:options="executionIntervallOptions"
option-attribute="label"
value-attribute="value"
:items="executionIntervallOptions"
label-key="label"
value-key="value"
size="sm"
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">
<UTable
v-model="selectedExecutionRows"
:rows="filteredExecutionList"
:columns="executionColumns"
:data="filteredExecutionList"
:columns="normalizeTableColumns(executionColumns)"
:ui="{ th: { base: 'whitespace-nowrap' } }"
>
<template #partner-data="{row}">
{{row.customer ? row.customer.name : "-"}}
<template #partner-cell="{row}">
{{row.original.customer ? row.original.customer.name : "-"}}
</template>
<template #amount-data="{row}">
{{displayCurrency(calculateDocSum(row))}}
<template #amount-cell="{row}">
{{displayCurrency(calculateDocSum(row.original))}}
</template>
<template #serialConfig.intervall-data="{row}">
{{ getIntervallLabel(row.serialConfig?.intervall) }}
<template #serialConfig.intervall-cell="{row}">
{{ getIntervallLabel(row.original.serialConfig?.intervall) }}
</template>
<template #contract-data="{row}">
{{row.contract?.contractNumber}} - {{row.contract?.name}}
<template #contract-cell="{row}">
{{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
</template>
<template #plant-data="{row}">
{{ row.plant?.name || "-" }}
<template #plant-cell="{row}">
{{ row.original.plant?.name || "-" }}
</template>
</UTable>
</div>
@@ -231,58 +232,61 @@
</div>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
<UButton
color="primary"
:loading="isExecuting"
:disabled="selectedExecutionRows.length === 0"
@click="executeSerialInvoices"
>
Jetzt ausführen
</UButton>
</div>
</template>
</UCard>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
<UButton
color="primary"
:loading="isExecuting"
:disabled="selectedExecutionRows.length === 0"
@click="executeSerialInvoices"
>
Jetzt ausführen
</UButton>
</div>
</template>
</UCard>
</template>
</UModal>
<USlideover v-model="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 #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Alle Ausführungen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
</div>
</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>
<USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
<template #body>
<UCard class="flex flex-col flex-1" :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">
Alle Ausführungen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
</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}}
</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 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>
</UCard>
</UCard>
</template>
</USlideover>
</template>

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

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

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

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

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

@@ -162,7 +162,7 @@ const sendEmail = async () => {
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 {
navigateTo("/")
@@ -210,34 +210,34 @@ const sendEmail = async () => {
<div class="scrollContainer mt-3">
<div class="flex-col flex w-full">
<UFormGroup
<UFormField
label="Absender"
>
<USelectMenu
:options="emailAccounts"
option-attribute="email"
value-attribute="id"
:items="emailAccounts"
label-key="email"
value-key="id"
v-model="emailData.account"
/>
</UFormGroup>
<UDivider class="my-3"/>
<UFormGroup
</UFormField>
<USeparator class="my-3"/>
<UFormField
label="Empfänger"
>
<UInput
class="w-full my-1"
v-model="emailData.to"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="Kopie"
>
<UInput
class="w-full my-1"
v-model="emailData.cc"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="Blindkopie"
>
<UInput
@@ -245,17 +245,17 @@ const sendEmail = async () => {
placeholder=""
v-model="emailData.bcc"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="Betreff"
>
<UInput
class="w-full my-1"
v-model="emailData.subject"
/>
</UFormGroup>
</UFormField>
</div>
<UDivider class="my-3"/>
<USeparator class="my-3"/>
<div id="parentAttachments" class="flex flex-col justify-center mt-3">
<span class="font-medium mb-2 text-xl">Anhänge</span>
<!-- <UIcon

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

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

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

@@ -89,7 +89,7 @@ const createExport = async () => {
if(res.success) {
toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
} 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>
<UTable
:rows="filteredExports"
:columns="[
:data="filteredExports"
:columns="normalizeTableColumns([
{ key: 'created_at', label: 'Erstellt am' },
{ key: 'start_date', label: 'Start' },
{ key: 'end_date', label: 'Ende' },
{ key: 'valid_until', label: 'Gültig bis' },
{ key: 'type', label: 'Typ' },
{ key: 'download', label: 'Download' },
]"
])"
>
<template #created_at-data="{row}">
{{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
<template #created_at-cell="{row}">
{{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
</template>
<template #start_date-data="{row}">
{{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
<template #start_date-cell="{row}">
{{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
</template>
<template #end_date-data="{row}">
{{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
<template #end_date-cell="{row}">
{{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
</template>
<template #valid_until-data="{row}">
{{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
<template #valid_until-cell="{row}">
{{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
</template>
<template #download-data="{row}">
<UButton @click="downloadFile(row)">Download</UButton>
<template #download-cell="{row}">
<UButton @click="downloadFile(row.original)">Download</UButton>
</template>
</UTable>
<UModal v-model="showCreateExportModal">
<UCard>
<template #header>
Export erstellen
</template>
<UModal v-model:open="showCreateExportModal">
<template #content>
<UCard>
<template #header>
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="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
@@ -180,7 +181,7 @@ const createExport = async () => {
</div>
</div>
<div class="flex gap-4">
<UFormGroup label="Start:" class="flex-1">
<UFormField label="Start:" class="flex-1">
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
@@ -192,9 +193,9 @@ const createExport = async () => {
<LazyDatePicker v-model="createExportData.start_date" @close="close" />
</template>
</UPopover>
</UFormGroup>
</UFormField>
<UFormGroup label="Ende:" class="flex-1">
<UFormField label="Ende:" class="flex-1">
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
@@ -206,21 +207,22 @@ const createExport = async () => {
<LazyDatePicker v-model="createExportData.end_date" @close="close" />
</template>
</UPopover>
</UFormGroup>
</UFormField>
</div>
<template #footer>
<div class="flex justify-end">
<UButton @click="createExport">
Erstellen
</UButton>
</div>
</template>
<template #footer>
<div class="flex justify-end">
<UButton @click="createExport">
Erstellen
</UButton>
</div>
</template>
</UCard>
</UCard>
</template>
</UModal>
</template>
<style scoped>
</style>
</style>

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

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

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

@@ -157,7 +157,7 @@ const updateIncomingInvoice = async (setBooked = false) => {
toast.add({
title: "Buchen nicht möglich",
description: "Bitte beheben Sie zuerst die rot markierten Pflichtfehler.",
color: "rose"
color: "error"
})
return
}
@@ -220,7 +220,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<template #right>
<ArchiveButton
v-if="mode !== 'show'"
color="rose"
color="error"
variant="outline"
type="incominginvoices"
@confirmed="useEntities('incominginvoices').archive(route.params.id)"
@@ -286,7 +286,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<UAlert
v-if="findIncomingInvoiceErrors.length > 0"
title="Prüfung erforderlich"
:color="hasBlockingIncomingInvoiceErrors ? 'rose' : 'orange'"
:color="hasBlockingIncomingInvoiceErrors ? 'error' : 'orange'"
variant="soft"
icon="i-heroicons-exclamation-triangle"
>
@@ -323,14 +323,14 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<div class="flex justify-between items-center">
<h3 class="font-semibold">Stammdaten</h3>
<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>
</div>
</div>
</template>
<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">
<USelectMenu
class="w-full"
@@ -354,7 +354,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
v-if="mode !== 'show'"
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
color="error"
:disabled="!itemInfo.vendor"
@click="itemInfo.vendor = null"
/>
@@ -365,37 +365,37 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
@return-data="(data) => itemInfo.vendor = data.id"
/>
</div>
</UFormGroup>
</UFormField>
<UFormGroup label="Rechnungsnummer">
<UFormField label="Rechnungsnummer">
<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'" />
</UFormGroup>
</UFormField>
<UFormGroup label="Rechnungsdatum">
<UFormField label="Rechnungsdatum">
<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'" />
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
</template>
</UPopover>
</UFormGroup>
</UFormField>
<UFormGroup label="Fälligkeitsdatum">
<UFormField label="Fälligkeitsdatum">
<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'" />
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
</template>
</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'" />
</UFormGroup>
</UFormField>
</div>
</UCard>
@@ -404,7 +404,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<h3 class="font-semibold text-lg">Positionen</h3>
<div class="flex items-center gap-2 text-sm">
<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>
</div>
</div>
@@ -419,7 +419,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<UButton
v-if="itemInfo.accounts.length > 1 && mode !== 'show'"
icon="i-heroicons-trash"
color="rose"
color="error"
variant="ghost"
size="xs"
class="absolute top-2 right-2"
@@ -428,7 +428,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 md:col-span-6">
<UFormGroup label="Konto / Kategorie">
<UFormField label="Konto / Kategorie">
<USelectMenu
v-model="item.account"
:options="accounts"
@@ -446,11 +446,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
{{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
</template>
</USelectMenu>
</UFormGroup>
</UFormField>
</div>
<div class="col-span-12 md:col-span-6">
<UFormGroup label="Kostenstelle">
<UFormField label="Kostenstelle">
<USelectMenu
v-model="item.costCentre"
:options="costcentres"
@@ -464,11 +464,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
{{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
</template>
</USelectMenu>
</UFormGroup>
</UFormField>
</div>
<div class="col-span-12 md:col-span-3">
<UFormGroup label="Betrag (Netto)">
<UFormField label="Betrag (Netto)">
<UInput
type="number"
step="0.01"
@@ -478,11 +478,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
>
<template #trailing>€</template>
</UInput>
</UFormGroup>
</UFormField>
</div>
<div class="col-span-12 md:col-span-3">
<UFormGroup label="Betrag (Brutto)">
<UFormField label="Betrag (Brutto)">
<UInput
type="number"
step="0.01"
@@ -492,11 +492,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
>
<template #trailing>€</template>
</UInput>
</UFormGroup>
</UFormField>
</div>
<div class="col-span-6 md:col-span-3">
<UFormGroup label="Steuerschlüssel">
<UFormField label="Steuerschlüssel">
<USelectMenu
v-model="item.taxType"
:options="taxOptions"
@@ -505,15 +505,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
:disabled="mode === 'show'"
@change="recalculateItem(item, 'taxType')"
/>
</UFormGroup>
</UFormField>
</div>
<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" >
<template #trailing>€</template>
</UInput>
</UFormGroup>
</UFormField>
</div>
<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
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
color="error"
@click="clearSearchString()"
v-if="searchString.length > 0"
/>
@@ -203,15 +203,15 @@ const selectIncomingInvoice = (invoice) => {
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)"
:items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple
class="hidden lg:block"
by="key"
: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)"
>
<template #label>
<template #default>
Spalten
</template>
</USelectMenu>
@@ -220,11 +220,11 @@ const selectIncomingInvoice = (invoice) => {
icon="i-heroicons-adjustments-horizontal-solid"
multiple
v-model="selectedFilters"
:options="selectableFilters"
:items="selectableFilters"
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }"
:content="{ width: 'min-w-max' }"
>
<template #label>
<template #default>
Filter
</template>
</USelectMenu>
@@ -244,42 +244,42 @@ const selectIncomingInvoice = (invoice) => {
{{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
</UBadge>
</template>
<template #item="{item}">
<template #content="{item}">
<div style="height: 80dvh; overflow-y: scroll">
<UTable
v-model:sort="sort"
v-model:sorting="sort"
sort-mode="manual"
@update:sort="setupPage"
:rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
:columns="columns"
@update:sorting="setupPage"
:data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
:columns="normalizeTableColumns(columns)"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => selectIncomingInvoice(i) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
:on-select="(i) => selectIncomingInvoice(i) "
:empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #reference-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
<span v-else>{{row.reference}}</span>
<template #reference-cell="{row}">
<span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
<span v-else>{{row.original.reference}}</span>
</template>
<template #state-data="{row}">
<span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
<span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
<span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
<template #state-cell="{row}">
<span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
<span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
<span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
</template>
<template #date-data="{row}">
{{dayjs(row.date).format("DD.MM.YYYY")}}
<template #date-cell="{row}">
{{dayjs(row.original.date).format("DD.MM.YYYY")}}
</template>
<template #vendor-data="{row}">
{{row.vendor ? row.vendor.name : ""}}
<template #vendor-cell="{row}">
{{row.original.vendor ? row.original.vendor.name : ""}}
</template>
<template #amount-data="{row}">
{{displayCurrency(sum.getIncomingInvoiceSum(row))}}
<template #amount-cell="{row}">
{{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
</template>
<template #dueDate-data="{row}">
<span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
<template #dueDate-cell="{row}">
<span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
</template>
<template #paid-data="{row}">
<span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
<template #paid-cell="{row}">
<span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
<span v-else class="text-rose-600">Offen</span>
</template>
</UTable>

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

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

2
frontend/pages/login.vue
View File

@@ -16,7 +16,7 @@ const doLogin = async (data:any) => {
await router.push("/")
} 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>

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

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

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

@@ -24,7 +24,7 @@ const doChange = async (data:any) => {
await auth.logout()
return navigateTo("/login")
} 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>

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

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

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

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

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

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

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

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

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

@@ -51,7 +51,7 @@ const savingUser = ref(false)
const savingTenant = ref(false)
const creatingUser = ref(false)
const creatingTenant = ref(false)
const activeTab = ref(0)
const activeTab = ref("0")
const createUserModalOpen = ref(false)
const createTenantModalOpen = ref(false)
const createdUserPassword = ref("")
@@ -105,12 +105,14 @@ const userTableColumns = [
{ key: "tenant_count", label: "Tenants" },
{ key: "is_admin", label: "Admin" },
]
const normalizedUserTableColumns = normalizeTableColumns(userTableColumns)
const tenantTableColumns = [
{ key: "name", label: "Tenant" },
{ key: "short", label: "Kürzel" },
{ key: "user_count", label: "Benutzer" },
]
const normalizedTenantTableColumns = normalizeTableColumns(tenantTableColumns)
const userTableRows = computed(() =>
sortedUsers.value.map((user) => ({
@@ -470,7 +472,7 @@ onMounted(async () => {
:items="tabItems"
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">
<UCard class="admin-card xl:col-span-1">
<div class="flex items-center justify-between mb-4">
@@ -490,9 +492,9 @@ onMounted(async () => {
<div class="admin-scroll">
<UTable
v-if="!loading"
:rows="userTableRows"
:columns="userTableColumns"
@select="selectUser"
:data="userTableRows"
:columns="normalizedUserTableColumns"
:on-select="selectUser"
/>
<USkeleton v-else class="h-80" />
@@ -517,53 +519,53 @@ onMounted(async () => {
</div>
<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" />
</UFormGroup>
</UFormField>
<UFormGroup label="Profil Vorname">
<UFormField label="Profil Vorname">
<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" />
</UFormGroup>
</UFormField>
<UFormGroup label="Tenants">
<UFormField label="Tenants">
<USelectMenu
:model-value="userForm.tenant_ids"
:options="tenantOptions"
value-attribute="value"
option-attribute="label"
:items="tenantOptions"
value-key="value"
label-key="label"
multiple
@update:model-value="updateUserTenants"
/>
</UFormGroup>
</UFormField>
<UFormGroup label="Administrative Freigabe">
<UFormField label="Administrative Freigabe">
<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>
</div>
</UFormGroup>
</UFormField>
<UFormGroup label="Multi-Tenant">
<UFormField label="Multi-Tenant">
<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>
</div>
</UFormGroup>
</UFormField>
<UFormGroup label="Passwortwechsel erzwingen">
<UFormField label="Passwortwechsel erzwingen">
<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>
</div>
</UFormGroup>
</UFormField>
</UForm>
<div>
<UDivider label="Rollen pro Tenant" class="mb-4" />
<USeparator label="Rollen pro Tenant" class="mb-4" />
<div
v-if="userForm.tenant_ids.length"
@@ -584,33 +586,33 @@ onMounted(async () => {
</div>
</div>
<UFormGroup label="Rolle">
<UFormField label="Rolle">
<USelectMenu
:model-value="getRoleForTenant(tenantId)"
:options="getRoleOptionsForTenant(tenantId)"
value-attribute="value"
option-attribute="label"
:items="getRoleOptionsForTenant(tenantId)"
value-key="value"
label-key="label"
placeholder="Rolle auswählen"
@update:model-value="(value) => setRoleForTenant(tenantId, value)"
/>
</UFormGroup>
</UFormField>
<UFormGroup label="Freies Profil">
<UFormField label="Freies Profil">
<USelectMenu
:model-value="getProfileAssignmentForTenant(tenantId)"
:options="[
:items="[
{ label: 'Neues Profil erzeugen', value: null },
...getFreeProfilesForTenant(tenantId).map((profile) => ({
label: profile.full_name || `${profile.first_name} ${profile.last_name}`,
value: profile.id,
}))
]"
value-attribute="value"
option-attribute="label"
value-key="value"
label-key="label"
placeholder="Profil auswählen"
@update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
/>
</UFormGroup>
</UFormField>
</div>
</UCard>
</div>
@@ -625,7 +627,7 @@ onMounted(async () => {
</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">
<UBadge
v-for="profile in userForm.profiles"
@@ -672,9 +674,9 @@ onMounted(async () => {
<div class="admin-scroll">
<UTable
v-if="!loading"
:rows="tenantTableRows"
:columns="tenantTableColumns"
@select="selectTenant"
:data="tenantTableRows"
:columns="normalizedTenantTableColumns"
:on-select="selectTenant"
/>
<USkeleton v-else class="h-80" />
@@ -699,17 +701,17 @@ onMounted(async () => {
</div>
<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" />
</UFormGroup>
</UFormField>
<UFormGroup label="Kürzel">
<UFormField label="Kürzel">
<UInput v-model="tenantForm.short" />
</UFormGroup>
</UFormField>
</UForm>
<div>
<UDivider label="Zugeordnete Benutzer" class="mb-4" />
<USeparator label="Zugeordnete Benutzer" class="mb-4" />
<div class="flex flex-wrap gap-2">
<UBadge
v-for="user in getUsersForTenant(tenantForm.id)"
@@ -740,50 +742,51 @@ onMounted(async () => {
</UTabs>
</UDashboardPanelContent>
<UModal v-model="createUserModalOpen">
<UCard>
<template #header>
<div class="text-lg font-semibold">Benutzer anlegen</div>
</template>
<UModal v-model:open="createUserModalOpen">
<template #content>
<UCard>
<template #header>
<div class="text-lg font-semibold">Benutzer anlegen</div>
</template>
<UForm
:state="createUserForm"
class="space-y-4"
@submit.prevent="createUser"
>
<UFormGroup label="E-Mail">
<UFormField label="E-Mail">
<UInput v-model="createUserForm.email" type="email" />
</UFormGroup>
</UFormField>
<UFormGroup label="Initialpasswort">
<UFormField label="Initialpasswort">
<UInput
v-model="createUserForm.password"
type="text"
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" />
</UFormGroup>
</UFormField>
<UFormGroup label="Nachname für neues Profil">
<UFormField label="Nachname für neues Profil">
<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">
<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>
</div>
</UFormGroup>
</UFormField>
<UFormGroup label="Multi-Tenant">
<UFormField label="Multi-Tenant">
<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>
</div>
</UFormGroup>
</UFormField>
<div class="flex justify-end gap-3 pt-2">
<UButton color="gray" variant="soft" @click="createUserModalOpen = false">
@@ -793,28 +796,30 @@ onMounted(async () => {
Benutzer anlegen
</UButton>
</div>
</UForm>
</UCard>
</UForm>
</UCard>
</template>
</UModal>
<UModal v-model="createTenantModalOpen">
<UCard>
<template #header>
<div class="text-lg font-semibold">Tenant anlegen</div>
</template>
<UModal v-model:open="createTenantModalOpen">
<template #content>
<UCard>
<template #header>
<div class="text-lg font-semibold">Tenant anlegen</div>
</template>
<UForm
:state="createTenantForm"
class="space-y-4"
@submit.prevent="createTenant"
>
<UFormGroup label="Name">
<UFormField label="Name">
<UInput v-model="createTenantForm.name" />
</UFormGroup>
</UFormField>
<UFormGroup label="Kürzel">
<UFormField label="Kürzel">
<UInput v-model="createTenantForm.short" />
</UFormGroup>
</UFormField>
<UAlert
title="Seed-Daten"
@@ -831,8 +836,9 @@ onMounted(async () => {
Tenant anlegen
</UButton>
</div>
</UForm>
</UCard>
</UForm>
</UCard>
</template>
</UModal>
<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) {
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()
} catch (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
</UButton>
<USlideover
v-model="showAddBankRequisition"
v-model:open="showAddBankRequisition"
>
<UCard
class="h-full"
>
<template #header>
<p>Bankverbindung hinzufügen</p>
</template>
<template #body>
<UCard
class="h-full"
>
<template #header>
<p>Bankverbindung hinzufügen</p>
</template>
<UFormGroup
<UFormField
label="BIC:"
class="flex-auto"
>
@@ -127,7 +128,7 @@ setupPage()
</UButton>
</InputGroup>
</UFormGroup>
</UFormField>
<UAlert
v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
title="Bank gefunden"
@@ -137,51 +138,54 @@ setupPage()
class="mt-3"
:actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
/>
<UAlert
v-else-if="showAlert && !bankData.id"
title="Bank nicht gefunden"
icon="i-heroicons-x-circle"
color="rose"
variant="outline"
class="mt-3"
/>
<UAlert
v-else-if="showAlert && !bankData.id"
title="Bank nicht gefunden"
icon="i-heroicons-x-circle"
color="error"
variant="outline"
class="mt-3"
/>
</UCard>
</UCard>
</template>
</USlideover>
</template>
</UDashboardNavbar>
<UModal v-model="showReqData">
<UCard>
<template #header>
Verfügbare Bankkonten
</template>
<div
v-for="account in reqData.accounts"
:key="account.id"
class="p-2 m-3 flex justify-between"
>
{{account.iban}} - {{account.owner_name}}
<UModal v-model:open="showReqData">
<template #content>
<UCard>
<template #header>
Verfügbare Bankkonten
</template>
<div
v-for="account in reqData.accounts"
:key="account.id"
class="p-2 m-3 flex justify-between"
>
{{account.iban}} - {{account.owner_name}}
<UButton
@click="addAccount(account)"
v-if="!bankaccounts.find(i => i.iban === account.iban)"
>
Hinzufügen
</UButton>
<UButton
@click="updateAccount(account)"
v-else
>
Aktualisieren
</UButton>
</div>
</UCard>
<UButton
@click="addAccount(account)"
v-if="!bankaccounts.find(i => i.iban === account.iban)"
>
Hinzufügen
</UButton>
<UButton
@click="updateAccount(account)"
v-else
>
Aktualisieren
</UButton>
</div>
</UCard>
</template>
</UModal>
<UTable
:rows="bankaccounts"
:columns="[
:data="bankaccounts"
:columns="normalizeTableColumns([
{
key: 'expired',
label: 'Aktiv'
@@ -198,23 +202,23 @@ setupPage()
key: 'balance',
label: 'Saldo'
},
]"
])"
>
<template #expired-data="{row}">
<span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
<template #expired-cell="{ row }">
<span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
<span v-else class="text-primary">Aktiv</span>
<UButton
v-if="row.expired"
v-if="row.original.expired"
variant="outline"
class="ml-2"
@click="generateLink(row.bankId)"
@click="generateLink(row.original.bankId)"
>Aktualisieren</UButton>
</template>
<template #balance-data="{row}">
{{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
<template #balance-cell="{ row }">
{{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
</template>
<template #iban-data="{row}">
{{row.iban.match(/.{1,5}/g).join(" ")}}
<template #iban-cell="{ row }">
{{ row.original.iban.match(/.{1,5}/g).join(" ") }}
</template>
</UTable>

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

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

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

@@ -32,22 +32,23 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
<template>
<UModal
v-model="showEmailAddressModal"
v-model:open="showEmailAddressModal"
>
<UCard>
<template #header>
E-Mail Adresse
</template>
<!-- <UFormGroup
<template #content>
<UCard>
<template #header>
E-Mail Adresse
</template>
<!-- <UFormField
label="E-Mail Adresse:"
>
</UFormGroup>-->
</UFormField>-->
<UInput
v-model="createEMailAddress"
/>
<!-- <UFormGroup
<!-- <UFormField
label="Account Typ:"
>
<USelectMenu
@@ -56,15 +57,16 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
value-attribute="key"
v-model="createEMailType"
/>
</UFormGroup>-->
<template #footer>
<UButton
@click="createAccount"
>
Erstellen
</UButton>
</template>
</UCard>
</UFormField>-->
<template #footer>
<UButton
@click="createAccount"
>
Erstellen
</UButton>
</template>
</UCard>
</template>
</UModal>
<UDashboardNavbar title="E-Mail Konten">
@@ -80,12 +82,12 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
</template>
</UDashboardNavbar>
<UTable
:rows="items"
:columns="columns"
:data="items"
:columns="normalizeTableColumns(columns)"
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' }"
: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>
</template>

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

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

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

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

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

@@ -80,7 +80,7 @@ const updateNumberRanges = async (range) => {
<UDashboardToolbar>
<UAlert
title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
color="rose"
color="error"
variant="outline"
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'">
<UAlert
class="mt-5"
@@ -190,17 +190,17 @@ setupPage()
<div v-if="item.label === 'Rechnung & Kontakt'">
<UCard class="mt-5">
<UForm class="w-1/2">
<UFormGroup
<UFormField
label="Firmenname:"
>
<UInput v-model="businessInfo.name"/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="Straße + Hausnummer:"
>
<UInput v-model="businessInfo.street"/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
label="PLZ + Ort"
class="w-full"
>
@@ -208,41 +208,41 @@ setupPage()
<UInput v-model="businessInfo.zip"/>
<UInput v-model="businessInfo.city" class="flex-auto"/>
</InputGroup>
</UFormGroup>
</UFormField>
<UButton
class="mt-3"
@click="updateTenant({businessInfo: businessInfo})"
>
Speichern
</UButton>
<UFormGroup
<UFormField
label="Kontenrahmen:"
class="mt-6"
>
<USelectMenu
v-model="accountChart"
:options="accountChartOptions"
option-attribute="label"
value-attribute="value"
:items="accountChartOptions"
label-key="label"
value-key="value"
/>
</UFormGroup>
</UFormField>
<UButton
class="mt-3"
@click="updateTenant({accountChart: accountChart})"
>
Kontenrahmen speichern
</UButton>
<UFormGroup
<UFormField
label="USt-Auswertung:"
class="mt-6"
>
<USelectMenu
v-model="taxEvaluationPeriod"
:options="TAX_EVALUATION_PERIOD_OPTIONS"
option-attribute="label"
value-attribute="value"
:items="TAX_EVALUATION_PERIOD_OPTIONS"
label-key="label"
value-key="value"
/>
</UFormGroup>
</UFormField>
<UButton
class="mt-3"
@click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})"
@@ -258,7 +258,7 @@ setupPage()
<UAlert
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."
color="rose"
color="error"
variant="outline"
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
texttemplates.value = await select()
} 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 {
loading.value = false
}
@@ -93,7 +93,7 @@ const handleCreate = async () => {
editTemplateModalOpen.value = false
await refreshData()
} 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 {
isSaving.value = false
}
@@ -109,7 +109,7 @@ const handleUpdate = async () => {
editTemplateModalOpen.value = false
await refreshData()
} 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 {
isSaving.value = false
}
@@ -122,7 +122,7 @@ const handleArchive = async (row) => {
await refreshData()
} 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
class="mt-3"
:rows="texttemplates"
:data="texttemplates"
:loading="loading"
v-model:expand="expand"
:empty-state="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
:columns="[
:empty="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
:columns="normalizeTableColumns([
{ key: 'name', label: 'Bezeichnung' },
{ key: 'documentType', label: 'Verwendung' },
{ key: 'pos', label: 'Position' },
{ key: 'default', label: 'Standard' },
{ key: 'actions', label: '' }
]"
])"
>
<template #name-data="{ row }">
<span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span>
<template #name-cell="{ row }">
<span class="font-medium text-gray-900 dark:text-white">{{ row.original.name }}</span>
</template>
<template #documentType-data="{ row }">
<template #documentType-cell="{ row }">
<UBadge color="gray" variant="soft">
{{ getDocLabel(row.documentType) }}
{{ getDocLabel(row.original.documentType) }}
</UBadge>
</template>
<template #pos-data="{ row }">
<template #pos-cell="{ row }">
<div class="flex items-center gap-2">
<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"
/>
<span>{{ row.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
<span>{{ row.original.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
</div>
</template>
<template #default-data="{ row }">
<UIcon v-if="row.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
<template #default-cell="{ row }">
<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>
</template>
<template #actions-data="{ row }">
<UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row)"/>
<template #actions-cell="{ row }">
<UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row.original)"/>
</template>
<template #expand="{ row }">
@@ -206,13 +206,13 @@ const getDocLabel = (type) => {
<div class="mb-4">
<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">
{{ row.text }}
{{ row.original.text }}
</p>
</div>
<div class="flex justify-end gap-3">
<ButtonWithConfirm
color="rose"
color="error"
variant="soft"
icon="i-heroicons-archive-box"
@confirmed="handleArchive(row)"
@@ -236,26 +236,27 @@ const getDocLabel = (type) => {
</UTable>
</UDashboardPanelContent>
<UModal v-model="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
<UCard>
<template #header>
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">
{{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
</div>
</template>
<UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
<template #content>
<UCard>
<template #header>
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">
{{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
</div>
</template>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<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"/>
</UFormGroup>
</UFormField>
<div class="grid grid-cols-2 gap-4">
<UFormGroup label="Dokumententyp" required>
<UFormField label="Dokumententyp" required>
<USelectMenu
v-model="itemInfo.documentType"
:options="Object.keys(dataStore.documentTypesForCreation || {})
@@ -264,9 +265,9 @@ const getDocLabel = (type) => {
option-attribute="label"
value-attribute="key"
/>
</UFormGroup>
</UFormField>
<UFormGroup label="Position" required>
<UFormField label="Position" required>
<USelectMenu
v-model="itemInfo.pos"
:options="[
@@ -276,10 +277,10 @@ const getDocLabel = (type) => {
option-attribute="label"
value-attribute="key"
/>
</UFormGroup>
</UFormField>
</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
ref="textareaRef"
v-model="itemInfo.text"
@@ -287,7 +288,7 @@ const getDocLabel = (type) => {
placeholder="Sehr geehrte Damen und Herren..."
class="font-mono text-sm"
/>
</UFormGroup>
</UFormField>
<UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
</div>
@@ -342,34 +343,35 @@ const getDocLabel = (type) => {
</div>
<template #footer>
<div class="flex justify-end gap-3">
<UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
Abbrechen
</UButton>
<template #footer>
<div class="flex justify-end gap-3">
<UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
Abbrechen
</UButton>
<UButton
v-if="!itemInfo.id"
color="primary"
:loading="isSaving"
@click="handleCreate"
icon="i-heroicons-plus"
>
Erstellen
</UButton>
<UButton
v-if="!itemInfo.id"
color="primary"
:loading="isSaving"
@click="handleCreate"
icon="i-heroicons-plus"
>
Erstellen
</UButton>
<UButton
v-else
color="primary"
:loading="isSaving"
@click="handleUpdate"
icon="i-heroicons-check"
>
Speichern
</UButton>
</div>
</template>
</UCard>
<UButton
v-else
color="primary"
:loading="isSaving"
@click="handleUpdate"
icon="i-heroicons-check"
>
Speichern
</UButton>
</div>
</template>
</UCard>
</template>
</UModal>
</template>

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

@@ -179,99 +179,99 @@ onMounted(fetchProfile)
</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">
<UFormGroup label="Vorname">
<UFormField label="Vorname">
<UInput v-model="profile.first_name" />
</UFormGroup>
</UFormField>
<UFormGroup label="Nachname">
<UFormField label="Nachname">
<UInput v-model="profile.last_name" />
</UFormGroup>
</UFormField>
<UFormGroup label="E-Mail">
<UFormField label="E-Mail">
<UInput v-model="profile.email" />
</UFormGroup>
</UFormField>
<UFormGroup label="Telefon (Mobil)">
<UFormField label="Telefon (Mobil)">
<UInput v-model="profile.mobile_tel" />
</UFormGroup>
</UFormField>
<UFormGroup label="Telefon (Festnetz)">
<UFormField label="Telefon (Festnetz)">
<UInput v-model="profile.fixed_tel" />
</UFormGroup>
</UFormField>
<UFormGroup label="Geburtstag">
<UFormField label="Geburtstag">
<div class="flex items-center gap-2">
<UInput type="date" v-model="profile.birthday" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('birthday')" />
</div>
</UFormGroup>
</UFormField>
</UForm>
</UCard>
<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">
<UFormGroup label="Vertragsart">
<UFormField label="Vertragsart">
<UInput v-model="profile.contract_type"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Status">
<UFormField label="Status">
<UInput v-model="profile.status"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Position">
<UFormField label="Position">
<UInput v-model="profile.position"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Qualifikation">
<UFormField label="Qualifikation">
<UInput v-model="profile.qualification"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Eintrittsdatum">
<UFormField label="Eintrittsdatum">
<div class="flex items-center gap-2">
<UInput type="date" v-model="profile.entry_date" class="flex-1" />
<UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('entry_date')" />
</div>
</UFormGroup>
</UFormField>
<UFormGroup label="Wöchentliche Arbeitszeit (Std)">
<UFormField label="Wöchentliche Arbeitszeit (Std)">
<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" />
</UFormGroup>
<UFormGroup label="Aktiv">
</UFormField>
<UFormField label="Aktiv">
<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>
</div>
</UFormGroup>
</UFormField>
</UForm>
</UCard>
<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">
<UFormGroup label="Straße und Hausnummer">
<UFormField label="Straße und Hausnummer">
<UInput v-model="profile.address_street"/>
</UFormGroup>
</UFormField>
<UFormGroup label="PLZ">
<UFormField label="PLZ">
<UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Ort">
<UFormField label="Ort">
<UInput v-model="profile.address_city"/>
</UFormGroup>
</UFormField>
<UFormGroup label="Bundesland">
<UFormField label="Bundesland">
<USelectMenu
v-model="profile.state_code"
:options="bundeslaender"
@@ -279,13 +279,13 @@ onMounted(fetchProfile)
option-attribute="name"
placeholder="Bundesland auswählen"
/>
</UFormGroup>
</UFormField>
</UForm>
</UCard>
<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
@@ -313,23 +313,23 @@ onMounted(fetchProfile)
</UCard>
<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">
<UFormGroup label="Kleidergröße (Oberteil)">
<UFormField label="Kleidergröße (Oberteil)">
<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" />
</UFormGroup>
</UFormField>
<UFormGroup label="Schuhgröße">
<UFormField label="Schuhgröße">
<UInput v-model="profile.clothing_size_shoe" />
</UFormGroup>
</UFormField>
<UFormGroup label="Token-ID">
<UFormField label="Token-ID">
<UInput v-model="profile.token_id" />
</UFormGroup>
</UFormField>
</UForm>
</UCard>

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

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

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

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

@@ -32,6 +32,10 @@ const rejectReason = ref("")
const users = ref([])
const selectedUser = ref(auth.user.id)
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
const entries = ref([])
@@ -61,7 +65,7 @@ const typeLabel = {
const typeColor = {
work: "gray",
vacation: "yellow",
sick: "rose",
sick: "error",
holiday: "blue",
other: "gray"
}
@@ -130,7 +134,7 @@ async function confirmReject() {
showRejectModal.value = false
await load()
} 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 {
loading.value = false
entryToReject.value = null
@@ -167,10 +171,10 @@ onMounted(async () => {
<div v-if="canViewAll" class="flex items-center gap-2">
<USelectMenu
v-model="selectedUser"
:options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
:items="userItems"
placeholder="Benutzer auswählen"
value-attribute="value"
option-attribute="label"
value-key="value"
label-key="label"
class="min-w-[220px]"
:clearable="false"
/>
@@ -211,11 +215,11 @@ onMounted(async () => {
</div>
<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" />
</template>
<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>
<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' } }">
<UTable
:rows="entries"
:columns="[
:data="entries"
:columns="normalizeTableColumns([
{ key: 'actions', label: 'Aktionen', class: 'w-32' },
{ key: 'state', label: 'Status' },
{ key: 'started_at', label: 'Start' },
@@ -236,50 +240,50 @@ onMounted(async () => {
{ key: 'duration_minutes', label: 'Dauer' },
{ key: 'type', label: 'Typ' },
{ 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 }">
<UBadge v-if="row.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.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
<template #state-cell="{ row }">
<UBadge v-if="row.original.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
<UBadge v-else-if="row.original.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
<UBadge v-else-if="row.original.state === 'rejected'" color="error" variant="subtle">Abgelehnt</UBadge>
<UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
</template>
<template #type-data="{ row }">
<UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
<template #type-cell="{ row }">
<UBadge :color="typeColor[row.original.type] || 'gray'" variant="soft">{{ typeLabel[row.original.type] || row.original.type }}</UBadge>
</template>
<template #started_at-data="{ row }">
<span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
<template #started_at-cell="{ row }">
<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.original.started_at).format("DD.MM.YY HH:mm") }}</span>
</template>
<template #stopped_at-data="{ row }">
<span v-if="!row.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>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
<template #stopped_at-cell="{ row }">
<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.original.type)">{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY HH:mm") }}</span>
</template>
<template #duration_minutes-data="{ row }">
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
<template #duration_minutes-cell="{ row }">
{{ row.original.duration_minutes ? useFormatDuration(row.original.duration_minutes) : "-" }}
</template>
<template #actions-data="{ row }">
<template #actions-cell="{ row }">
<div class="flex items-center gap-1">
<UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
<UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
<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.original)" :loading="loading" />
</UTooltip>
<UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
<UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
<UTooltip text="Genehmigen" v-if="row.original.state === 'submitted' && canViewAll">
<UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row.original)" :loading="loading" />
</UTooltip>
<UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
<UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
<UTooltip text="Ablehnen" v-if="(row.original.state === 'submitted' || row.original.state === 'approved') && canViewAll">
<UButton size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row.original)" :loading="loading" />
</UTooltip>
<UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
<UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
<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.original)" />
</UTooltip>
</div>
</template>
<template #description-data="{ row }">
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
<span v-else>{{row.description}}</span>
<template #description-cell="{ row }">
<span v-if="row.original.type === 'vacation'">{{ row.original.vacation_reason }}</span>
<span v-else-if="row.original.type === 'sick'">{{ row.original.sick_reason }}</span>
<span v-else>{{ row.original.description }}</span>
</template>
</UTable>
</UCard>
@@ -334,7 +338,7 @@ onMounted(async () => {
<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 === '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>
</div>
</div>
@@ -363,7 +367,7 @@ onMounted(async () => {
<UButton
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"
/>
@@ -403,7 +407,7 @@ onMounted(async () => {
</div>
<div class="flex gap-2">
<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" />
</template>
</div>
@@ -422,7 +426,7 @@ onMounted(async () => {
</div>
<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 === 'rejected'" color="red">Abgelehnt</UBadge>
<UBadge v-else-if="row.state === 'rejected'" color="error">Abgelehnt</UBadge>
<UBadge v-else color="gray">Entwurf</UBadge>
</div>
<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"
/>
<UModal v-model="showRejectModal">
<UCard :ui="{ 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">
Zeiteintrag ablehnen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
<UModal v-model:open="showRejectModal">
<template #content>
<UCard :ui="{ 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">
Zeiteintrag ablehnen
</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>
</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>
<UFormGroup label="Grund (optional)" name="reason">
<UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
</UFormGroup>
</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>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
<UButton color="error" :loading="loading" @click="confirmReject">Bestätigen</UButton>
</div>
</template>
</UCard>
</template>
</UModal>
</template>
</template>

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

@@ -73,6 +73,24 @@ const sort = ref({
column: dataType.sortColumn || "created_at",
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({})
@@ -282,6 +300,19 @@ const handleFilterChange = async (action,column) => {
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>
@@ -313,7 +344,7 @@ const handleFilterChange = async (action,column) => {
<UButton
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
color="error"
@click="clearSearchString()"
/>
@@ -336,10 +367,10 @@ const handleFilterChange = async (action,column) => {
<template #left>
<UTooltip :text="`${dataType.label} pro Seite`">
<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"
value-attribute="value"
option-attribute="value"
value-key="value"
label-key="value"
@change="setupPage"
/>
</UTooltip>
@@ -363,15 +394,15 @@ const handleFilterChange = async (action,column) => {
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="dataType.templateColumns.filter(i => !i.disabledInTable)"
:items="dataType.templateColumns.filter(i => !i.disabledInTable)"
multiple
class="hidden lg:block"
by="key"
: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)"
>
<template #label>
<template #default>
Spalten
</template>
</USelectMenu>
@@ -382,18 +413,15 @@ const handleFilterChange = async (action,column) => {
<div v-if="!platformIsNative">
<UTable
:loading="loading"
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
sort-mode="manual"
v-model:sort="sort"
@update:sort="setupPage"
v-model:sorting="sorting"
v-if="dataType && columns && items.length > 0 && !loading"
:rows="items"
:columns="columns"
:data="items"
:columns="normalizeTableColumns(columns)"
class="w-full"
style="height: 85dvh"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
:on-select="(row) => router.push(`/standardEntity/${type}/show/${row.original.id}`)"
:empty="`Keine ${dataType.label} anzuzeigen`"
>
<template
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`"
>
<USelectMenu
:options="itemsMeta?.distinctValues?.[column.key]"
:items="(itemsMeta?.distinctValues?.[column.key] || []).map(value => ({ label: value, value }))"
v-model="columnsToFilter[column.key]"
multiple
@change="handleFilterChange('change', column.key)"
searchable
searchable-placeholder="Suche..."
:search-attributes="[column.key]"
:ui-menu="{ width: 'min-w-max' }"
clear-search-on-close
:search-input="{ placeholder: 'Suche...' }"
value-key="value"
label-key="label"
:content="{ width: 'min-w-max' }"
>
<template #empty>
Keine Einträge in der Spalte {{column.label}}
</template>
<template #default="{open}">
<template #default="slotProps">
<UButton
:disabled="!columnsToFilter[column.key]?.length > 0"
: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>
<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>
</template>
@@ -458,7 +485,7 @@ const handleFilterChange = async (action,column) => {
<UButton
@click="handleFilterChange('reset',column.key)"
variant="outline"
color="rose"
color="error"
>
X
</UButton>
@@ -468,48 +495,54 @@ const handleFilterChange = async (action,column) => {
</InputGroup>
</template>
<template #name-data="{row}">
<template #name-cell="{row}">
<span
v-if="row.id === items[selectedItem].id"
class="text-primary-500 font-bold">
v-if="row.original.id === items[selectedItem]?.id"
class="block truncate text-primary-500 font-bold">
<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>
<span v-else>
<span v-else class="block truncate">
<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>
</template>
<template #fullName-data="{row}">
<template #fullName-cell="{row}">
<span
v-if="row.id === items[selectedItem].id"
class="text-primary-500 font-bold">{{row.fullName}}
v-if="row.original.id === items[selectedItem]?.id"
class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
</span>
<span v-else>
{{row.fullName}}
<span v-else class="block truncate">
{{ row.original.fullName }}
</span>
</template>
<template #licensePlate-data="{row}">
<template #licensePlate-cell="{row}">
<span
v-if="row.id === items[selectedItem].id"
class="text-primary-500 font-bold">{{row.licensePlate}}
v-if="row.original.id === items[selectedItem]?.id"
class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
</span>
<span v-else>
{{row.licensePlate}}
<span v-else class="block truncate">
{{ row.original.licensePlate }}
</span>
</template>
<template
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}">
<component v-if="column.component" :is="column.component" :row="row"></component>
<span v-else-if="row[column.key]">
<UTooltip :text="row[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 : ''}`: ''}}
v-slot:[`${column.key}-cell`]="{row}">
<component v-if="column.component" :is="column.component" :row="row.original"></component>
<span v-else-if="row.original[column.key]" class="block truncate">
<UTooltip :text="String(row.original[column.key])">
<span class="block truncate">
{{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
</span>
</UTooltip>
</span>
@@ -550,7 +583,7 @@ const handleFilterChange = async (action,column) => {
v-if="searchString.length > 0"
icon="i-heroicons-x-mark"
variant="ghost"
color="rose"
color="error"
@click="clearSearchString()"
/>
@@ -639,70 +672,72 @@ const handleFilterChange = async (action,column) => {
</UDashboardPanelContent>
<!-- Mobile Filter Slideover -->
<USlideover
v-model="showMobileFilter"
v-model:open="showMobileFilter"
side="bottom"
:ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }"
class="pb-[env(safe-area-inset-bottom)]"
>
<!-- Header -->
<div class="p-4 border-b flex items-center justify-between flex-shrink-0">
<h2 class="text-xl font-bold">Filter</h2>
<UButton
icon="i-heroicons-x-mark"
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%' }"
<template #body>
<!-- Header -->
<div class="p-4 border-b flex items-center justify-between flex-shrink-0">
<h2 class="text-xl font-bold">Filter</h2>
<UButton
icon="i-heroicons-x-mark"
variant="ghost"
@click="showMobileFilter = false"
/>
</div>
</div>
<!-- Scrollable content -->
<div class="flex-1 overflow-y-auto p-4 space-y-6">
<!-- 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
"
>
<UButton
color="rose"
variant="outline"
class="flex-1"
@click="resetMobileFilters"
>
Zurücksetzen
</UButton>
<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>
<UButton
color="primary"
class="flex-1"
@click="applyMobileFilters"
<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>
<!-- 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>
</div>
<UButton
color="error"
variant="outline"
class="flex-1"
@click="resetMobileFilters"
>
Zurücksetzen
</UButton>
<UButton
color="primary"
class="flex-1"
@click="applyMobileFilters"
>
Anwenden
</UButton>
</div>
</template>
</USlideover>

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

@@ -50,60 +50,7 @@ const addMessage = async () => {
<template #center>
{{itemInfo.title}}
</template>
<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>
<template #right />
</UDashboardNavbar>
<UDashboardPanelContent v-if="loaded">

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

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

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

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

Some files were not shown because too many files have changed in this diff Show More