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

resources/js/pages/Customers.vue

@@ -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>
 

resources/js/types/index.d.ts

@@ -70,16 +70,26 @@ export function newAddress(): Address {
     }
 }
 
+export interface OnlineAccount {
+    platform: string;
+    userName: string;
+    url: string;
+}
+
 export interface Contact {
     id: number;
+    isPrimary?: boolean;
     salutation: string;
+    academicTitle?: string;
     firstName: string;
     lastName: string;
+    jobTitle?: string;
     email?: string;
     phone?: string;
-    position?: string;
-    isPrimary?: boolean;
+    mobilePhone?: string;
     avatar?: string;
+    notes?: string;
+    onlineAccounts?: OnlineAccount[];
 }
 
 export type ContactType = Contact
@@ -87,14 +97,18 @@ export type ContactType = Contact
 export function newContact(): Contact {
     return {
         id: 0,
+        isPrimary: false,
         salutation: '',
+        academicTitle: null,
         firstName: '',
         lastName: '',
+        jobTitle: '',
         email: '',
         phone: '',
-        position: '',
-        isPrimary: false,
-        avatar: ''
+        mobilePhone: '',
+        avatar: '',
+        notes: '',
+        onlineAccounts: []
     }
 }