Added Modals for Adding, Editing, Showing

components/EntityShow.vue

@@ -9,6 +9,9 @@ const props = defineProps({
   item: {
     required: true,
     type: Object
+  },
+  inModal: {
+    type: Boolean,
   }
 })
 
@@ -37,6 +40,7 @@ const dataStore = useDataStore()
 const profileStore = useProfileStore()
 const supabase = useSupabaseClient()
 const files = useFiles()
+const modal = useModal()
 
 const dataType = dataStore.dataTypes[type]
 
@@ -168,6 +172,7 @@ const getAvailableQueryStringData = (keys) => {
 
 <template>
   <UDashboardNavbar
+      v-if="!props.inModal"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -200,6 +205,26 @@ const getAvailableQueryStringData = (keys) => {
       </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 ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          @click="modal.close()"
+          color="red"
+          class="ml-2"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+      />
+    </template>
+  </UDashboardNavbar>
   <UTabs
       :items="dataType.showTabs"
       v-if="props.item.id"