Caramel-CRM/resources/js/components/CustomerDialog.vue

<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
                    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 class="flex-none md:flex gap-12 mt-6 2 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
                    Customer Form hier
                </div>

                <div class="px-4 mt-6">
                    Contacts hier
                </div>
            </div>

            <DialogFooter></DialogFooter>
        </DialogContent>
    </Dialog>
</template>

<style></style>