522 lines
16 KiB
Vue
522 lines
16 KiB
Vue
<script setup>
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
import dayjs from "dayjs";
|
|
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push("/contracts")
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
const openTab = ref(0)
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
name: "",
|
|
customer: null,
|
|
active: true,
|
|
ownFields: {}
|
|
})
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show" ){
|
|
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name), contact(id,fullName)")
|
|
} else if (mode.value === "edit"){
|
|
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
|
|
}
|
|
|
|
|
|
if(mode.value === "create") {
|
|
let query = route.query
|
|
|
|
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
|
}
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
if(itemInfo.value) {
|
|
router.push(`/contracts/show/${itemInfo.value.id}`)
|
|
} else {
|
|
router.push(`/contracts/`)
|
|
}
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/contracts`)"
|
|
>
|
|
Verträge
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
:class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
|
|
>{{itemInfo ? `Vertrag: ${itemInfo.name}` : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('contracts',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'create'"
|
|
@click="dataStore.createNewItem('contracts',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="cancelEditorCreate"
|
|
color="red"
|
|
class="ml-2"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click="router.push(`/contracts/edit/${itemInfo.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UDashboardPanelContent>
|
|
<UTabs
|
|
v-if="itemInfo.id && mode === 'show'"
|
|
:items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
|
|
class="p-5"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
|
<div class="w-1/2 mr-5">
|
|
<UCard>
|
|
<div class="text-wrap">
|
|
<table class="mb-3">
|
|
<tr>
|
|
<td>Name:</td>
|
|
<td>{{itemInfo.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Aktiv:</td>
|
|
<td>
|
|
<span v-if="itemInfo.active" class="text-primary-500">Ja</span>
|
|
<span v-else class="text-rose-600">Nein</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kundennummer:</td>
|
|
<td><nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ansprechpartner:</td>
|
|
<td><nuxt-link :to="`/contacts/show/${itemInfo.contact.id}`">{{itemInfo.contact ? itemInfo.contact.fullName : ""}}</nuxt-link></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Wiederkehrend:</td>
|
|
<td>{{itemInfo.recurring ? "Ja" : "Nein"}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Startdatum:</td>
|
|
<td>{{dayjs(itemInfo.startDate).format("DD.MM.YYYY")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Enddatum:</td>
|
|
<td>{{dayjs(itemInfo.endDate).format("DD.MM.YYYY")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Unterschrieben am:</td>
|
|
<td>{{dayjs(itemInfo.signDate).format("DD.MM.YYYY")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Laufzeit:</td>
|
|
<td>{{itemInfo.duration}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rechnungsversand:</td>
|
|
<td>{{itemInfo.invoiceDispatch}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Zahlart:</td>
|
|
<td>{{itemInfo.paymentType}}</td>
|
|
</tr>
|
|
<tr v-if="itemInfo.paymentType === 'Einzug'">
|
|
<td>SEPA Mandatsreferenz:</td>
|
|
<td>{{itemInfo.sepaRef}}</td>
|
|
</tr>
|
|
<tr v-if="itemInfo.paymentType === 'Einzug'">
|
|
<td>SEPA Unterschrieben am:</td>
|
|
<td>{{dayjs(itemInfo.sepaDate).format("DD.MM.YYYY")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bank:</td>
|
|
<td>{{itemInfo.bankingName}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>BIC:</td>
|
|
<td>{{itemInfo.bankingBIC}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IBAN:</td>
|
|
<td>{{itemInfo.bankingIban}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kontoinhaber:</td>
|
|
<td>{{itemInfo.bankingOwner}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Beschreibung:</td>
|
|
<td>{{itemInfo.notes}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><span class="font-bold">Eigene Felder:</span></td>
|
|
</tr>
|
|
<tr v-for="fieldKey in Object.keys(itemInfo.ownFields)">
|
|
<td>{{dataStore.ownTenant.ownFields.contracts.find(i => i.key === fieldKey).label}}</td>
|
|
<td>{{itemInfo.ownFields[fieldKey]}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<UCard class="h-full">
|
|
<HistoryDisplay
|
|
type="contract"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
:render-headline="true"
|
|
/>
|
|
</UCard>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <UBadge
|
|
v-if="itemInfo.active"
|
|
>
|
|
Vertrag aktiv
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="red"
|
|
>
|
|
Vertrag gesperrt
|
|
</UBadge>-->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div v-else-if="item.label === 'Dokumente'">
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<DocumentUpload
|
|
type="contract"
|
|
:element-id="itemInfo.id"
|
|
/>
|
|
</Toolbar>
|
|
<DocumentList
|
|
:documents="dataStore.getDocumentsByContractId(itemInfo.id)"
|
|
/>
|
|
</UCard>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
</UTabs>
|
|
<UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
|
|
<div class="mx-auto w-4/5">
|
|
<div class="flex flex-row justify-around">
|
|
<div class="w-1/2">
|
|
<UDivider>Vertragsdaten</UDivider>
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kunde:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.customer"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
:options="dataStore.customers"
|
|
@change="itemInfo.contact = null"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Ansprechpartner:"
|
|
v-if="itemInfo.customer"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.contact"
|
|
option-attribute="fullName"
|
|
value-attribute="id"
|
|
:options="dataStore.getContactsByCustomerId(itemInfo.customer)"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<InputGroup>
|
|
<UFormGroup
|
|
label="Vertrag aktiv:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.active"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Vertrag wiederkehrend:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.recurring"
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
|
|
|
|
<InputGroup>
|
|
<UFormGroup
|
|
label="Vertragsstart:"
|
|
class="mt-2"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.startDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Vertragsende(voraussichtlich):"
|
|
class="mt-2"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.endDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
|
|
<UFormGroup
|
|
label="mindest Vertragslaufzeit:"
|
|
>
|
|
<USelectMenu
|
|
:options="['12 Monate','24 Monate','36 Monate','48 Monate']"
|
|
v-model="itemInfo.duration"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Datum der Unterzeichnung:"
|
|
class="mt-2"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.signDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</div>
|
|
<div class=" ml-5 w-1/2">
|
|
<UDivider>Abrechnung</UDivider>
|
|
<UFormGroup
|
|
label="Rechnungsversand:"
|
|
>
|
|
<USelectMenu
|
|
:options="['E-Mail', 'Post']"
|
|
v-model="itemInfo.invoiceDispatch"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Zahlungsart:"
|
|
>
|
|
<USelectMenu
|
|
:options="['Einzug', 'Überweisung']"
|
|
v-model="itemInfo.paymentType"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Sepa Mandat"
|
|
>
|
|
<InputGroup>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.sepaDate ? dayjs(itemInfo.sepaDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.sepaDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
<UInput
|
|
placeholder="Mandatsreferenz"
|
|
class="flex-auto"
|
|
v-model="itemInfo.sepaRef"
|
|
/>
|
|
</InputGroup>
|
|
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Kontodaten:"
|
|
>
|
|
<InputGroup>
|
|
<UInput
|
|
v-model="itemInfo.bankingIban"
|
|
placeholder="IBAN"
|
|
class="w-1/2"
|
|
/>
|
|
<UInput
|
|
v-model="itemInfo.bankingOwner"
|
|
class="w-1/2"
|
|
placeholder="Inhaber"
|
|
/>
|
|
</InputGroup>
|
|
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Bankdaten:"
|
|
>
|
|
<InputGroup>
|
|
<UInput
|
|
v-model="itemInfo.bankingName"
|
|
placeholder="Name"
|
|
class="w-1/2"
|
|
/>
|
|
<UInput
|
|
v-model="itemInfo.bankingBIC"
|
|
placeholder="BIC"
|
|
class="w-1/2"
|
|
/>
|
|
</InputGroup>
|
|
|
|
</UFormGroup>
|
|
</div>
|
|
</div>
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
rows="6"
|
|
maxrows="12"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<div
|
|
v-if="dataStore.ownTenant.ownFields"
|
|
>
|
|
<UDivider
|
|
class="mt-3"
|
|
>Eigene Felder</UDivider>
|
|
|
|
<UFormGroup
|
|
v-for="field in dataStore.ownTenant.ownFields.contracts"
|
|
:key="field.key"
|
|
:label="field.label"
|
|
>
|
|
<UInput
|
|
v-if="field.type === 'text'"
|
|
v-model="itemInfo.ownFields[field.key]"
|
|
/>
|
|
<USelectMenu
|
|
v-else-if="field.type === 'select'"
|
|
:options="field.options"
|
|
v-model="itemInfo.ownFields[field.key]"
|
|
/>
|
|
</UFormGroup>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</UForm>
|
|
</UDashboardPanelContent>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
}
|
|
</style> |