Fixed Invoicing Problem and some other Changes

This commit is contained in:
2024-12-31 16:07:15 +01:00
parent 9a70879778
commit cacdb442ca
5 changed files with 426 additions and 369 deletions

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>