Some progress on the customer editor #6

2025-10-23 08:27:54 +02:00
parent f5f2426aef
commit edb5fcab5c
3 changed files with 148 additions and 79 deletions
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUpdated, useTemplateRef } from "vue"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button'
+import { Customer } from '@/types'
+import { Check, Ellipsis, Trash } from "lucide-vue-next"
+
+
+const props = defineProps<{
+    modelValue: boolean
+    customerData: Customer | null,
+}>()
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'save', 'cancel', 'delete'])
+
+const customer = ref<Customer | null>(props.customerData)
+const isDirty = ref(false);
+const isLoading = ref(false);
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (value) => {
+        emit('update:modelValue', value)
+    }
+})
+
+// watch for new external invoice data
+watch(() => props.customerData as Customer,
+    (newValue, oldValue) => {
+        if (newValue == oldValue) return
+        customer.value = newValue
+
+        // Set initial state for a newly opened document
+        isDirty.value = false
+        isLoading.value = true
+
+        console.log("customerData", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
+    }
+)
+
+watch(customer, (newValue) => {
+    console.log(newValue)
+})
+
+const saveChanges = () => {
+    // if (invoice.value) {
+    //     emit('save', invoice.value)
+    //     isOpen.value = false
+    // }
+}
+
+const cancelChanges = (event: Event | null) => {
+    // if (isDirty.value) {
+    //     alert.value.title = "Wirklich schließen?"
+    //     alert.value.message = "Es gibt ungespeicherte Änderungen, die dann verloren gehen."
+    //     alert.value.cancelText = "Abbrechen"
+    //     alert.value.onCancel = () => {
+    //         event?.preventDefault()
+    //         event.returnValue = true
+    //         alert.value.open = false
+    //     }
+    //     alert.value.confirmText = "Schließen"
+    //     alert.value.onConfirm = () => {
+    //         emit('cancel')
+    //         isOpen.value = false
+    //         alert.value.open = false
+    //     }
+    //     alert.value.open = true
+    // } else
+    {
+        emit('cancel')
+        isOpen.value = false
+    }
+}
+
+</script>
+
+<template>
+    <Dialog id="customer-dialog" v-model:open="isOpen">
+        <DialogContent
+            class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] p-0 h-[calc(100dvh-2rem)]"
+            @escapeKeyDown="cancelChanges" @interactOutside="cancelChanges">
+
+            <DialogHeader class="px-3 pt-3 flex flex-row justify-end">
+                <DialogTitle class="sr-only">Kunde</DialogTitle>
+
+                <div v-if="customer && customer.id > 0" class="hidden md:flex mr-4 gap-2">
+                    <Button :size="'sm'" variant="action" @click="" class="hidden" :class="{ flex: isDirty }">
+                        <Check :strokeWidth="1.5" class="text-current" />
+                        <span>Speichern</span>
+                    </Button>
+                    <Button :size="'sm'" variant="destructive" @click="">
+                        <Trash :strokeWidth="1.5" class="text-current" />
+                        <span>Löschen</span>
+                    </Button>
+                    <Button :size="'sm'" variant="ghost" @click="">
+                        <Ellipsis class="text-muted-foreground" />
+                    </Button>
+                </div>
+            </DialogHeader>
+
+
+            <div class="overflow-y-auto px-6">
+                <div id="document-header"
+                    class="block sticky top-0 py-4 bg-slate-100 bg-white dark:bg-neutral-800 z-1 flex items-end gap-12">
+                    <div class="grow">
+                        <DialogTitle class="text-xl text-primary-foreground font-bold">Edit profile</DialogTitle>
+                        <DialogDescription>
+                            Make changes to your profile here. Click save when you're done.
+                        </DialogDescription>
+                    </div>
+                </div>
+            </div>
+
+            <DialogFooter></DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<style></style>