416 lines
9.5 KiB
Vue
416 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="controlHeader">
|
|
<UButton @click="uploadModalOpen = true">Hochladen</UButton>
|
|
<UButton
|
|
@click="downloadSelected"
|
|
class="ml-2"
|
|
:disabled="documents.filter(doc => doc.selected).length === 0"
|
|
>Herunterladen</UButton>
|
|
<UModal
|
|
v-model="uploadModalOpen"
|
|
>
|
|
<UCard class="p-4">
|
|
|
|
<template #header>
|
|
Datei hochladen
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Datei:"
|
|
>
|
|
<UInput
|
|
type="file"
|
|
id="fileUploadInput"
|
|
/>
|
|
</UFormGroup>
|
|
<!-- <UFormGroup
|
|
label="Name:"
|
|
class="mt-3"
|
|
>
|
|
<UInput
|
|
v-model="fileUploadFormData.name"
|
|
/>
|
|
</UFormGroup>-->
|
|
<UFormGroup
|
|
label="Tags:"
|
|
class="mt-3"
|
|
>
|
|
<USelectMenu
|
|
multiple
|
|
searchable
|
|
searchable-placeholder="Suchen..."
|
|
:options="tags"
|
|
v-model="fileUploadFormData.tags"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Ordner:"
|
|
class="mt-3"
|
|
>
|
|
<USelectMenu
|
|
:options="folders"
|
|
v-model="fileUploadFormData.folder"
|
|
value-attribute="label"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
class="mt-3"
|
|
@click="uploadFile"
|
|
>Hochladen</UButton>
|
|
</template>
|
|
|
|
|
|
</UCard>
|
|
|
|
</UModal>
|
|
</div>
|
|
<div >
|
|
<USlideover
|
|
v-model="showDocumentModal"
|
|
fullscreen
|
|
>
|
|
<UCard class="h-full">
|
|
<embed
|
|
class="bigPreview mb-3"
|
|
:src="selectedDocument.url"
|
|
/>
|
|
|
|
<UBadge
|
|
v-for="tag in selectedDocument.tags"
|
|
class="ml-2"
|
|
>
|
|
{{tag}}
|
|
</UBadge>
|
|
|
|
|
|
<UFormGroup
|
|
label="Ordner ändern:"
|
|
>
|
|
<USelectMenu
|
|
:options="folders"
|
|
v-on:change="changeFolder"
|
|
v-model="newFolder"
|
|
value-attribute="label"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Tags ändern:"
|
|
>
|
|
<USelectMenu
|
|
:options="tags"
|
|
v-model="selectedDocument.tags"
|
|
@change="updateDocument"
|
|
multiple
|
|
/>
|
|
</UFormGroup>
|
|
|
|
|
|
|
|
|
|
</UCard>
|
|
</USlideover>
|
|
<!-- TODO: Tab Height always Full -->
|
|
<UTabs
|
|
:items="folders"
|
|
orientation="vertical"
|
|
v-model="tabOpen"
|
|
:ui="{ wrapper: 'flex items-top gap-4', list: { width: 'w-72', padding: 'p-3' } }"
|
|
>
|
|
<template #item="{item}">
|
|
<div class="documentList">
|
|
<a
|
|
v-if="documents.filter(doc => doc.folder === item.label).length > 0"
|
|
v-for="document in documents.filter(doc => doc.folder === item.label)"
|
|
class="documentListItem"
|
|
>
|
|
<embed
|
|
:src="document.url"
|
|
class="previewEmbed"
|
|
/>
|
|
<UButton
|
|
@click="openDocument(document)"
|
|
class="mt-3"
|
|
>
|
|
<UIcon name="i-heroicons-eye-solid" />
|
|
</UButton>
|
|
<UToggle
|
|
v-model="document.selected"
|
|
class="ml-2"
|
|
/>
|
|
|
|
<!-- {{document.name}}<br>-->
|
|
<!-- <UBadge
|
|
v-for="tag in document.tags"
|
|
variant="outline"
|
|
color="primary"
|
|
>{{tag}}</UBadge>
|
|
<UBadge
|
|
color="rose"
|
|
variant="outline"
|
|
>{{document.state}}</UBadge>-->
|
|
|
|
</a>
|
|
<div v-else>
|
|
<p>Keine Dokumente in diesem Ordner</p>
|
|
<UButton
|
|
@click="uploadModalOpen = true"
|
|
>
|
|
Hochladen
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
const supabase = useSupabaseClient()
|
|
const user = useSupabaseUser()
|
|
const toast = useToast()
|
|
|
|
const {documents} = storeToRefs(useDataStore())
|
|
const {fetchDocuments} = useDataStore()
|
|
|
|
fetchDocuments()
|
|
|
|
const tabOpen = ref(0)
|
|
const uploadModalOpen = ref(false)
|
|
const fileUploadFormData = ref({
|
|
tags: [],
|
|
folder: "",
|
|
object: "",
|
|
path: ""
|
|
})
|
|
|
|
const selectedDocuments = ref([])
|
|
|
|
let tags = ["Eingangsrechnung","Ausgangrechnung","Mahnung", "Dokument", "E-Mail Anhang"]
|
|
const folders = [
|
|
{
|
|
label: "Eingang",
|
|
},
|
|
{
|
|
label: "Eingangsrechnungen"
|
|
},
|
|
{
|
|
label: "Ausgangsrechnungen"
|
|
},
|
|
{
|
|
label: "Fahrzeuge"
|
|
},
|
|
{
|
|
label: "Dokumente"
|
|
},
|
|
{
|
|
label: "Archiv"
|
|
}
|
|
]
|
|
const uploadFile = async () => {
|
|
const file = document.getElementById("fileUploadInput").files[0]
|
|
|
|
const {data,error} = await supabase
|
|
.storage
|
|
.from("documents")
|
|
.upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${file.name}`,file)
|
|
|
|
const returnPath = data.path
|
|
|
|
if(error) {
|
|
|
|
} else {
|
|
console.log(returnPath)
|
|
const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
|
|
console.log(files)
|
|
const fileId = files.find(temp => returnPath.includes(temp.name)).id
|
|
|
|
fileUploadFormData.value.object = fileId
|
|
fileUploadFormData.value.path = returnPath
|
|
console.log(fileUploadFormData.value)
|
|
|
|
const {data,error} = await supabase
|
|
.from("documents")
|
|
.insert([fileUploadFormData.value])
|
|
.select()
|
|
console.log(data)
|
|
console.log(error)
|
|
}
|
|
|
|
uploadModalOpen.value = false;
|
|
}
|
|
|
|
const updateDocument = async () => {
|
|
console.log(selectedDocument.value)
|
|
|
|
let objData = selectedDocument.value
|
|
delete objData.url
|
|
|
|
const {data,error} = await supabase
|
|
.from("documents")
|
|
.update(objData)
|
|
.eq('id',objData.id)
|
|
.select()
|
|
console.log(data)
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
} else {
|
|
toast.add({title: "Dokument aktualisiert"})
|
|
selectedDocument.value = data[0]
|
|
showDocumentModal.value = false
|
|
fetchDocuments()
|
|
}
|
|
|
|
}
|
|
|
|
const changeFolder = async () => {
|
|
console.log("Change Folder")
|
|
console.log(selectedDocument.value)
|
|
|
|
let filename = selectedDocument.value.path.split("/")[2]
|
|
let oldPath = selectedDocument.value.path
|
|
let newPath = `${user.value.app_metadata.tenant}/${newFolder.value}/${filename}`
|
|
console.log(oldPath)
|
|
console.log(newPath)
|
|
|
|
const { data, error } = await supabase
|
|
.storage
|
|
.from('documents')
|
|
.move(oldPath,newPath )
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
} else {
|
|
console.log(data)
|
|
}
|
|
|
|
}
|
|
|
|
const newFolder = ref("")
|
|
|
|
const selectedDocument = ref({})
|
|
const showDocumentModal = ref(false)
|
|
|
|
const openDocument = async (document) => {
|
|
console.log("open")
|
|
selectedDocument.value = document
|
|
showDocumentModal.value = true
|
|
|
|
}
|
|
|
|
|
|
const downloadSelected = async () => {
|
|
const bucket = "documents";
|
|
|
|
let files = []
|
|
documents.value.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>
|
|
|
|
<style scoped>
|
|
.documentList {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
height: 85vh;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.documentListItem {
|
|
display:block;
|
|
width: 15vw;
|
|
height: 30vh;
|
|
padding:1em;
|
|
margin: 0.7em;
|
|
border: 1px solid lightgrey;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.documentListItem:hover {
|
|
border: 1px solid #69c350;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.previewEmbed {
|
|
width: 100%;
|
|
height: 22vh;
|
|
overflow: hidden;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.previewEmbed::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.bigPreview {
|
|
height: 70vh;
|
|
width: 100%;
|
|
}
|
|
</style> |