Implemented Document Folders

components/DocumentDisplay.vue

@@ -138,11 +138,11 @@ const updateDocumentAssignment = async () => {
 
 <template>
   <div class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openShowModal = true">
-    <object
+    <iframe
-        :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
+        :src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
         class="previewEmbed"
-        type="application/pdf"
         v-if="!documentData.tags.includes('Bild')"
+        loading="lazy"
     />
     <img
       v-else
@@ -150,7 +150,12 @@ const updateDocumentAssignment = async () => {
       :src="documentData.url"
     />
 <!-- TODO: Remove Scrollbar    -->
+    <InputGroup class="mt-3 flex-wrap">
+      <UBadge
+        v-for="tag in documentData.tags"
 
+      ><span class="text-nowrap">{{ tag }}</span></UBadge>
+    </InputGroup>
 
 
 <!--    <UButton
@@ -199,6 +204,7 @@ const updateDocumentAssignment = async () => {
             :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
             type="application/pdf"
             v-if="!documentData.tags.includes('Bild')"
+
         />
         <img
           class=" w-full"

pages/documents.vue

@@ -1,5 +1,6 @@
 <script setup>
 
+
 import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
 import {useSupabaseSelectDocuments} from "~/composables/useSupabase.js";
 
@@ -26,31 +27,120 @@ let tags = dataStore.getDocumentTags
 
 const selectedTags = ref("Eingang")
 const documents = ref([])
-
+const folders = ref([])
+const selectedPath = ref("_")
+const loadingDocs = ref(false)
+const isDragTarget = ref(false)
 const setupPage = async () => {
   //documents.value = await useSupabaseSelectDocuments("*, project(id,name), customer(id,name), contract(id,name), vendor(id,name), plant(id,name), vehicle(id,licensePlate), product(id,name), profile(id,fullName) ")
-  documents.value = await useSupabaseSelectDocuments("*")
+  //documents.value = await useSupabaseSelectDocuments("*",null, selectedPath.value)
+  //console.log(documents.value)
+
+  folders.value = dataStore.ownTenant.documentFolders
+
+  documents.value = await useSupabaseSelectDocuments("*",null,selectedPath.value)
+  //await supabase.from("documents").select().eq("folderPath",selectedPath.value).eq("tenant",dataStore.currentTenant)
+
+  //console.log(await supabase.from("documents").select().eq("folderPath",selectedPath.value))
+
+
+  const dropZone = document.getElementById("drop_zone")
+  dropZone.ondragover = function (event) {
+    console.log(event)
+    isDragTarget.value = true
+    event.preventDefault()
+  }
+
+  dropZone.ondragleave = function (event) {
+    isDragTarget.value = false
+  }
+
+  dropZone.ondrop = async function (event) {
+    console.log("files dropped")
+    event.preventDefault()
+
+    await uploadFiles(event.dataTransfer.files)
+    isDragTarget.value = false
+    setupPage()
+  }
+
+
+  loadingDocs.value = false
+
 }
-
-
 setupPage()
+const currentFolders = computed(() => {
+  if(folders.value.length > 0) {
+    /*console.log(folders.value[0].path.split("/").filter(x => x.length > 0))
+    console.log(selectedPath.value.split("/").filter(x => x.length > 0))*/
+
+    let tempFolders = folders.value.filter(i => (i.path.split("_").filter(x => x.length > 0) || []).length === selectedPath.value.split("_").filter(x => x.length > 0).length + 1)
+
+    tempFolders = tempFolders.filter(i => i.path.includes(selectedPath.value))
+
+    return tempFolders
+  }
+
+})
+
+const breadcrumbLinks = computed(() => {
+  return [{
+    label: "Home",
+    click: () => {
+      changePath("_")
+    },
+    icon: "i-heroicons-folder"
+  },...selectedPath.value.split("_").filter(x => x.length > 0).map((i,index) => {
+    let re = new RegExp(".+?" + i )
+    let path = selectedPath.value.match(re)[0]
+
+    return {
+      label: folders.value.find(x => x.path === path).name ||path,
+      click: () => {
+        changePath(path)
+      },
+      icon: "i-heroicons-folder"
+    }
+  })]
+})
+
+
+
+
+
 const filteredDocuments = computed(() => {
 
-  if(selectedTags.value !== "Archiviert") {
+  /*if(selectedTags.value !== "Archiviert") {
     return  documents.value.filter(i => i.tags.find(t => selectedTags.value === t) && !i.tags.includes("Archiviert"))
   } else {
     return documents.value.filter(i => i.tags.find(t => selectedTags.value === t))
-  }
+  }*/
+
+  return documents.value
+
 
 
 
 
 })
 
-const uploadFiles = async () => {
+const changePath = async (newPath) => {
+  loadingDocs.value = true
+  selectedPath.value = newPath
+  setupPage()
+}
+
+const uploadFiles = async (files) => {
   uploadInProgress.value = true;
 
-  await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)
+  if(files) {
+    await dataStore.uploadFiles({tags: ["Ablage"],tenant: dataStore.currentTenant, folderPath: selectedPath.value}, files, true)
+
+  } else {
+    await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)
+
+  }
+
 
   uploadModalOpen.value = false;
   uploadInProgress.value = false;
@@ -118,6 +208,7 @@ const downloadSelected = async () => {
 }
 
 
+
 </script>
 
 <template>
@@ -126,15 +217,15 @@ const downloadSelected = async () => {
   >
 
   </UDashboardNavbar>
-  <UDashboardToolbar>
+<!--  <UDashboardToolbar>
-    <template #left>
+    <template #right>
       <UButton @click="uploadModalOpen = true">Hochladen</UButton>
-      <UButton
+&lt;!&ndash;      <UButton
           @click="downloadSelected"
           :disabled="dataStore.documents.filter(doc => doc.selected).length === 0"
-      >Herunterladen</UButton>
+      >Herunterladen</UButton>&ndash;&gt;
     </template>
-    <template #right>
+&lt;!&ndash;    <template #right>
       <USelectMenu
           :options="tags"
           v-model="selectedTags"
@@ -144,17 +235,75 @@ const downloadSelected = async () => {
           {{selectedTags}}
         </template>
       </USelectMenu>
+    </template>&ndash;&gt;
+
+  </UDashboardToolbar>-->
+  <UDashboardToolbar>
+    <template #left>
+      <UBreadcrumb
+          :links="breadcrumbLinks"
+      />
+    </template>
+    <template #right>
+      <UButton @click="uploadModalOpen = true">Hochladen</UButton>
     </template>
-
   </UDashboardToolbar>
+  <div id="drop_zone" class="h-full scrollList">
+    <UDashboardPanelContent v-if="!isDragTarget" >
+      <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="changePath(folder.path)"
+        >
 
-  <div class="scrollList">
+          <UIcon
+              name="i-heroicons-folder"
+              class="w-20 h-20"
+          />
+          <span class="text-center truncate">{{folder.name}}</span>
+        </a>
+      </div>
 
-    <DocumentList
+      <UDivider class="my-5" v-if="currentFolders.length > 0">Dokumente</UDivider>
-        :documents="filteredDocuments"
+
-        @selectDocument="(info) => console.log(info)"
+
-    />
+      <div v-if="!loadingDocs">
+
+        <DocumentList
+            v-if="filteredDocuments.length > 0"
+            :documents="filteredDocuments"
+            @selectDocument="(info) => console.log(info)"
+        />
+        <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="w-2/3 my-5 mx-auto"
+      />
+
+    </UDashboardPanelContent>
+    <UCard
+        class=" m-5"
+        v-else>
+      <template #header>
+        <p class="mx-auto">Dateien zum hochladen hierher ziehen</p>
+
+      </template>
+    </UCard>
   </div>
+
+
+
+
   <USlideover
       v-model="uploadModalOpen"
   >
@@ -207,6 +356,15 @@ const downloadSelected = async () => {
 
 
 <style scoped>
+.folderIcon {
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  color: dimgrey;
+}
 
+.folderIcon:hover {
+  border: 1px solid #69c350;
+  color: #69c350;
+}
 
 </style>