Caramel-CRM-Backup/resources/js/pages/Customers.vue

<script setup lang="ts">

import { ref, onMounted, computed, watch } from 'vue'
import AppLayout from '@/layouts/AppLayout.vue'
import AppHeader from '@/components/AppHeader.vue'
import { Address } from '@/types'
import { Head } from '@inertiajs/vue3'
import api from '@/axios'
import { Customer } from '@/types'
import { bgColorForString } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import { Delete, Globe, House, LayoutGrid, Mail, Phone, Plus, Rows3, 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'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { TooltipArrow } from 'reka-ui'
import CustomerDialog from '@/components/CustomerDialog.vue'
import { toast } from 'vue-sonner'
import { SocialIcon } from '@/components/ui/social-icon'
import { AxiosError } from 'axios'

const customersData = ref([] as Customer[])
const searchQuery = ref('')
const searchField = ref()
const activeCustomer = ref<Customer | null>(null)
const detailDialogOpen = ref(false)

onMounted(async () => {
    try {
        const response = await api.get('/customers');
        customersData.value = (response.data as Customer[]).toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
        searchField.value = document.getElementById('search')
        searchField.value.focus()

    } catch (error: AxiosError) {
        toast.error(error.name, { description: error.message })
    }
})

watch(activeCustomer, () => {
})

const fuse = computed(() => {
    return new Fuse(customersData.value, {
        keys: ['companyName', 'contacts.firstName', 'contacts.lastName'],
        threshold: 0.3
    });
})

const filteredCustomers = computed(() => {
    if (!searchQuery.value) {
        return customersData.value;
    }

    return fuse.value.search(searchQuery.value).map(result => result.item);
})


const addressToClipbard = async function (companyName: string | null, address: Address | null, event: Event) {
    event.stopPropagation();
    try {
        let copy = '';
        if (companyName) copy += companyName + '\n'
        if (address) {
            copy +=
                address.lineOne + '\n' +
                (address.lineTwo ? address.lineTwo + '\n' : '') +
                address.postalCode + ' ' + address.city
        }
        await navigator.clipboard.writeText(copy)
        toast('Adresse kopiert', { duration: 2000 })
    } catch (notAllowedError: DOMException) {
        if (notAllowedError instanceof Error) {
            toast.error(notAllowedError.name, { description: notAllowedError.message })
        }
    }
}
const showDetail = (customer: Customer) => {
    // make a deep copy, so the changes in the dialog won’t affect the data until saved
    activeCustomer.value = JSON.parse(JSON.stringify(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();

    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) => {
    event.stopPropagation();
    window.open('tel:' + number, '_self')
}

</script>

<template>

    <AppLayout title="Kunden">

        <AppHeader>
            <!-- View buttons -->
            <template #left>
                <ButtonGroup aria-label="Button group">
                    <Button variant="pressed" size="sm">
                        <LayoutGrid stroke-width="1.5" />
                    </Button>
                    <Button variant="outline" size="sm">
                        <Rows3 stroke-width="1.5" />
                    </Button>
                </ButtonGroup>
            </template>


            <!-- Search field -->
            <template #middle>
                <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" />
                </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" />
                    </Button>
                </span>
            </template>

            <!-- New button -->
            <template #right>
                <Button size="sm" variant="action" @click="">
                    <Plus stroke-width="1.5" /> Neu
                </Button>
            </template>
        </AppHeader>


        <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"
                @click="showDetail(customer)">

                <CardHeader v-if="customer.logo" class="z-0">
                    <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
                        class="max-h-8 max-w-[50%]">
                </CardHeader>

                <CardContent class="flex justify-between gap-4 flex-col sm:flex-row pr-4 z-0">
                    <address class="not-italic">
                        <CardTitle>
                            {{ customer.companyName }}
                            <!-- <Badge variant="secondary">Badge</Badge> -->
                        </CardTitle>
                        <CardDescription class="mt-2">
                            {{ customer.billingAddress?.lineOne }}<br />
                            {{ customer.billingAddress?.lineTwo }}<br v-if="customer.billingAddress?.lineTwo" />
                            {{ customer.billingAddress?.postalCode }} {{ customer.billingAddress?.city }}
                        </CardDescription>
                    </address>

                    <div class="flex items-start">
                        <TooltipProvider>
                            <Tooltip v-if="customer.url">
                                <TooltipTrigger>
                                    <Button variant="ghost" size="sm"
                                        @click="(event: Event) => browse(customer.url as string, event)">
                                        <Globe stroke-width="1.5" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    {{ customer.url }} öffnen
                                </TooltipContent>
                            </Tooltip>
                            <Tooltip v-if="customer.phone">
                                <TooltipTrigger>
                                    <Button variant="ghost" size="sm"
                                        @click="(event: Event) => call(customer.phone as string, event)">
                                        <Phone stroke-width="1.5" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    {{ customer.phone }} anrufen
                                </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)">
                                        <House stroke-width="1.5" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    Adresse in Zwischenablage kopieren
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                </CardContent>

                <CardFooter v-if="customer.contacts.length > 0">
                    <TooltipProvider :delay-duration="0">

                        <Tooltip v-for="contact in customer.contacts">
                            <TooltipTrigger>
                                <Avatar class="size-14 shadow -mr-2">
                                    <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 class="p-4 -mr-2" :side-offset="-1">
                                <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">
                                    <!-- E-mail -->
                                    <Button size="sm" v-if="contact.email"
                                        @click="(event: Event) => 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)">
                                        <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)">
                                        <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)">
                                        <SocialIcon :variant="account.platform" />
                                    </Button>
                                </ButtonGroup>
                                <TooltipArrow :height="8" :width="16"
                                    class="fill-popover drop-shadow-(--shadow-arrow) stroke-[0.5px] stroke-border -mt-[1px]" />
                            </TooltipContent>
                        </Tooltip>

                    </TooltipProvider>
                </CardFooter>
            </Card>

        </div>

        <!-- Invoice detail dialog -->
        <CustomerDialog :customerData="activeCustomer" v-model="detailDialogOpen" @save="" @delete="" />

    </AppLayout>
</template>

<style>
/* Remove close X */
[data-slot=dialog-content] button.ring-offset-background {
    /* display: none; */
    border-radius: 100%;
    position: absolute;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--color-destructive);
}

/* Backdrop */
[data-slot=dialog-overlay] {
    backdrop-filter: blur(var(--blur-sm));
}

/* hover:not(:has(*:hover)) */
[data-slot="card"]:hover:has(a:hover),
[data-slot="card"]:hover:has(button:hover) {
    background-color: var(--card);
}
</style>