316 lines
8.3 KiB
Vue
316 lines
8.3 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
|
|
})
|
|
|
|
//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
|
|
}
|
|
|
|
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`)
|
|
}
|
|
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')">
|
|
<template #right>
|
|
<UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('customers',itemInfo)"
|
|
>
|
|
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"
|
|
>
|
|
Kunde aktiv
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="red"
|
|
>
|
|
Kunde gesperrt
|
|
</UBadge>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UTabs
|
|
v-if="currentItem && mode == 'show'"
|
|
:items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}, {label: 'Ansprechpartner'}]"
|
|
class="p-5"
|
|
>
|
|
<template #item="{item}">
|
|
<UCard class="mt-5">
|
|
<div v-if="item.label === 'Informationen'">
|
|
|
|
|
|
<div class="text-wrap">
|
|
<p>Kundennummer: {{currentItem.customerNumber}}</p>
|
|
<p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></p>
|
|
<p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}<br></p>
|
|
<p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}<br></p>
|
|
<p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}<br></p>
|
|
<p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}<br></p>
|
|
<p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}<br></p>
|
|
<p>Notizen: {{currentItem.notes}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else-if="item.label === 'Logbuch'">
|
|
<HistoryDisplay
|
|
type="customer"
|
|
v-if="currentItem"
|
|
:element-id="currentItem.id"
|
|
/>
|
|
</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' }"
|
|
|
|
>
|
|
|
|
</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}`)"
|
|
>
|
|
+ Objekt
|
|
</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>
|
|
<div v-else-if="item.label === 'Ansprechpartner'">
|
|
<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>
|
|
|
|
</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"
|
|
/>
|
|
</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> |