Changes
This commit is contained in:
@@ -37,12 +37,15 @@ const itemInfo = ref({
|
||||
name: "",
|
||||
customer: null,
|
||||
active: true,
|
||||
ownFields: {}
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
if(mode.value === "show" ){
|
||||
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name)")
|
||||
} else if (mode.value === "edit"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
|
||||
}
|
||||
|
||||
|
||||
@@ -110,296 +113,324 @@ setupPage()
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<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">
|
||||
<p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
|
||||
Beschreibung:<br>
|
||||
{{itemInfo.description}}<br>
|
||||
</div>
|
||||
</UCard>
|
||||
<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">
|
||||
<p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
|
||||
Eigene Felder: {{itemInfo.ownFields}}<br>
|
||||
Beschreibung:<br>
|
||||
{{itemInfo.description}}<br>
|
||||
</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 class="w-1/2">
|
||||
<UCard class="h-full">
|
||||
<HistoryDisplay
|
||||
type="contract"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
:render-headline="true"
|
||||
<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>
|
||||
|
||||
|
||||
<!-- <UBadge
|
||||
v-if="itemInfo.active"
|
||||
<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:"
|
||||
>
|
||||
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)"
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
rows="6"
|
||||
maxrows="12"
|
||||
/>
|
||||
</UCard>
|
||||
</UFormGroup>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="dataStore.ownTenant.ownFields"
|
||||
>
|
||||
<UDivider
|
||||
class="mt-3"
|
||||
>Eigene Felder</UDivider>
|
||||
|
||||
|
||||
</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:"
|
||||
v-for="field in dataStore.ownTenant.ownFields.contracts"
|
||||
:key="field.key"
|
||||
:label="field.label"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.name"
|
||||
v-if="field.type === 'text'"
|
||||
v-model="itemInfo.ownFields[field.key]"
|
||||
/>
|
||||
</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"
|
||||
v-else-if="field.type === 'select'"
|
||||
:options="field.options"
|
||||
v-model="itemInfo.ownFields[field.key]"
|
||||
/>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</UForm>
|
||||
</UDashboardPanelContent>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user