Added DocumentUploadModal

components/DocumentUploadModal.vue

@@ -0,0 +1,99 @@
+<script setup >
+
+const props = defineProps({
+  fileData: {
+    type: Object,
+    default: {
+      type: null
+    }
+  }
+})
+
+const emit = defineEmits(["uploadFinished"])
+
+const modal = useModal()
+const profileStore = useProfileStore()
+
+const uploadInProgress = ref(false)
+const availableFiletypes = ref([])
+
+const setup = async () => {
+  availableFiletypes.value = await useSupabaseSelect("filetags")
+}
+
+setup()
+
+const uploadFiles = async () => {
+  uploadInProgress.value = true;
+
+
+  await useFiles().uploadFiles(props.fileData,  document.getElementById("fileUploadInput").files,[],true)
+
+  uploadInProgress.value = false;
+  emit("uploadFinished")
+  modal.close()
+}
+</script>
+
+<template>
+  <UModal>
+    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Datei hochladen
+          </h3>
+          <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="modal.close()"
+              :disabled="uploadInProgress"
+          />
+        </div>
+      </template>
+
+      <UFormGroup
+          label="Datei:"
+      >
+        <UInput
+            type="file"
+            id="fileUploadInput"
+            multiple
+            accept="image/jpeg, image/png, image/gif, application/pdf"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Tags:"
+          class="mt-3"
+      >
+        <USelectMenu
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            searchable-placeholder="Suchen..."
+            :options="availableFiletypes"
+            v-model="props.fileData.type"
+        >
+          <template #label>
+            <span v-if="props.fileData.type">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+            <span v-else>Keine Typ ausgewählt</span>
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+            @click="uploadFiles"
+            :loading="uploadInProgress"
+            :disabled="uploadInProgress"
+        >Hochladen</UButton>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>