Fixed DocumentUpload and Loading in Files

components/DocumentUpload.vue

@@ -15,21 +15,17 @@ const {type, elementId} = props
 
 const emit = defineEmits(["uploadFinished"])
 
-const dataStore = useDataStore()
-const profileStore = useProfileStore()
 const modal = useModal()
 
 const openModal = () => {
-  let fileProps = {fileData: {folder: null, type: null, typeEnabled: true}}
+  let fileProps = {folder: null, type: null, typeEnabled: true}
 
-  fileProps.fileData[props.type] = props.elementId
+  fileProps[props.type] = props.elementId
 
   console.log(fileProps)
 
-  modal.open(DocumentUploadModal,fileProps)
+  modal.open(DocumentUploadModal,{fileData: fileProps, onUploadFinished: () => emit("uploadFinished")})
 }
-
-
 </script>
 
 <template>

pages/files/index.vue

@@ -56,7 +56,6 @@ const profileStore = useProfileStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
 const route = useRoute()
-const slideover = useSlideover()
 const modal = useModal()
 
 dataStore.fetchDocuments()
@@ -73,8 +72,6 @@ const fileUploadFormData = ref({
 
 const files = useFiles()
 
-let tags = dataStore.getDocumentTags
-
 const displayMode = ref("list")
 const displayModes = ref([{label: 'Liste',key:'list', icon: 'i-heroicons-list-bullet'},{label: 'Kacheln',key:'rectangles', icon: 'i-heroicons-squares-2x2'}])
 
@@ -92,6 +89,7 @@ const isDragTarget = ref(false)
 const loaded = ref(false)
 
 const setupPage = async () => {
+  console.log("setupPage")
   folders.value = await useSupabaseSelect("folders")
 
   documents.value = await files.selectDocuments()
@@ -107,8 +105,9 @@ const setupPage = async () => {
 
   const dropZone = document.getElementById("drop_zone")
   dropZone.ondragover = function (event) {
-    console.log(event)
-    isDragTarget.value = true
+    modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.value.id, type: currentFolder.value.standardFiletype, typeEnabled: currentFolder.value.standardFiletypeIsOptional}, onUploadFinished: () => {
+      setupPage()
+      }})
     event.preventDefault()
   }
 
@@ -120,9 +119,6 @@ const setupPage = async () => {
     console.log("files dropped")
     event.preventDefault()
 
-    await uploadFiles(event.dataTransfer.files)
-    isDragTarget.value = false
-    setupPage()
   }
 
 
@@ -230,23 +226,6 @@ const createFolder = async () => {
 
 }
 
-const uploadFiles = async (files) => {
-  uploadInProgress.value = true;
-
-  if(files) {
-    //await dataStore.uploadFiles({tags: ["Ablage"],tenant: profileStore.currentTenant,folder: currentFolder.value.id}, files, true)
-    await dataStore.uploadFiles({tags: ["Ablage"],tenant: profileStore.currentTenant}, files, true)
-
-  } else {
-    await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)
-
-  }
-
-
-  uploadModalOpen.value = false;
-  uploadInProgress.value = false;
-}
-
 const downloadSelected = async () => {
   const bucket = "filesdev";
 
@@ -352,9 +331,7 @@ const selectAll = () => {
 
   <UDashboardNavbar
       title="Dateien"
-  >
-
-  </UDashboardNavbar>
+  ></UDashboardNavbar>
   <UDashboardToolbar>
     <template #left>
       <UBreadcrumb
@@ -375,7 +352,7 @@ const selectAll = () => {
       </USelectMenu>
 
 
-      <UButton @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id, type: currentFolder.standardFiletype, typeEnabled: currentFolder.standardFiletypeIsOptional}})">+ Datei</UButton>
+      <UButton @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id, type: currentFolder.standardFiletype, typeEnabled: currentFolder.standardFiletypeIsOptional}, onUploadFinished: () => {setupPage()}})">+ Datei</UButton>
       <UButton
           @click="createFolderModalOpen = true"
           variant="outline"
@@ -419,7 +396,7 @@ const selectAll = () => {
   </UDashboardToolbar>
   <div id="drop_zone" class="h-full scrollList" >
     <div v-if="loaded">
-      <UDashboardPanelContent v-if="!isDragTarget" >
+      <UDashboardPanelContent>
         <div v-if="displayMode === 'list'">
           <table class="w-full">
             <thead>
@@ -498,70 +475,10 @@ const selectAll = () => {
           />
         </div>
       </UDashboardPanelContent>
-      <UCard
-          class=" m-5"
-          v-else>
-        <template #header>
-          <p class="mx-auto">Dateien zum hochladen hierher ziehen</p>
-
-        </template>
-      </UCard>
     </div>
     <UProgress animation="carousel" v-else class="w-5/6 mx-auto mt-5"/>
 
   </div>
-
-
-
-  <USlideover
-      v-model="uploadModalOpen"
-  >
-
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        Datei Hochladen
-      </template>
-
-      <div class="h-full">
-        <UFormGroup
-            label="Datei:"
-        >
-          <UInput
-              type="file"
-              id="fileUploadInput"
-              multiple
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Tags:"
-            class="mt-3"
-        >
-          <USelectMenu
-              multiple
-              searchable
-              searchable-placeholder="Suchen..."
-              option-attribute="name"
-              value-attribute="id"
-              :options="filetags"
-              v-model="fileUploadFormData.tags"
-          />
-        </UFormGroup>
-      </div>
-
-      <template #footer>
-        <UButton
-            v-if="!uploadInProgress"
-            class="mt-3"
-            @click="uploadFiles"
-        >Hochladen</UButton>
-        <UProgress
-            v-else
-            animation="carousel"
-        />
-      </template>
-    </UCard>
-  </USlideover>
 </template>
 
 <style scoped>