120 lines
4.1 KiB
Vue
120 lines
4.1 KiB
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 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> |