Added more database fields for contacts. Worked on popovers in customers view. #3

This commit is contained in:
2025-11-04 15:17:23 +01:00
parent 82e04acc2c
commit 15b49f4d23
5 changed files with 139 additions and 20 deletions
+50 -6
View File
@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from '@/components/ui/button-group'
import { Copy, Delete, Edit, Globe, House, LayoutGrid, LayoutList, Phone, Plus, Rows3, Rows4, Search } from "lucide-vue-next"
import { Copy, Delete, Edit, Globe, House, LayoutGrid, LayoutList, Mail, Phone, Plus, Rows3, Rows4, Search, Smartphone } from "lucide-vue-next"
import Fuse from 'fuse.js';
import { getInitials } from '@/composables/useInitials';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
@@ -91,9 +91,30 @@ const showDetail = (customer: Customer) => {
detailDialogOpen.value = true
}
const mail = (email: string, event: Event) => {
event.stopPropagation();
window.open('mailto:' + email, '_self')
}
const browse = (url: string, event: Event) => {
event.stopPropagation();
window.open(url, '_blank')
if (!/^https?:\/\//i.test(url)) {
url = 'https://' + url;
}
try {
const parsedUrl = new URL(url);
if (!parsedUrl.hostname || parsedUrl.hostname === 'sers') {
throw new Error('Ungültiger Hostname');
}
window.open(url, '_blank');
} catch (e) {
toast.error('Ungültige URL', {
description: 'Die eingegebene URL ist nicht gültig.'
});
}
}
const call = (number: string, event: Event) => {
@@ -213,16 +234,39 @@ const call = (number: string, event: Event) => {
<Tooltip v-for="contact in customer.contacts">
<TooltipTrigger>
<Avatar class="-mr-2 size-14 shadow">
<AvatarImage v-if="contact.avatar"
:src="'/storage/uploads/' + contact.avatar" loading="lazy" />
<AvatarImage v-if="contact.avatar" :src="'/storage/uploads/' + contact.avatar"
loading="lazy" />
<AvatarFallback
:class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
{{ getInitials(contact.firstName + ' ' + contact.lastName) }}
</AvatarFallback>
</Avatar>
</TooltipTrigger>
<TooltipContent>
<p>{{ contact.firstName + ' ' + contact.lastName }}</p>
<TooltipContent class="p-4">
<p class="font-bold">
<span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
<span>{{ contact.firstName + ' ' + contact.lastName }}</span>
</p>
<p v-if="contact.jobTitle" class="text-muted-foreground">{{ contact.jobTitle }}</p>
<ButtonGroup class="mt-4">
<Button size="sm" v-if="contact.email"
@click="(event: Event) => mail(contact.email as string, event)">
<Mail stroke-width="1.5" @click="" />
</Button>
<Button size="sm" v-if="contact.phone"
@click="(event: Event) => call(contact.phone as string, event)">
<Phone stroke-width="1.5" @click="" />
</Button>
<Button size="sm" v-if="contact.mobilePhone"
@click="(event: Event) => call(contact.mobilePhone as string, event)">
<Smartphone stroke-width="1.5" @click="" />
</Button>
<Button size="sm" v-for="account in contact.onlineAccounts"
@click="(event: Event) => browse(account.url as string, event)">
<span>{{ account.platform }}</span>
</Button>
</ButtonGroup>
</TooltipContent>
</Tooltip>