Added Modals for Adding, Editing, Showing

components/EntityEdit.vue

@@ -7,12 +7,20 @@ const props = defineProps({
     required: true,
     type: String
   },
+  createQuery: {
+    type: Object
+  },
   item: {
     required: true,
     type: Object
+  },
+  inModal: {
+    type: Boolean,
   }
 })
 
+const emit = defineEmits(["returnData"])
+
 
 const {type} = props
 
@@ -38,6 +46,7 @@ const route = useRoute()
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
 const supabase = useSupabaseClient()
+const modal = useModal()
 
 const dataType = dataStore.dataTypes[type]
 const openTab = ref(0)
@@ -73,17 +82,20 @@ const setupCreate = () => {
 setupCreate()
 
 const setupQuery = () => {
-  if(route.query) {
-    Object.keys(route.query).forEach(key => {
+  if(props.mode === "create" && (route.query || props.createQuery)) {
+
+    let data = !props.inModal ? route.query : props.createQuery
+
+    Object.keys(data).forEach(key => {
       if(dataType.templateColumns.find(i => i.key === key)) {
         if (["customer", "contract", "plant", "contact", "project"].includes(key)) {
-          item.value[key] = Number(route.query[key])
+          item.value[key] = Number(data[key])
         } else {
-          item.value[key] = route.query[key]
+          item.value[key] = data[key]
         }
       } else if(key === "resources") {
-        /*item.value[key] = route.query[key]*/
-        JSON.parse(route.query[key]).forEach(async (i) => {
+        /*item.value[key] = data[key]*/
+        JSON.parse(data[key]).forEach(async (i) => {
           console.log(i)
           let type = i.substring(0,1)
           let id = i.substring(2,i.length)
@@ -180,10 +192,37 @@ const calcSaveAllowed = (item) => {
 watch(item.value, async (newItem, oldItem) => {
   calcSaveAllowed(newItem)
 })
+
+const createItem = async () => {
+  let ret = null
+
+  if(props.inModal) {
+    ret = await dataStore.createNewItem(type,item.value,true)
+  } else {
+    ret = dataStore.createNewItem(type,item.value)
+  }
+
+  emit('returnData', ret)
+}
+
+const updateItem = async () => {
+  let ret = null
+
+  if(props.inModal) {
+    ret = await dataStore.updateItem(type,item.value, oldItem.value,true)
+  } else {
+    ret = await dataStore.updateItem(type,item.value, oldItem.value)
+  }
+
+  emit('returnData', ret)
+}
+
+
 </script>
 
 <template>
   <UDashboardNavbar
+      v-if="!props.inModal"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -217,14 +256,14 @@ watch(item.value, async (newItem, oldItem) => {
       </ButtonWithConfirm>
       <UButton
           v-if="item.id"
-          @click="dataStore.updateItem(type,item, oldItem)"
+          @click="updateItem"
           :disabled="!saveAllowed"
       >
         Speichern
       </UButton>
       <UButton
           v-else
-          @click="dataStore.createNewItem(type,item)"
+          @click="createItem"
           :disabled="!saveAllowed"
       >
         Erstellen
@@ -238,6 +277,40 @@ watch(item.value, async (newItem, oldItem) => {
       </UButton>
     </template>
   </UDashboardNavbar>
+  <UDashboardNavbar
+      v-else
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="item.id"
+          @click="updateItem"
+          :disabled="!saveAllowed"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else
+          @click="createItem"
+          :disabled="!saveAllowed"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="modal.close()"
+          color="red"
+          class="ml-2"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+      />
+    </template>
+  </UDashboardNavbar>
   <UDashboardPanelContent>
     <UForm
         class="p-5"