363 lines
9.4 KiB
Vue
363 lines
9.4 KiB
Vue
<script setup>
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
let currentItem = ref(null)
|
|
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
name: "",
|
|
infoData: {
|
|
country: "Deutschland"
|
|
},
|
|
active: true,
|
|
isCompany: true
|
|
})
|
|
const oldItemInfo = ref({})
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentItem.value = await dataStore.getCustomerById(Number(useRoute().params.id))
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentItem.value
|
|
if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
|
|
}
|
|
|
|
const editItem = async () => {
|
|
await router.push(`/customers/edit/${currentItem.value.id}`)
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
if(currentItem.value) {
|
|
router.push(`/customers/show/${currentItem.value.id}`)
|
|
} else {
|
|
router.push(`/customers`)
|
|
}
|
|
|
|
}
|
|
|
|
const setCityByZip = async () => {
|
|
itemInfo.value.infoData.city = await useZipCheck(itemInfo.value.infoData.zip)
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:title="currentItem ? `Kunde: ${currentItem.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="currentItem"
|
|
:class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
|
|
>{{currentItem ? `Kunde: ${currentItem.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="cancelEditorCreate"
|
|
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="currentItem">
|
|
<UBadge
|
|
v-if="currentItem.active"
|
|
>
|
|
Aktiv
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="red"
|
|
>
|
|
Gesperrt
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UTabs
|
|
v-if="currentItem && mode == 'show'"
|
|
:items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
|
|
class="p-5"
|
|
>
|
|
<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: {{currentItem.customerNumber}}</p>
|
|
<p>Typ: {{currentItem.isCompany ? 'Firma' : 'Privatperson'}}</p>
|
|
<p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
|
|
<p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
|
|
<p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
|
|
<p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
|
|
<p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
|
|
<p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
|
|
<p>Notizen:<br> {{currentItem.notes}}</p>
|
|
</div>
|
|
|
|
</UCard>
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/contacts/create?customer=${currentItem.id}`)"
|
|
>
|
|
+ Ansprechpartner
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getContactsByCustomerId(currentItem.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="currentItem"
|
|
:element-id="currentItem.id"
|
|
:render-headline="true"
|
|
/>
|
|
</UCard>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<UCard class="mt-5" v-else>
|
|
<div v-if="item.label === 'Informationen'" class="flex">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div v-else-if="item.label === 'Projekte'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/projects/create?customer=${currentItem.id}`)"
|
|
>
|
|
+ Projekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getProjectsByCustomerId(currentItem.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=${currentItem.id}`)"
|
|
>
|
|
+ Objekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getPlantsByCustomerId(currentItem.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=${currentItem.id}`)"
|
|
>
|
|
+ Vertrag
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="dataStore.getContractsByCustomerId(currentItem.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>
|
|
</UForm>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |