FEDEO/spaces/pages/documents.vue

<script setup>

import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";

definePageMeta({
  middleware: "auth"
})
const dataStore = useDataStore()
const supabase = useSupabaseClient()
const user = useSupabaseUser()
const toast = useToast()

dataStore.fetchDocuments()

const uploadModalOpen = ref(false)
const uploadInProgress = ref(false)
const fileUploadFormData = ref({
  tags: ["Eingang"],
  path: "",
  tenant: dataStore.currentTenant
})


let tags = dataStore.getDocumentTags

const selectedTags = ref("Eingang")


const filteredDocuments = computed(() => {
  let returnList = []

  returnList =  dataStore.documents.filter(i => i.tags.filter(t => selectedTags.value === t).length > 0)

  //return dataStore.documents.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
  return returnList

})

const uploadFiles = async () => {
  uploadInProgress.value = true;

  await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)

  uploadModalOpen.value = false;
  uploadInProgress.value = false;
}

const downloadSelected = async () => {
  const bucket = "files";

  let files = []
  dataStore.documents.filter(doc => doc.selected).forEach(doc => files.push(doc.path))

  console.log(files)

  // If there are no files in the folder, throw an error
  if (!files || !files.length) {
    throw new Error("No files to download");
  }

  const promises = [];

// Download each file in the folder
  files.forEach((file) => {
    promises.push(
        supabase.storage.from(bucket).download(`${file}`)
    );
  });

// Wait for all the files to download
  const response = await Promise.allSettled(promises);

// Map the response to an array of objects containing the file name and blob
  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,
      };
    }
  });

// Create a new zip file
  const zipFileWriter = new BlobWriter("application/zip");
  const zipWriter = new ZipWriter(zipFileWriter, { bufferedWrite: true });

// Add each file to the zip file
  downloadedFiles.forEach((downloadedFile) => {
    if (downloadedFile) {
      zipWriter.add(downloadedFile.name, new BlobReader(downloadedFile.blob));
    }
  });

// Download the zip file
  const url = URL.createObjectURL(await zipWriter.close());
  const link = document.createElement("a");

  link.href = url;
  link.setAttribute("download", "documents.zip");

  document.body.appendChild(link);

  link.click();
}


</script>

<template>
  <div>
    <Toolbar>
      <UButton @click="uploadModalOpen = true">Hochladen</UButton>
      <UButton
          @click="downloadSelected"
          :disabled="dataStore.documents.filter(doc => doc.selected).length === 0"
      >Herunterladen</UButton>

      <USelectMenu
          :options="tags"
          v-model="selectedTags"
          class="w-40"
      >
        <template #label>
          {{selectedTags}}
        </template>
      </USelectMenu>


    </Toolbar>
    <div class="scrollList">
      <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..."
                :options="tags"
                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>
      <DocumentList
        :documents="filteredDocuments"
      />
    </div>
  </div>

</template>



<style scoped>


</style>