Two month of work
This commit is contained in:
@@ -5,7 +5,7 @@ import AppLayout from '@/layouts/AppLayout.vue'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import { Address, Customer } from '@/types'
|
||||
import { newCustomer } from '@/types/index.d'
|
||||
import { bgColorForString } from '@/lib/utils'
|
||||
import { hotkey, bgColorForString } from '@/lib/utils'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Input } from '@/components/ui/crm-input'
|
||||
import { Button } from '@/components/ui/crm-button'
|
||||
@@ -40,6 +40,9 @@ onMounted(() => {
|
||||
customersData.value = props.customersData.toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
|
||||
searchField.value = document.getElementById('search')
|
||||
searchField.value.focus()
|
||||
|
||||
// Register hotkeys
|
||||
hotkey('mod+f', () => { searchField.value.focus() })
|
||||
})
|
||||
|
||||
watch(activeCustomer, () => {
|
||||
@@ -156,10 +159,10 @@ const call = (number: string, event: Event) => {
|
||||
<template #left>
|
||||
<!-- <ButtonGroup aria-label="Button group">
|
||||
<Button variant="pressed" size="sm">
|
||||
<LayoutGrid stroke-width="1.5" />
|
||||
<LayoutGrid />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Rows3 stroke-width="1.5" />
|
||||
<Rows3 />
|
||||
</Button>
|
||||
</ButtonGroup> -->
|
||||
</template>
|
||||
@@ -170,11 +173,11 @@ const call = (number: string, event: Event) => {
|
||||
<Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
|
||||
v-model="searchQuery" />
|
||||
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
|
||||
<Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
|
||||
<Search class="size-4 text-muted-foreground" />
|
||||
</span>
|
||||
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
|
||||
<Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
|
||||
<Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
|
||||
<Delete class="size-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</span>
|
||||
</template>
|
||||
@@ -184,7 +187,7 @@ const call = (number: string, event: Event) => {
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button size="sm" variant="action" @click="createCustomer">
|
||||
<Button @click="createCustomer">
|
||||
<Plus />
|
||||
Neu
|
||||
</Button>
|
||||
@@ -207,7 +210,7 @@ const call = (number: string, event: Event) => {
|
||||
<div class="columns-xs gap-6">
|
||||
|
||||
<Card v-for="customer in filteredCustomers" :key="customer.id"
|
||||
class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:bg-neutral-800/90 dark:hover:border-neutral-600 overflow-clip"
|
||||
class="relative mb-6 break-inside-avoid hover:ring-ring/75 hover:ring-[3px] overflow-clip"
|
||||
@click="editCustomer(customer)">
|
||||
|
||||
<CardHeader v-if="customer.logo" class="z-0">
|
||||
@@ -232,7 +235,7 @@ const call = (number: string, event: Event) => {
|
||||
<Tooltip v-if="customer.url">
|
||||
<TooltipTrigger>
|
||||
<Button variant="ghost" size="sm" @click="browse(customer.url as string, $event)">
|
||||
<Globe stroke-width="1.5" />
|
||||
<Globe />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ customer.url }}</TooltipContent>
|
||||
@@ -241,7 +244,7 @@ const call = (number: string, event: Event) => {
|
||||
<TooltipTrigger>
|
||||
<Button variant="ghost" size="sm"
|
||||
@click="showPhoneNumber(customer.phone as string, $event)">
|
||||
<Phone stroke-width="1.5" />
|
||||
<Phone />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ customer.phone }}</TooltipContent>
|
||||
@@ -250,7 +253,7 @@ const call = (number: string, event: Event) => {
|
||||
<TooltipTrigger>
|
||||
<Button variant="ghost" size="sm"
|
||||
@click="addressToClipbard(customer.companyName, customer.billingAddress as Address | null, $event)">
|
||||
<House stroke-width="1.5" />
|
||||
<House />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
@@ -276,9 +279,9 @@ const call = (number: string, event: Event) => {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent class="p-4 -mr-2" :side-offset="-1">
|
||||
<TooltipContent class="p-4 -mr-2 text-base" :side-offset="-1">
|
||||
<p class="font-bold">
|
||||
<span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
|
||||
<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>
|
||||
@@ -287,17 +290,17 @@ const call = (number: string, event: Event) => {
|
||||
<!-- E-mail -->
|
||||
<Button size="sm" v-if="contact.email"
|
||||
@click="mail(contact.email as string, $event)">
|
||||
<Mail stroke-width="1.5" @click="" />
|
||||
<Mail @click="" />
|
||||
</Button>
|
||||
<!-- Phone -->
|
||||
<Button size="sm" v-if="contact.phone"
|
||||
@click="showPhoneNumber(contact.phone as string, $event)">
|
||||
<Phone stroke-width="1.5" @click="" />
|
||||
<Phone @click="" />
|
||||
</Button>
|
||||
<!-- Mobile phone -->
|
||||
<Button size="sm" v-if="contact.mobilePhone"
|
||||
@click="showPhoneNumber(contact.mobilePhone as string, $event)">
|
||||
<Smartphone stroke-width="1.5" @click="" />
|
||||
<Smartphone @click="" />
|
||||
</Button>
|
||||
<!-- Online accounts -->
|
||||
<Button size="sm" v-for="account in contact.onlineAccounts"
|
||||
@@ -322,24 +325,24 @@ const call = (number: string, event: Event) => {
|
||||
<!-- 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">
|
||||
<!-- sm:p-8 -->
|
||||
<DialogContent class="w-fit sm:max-w-auto" @escapeKeyDown="closePhoneNumberDisplay"
|
||||
@interactOutside="closePhoneNumberDisplay">
|
||||
<DialogTitle class="
|
||||
md:p-9 lg:ps-12 xl:p-14
|
||||
text-md sm:text-2xl md:text-3xl lg:text-6xl xl:text-8xl
|
||||
transition-all whitespace-nowrap proportional-nums lg:tracking-wide font-medium">
|
||||
<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" />
|
||||
<Phone />
|
||||
Anrufen
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
||||
Reference in New Issue
Block a user