386 lines
11 KiB
Vue
386 lines
11 KiB
Vue
<script setup>
|
|
|
|
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push("/customers")
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const profileStore = useProfileStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const openTab = ref(0)
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
name: "",
|
|
infoData: {
|
|
country: "Deutschland"
|
|
},
|
|
active: true,
|
|
isCompany: true,
|
|
profiles: [profileStore.activeProfile.id]
|
|
})
|
|
const oldItemInfo = ref({})
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show"){
|
|
itemInfo.value = await useSupabaseSelectSingle("customers",route.params.id,"*, contacts(*)")
|
|
} else if(mode.value === "edit") {
|
|
itemInfo.value = await useSupabaseSelectSingle("customers",route.params.id,"*")
|
|
}
|
|
|
|
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
|
}
|
|
|
|
const editItem = async () => {
|
|
await router.push(`/customers/edit/${itemInfo.value.id}`)
|
|
}
|
|
|
|
const setCityByZip = async () => {
|
|
itemInfo.value.infoData.city = await useZipCheck(itemInfo.value.infoData.zip)
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:title="itemInfo ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')"
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/customers`)"
|
|
>
|
|
Kunden
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
:class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
|
|
>{{itemInfo.id ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('customers',itemInfo,oldItemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'create'"
|
|
@click="dataStore.createNewItem('customers',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="itemInfo.id ? router.push(`/customers/show/${itemInfo.id}`) : router.push(`/customers`)"
|
|
color="red"
|
|
class="ml-2"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
<template #badge v-if="itemInfo">
|
|
<UBadge
|
|
v-if="itemInfo.active"
|
|
>
|
|
Aktiv
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="red"
|
|
>
|
|
Gesperrt
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardPanelContent>
|
|
<UTabs
|
|
v-if="itemInfo.id && mode == 'show'"
|
|
:items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
|
|
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: {{itemInfo.customerNumber}}</p>
|
|
<p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
|
|
<p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
|
|
<p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
|
|
<p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
|
|
<p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
|
|
<p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
|
|
<p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
|
|
<p>Notizen:<br> {{itemInfo.notes}}</p>
|
|
</div>
|
|
|
|
</UCard>
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
|
|
>
|
|
+ Ansprechpartner
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getContactsByCustomerId(itemInfo.id)"
|
|
@select="(row) => router.push(`/contacts/show/${row.id}`)"
|
|
:columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
|
|
|
|
>
|
|
|
|
</UTable>
|
|
</UCard>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<UCard class="h-full">
|
|
<HistoryDisplay
|
|
type="customer"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
:render-headline="true"
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<UCard class="mt-5" v-else>
|
|
|
|
<div v-if="item.label === 'Projekte'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/projects/create?customer=${itemInfo.id}`)"
|
|
>
|
|
+ Projekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
|
|
@select="(row) => router.push(`/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' }"
|
|
|
|
>
|
|
<template #phase-data="{row}">
|
|
{{row.phases ? row.phases.find(i => i.active).label : ""}}
|
|
</template>
|
|
</UTable>
|
|
</div>
|
|
<div v-else-if="item.label === 'Objekte'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/plants/create?customer=${itemInfo.id}`)"
|
|
>
|
|
+ Objekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
|
|
@select="(row) => router.push(`/plants/show/${row.id}`)"
|
|
:columns="[{label: 'Name', key: 'name'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
|
|
|
|
>
|
|
|
|
</UTable>
|
|
</div>
|
|
<div v-else-if="item.label === 'Verträge'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
|
|
>
|
|
+ Vertrag
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getContractsByCustomerId(itemInfo.id)"
|
|
@select="(row) => router.push(`/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>
|
|
</div>
|
|
</UCard>
|
|
|
|
</template>
|
|
</UTabs>
|
|
<UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kundennummer:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.customerNumber"
|
|
placeholder="Leer lassen für automatisch generierte Nummer"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
|
|
<UFormGroup
|
|
label="Kunde aktiv:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.active"
|
|
/>
|
|
</UFormGroup>
|
|
</UTooltip>
|
|
<UFormGroup
|
|
label="Firmenkunde:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.isCompany"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Straße + Hausnummer"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.street"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Adresszusatz"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.special"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Postleitzahl"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.zip"
|
|
@focusout="setCityByZip"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Ort"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.city"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Land"
|
|
>
|
|
<USelectMenu
|
|
:options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
|
|
v-model="itemInfo.infoData.country"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Telefon:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.tel"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="E-Mail:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.email"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Webseite:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.web"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="USt-Id:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.infoData.ustid"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Berechtigte Benutzer:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.profiles"
|
|
:options="profileStore.profiles"
|
|
option-attribute="fullName"
|
|
value-attribute="id"
|
|
searchable
|
|
multiple
|
|
:search-attributes="['fullName']"
|
|
>
|
|
<template #label>
|
|
{{itemInfo.profiles.length > 0 ? itemInfo.profiles.map(i => profileStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
</UForm>
|
|
</UDashboardPanelContent>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |