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"],
  project: null,
  customer: null,
  path: ""
})


let tags = dataStore.getDocumentTags

const selectedTags = ref(["Eingang"])

const filteredDocuments = computed(() => {

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


})

const uploadFiles = async () => {
  const uploadSingleFile = async (file) => {

    const {data, error} = await supabase
        .storage
        .from("files")
        .upload(`${user.value.app_metadata.tenant}/${file.name}`, file)

    if (error) {
      console.log(error)
    } else if (data) {
      const returnPath = data.path

      if (error) {

      } else {
        const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
          limit: 100,
          offset: 0,
          sortBy: {column: 'name', order: 'asc'}
        })).data

        fileUploadFormData.value.path = returnPath

        const {data, error} = await supabase
            .from("documents")
            .insert([fileUploadFormData.value])
            .select()
        if(error) console.log(error)
      }
    }
  }

  uploadInProgress.value = true

  let files = document.getElementById("fileUploadInput").files

  if(files.length === 1) {
    await uploadSingleFile(files[0])
  } else if( files.length > 1) {

    for(let i = 0; i < files.length; i++){
      uploadSingleFile(files[i])
    }

  }

  uploadModalOpen.value = false;
  uploadInProgress.value = false;
  dataStore.fetchDocuments()
}

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") {
      return {
        name: files[index],
        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>
    <div class="flex items-center gap-2">
      <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"
          multiple
      >
        <template #label>
          <span v-if="selectedTags.length" class="truncate">{{ selectedTags.length }} ausgewählt</span>
          <span v-else>Tags auswählen</span>
        </template>
      </USelectMenu>


    </div>
    <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..."
                :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>

      <div class="documentList">
        <DocumentDisplay
          v-for="document in filteredDocuments"
          :document="document"
        />
      </div>
    </div>
  </div>

</template>



<style scoped>


</style>