140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<script setup>
|
|
import { useDraggable } from '@vueuse/core'
|
|
|
|
const toast = useToast()
|
|
const dataStore = useDataStore()
|
|
const modal = useModal()
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
mode: {
|
|
type: String,
|
|
required: true,
|
|
default: "show"
|
|
},
|
|
createQuery: {
|
|
type: Object
|
|
},
|
|
id: {
|
|
type: String,
|
|
},
|
|
})
|
|
|
|
|
|
|
|
const emit = defineEmits(["updateNeeded","returnData"])
|
|
|
|
const dataType = dataStore.dataTypes[props.type]
|
|
|
|
const loaded = ref(false)
|
|
const items = ref([])
|
|
const item = ref({})
|
|
|
|
const isDraggableVendorCreate = computed(() => props.type === "vendors" && props.mode === "create")
|
|
const draggableWindow = ref(null)
|
|
const initialWindowPosition = import.meta.client
|
|
? {
|
|
x: Math.max(16, (window.innerWidth - Math.min(1024, window.innerWidth - 32)) / 2),
|
|
y: Math.max(16, Math.min(96, window.innerHeight * 0.1)),
|
|
}
|
|
: { x: 16, y: 16 }
|
|
|
|
const { style: draggableWindowStyle } = useDraggable(draggableWindow, {
|
|
initialValue: initialWindowPosition,
|
|
onStart: (_position, event) => {
|
|
const target = event.target
|
|
return target instanceof Element && Boolean(target.closest('[data-draggable-handle]'))
|
|
},
|
|
})
|
|
|
|
const setupPage = async () => {
|
|
if(props.mode === "show") {
|
|
//Load Data for Show
|
|
item.value = await useEntities(props.type).selectSingle(props.id, dataType.selectWithInformation || "*")
|
|
} else if(props.mode === "edit") {
|
|
//Load Data for Edit
|
|
const data = JSON.stringify(await useEntities(props.type).selectSingle(props.id))
|
|
item.value = data
|
|
|
|
} else if(props.mode === "create") {
|
|
//Load Data for Create
|
|
item.value = JSON.stringify({})
|
|
|
|
} else if(props.mode === "list") {
|
|
//Load Data for List
|
|
items.value = await useEntities(props.type).select(dataType.selectWithInformation || "*", dataType.sortColumn,dataType.sortAscending || false)
|
|
}
|
|
|
|
loaded.value = true
|
|
}
|
|
|
|
setupPage()
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="isDraggableVendorCreate"
|
|
ref="draggableWindow"
|
|
:style="draggableWindowStyle"
|
|
class="fixed z-[999] flex h-[80vh] max-h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-5xl flex-col overflow-hidden resize rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900"
|
|
>
|
|
<EntityEdit
|
|
v-if="loaded"
|
|
:type="props.type"
|
|
:item="item"
|
|
:inModal="true"
|
|
:draggable="true"
|
|
@return-data="(data) => emit('returnData', data)"
|
|
:createQuery="props.createQuery"
|
|
:mode="props.mode"
|
|
/>
|
|
<UProgress
|
|
v-else
|
|
animation="carousel"
|
|
class="m-5 mt-10"
|
|
/>
|
|
</div>
|
|
|
|
<UModal v-else :fullscreen="props.mode === 'show'">
|
|
<template #content>
|
|
<EntityShow
|
|
v-if="loaded && props.mode === 'show'"
|
|
:type="props.type"
|
|
:item="item"
|
|
@updateNeeded="setupPage"
|
|
:key="item"
|
|
:in-modal="true"
|
|
/>
|
|
<EntityEdit
|
|
v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
|
|
:type="props.type"
|
|
:item="item"
|
|
:inModal="true"
|
|
@return-data="(data) => emit('returnData', data)"
|
|
:createQuery="props.createQuery"
|
|
:mode="props.mode"
|
|
/>
|
|
<!-- <EntityList
|
|
v-else-if="loaded && props.mode === 'list'"
|
|
:type="props.type"
|
|
:items="items"
|
|
/>-->
|
|
<UProgress
|
|
v-else
|
|
animation="carousel"
|
|
class="p-5 mt-10"
|
|
/>
|
|
</template>
|
|
</UModal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|