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,87 +417,100 @@ const showFile = (fileId) => {
 
     </template>
   </UDashboardToolbar>
-  <div id="drop_zone" class="h-full scrollList">
-    <UDashboardPanelContent v-if="!isDragTarget" >
-      <div v-if="displayMode === 'list'">
-        <table class="w-full">
-          <thead>
+  <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>
-              <UIcon class="mr-1" :name="entry.type === 'folder' ? 'i-heroicons-folder' : 'i-heroicons-document'"/>
-              <a
-                  style="cursor: pointer"
-                  :class="[...index === selectedFileIndex ? ['text-primary', 'text-xl'] : ['dark:text-white','text-black','text-xl']]"
-                  @click="entry.type === 'folder' ? changeFolder(currentFolders.find(i => i.id === entry.id)) : showFile(entry.id)"
-              >{{entry.label}}</a>
+            </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
+                    style="cursor: pointer"
+                    :class="[...index === selectedFileIndex ? ['text-primary', 'text-xl'] : ['dark:text-white','text-black','text-xl']]"
+                    @click="entry.type === 'folder' ? changeFolder(currentFolders.find(i => i.id === entry.id)) : showFile(entry.id)"
+                >{{entry.label}}</a>
 
-            </td>
-            <td>
-              <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
-              <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
-            </td>
-          </tr>
-        </table>
-      </div>
-      <div v-else-if="displayMode === 'rectangles'">
-        <div class="flex flex-row w-full flex-wrap" v-if="currentFolders.length > 0">
-          <a
-              class="w-1/6 folderIcon flex flex-col p-5 m-2"
-              v-for="folder in currentFolders"
-              @click="changeFolder(folder)"
-          >
+              </td>
+              <td>
+                <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
+                <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div v-else-if="displayMode === 'rectangles'">
+          <div class="flex flex-row w-full flex-wrap" v-if="currentFolders.length > 0">
+            <a
+                class="w-1/6 folderIcon flex flex-col p-5 m-2"
+                v-for="folder in currentFolders"
+                @click="changeFolder(folder)"
+            >
 
-            <UIcon
-                name="i-heroicons-folder"
-                class="w-20 h-20"
+              <UIcon
+                  name="i-heroicons-folder"
+                  class="w-20 h-20"
+              />
+              <span class="text-center truncate">{{folder.name}}</span>
+            </a>
+          </div>
+
+          <UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
+          <UDivider class="my-5" v-else>Ablage</UDivider>
+
+          <div v-if="!loadingDocs">
+            <DocumentList
+                v-if="filteredDocuments.length > 0"
+                :documents="filteredDocuments"
+                @selectDocument="(info) => console.log(info)"
             />
-            <span class="text-center truncate">{{folder.name}}</span>
-          </a>
-        </div>
-
-        <UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
-        <UDivider class="my-5" v-else>Ablage</UDivider>
-
-        <div v-if="!loadingDocs">
-          <DocumentList
-              v-if="filteredDocuments.length > 0"
-              :documents="filteredDocuments"
-              @selectDocument="(info) => console.log(info)"
-          />
-          <UAlert
+            <UAlert
+                v-else
+                class="mt-5 w-1/2 mx-auto"
+                icon="i-heroicons-light-bulb"
+                title="Keine Dokumente vorhanden"
+                color="primary"
+                variant="outline"
+            />
+          </div>
+          <UProgress
+              animation="carousel"
               v-else
-              class="mt-5 w-1/2 mx-auto"
-              icon="i-heroicons-light-bulb"
-              title="Keine Dokumente vorhanden"
-              color="primary"
-              variant="outline"
+              class="w-2/3 my-5 mx-auto"
           />
         </div>
-        <UProgress
-            animation="carousel"
-            v-else
-            class="w-2/3 my-5 mx-auto"
-        />
-      </div>
-    </UDashboardPanelContent>
-    <UCard
-        class=" m-5"
-        v-else>
-      <template #header>
-        <p class="mx-auto">Dateien zum hochladen hierher ziehen</p>
+      </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"/>
 
-      </template>
-    </UCard>
   </div>
 
 
 
-
   <USlideover
       v-model="uploadModalOpen"
   >