Changed Backend to Supabase

spaces/pages/documents.vue

@@ -19,14 +19,14 @@
                 id="fileUploadInput"
             />
           </UFormGroup>
-          <UFormGroup
+<!--          <UFormGroup
             label="Name:"
             class="mt-3"
           >
             <UInput
                 v-model="fileUploadFormData.name"
             />
-          </UFormGroup>
+          </UFormGroup>-->
           <UFormGroup
             label="Tags:"
             class="mt-3"
@@ -39,6 +39,17 @@
                 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
@@ -51,21 +62,18 @@
         </UCard>
 
       </UModal>
-<!--      <USelectMenu :options="sortOptions"/>-->
     </div>
-    <div class="documentList">
+    <div >
       <USlideover
         v-model="showDocumentModal"
         fullscreen
       >
         <UCard>
-          <template #header>
-            {{selectedDocument.attributes.name}}
-          </template>
+
 <!--          <a
-              v-if="selectedDocument.attributes"
+              v-if="selectedDocument"
               target="_blank"
-              :href="`http://localhost:1337${selectedDocument.attributes.file.data.attributes.url}`"
+              :href="`http://localhost:1337${selectedDocument.file.data.url}`"
               class="p-2"
           >
             Anzeigen
@@ -73,17 +81,24 @@
 
           </a>-->
 
-          <UFormGroup
+          {{selectedDocument}}
+
+          <embed
+            :src="pdfSource"
+          >
+
+
+<!--          <UFormGroup
               label="Tags:"
           >
             <USelectMenu
-                v-if="selectedDocument.attributes"
+                v-if="selectedDocument"
                 multiple
                 searchable
                 searchable-placeholder="Suchen..."
                 :options="tags"
-                v-on:change="update('documents',selectedDocument.id, {tags: selectedDocument.attributes.tags})"
-                v-model="selectedDocument.attributes.tags"
+                v-on:change="update('documents',selectedDocument.id, {tags: selectedDocument.tags})"
+                v-model="selectedDocument.tags"
             />
           </UFormGroup>
 
@@ -93,10 +108,10 @@
           >
             <USelectMenu
                 :options="states"
-                v-model="selectedDocument.attributes.state"
-                v-on:change="update('documents',selectedDocument.id,{state: selectedDocument.attributes.state})"
+                v-model="selectedDocument.state"
+                v-on:change="update('documents',selectedDocument.id,{state: selectedDocument.state})"
             />
-          </UFormGroup>
+          </UFormGroup>-->
 
           <div>
             <VuePDF
@@ -118,55 +133,55 @@
 
         </UCard>
       </USlideover>
-      <a
-          v-for="document in documents.filter(doc => doc.attributes.state != 'Archiviert')" class="documentListItem"
-          @click="openDocument(document)"
-      >
-        <div>
-          {{document.attributes.name}}<br>
-          <UBadge
-              v-for="tag in document.attributes.tags"
-              variant="outline"
-              color="primary"
-          >{{tag}}</UBadge>
-          <UBadge
-            color="rose"
-            variant="outline"
-          >{{document.attributes.state}}</UBadge>
 
-        </div>
-      </a>
+      <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">
+            <div
+                v-if="documentsComposed.filter(doc => doc.folder === item.label).length > 0"
+                v-for="document in documentsComposed.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>
+
+              <!--              {{document.name}}<br>-->
+              <!--              <UBadge
+                                v-for="tag in document.tags"
+                                variant="outline"
+                                color="primary"
+                            >{{tag}}</UBadge>
+                            <UBadge
+                                color="rose"
+                                variant="outline"
+                            >{{document.state}}</UBadge>-->
+
+            </div>
+            <div v-else>
+              <p>Keine Dokumente in diesem Ordner</p>
+              <UButton
+                  @click="uploadModalOpen = true"
+              >
+                Hochladen
+              </UButton>
+            </div>
+          </div>
+        </template>
+      </UTabs>
     </div>
