338 lines
8.7 KiB
Vue
338 lines
8.7 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
|
|
|
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push("/contacts")
|
|
},
|
|
'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 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({
|
|
active: true,
|
|
profiles: [profileStore.activeProfile.id]
|
|
})
|
|
const oldItemInfo = ref({})
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show"){
|
|
itemInfo.value = await useSupabaseSelectSingle("contacts",route.params.id,"*, customer(id, name), vendor(id,name) ")
|
|
} else if(mode.value === "edit") {
|
|
itemInfo.value = await useSupabaseSelectSingle("contacts",route.params.id,"*")
|
|
}
|
|
|
|
if(mode.value === "create") {
|
|
let query = route.query
|
|
|
|
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
|
if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
|
|
}
|
|
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/contacts`)"
|
|
>
|
|
Ansprechpartner
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
:class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
|
|
>{{itemInfo.id ? `Ansprechpartner: ${itemInfo.fullName}` : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName},oldItemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'create'"
|
|
@click="dataStore.createNewItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName})"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="router.push(itemInfo.id ? `/contacts/show/${itemInfo.value.id}` : `/contacts/`)"
|
|
color="red"
|
|
class="ml-2"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click="router.push(`/contacts/edit/${itemInfo.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
<!-- <template #badge v-if="itemInfo">
|
|
<UBadge
|
|
v-if="itemInfo.active"
|
|
>
|
|
Kontakt aktiv
|
|
</UBadge>
|
|
<UBadge
|
|
v-else
|
|
color="red"
|
|
>
|
|
Kontakt inaktiv
|
|
</UBadge>
|
|
</template>-->
|
|
</UDashboardNavbar>
|
|
|
|
<UTabs
|
|
:items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
|
|
v-if="itemInfo && mode == 'show'"
|
|
class="p-5"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
|
|
<div class="w-1/2 mr-5">
|
|
<UCard>
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/email/new?to=${itemInfo.email}`)"
|
|
icon="i-heroicons-envelope"
|
|
:disabled="!itemInfo.email"
|
|
>
|
|
E-Mail
|
|
</UButton>
|
|
</Toolbar>
|
|
<table class="w-full">
|
|
<tr>
|
|
<td>Kunde: </td>
|
|
<td><nuxt-link v-if="itemInfo.customer" :to="`/customers/show/${itemInfo.customer?.id}`">{{itemInfo?.customer?.name}}</nuxt-link></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Lieferant: </td>
|
|
<td><nuxt-link v-if="itemInfo.vendor" :to="`/customers/show/${itemInfo.vendor?.id}`">{{itemInfo?.vendor?.name}}</nuxt-link></td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-Mail:</td>
|
|
<td>{{itemInfo.email}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mobil:</td>
|
|
<td>{{itemInfo.phoneMobile}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Festnetz:</td>
|
|
<td>{{itemInfo.phoneHome}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rolle:</td>
|
|
<td>{{itemInfo.role}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Geburtstag:</td>
|
|
<td>{{itemInfo.birthday ? dayjs(itemInfo.birthday).format("DD.MM.YYYY") : ""}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Notizen:</td>
|
|
<td>{{itemInfo.notes}}</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</UCard>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<UCard>
|
|
<HistoryDisplay
|
|
type="contact"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
<UForm
|
|
v-else-if="mode == 'edit' || mode == 'create'"
|
|
class="p-5"
|
|
>
|
|
<UFormGroup
|
|
label="Anrede:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.salutation"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Vorname:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.firstName"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Nachname:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.lastName"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kunde:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.customer"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
:options="dataStore.customers"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Lieferant:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.vendor"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
:options="dataStore.vendors"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kontakt aktiv:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.active"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="E-Mail:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.email"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Mobil:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.phoneMobile"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Festnetz:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.phoneHome"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Rolle:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.role"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Geburtstag:"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
variant="outline"
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.birthday ? dayjs(itemInfo.birthday).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker
|
|
v-model="itemInfo.birthday"
|
|
mode="date"
|
|
/>
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Berechtige 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>
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
</UForm>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
padding-bottom: 0.15em;
|
|
padding-top: 0.15em;
|
|
}
|
|
</style> |