Changed Document Upload to the Upload Modal

components/DocumentUpload.vue

@@ -1,5 +1,7 @@
 <script setup >
 
+import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
+
 const props = defineProps({
   type: {
     type: String
@@ -15,101 +17,22 @@ const emit = defineEmits(["uploadFinished"])
 
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
-
-const uploadModalOpen = ref(false)
-const uploadInProgress = ref(false)
-const fileUploadFormData = ref({
-  project: null,
-  tenant: profileStore.currentTenant
-})
-const availableTags = ref([])
-const selectedTags = ref([])
-const setup = async () => {
-  availableTags.value = await useSupabaseSelect("filetags")
-}
-
-setup()
-
+const modal = useModal()
 
 const openModal = () => {
-  uploadModalOpen.value = true
+  let fileProps = {fileData: {folder: null, type: null, typeEnabled: true}}
+
+  fileProps.fileData[props.type] = props.elementId
+
+  console.log(fileProps)
+
+  modal.open(DocumentUploadModal,fileProps)
 }
 
-const uploadFiles = async () => {
-  uploadInProgress.value = true;
 
-  let fileData = fileUploadFormData.value
-  fileData[type] = elementId
-
-  await useFiles().uploadFiles(fileData,  document.getElementById("fileUploadInput").files,selectedTags.value,true)
-
-  uploadModalOpen.value = false;
-  uploadInProgress.value = false;
-  emit("uploadFinished")
-}
 </script>
 
 <template>
-  <USlideover
-      v-model="uploadModalOpen"
-  >
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
-      <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="uploadModalOpen = false"
-              :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
-            multiple
-            option-attribute="name"
-            value-attribute="id"
-            searchable
-            searchable-placeholder="Suchen..."
-            :options="availableTags"
-            v-model="selectedTags"
-        >
-          <template #label>
-            <span v-if="selectedTags.length > 0">{{selectedTags.map(i => availableTags.find(x => x.id === i).name).join(", ")}}</span>
-            <span v-else>Keine Tags ausgewählt</span>
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-
-      <template #footer>
-        <UButton
-            @click="uploadFiles"
-            :loading="uploadInProgress"
-        >Hochladen</UButton>
-      </template>
-
-    </UCard>
-  </USlideover>
-
   <UButton
       @click="openModal"
       icon="i-heroicons-arrow-up-tray"