-
-<!--    <div class="documentPreview" v-if="selectedDocument.attributes">
-      <UFormGroup
-        label="Tags:"
-      >
-        <USelectMenu
-            v-if="selectedDocument.attributes"
-            multiple
-            searchable
-            searchable-placeholder="Suchen..."
-            :options="tags"
-            v-on:change="update('documents',selectedDocument.id, {tags: selectedDocument.attributes.tags})"
-            v-model="selectedDocument.attributes.tags"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-        label="Status:"
-      >
-        <USelectMenu
-            :options="states"
-            v-model="selectedDocument.attributes.state"
-            v-on:change="update('documents',selectedDocument.id,{state: selectedDocument.attributes.state})"
-        />
-      </UFormGroup>
-      <h4 v-if="selectedDocument.attributes">{{selectedDocument.attributes.name}}</h4>
-&lt;!&ndash;      <embed src="http://localhost:1337/uploads/RE_1748755_cb0b16cd30.pdf">&ndash;&gt;
-      {{selectedDocument}}
-
-    </div>-->
   </div>
 
 </template>
@@ -175,96 +190,114 @@
 definePageMeta({
   middleware: "auth"
 })
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
 
-const sortOptions = ['Hinzugefügt',"Bearbeitet","Name"]
+const documents = (await supabase.from("documents").select()).data
 
-const {find,create, update} = useStrapi4()
-const client = useStrapiClient()
-const strapiMediaUrl = useStrapiMedia()
-const documents = (await find('documents',{populate: "*"})).data
+const documentsComposed = ref([])
+async function composeDocs () {
+  for(const doc of documents){
+    let fileurl = (await supabase.storage.from('documents').createSignedUrl(doc.path,60*60)).data.signedUrl
 
-import { VuePDF, usePDF } from '@tato30/vue-pdf'
+    documentsComposed.value.push({...doc, url: fileurl})
 
-const page = ref(1)
-const vuePDFRef = ref(null)
-const pdfSource = ref("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf")
-const { pdf, pages } = usePDF(pdfSource)
+  }
+}
 
+await composeDocs()
+
+const tabOpen = ref(0)
 const uploadModalOpen = ref(false)
-let fileUploadData = null
 const fileUploadFormData = ref({
   name: "",
-  tags: ["Dokument"]
+  tags: [],
+  folder: "",
+  object: "",
+  path: ""
 })
 
 let tags = ["Eingangsrechnung","Ausgangrechnung","Mahnung", "Dokument"]
-let states = ["Eingang", "Zugeordnet", "Archiviert"]
-
-const uploadFile = async () => {
-  try {
-
-    fileUploadData = document.getElementById("fileUploadInput").files[0]
-
-    let formData = new FormData()
-    formData.append('files.file', fileUploadData)
-
-    formData.append('data', JSON.stringify(fileUploadFormData.value))
-
-    const {data} = await client("/documents", {
-      method: "POST",
-      body: formData
-    })
+const folders = [
+  {
+    label: "Eingang",
+  },
+  {
+    label: "Eingangsrechnungen"
+  },
+  {
+    label: "Ausgangsrechnungen"
+  },
+  {
+    label: "Fahrzeuge"
+  },
+  {
+    label: "Dokumente"
+  },
+  {
+    label: "Archiv"
   }
-  catch (error) { alert(error)}
+]
+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;
-  console.log("test")
 }
 
 const updateDocument = async () => {
-  await update('documents', selectedDocument.id, {tags: selectedDocument.attributes.tags, state: selectedDocument.attributes.state})
+  await update('documents', selectedDocument.id, {tags: selectedDocument.tags, state: selectedDocument.state})
 }
 
-
-
 const selectedDocument = ref({})
 const showDocumentModal = ref(false)
-const openDocument = (document) => {
+
+const openDocument = async (document) => {
+  console.log("open")
   selectedDocument.value = document
-  pdfSource.value = `${strapiMediaUrl}${document.attributes.file.data.attributes.url}`
   showDocumentModal.value = true
 
 }
-
 </script>
 
 <style scoped>
-#main {
-
-  padding:10px;
-}
-
-.controlHeader {
-  grid-area: headerleft;
-}
-
 .documentList {
-  grid-area: main;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: row;
-  max-width: 80vw;
-  min-height: 75vh;
-  margin-right: 5vw;
-  margin-top: 1em;
 }
 
 .documentListItem {
+  display:block;
   width: 15vw;
-  height: 15vh;
-  margin-right: 1em;
+  height: 25vh;
   padding:1em;
+  margin: 0.7em;
   border: 1px solid lightgrey;
   border-radius: 15px;
 }
@@ -274,8 +307,15 @@ const openDocument = (document) => {
   cursor: pointer;
 }
 
-.documentPreview {
-  grid-area: right;
-  width: 30vw;
+.previewEmbed {
+  width: 100%;
+  height: 18vh;
+  overflow: hidden;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.previewEmbed::-webkit-scrollbar {
+  display: none;
 }
 </style>