Startet work on customer editor #6

2025-10-21 19:53:07 +02:00
parent 6fa3459eeb
commit 7bd2c3a4d7
2 changed files with 92 additions and 4 deletions
@@ -0,0 +1,71 @@
+<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 { Customer } from '@/types'
+
+const props = defineProps<{
+    modelValue: Customer | null,
+    isOpen: boolean
+}>()
+
+const isOpen = computed({
+    get: () => props.isOpen,
+    set: (value) => {
+        emit('update:open', value)
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'save', 'delete'])
+
+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>Edit profile</DialogTitle>
+                <DialogDescription>
+                    Make changes to your profile here. Click save when you're done.
+                </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+                Save changes
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<style></style>