Added File Download
Added File Loading Screen
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user