Startet work on customer editor #6

resources/js/pages/Customers.vue

@@ -11,11 +11,12 @@ import { randomInt, 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 { Copy, Delete, Phone, Plus, Search } from "lucide-vue-next"
+import { Copy, Delete, Edit, Phone, Plus, Search } 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 EditCustomer from '@/components/EditCustomer.vue'
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -27,6 +28,8 @@ const breadcrumbs: BreadcrumbItem[] = [
 const customersData = ref([] as Customer[])
 const searchQuery = ref('')
 const searchField = ref()
+const activeCustomer = ref<Customer | null>(null)
+const detailDialogOpen = ref(false)
 
 onMounted(async () => {
     try {
@@ -36,7 +39,7 @@ onMounted(async () => {
         searchField.value.focus()
 
     } catch (error) {
-        // TODO: toast
+        // TODO: toast, depends on #33
         console.log(error);
     }
 })
@@ -62,13 +65,22 @@ const addressToClipbard = async function (address: Address) {
             address.lineOne + '\n' +
             (address.lineTwo ? address.lineTwo + '\n' : '') +
             address.postalCode + ' ' + address.city
+            // TODO: toast, depends on #33
         )
     } catch (error) {
         if (error instanceof Error)
+            // TODO: toast, depends on #33
             console.error(error.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
+    console.log(activeCustomer.value)
+}
+
 </script>
 
 <template>
@@ -101,7 +113,7 @@ const addressToClipbard = async function (address: Address) {
             <div class="columns-xs gap-4">
 
                 <Card v-for="customer in filteredCustomers" :key="customer.id"
-                    class="mb-4 shadow-xl break-inside-avoid hover:bg-accent">
+                    class="mb-4 shadow-xl break-inside-avoid hover:bg-accent" @click="showDetail(customer)">
                     <CardHeader>
                         <CardTitle>{{ customer.companyName }}</CardTitle>
                         <CardDescription>Kategorie / Umsatz</CardDescription>
@@ -124,7 +136,7 @@ const addressToClipbard = async function (address: Address) {
 
                             <Tooltip v-for="contact in customer.contacts">
                                 <TooltipTrigger>
-                                    <Avatar class="mr-2 md:-mr-2 border-2 size-10 md:size-12">
+                                    <Avatar class="-mr-2 border-2 size-14">
                                         <AvatarImage :src="contact.avatar" />
                                         <AvatarFallback
                                             :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
@@ -142,6 +154,11 @@ const addressToClipbard = async function (address: Address) {
                 </Card>
 
             </div>
+
+            <!-- Invoice detail dialog -->
+            <EditCustomer :model-value="activeCustomer" :is-open="detailDialogOpen" @save="" @delete="" />
+
+
         </div>
     </AppLayout>
 </template>