Added File Download

Added File Loading Screen

pages/files/index.vue

@@ -88,6 +88,9 @@ const currentFolder = ref(null)
 
 const loadingDocs = ref(false)
 const isDragTarget = ref(false)
+
+const loaded = ref(false)
+
 const setupPage = async () => {
   folders.value = await useSupabaseSelect("folders")
 
@@ -124,6 +127,7 @@ const setupPage = async () => {
 
 
   loadingDocs.value = false
+  loaded.value = true
 
 }
 setupPage()
@@ -244,12 +248,11 @@ const uploadFiles = async (files) => {
 }
 
 const downloadSelected = async () => {
-  const bucket = "files";
+  const bucket = "filesdev";
 
   let files = []
-  dataStore.documents.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
 
-  console.log(files)
+  files = filteredDocuments.value.filter(i => selectedFiles.value[i.id] === true).map(i => i.path)
 
   // If there are no files in the folder, throw an error
   if (!files || !files.length) {
@@ -272,8 +275,6 @@ const downloadSelected = async () => {
   const downloadedFiles = response.map((result, index) => {
     if (result.status === "fulfilled") {
 
-      console.log(files[index].split("/")[files[index].split("/").length -1])
-
       return {
         name: files[index].split("/")[files[index].split("/").length -1],
         blob: result.value.data,
@@ -297,7 +298,7 @@ const downloadSelected = async () => {
   const link = document.createElement("a");
 
   link.href = url;
-  link.setAttribute("download", "documents.zip");
+  link.setAttribute("download", "dateien.zip");
 
   document.body.appendChild(link);
 
@@ -332,6 +333,16 @@ const showFile = (fileId) => {
     documentData: documents.value.find(i => i.id === fileId),
   })
 }
+const selectedFiles = ref({});
+
+const selectAll = () => {
+  if(Object.keys(selectedFiles.value).find(i => selectedFiles.value[i] === true)) {
+    selectedFiles.value = {}
+  } else {
+    selectedFiles.value = Object.fromEntries(filteredDocuments.value.map(i => i.id).map(k => [k,true]))
+
+  }
+}
 
 
 
@@ -363,11 +374,18 @@ const showFile = (fileId) => {
         </template>
       </USelectMenu>
 
+
       <UButton @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id}})">+ Datei</UButton>
       <UButton
           @click="createFolderModalOpen = true"
           variant="outline"
       >+ Ordner</UButton>
+      <UButton
+          @click="downloadSelected"
+          icon="i-heroicons-cloud-arrow-down"
+          variant="outline"
+          v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
+      >Herunterladen</UButton>
       <UModal
           v-model="createFolderModalOpen"
       >
@@ -399,17 +417,28 @@ const showFile = (fileId) => {
 
     </template>
   </UDashboardToolbar>
-  <div id="drop_zone" class="h-full scrollList">
+  <div id="drop_zone" class="h-full scrollList" >
+    <div v-if="loaded">
       <UDashboardPanelContent v-if="!isDragTarget" >
         <div v-if="displayMode === 'list'">
           <table class="w-full">
             <thead>
             <tr>
+              <td>
+                <UCheckbox
+                    @change="selectAll"
+                />
+              </td>
               <td class="font-bold">Name</td>
               <td class="font-bold">Erstellt am</td>
             </tr>
             </thead>
             <tr v-for="(entry,index) in renderedFileList">
+              <td>
+                <UCheckbox
+                    v-model="selectedFiles[entry.id]"
+                />
+              </td>
               <td>
                 <UIcon class="mr-1" :name="entry.type === 'folder' ? 'i-heroicons-folder' : 'i-heroicons-document'"/>
                 <a
@@ -476,7 +505,9 @@ const showFile = (fileId) => {
         </template>
       </UCard>
     </div>
+    <UProgress animation="carousel" v-else class="w-5/6 mx-auto mt-5"/>
 
+  </div>