Some progress on the customer editor #6

resources/js/pages/Customers.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 
+import { ref, onMounted, computed, useTemplateRef, watch } from 'vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 import { customers } from '@/routes'
 import { Address, type BreadcrumbItem } from '@/types'
 import { Head } from '@inertiajs/vue3'
-import { ref, onMounted, computed, useTemplateRef } from 'vue'
 import api from '@/axios'
 import { Customer, Contact } from '@/types'
 import { randomInt, bgColorForString } from '@/lib/utils'
@@ -16,7 +16,7 @@ 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'
+import CustomerDialog from '@/components/CustomerDialog.vue'
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -40,10 +40,13 @@ onMounted(async () => {
 
     } catch (error) {
         // TODO: toast, depends on #33
-        console.log(error);
     }
 })
 
+watch(activeCustomer, () => {
+    console.log(activeCustomer.value?.companyName)
+})
+
 const fuse = computed(() => {
     return new Fuse(customersData.value, {
         keys: ['companyName', 'firstName', 'lastName', 'email', 'phone'],
@@ -78,7 +81,6 @@ 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>
@@ -104,7 +106,7 @@ const showDetail = (customer: Customer) => {
                     </span>
                 </div>
 
-                <Button :size="'sm'" :variant="'action'" @click="newCustomer">
+                <Button :size="'sm'" :variant="'action'" @click="">
                     <Plus /> Neu
                 </Button>
             </div>
@@ -137,7 +139,7 @@ const showDetail = (customer: Customer) => {
                             <Tooltip v-for="contact in customer.contacts">
                                 <TooltipTrigger>
                                     <Avatar class="-mr-2 border-2 size-14">
-                                        <AvatarImage :src="contact.avatar" />
+                                        <AvatarImage :src="contact.avatar || ''" />
                                         <AvatarFallback
                                             :class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
                                             {{ getInitials(contact.firstName + ' ' + contact.lastName) }}
@@ -156,9 +158,27 @@ const showDetail = (customer: Customer) => {
             </div>
 
             <!-- Invoice detail dialog -->
-            <EditCustomer :model-value="activeCustomer" :is-open="detailDialogOpen" @save="" @delete="" />
+            <CustomerDialog :customerData="activeCustomer" v-model="detailDialogOpen" @save="" @delete="" />
 
 
         </div>
     </AppLayout>
-</template>
+</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));
+}
+</style>