FEDEO/frontend/components/StandardEntityModal.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 isDraggableWindowOpen = ref(true)
const draggableWindow = ref(null)
const draggableWindowHandle = 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,
  handle: draggableWindowHandle,
})

const closeDraggableWindow = () => {
  isDraggableWindowOpen.value = false
  modal.close()
}

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 && isDraggableWindowOpen"
      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"
  >
    <div
        ref="draggableWindowHandle"
        class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3 select-none dark:border-gray-800 dark:bg-gray-800/50"
    >
      <div class="flex items-center gap-2 text-gray-500">
        <UIcon name="i-heroicons-building-storefront" />
        <span class="text-xs font-bold uppercase tracking-wider">Lieferant erstellen</span>
      </div>
      <UTooltip text="Schließen">
        <UButton
            color="gray"
            variant="ghost"
            icon="i-heroicons-x-mark"
            size="xs"
            @pointerdown.stop
            @click.stop="closeDraggableWindow"
        />
      </UTooltip>
    </div>
    <EntityEdit
        v-if="loaded"
        :type="props.type"
        :item="item"
        :inModal="true"
        :floating-window="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-if="!isDraggableVendorCreate" :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>