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

Fixed Invoicing Problem and some other Changes

Browse Source
This commit is contained in:
florianfederspiel
2024-12-31 16:07:15 +01:00
parent 9a70879778
commit cacdb442ca
5 changed files with 426 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
components/EntityEdit.vue
View File

@@ -12,6 +12,7 @@ const props = defineProps({
}
})
const {type} = props
defineShortcuts({
@@ -40,9 +41,12 @@ const supabase = useSupabaseClient()
const dataType = dataStore.dataTypes[type]
const openTab = ref(0)
const item = ref(JSON.parse(props.item))
console.log(item.value)
const oldItem = ref(null)
const generateOldItemData = () => {
oldItem.value = JSON.parse(JSON.stringify(props.item))
oldItem.value = JSON.parse(props.item)
}
generateOldItemData()
@@ -50,14 +54,14 @@ generateOldItemData()
const setupCreate = () => {
dataType.templateColumns.forEach(datapoint => {
if(datapoint.key.includes(".")){
props.item[datapoint.key.split(".")[0]] = {}
!item.value[datapoint.key.split(".")[0]] ? item.value[datapoint.key.split(".")[0]] = {} : null
}
if(datapoint.inputType === "editor") {
if(datapoint.key.includes(".")){
props.item[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
item[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
} else {
props.item[datapoint.key] = {}
item[datapoint.key] = {}
}
@@ -72,9 +76,9 @@ const setupQuery = () => {
Object.keys(route.query).forEach(key => {
if(["customer","contract","plant","contact"].includes(key)){
props.item[key] = Number(route.query[key])
item[key] = Number(route.query[key])
} else {
props.item[key] = route.query[key]
item[key] = route.query[key]
}
})
}
@@ -99,7 +103,7 @@ const loadOptions = async () => {
loadedOptions.value[option.option] = (await useSupabaseSelect(option.option))
if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, props.item))
loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, item))
}
}
}
@@ -109,13 +113,13 @@ loadOptions()
const contentChanged = (content, datapoint) => {
if(datapoint.key.includes(".")){
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
} else {
props.item[datapoint.key].html = content.html
props.item[datapoint.key].text = content.text
props.item[datapoint.key].json = content.json
item[datapoint.key].html = content.html
item[datapoint.key].text = content.text
item[datapoint.key].json = content.json
}
}
@@ -136,25 +140,25 @@ const contentChanged = (content, datapoint) => {
</template>
<template #center>
<h1
v-if="props.item"
v-if="item"
:class="['text-xl','font-medium']"
>{{props.item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
>{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
</template>
<template #right>
<UButton
v-if="props.item.id"
@click="dataStore.updateItem(type,props.item, oldItem)"
v-if="item.id"
@click="dataStore.updateItem(type,item, oldItem)"
>
Speichern
</UButton>
<UButton
v-else
@click="dataStore.createNewItem(type,props.item)"
@click="dataStore.createNewItem(type,item)"
>
Erstellen
</UButton>
<UButton
@click="router.push(props.item.id ? `/standardEntity/${type}/show/${props.item.id}` : `/standardEntity/${type}`)"
@click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
color="red"
class="ml-2"
>
@@ -185,29 +189,33 @@ const contentChanged = (content, datapoint) => {
<component
v-if="datapoint.helpComponent"
:is="datapoint.helpComponent"
:item="props.item"
:item="item"
/>
</template>
<div v-if="datapoint.key.includes('.')">
<UInput
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:type="datapoint.inputType"
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
/>
>
<template #trailing v-if="datapoint.inputTrailing">
<span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
</template>
</UInput>
<UToggle
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<USelectMenu
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
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]"
@@ -220,26 +228,26 @@ const contentChanged = (content, datapoint) => {
</template>
</USelectMenu>
<UTextarea
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4"
/>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<template #panel="{ close }">
<LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
</template>
</UPopover>
@@ -247,29 +255,33 @@ const contentChanged = (content, datapoint) => {
<Tiptap
v-else-if="datapoint.inputType === 'editor'"
@updateContent="(i) => contentChanged(i,datapoint)"
:preloadedContent="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
:preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
/>
</div>
<div v-else>
<UInput
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:type="datapoint.inputType"
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
/>
>
<template #trailing v-if="datapoint.inputTrailing">
{{datapoint.inputTrailing}}
</template>
</UInput>
<UToggle
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<USelectMenu
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
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]"
@@ -283,32 +295,32 @@ const contentChanged = (content, datapoint) => {
</template>
</USelectMenu>
<UTextarea
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4"
/>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="props.item[datapoint.key] ? dayjs(props.item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<template #panel="{ close }">
<LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
v-model="props.item[datapoint.key]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
</template>
</UPopover>
<Tiptap
v-else-if="datapoint.inputType === 'editor'"
@updateContent="(i) => contentChanged(i,datapoint)"
:preloadedContent="props.item[datapoint.key].html"
:preloadedContent="item[datapoint.key].html"
/>
</div>
<div
@@ -325,12 +337,12 @@ const contentChanged = (content, datapoint) => {
>
<UInput
v-if="field.type === 'text'"
v-model="props.item.ownFields[field.key]"
v-model="item.ownFields[field.key]"
/>
<USelectMenu
v-else-if="field.type === 'select'"
:options="field.options"
v-model="props.item.ownFields[field.key]"
v-model="item.ownFields[field.key]"
/>
</UFormGroup>
</div>
@@ -346,29 +358,33 @@ const contentChanged = (content, datapoint) => {
<component
v-if="datapoint.helpComponent"
:is="datapoint.helpComponent"
:item="props.item"
:item="item"
/>
</template>
<div v-if="datapoint.key.includes('.')">
<UInput
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:type="datapoint.inputType"
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
/>
>
<template #trailing v-if="datapoint.inputTrailing">
<span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
</template>
</UInput>
<UToggle
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<USelectMenu
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
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]"
@@ -381,26 +397,26 @@ const contentChanged = (content, datapoint) => {
</template>
</USelectMenu>
<UTextarea
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4"
/>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<template #panel="{ close }">
<LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
</template>
</UPopover>
@@ -408,29 +424,33 @@ const contentChanged = (content, datapoint) => {
<Tiptap
v-else-if="datapoint.inputType === 'editor'"
@updateContent="(i) => contentChanged(i,datapoint)"
:preloadedContent="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
:preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
/>
</div>
<div v-else>
<UInput
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-if="['text','number'].includes(datapoint.inputType)"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
:type="datapoint.inputType"
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
/>
>
<template #trailing v-if="datapoint.inputTrailing">
{{datapoint.inputTrailing}}
</template>
</UInput>
<UToggle
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'bool'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<USelectMenu
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'select'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
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]"
@@ -444,32 +464,32 @@ const contentChanged = (content, datapoint) => {
</template>
</USelectMenu>
<UTextarea
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-else-if="datapoint.inputType === 'textarea'"
v-model="props.item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
v-model="item[datapoint.key]"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
rows="4"
/>
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="props.item[datapoint.key] ? dayjs(props.item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
<template #panel="{ close }">
<LazyDatePicker
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item,loadedOptions) : null"
v-model="props.item[datapoint.key]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
v-model="item[datapoint.key]" @close="close"
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
/>
</template>
</UPopover>
<Tiptap
v-else-if="datapoint.inputType === 'editor'"
@updateContent="(i) => contentChanged(i,datapoint)"
:preloadedContent="props.item[datapoint.key].html"
:preloadedContent="item[datapoint.key].html"
/>
</div>
<div
@@ -486,12 +506,12 @@ const contentChanged = (content, datapoint) => {
>
<UInput
v-if="field.type === 'text'"
v-model="props.item.ownFields[field.key]"
v-model="item.ownFields[field.key]"
/>
<USelectMenu
v-else-if="field.type === 'select'"
:options="field.options"
v-model="props.item.ownFields[field.key]"
v-model="item.ownFields[field.key]"
/>
</UFormGroup>
</div>

431
components/EntityShow.vue
View File

@@ -151,6 +151,9 @@ const changeActivePhase = async (key) => {
</UButton>
</template>
</UDashboardNavbar>
<UDashboardPanelContent>
</UDashboardPanelContent>
<UTabs
:items="dataType.showTabs"
v-if="props.item.id"
@@ -158,227 +161,231 @@ const changeActivePhase = async (key) => {
v-model="openTab"
>
<template #item="{item}">
<div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
<UCard class="w-1/2 mr-5">
<UAlert
v-if="item.archived"
color="rose"
variant="outline"
:title="`${dataType.labelSingle} archiviert`"
icon="i-heroicons-light-bulb"
class="mb-5"
/>
<div class="text-wrap">
<table class="w-full">
<tbody>
<tr
v-for="datapoint in dataType.templateColumns"
>
<td>{{datapoint.label}}:</td>
<td>
<component v-if="datapoint.component" :is="datapoint.component" :row="props.item"></component>
<div v-else>
<span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
<span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</UCard>
<UCard class="w-1/2">
<HistoryDisplay
:type="type.substring(0,type.length-1)"
v-if="props.item.id"
:element-id="props.item.id"
render-headline
/>
</UCard>
</div>
<div v-else-if="item.label === 'Dokumente'">
<UCard class="mt-5">
<Toolbar>
<DocumentUpload
:type="type.substring(0,type.length-1)"
:element-id="item.id"
<div class="scroll">
<div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
<UCard class="w-1/2 mr-5">
<UAlert
v-if="item.archived"
color="rose"
variant="outline"
:title="`${dataType.labelSingle} archiviert`"
icon="i-heroicons-light-bulb"
class="mb-5"
/>
</Toolbar>
<div class="text-wrap">
<table class="w-full">
<tbody>
<tr
v-for="datapoint in dataType.templateColumns"
>
<td>{{datapoint.label}}:</td>
<td>
<component v-if="datapoint.component" :is="datapoint.component" :row="props.item"></component>
<div v-else>
<span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
<span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
</div>
</td>
</tr>
</tbody>
<DocumentList
:documents="documents"
/>
</UCard>
</div>
<div v-else-if="item.label === 'Projekte'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Projekt
</UButton>
</Toolbar>
<UTable
:rows="props.item.projects"
@select="(row) => router.push(`/standardEntity/projects/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
</table>
</div>
>
<template #phase-data="{row}">
{{row.phases ? row.phases.find(i => i.active).label : ""}}
</template>
</UTable>
</UCard>
<UCard class="w-1/2">
<HistoryDisplay
:type="type.substring(0,type.length-1)"
v-if="props.item.id"
:element-id="props.item.id"
render-headline
/>
</UCard>
</div>
<div v-else-if="item.label === 'Dokumente'">
<UCard class="mt-5">
<Toolbar>
<DocumentUpload
:type="type.substring(0,type.length-1)"
:element-id="item.id"
/>
</Toolbar>
</UCard>
</div>
<div v-else-if="item.label === 'Objekte'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Objekt
</UButton>
<UButton
v-if="type === 'customers'"
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
>
+ Kundenadresse als Objekt
</UButton>
</Toolbar>
<UTable
:rows="props.item.plants"
@select="(row) => router.push(`/standardEntity/plants/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
>
</UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Aufgaben'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Aufgabe
</UButton>
</Toolbar>
<UTable
:rows="props.item.tasks"
@select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
/>
</UCard>
</div>
<div v-else-if="item.label === 'Verträge'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Vertrag
</UButton>
</Toolbar>
<UTable
:rows="props.item.contracts"
@select="(row) => router.push(`/standardEntity/contracts/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
></UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Überprüfungen'">
<UCard class="mt-5">
<UTable
:rows="props.item.checks"
:columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/checks/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
>
<template #rhythm-data="{row}">
{{row.distance}}
<span v-if="row.distanceUnit === 'dayjs'">Tage</span>
<span v-if="row.distanceUnit === 'years'">Jahre</span>
</template>
</UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Phasen'">
<UCard class="mt-5">
<UAccordion
:items="renderedPhases"
>
<template #default="{item,index,open}">
<DocumentList
:documents="documents"
/>
</UCard>
</div>
<div v-else-if="item.label === 'Projekte'">
<UCard class="mt-5">
<Toolbar>
<UButton
variant="ghost"
:color="item.active ? 'primary' : 'white'"
class="mb-1"
:disabled="true"
@click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
<template #leading>
<div class="w-6 h-6 flex items-center justify-center -my-1">
<UIcon :name="item.icon" class="w-4 h-4 " />
</div>
</template>
<span class="truncate"> {{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']"
/>
</template>
+ Projekt
</UButton>
</template>
<template #item="{item, index}">
<UCard class="mx-5">
<template #header>
<span class="dark:text-white text-black">{{item.label}}</span>
</template>
<InputGroup>
<!-- TODO: Reactive Change Phase -->
<UButton
v-if="!item.activated_at && index !== 0 "
@click="changeActivePhase(item.key)"
>
Phase aktivieren
</UButton>
<UButton
v-if="item.active"
v-for="button in item.quickactions"
@click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
>
{{button.label}}
</UButton>
</InputGroup>
</Toolbar>
<UTable
:rows="props.item.projects"
@select="(row) => router.push(`/standardEntity/projects/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
<div>
<p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
<p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
<p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
</div>
</UCard>
>
<template #phase-data="{row}">
{{row.phases ? row.phases.find(i => i.active).label : ""}}
</template>
</UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Objekte'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Objekt
</UButton>
<UButton
v-if="type === 'customers'"
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
>
+ Kundenadresse als Objekt
</UButton>
</Toolbar>
<UTable
:rows="props.item.plants"
@select="(row) => router.push(`/standardEntity/plants/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
>
</UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Aufgaben'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Aufgabe
</UButton>
</Toolbar>
<UTable
:rows="props.item.tasks"
@select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
/>
</UCard>
</div>
<div v-else-if="item.label === 'Verträge'">
<UCard class="mt-5">
<Toolbar>
<UButton
@click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
>
+ Vertrag
</UButton>
</Toolbar>
<UTable
:rows="props.item.contracts"
@select="(row) => router.push(`/standardEntity/contracts/show/${row.id}`)"
:columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
></UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Überprüfungen'">
<UCard class="mt-5">
<UTable
:rows="props.item.checks"
:columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/checks/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
>
<template #rhythm-data="{row}">
{{row.distance}}
<span v-if="row.distanceUnit === 'dayjs'">Tage</span>
<span v-if="row.distanceUnit === 'years'">Jahre</span>
</template>
</UTable>
</UCard>
</div>
<div v-else-if="item.label === 'Phasen'">
<UCard class="mt-5">
<UAccordion
:items="renderedPhases"
>
<template #default="{item,index,open}">
<UButton
variant="ghost"
:color="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 " />
</div>
</template>
<span class="truncate"> {{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']"
/>
</template>
</UButton>
</template>
<template #item="{item, index}">
<UCard class="mx-5">
<template #header>
<span class="dark:text-white text-black">{{item.label}}</span>
</template>
<InputGroup>
<!-- TODO: Reactive Change Phase -->
<UButton
v-if="!item.activated_at && index !== 0 "
@click="changeActivePhase(item.key)"
>
Phase aktivieren
</UButton>
<UButton
v-if="item.active"
v-for="button in item.quickactions"
@click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
>
{{button.label}}
</UButton>
</InputGroup>
<div>
<p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
<p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
<p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
</div>
</UCard>
</template>
</UAccordion>
</UCard>
</template>
</UAccordion>
</UCard>
</div>
</div>
</template>
</UTabs>
@@ -392,4 +399,10 @@ td {
padding-bottom: 0.15em;
padding-top: 0.15em;
}
.scroll {
height: 80vh;
overflow-y: scroll;
padding: 1em;
}
</style>