Start for Dev Branch

pages/documents.vue

@@ -2,7 +2,7 @@
 
 
 import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
-import {useSupabaseSelectDocuments} from "~/composables/useSupabase.js";
+import {useSupabaseSelectDocuments, useSupabaseSelectSingle} from "~/composables/useSupabase.js";
 
 definePageMeta({
   middleware: "auth"
@@ -11,6 +11,8 @@ const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
+const router = useRouter()
+const route = useRoute()
 
 dataStore.fetchDocuments()
 
@@ -19,29 +21,31 @@ const uploadInProgress = ref(false)
 const fileUploadFormData = ref({
   tags: ["Eingang"],
   path: "",
-  tenant: dataStore.currentTenant
+  tenant: dataStore.currentTenant,
+  folder: null
 })
 
 
 let tags = dataStore.getDocumentTags
 
-const selectedTags = ref("Eingang")
 const documents = ref([])
 const folders = ref([])
-const selectedPath = ref("_")
+
+const currentFolder = ref(null)
+
 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("*",null, selectedPath.value)
-  //console.log(documents.value)
+  folders.value = await useSupabaseSelect("folders")
 
-  folders.value = dataStore.ownTenant.documentFolders
+  documents.value = await useSupabaseSelectDocuments("*",null)
 
-  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))
+  if(route.query) {
+    if(route.query.folder) {
+      console.log(route.query.folder)
+      currentFolder.value = await useSupabaseSelectSingle("folders", route.query.folder)
+    }
+  }
 
 
   const dropZone = document.getElementById("drop_zone")
@@ -71,37 +75,63 @@ const setupPage = async () => {
 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))
+    let tempFolders = folders.value.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
 
     return tempFolders
-  }
+  } else return []
 
 })
 
 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,
+  if(currentFolder.value) {
+    let parents = []
+
+    const addParent = (parent) => {
+      parents.push(parent)
+      if(parent.parent) {
+        addParent(folders.value.find(i => i.id === currentFolder.value.parent))
+      }
+    }
+
+    if(currentFolder.value.parent) {
+      addParent(folders.value.find(i => i.id === currentFolder.value.parent))
+    }
+
+    return [{
+      label: "Home",
       click: () => {
-        changePath(path)
+        changeFolder(null)
       },
       icon: "i-heroicons-folder"
-    }
-  })]
+    },
+    ...parents.map(i => {
+      return {
+        label: folders.value.find(x => x.id === i.id).name,
+        click: () => {
+          changeFolder(i)
+        },
+        icon: "i-heroicons-folder"
+      }
+    }),
+    {
+      label: currentFolder.value.name,
+      click: () => {
+        changeFolder(currentFolder.value)
+      },
+      icon: "i-heroicons-folder"
+    }]
+
+  } else {
+    return [{
+      label: "Home",
+      click: () => {
+        changeFolder(null)
+      },
+      icon: "i-heroicons-folder"
+    }]
+  }
 })
 
 
@@ -110,23 +140,22 @@ const breadcrumbLinks = computed(() => {
 
 const filteredDocuments = computed(() => {
 
-  /*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
-
-
-
-
+  return documents.value.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
 
 })
 
-const changePath = async (newPath) => {
+const changeFolder = async (newFolder) => {
   loadingDocs.value = true
-  selectedPath.value = newPath
+  currentFolder.value = newFolder
+
+  if(newFolder) {
+    fileUploadFormData.value.folder = newFolder.id
+    await router.push(`/documents?folder=${newFolder.id}`)
+  } else {
+    fileUploadFormData.value.folder = null
+    await router.push(`/documents`)
+  }
+
   setupPage()
 }
 
@@ -134,7 +163,7 @@ const uploadFiles = async (files) => {
   uploadInProgress.value = true;
 
   if(files) {
-    await dataStore.uploadFiles({tags: ["Ablage"],tenant: dataStore.currentTenant, folderPath: selectedPath.value}, files, true)
+    await dataStore.uploadFiles({tags: ["Ablage"],tenant: dataStore.currentTenant,folder: currentFolder.value.id}, files, true)
 
   } else {
     await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)
@@ -213,7 +242,7 @@ const downloadSelected = async () => {
 
 <template>
   <UDashboardNavbar
-      title="Dokumente"
+      title="Dateien"
   >
 
   </UDashboardNavbar>
@@ -254,7 +283,7 @@ const downloadSelected = async () => {
         <a
             class="w-1/6 folderIcon flex flex-col p-5 m-2"
             v-for="folder in currentFolders"
-            @click="changePath(folder.path)"
+            @click="changeFolder(folder)"
         >
 
           <UIcon
@@ -265,8 +294,8 @@ const downloadSelected = async () => {
         </a>
       </div>
 
-      <UDivider class="my-5" v-if="currentFolders.length > 0">Dokumente</UDivider>
-
+      <UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
+      <UDivider class="my-5" v-else>Ablage</UDivider>
 
       <div v-if="!loadingDocs">
         <DocumentList