Added phone number dialog
This commit is contained in:
@@ -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 call = (number: 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) => {
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user