From cb604433fb5001bc73480f354deed2487211bdc6 Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Thu, 22 Jan 2026 11:36:00 +0100
Subject: [PATCH] Added phone number dialog

---
 resources/js/pages/Customers.vue | 90 +++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/Customers.vue b/resources/js/pages/Customers.vue
index ced8626..946aa65 100644
--- a/resources/js/pages/Customers.vue
+++ b/resources/js/pages/Customers.vue
@@ -14,6 +14,8 @@ import { Delete, Globe, House, LayoutGrid, Mail, Phone, Plus, Rows3, Search, Sma
 import Fuse from 'fuse.js';
 import { getInitials } from '@/composables/useInitials';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogClose } from "@/components/ui/dialog"
+import DialogCloseButton from "@/components/DialogCloseButton/DialogCloseButton.vue"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { TooltipArrow } from 'reka-ui'
 import CustomerDialog from '@/components/CustomerDialog.vue'
@@ -32,6 +34,7 @@ const searchQuery = ref('')
 const searchField = ref()
 const activeCustomer = ref<Customer | null>(null)
 const detailDialogOpen = ref(false)
+const phoneNumber = ref('')
 
 onMounted(() => {
     customersData.value = props.customersData.toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
@@ -113,8 +116,32 @@ const browse = (url: string, event: Event) => {
     }
 }
 
+const showPhoneNumber = (number: string, event: Event | null) => {
+    if (event) {
+        event.preventDefault()
+        event.stopPropagation();
+        event.returnValue = true
+    }
+
+    phoneNumber.value = number
+}
+
+const closePhoneNumberDisplay = (event: Event | null) => {
+    if (event) {
+        event.preventDefault()
+        event.stopPropagation();
+        event.returnValue = true
+    }
+
+    phoneNumber.value = ''
+}
+
 const call = (number: string, event: Event) => {
-    event.stopPropagation();
+    if (event) {
+        event.preventDefault()
+        event.stopPropagation();
+        event.returnValue = true
+    }
     window.open('tel:' + number, '_self')
 }
 
@@ -192,7 +219,6 @@ const call = (number: string, event: Event) => {
                     <address class="not-italic">
                         <CardTitle>
                             {{ customer.companyName }}
-                            <!-- <Badge variant="secondary">Badge</Badge> -->
                         </CardTitle>
                         <CardDescription class="mt-2">
                             {{ customer.billingAddress?.lineOne }}<br />
@@ -205,30 +231,25 @@ const call = (number: string, event: Event) => {
                         <TooltipProvider>
                             <Tooltip v-if="customer.url">
                                 <TooltipTrigger>
-                                    <Button variant="ghost" size="sm"
-                                        @click="(event: Event) => browse(customer.url as string, event)">
+                                    <Button variant="ghost" size="sm" @click="browse(customer.url as string, $event)">
                                         <Globe stroke-width="1.5" />
                                     </Button>
                                 </TooltipTrigger>
-                                <TooltipContent>
-                                    {{ customer.url }} öffnen
-                                </TooltipContent>
+                                <TooltipContent>{{ customer.url }}</TooltipContent>
                             </Tooltip>
                             <Tooltip v-if="customer.phone">
                                 <TooltipTrigger>
                                     <Button variant="ghost" size="sm"
-                                        @click="(event: Event) => call(customer.phone as string, event)">
+                                        @click="showPhoneNumber(customer.phone as string, $event)">
                                         <Phone stroke-width="1.5" />
                                     </Button>
                                 </TooltipTrigger>
-                                <TooltipContent>
-                                    {{ customer.phone }} anrufen
-                                </TooltipContent>
+                                <TooltipContent>{{ customer.phone }}</TooltipContent>
                             </Tooltip>
                             <Tooltip v-if="customer.billingAddress">
                                 <TooltipTrigger>
                                     <Button variant="ghost" size="sm"
-                                        @click="(event: Event) => addressToClipbard(customer.companyName, customer.billingAddress as Address | null, event)">
+                                        @click="addressToClipbard(customer.companyName, customer.billingAddress as Address | null, $event)">
                                         <House stroke-width="1.5" />
                                     </Button>
                                 </TooltipTrigger>
@@ -246,8 +267,9 @@ const call = (number: string, event: Event) => {
                         <Tooltip v-for="contact in customer.contacts">
                             <TooltipTrigger>
                                 <Avatar class="size-14 border-2 border-background -mr-2">
-                                    <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/contacts/' + contact.avatar"
-                                        loading="lazy" class="object-cover" />
+                                    <AvatarImage v-if="contact.avatar"
+                                        :src="'/storage/uploads/contacts/' + contact.avatar" loading="lazy"
+                                        class="object-cover" />
                                     <AvatarFallback
                                         :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
                                         {{ getInitials(contact.firstName + ' ' + contact.lastName) }}
@@ -264,22 +286,22 @@ const call = (number: string, event: Event) => {
                                 <ButtonGroup class="mt-4">
                                     <!-- E-mail -->
                                     <Button size="sm" v-if="contact.email"
-                                        @click="(event: Event) => mail(contact.email as string, event)">
+                                        @click="mail(contact.email as string, $event)">
                                         <Mail stroke-width="1.5" @click="" />
                                     </Button>
                                     <!-- Phone -->
                                     <Button size="sm" v-if="contact.phone"
-                                        @click="(event: Event) => call(contact.phone as string, event)">
+                                        @click="showPhoneNumber(contact.phone as string, $event)">
                                         <Phone stroke-width="1.5" @click="" />
                                     </Button>
                                     <!-- Mobile phone -->
                                     <Button size="sm" v-if="contact.mobilePhone"
-                                        @click="(event: Event) => call(contact.mobilePhone as string, event)">
+                                        @click="showPhoneNumber(contact.mobilePhone as string, $event)">
                                         <Smartphone stroke-width="1.5" @click="" />
                                     </Button>
                                     <!-- Online accounts -->
                                     <Button size="sm" v-for="account in contact.onlineAccounts"
-                                        @click="(event: Event) => browse(account.url as string, event)">
+                                        @click="browse(account.url as string, $event)">
                                         <SocialIcon :variant="account.platform" />
                                     </Button>
                                 </ButtonGroup>
@@ -297,6 +319,38 @@ const call = (number: string, event: Event) => {
         <!-- Invoice detail dialog -->
         <CustomerDialog :customerData="activeCustomer" v-model="detailDialogOpen" @save="" @delete="" />
 
+        <!-- Phone number display -->
+        <Dialog :open="phoneNumber !== ''">
+
+            <DialogContent class="w-fit sm:max-w-auto sm:p-8 md:p-9 gap-6 lg:ps-12 lg:gap-9 xl:p-14 xl:gap-12"
+                @escapeKeyDown="closePhoneNumberDisplay" @interactOutside="closePhoneNumberDisplay">
+                <DialogTitle class="screen-reader-only hidden">
+                    <h1>{{ phoneNumber }}</h1>
+                </DialogTitle>
+                <DialogDescription class="screen-reader-only hidden">Anrufen</DialogDescription>
+
+                <div
+                    class="transition-all text-md sm:text-2xl md:text-3xl lg:text-6xl xl:text-8xl whitespace-nowrap proportional-nums lg:tracking-wide font-medium">
+                    {{ phoneNumber }}</div>
+
+                <DialogFooter>
+                    <DialogClose as-child>
+                        <Button @click="closePhoneNumberDisplay">
+                            Schließen
+                        </Button>
+                        <Button @click="call(phoneNumber, $event)" variant="action">
+                            <Phone stroke-width="1.5" />
+                            Anrufen
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+
+                <DialogClose as-child>
+                    <DialogCloseButton @click="closePhoneNumberDisplay" />
+                </DialogClose>
+            </DialogContent>
+        </Dialog>
+
     </AppLayout>
 </template>