many changes

spaces/components/DocumentDisplay.vue

@@ -2,6 +2,7 @@
 
 const toast = useToast()
 const supabase = useSupabaseClient()
+const dataStore = useDataStore()
 const router = useRouter()
 const props = defineProps({
   document: {
@@ -15,9 +16,7 @@ const props = defineProps({
 })
 
 const {document, openShowModal:openShowModalProp } = props;
-const {fetchDocuments, getDocumentTags, fetchVendorInvoices} = useDataStore()
-const {projects, customers, vendorInvoices} = storeToRefs(useDataStore())
-const tags = getDocumentTags
+const tags = dataStore.getDocumentTags
 const openShowModal = ref(false)
 
 //Functions
@@ -27,63 +26,9 @@ const openDocument = async () => {
   openShowModal.value = true
 }
 
-/*const uploadFiles = async () => {
-  const uploadSingleFile = async (file) => {
-
-    const {data, error} = await supabase
-        .storage
-        .from("files")
-        .upload(`${user.value.app_metadata.tenant}/${file.name}`, file)
-
-    if (error) {
-      console.log(error)
-    } else if (data) {
-      const returnPath = data.path
-
-      if (error) {
-
-      } else {
-        const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
-          limit: 100,
-          offset: 0,
-          sortBy: {column: 'name', order: 'asc'}
-        })).data
-
-        fileUploadFormData.value.path = returnPath
-
-        const {data, error} = await supabase
-            .from("documents")
-            .insert([fileUploadFormData.value])
-            .select()
-        if(error) console.log(error)
-      }
-    }
-  }
-
-  uploadInProgress.value = true
-
-  let files = document.getElementById("fileUploadInput").files
-
-  if(files.length === 1) {
-    await uploadSingleFile(files[0])
-  } else if( files.length > 1) {
-
-    for(let i = 0; i < files.length; i++){
-      uploadSingleFile(files[i])
-    }
-
-  }
-
-  uploadModalOpen.value = false;
-  uploadInProgress.value = false;
-  fetchDocuments()
-}*/
-
-
 const updateDocument = async () => {
 
-
-  let objData = document
+  const {url, ...objData} = document
   delete objData.url
 
   const {data,error} = await supabase
@@ -96,7 +41,7 @@ const updateDocument = async () => {
     console.log(error)
   } else {
     toast.add({title: "Dokument aktualisiert"})
-    fetchDocuments()
+    dataStore.fetchDocuments()
     openShowModal.value = false
   }
 
@@ -104,7 +49,7 @@ const updateDocument = async () => {
 
 const createVendorInvoice = async () => {
   const {data:vendorInvoiceData,error:vendorInvoiceError} = await supabase
-      .from("vendorInvoices")
+      .from("incomingInvoices")
       .insert([{
         document: document.id,
       }])
@@ -125,25 +70,33 @@ const createVendorInvoice = async () => {
       console.log(documentError)
     } else {
       toast.add({title: "Dokument aktualisiert"})
-      fetchDocuments()
+      dataStore.fetchDocuments()
       openShowModal.value = false
     }
 
 
 
 
-    fetchVendorInvoices()
-    await router.push("/vendorinvoices")
+    dataStore.fetchIncomingInvoices()
+    await router.push("/incominginvoices")
   }
 
 }
+
+
+const archiveDocument = () => {
+  document.tags = ["Archiviert"]
+  updateDocument()
+}
+
 </script>
 
 <template>
   <div class="documentListItem">
-    <embed
-        :src="document.url"
+    <object
+        :data="document.url"
         class="previewEmbed"
+        type="application/pdf"
     />
     <UButton
         @click="openDocument"
@@ -158,7 +111,10 @@ const createVendorInvoice = async () => {
     <br>
     <UBadge
       v-if="document.vendorInvoice"
-    >{{vendorInvoices.find(item => item.id === document.vendorInvoice) ? vendorInvoices.find(item => item.id === document.vendorInvoice).reference : ''}}</UBadge>
+    >{{dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice) ? dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice).reference : ''}}</UBadge>
+    <UBadge
+      v-if="document.inDatev"
+    >DATEV</UBadge>
   </div>
 
 
@@ -169,80 +125,111 @@ const createVendorInvoice = async () => {
       v-model="openShowModal"
       fullscreen
   >
-    <UCard class="h-full">
-      <embed
-          class="bigPreview mb-3"
-          :src="document.url"
-      />
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UBadge
+              v-for="tag in document.tags"
+          >
+            {{tag}}
+          </UBadge>
+        </div>
+      </template>
 
-      <div class="flex items-center gap-2">
-        <UBadge
-            v-for="tag in document.tags"
-        >
-          {{tag}}
-        </UBadge>
-      </div>
-
-
-
-
-
-      <UFormGroup
-          label="Tags ändern:"
-      >
-        <USelectMenu
-            :options="tags"
-            v-model="document.tags"
-            @close="updateDocument"
-            multiple
+      <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
+        <object
+            class="h-full w-full"
+            :data="document.url"
+            type="application/pdf"
         />
-      </UFormGroup>
+      </UContainer>
 
-      <UFormGroup
-          label="Projekt zuweisen:"
-      >
-        <USelectMenu
-            :options="projects"
-            option-attribute="name"
-            value-attribute="id"
-            v-model="document.project"
-            @change="updateDocument"
-            searchable
-            :search-attributes="['name']"
+      <template #footer>
+        <UButtonGroup>
+          <UButton
+            @click="archiveDocument"
+          >
+            Archivieren
+          </UButton>
+          <UButton
+              v-if="document.tags.includes('Eingangsrechnung')"
+              @click="createVendorInvoice"
+          >
+            Eingangsrechnung erstellen
+          </UButton>
+        </UButtonGroup>
+
+
+        <UFormGroup
+          label="Tags ändern:"
         >
-          <template #label>
-            {{projects.find(item => item.id === document.project) ? projects.find(item => item.id === document.project).name : document.project }}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
+          <USelectMenu
+              :options="tags"
+              v-model="document.tags"
+              @close="updateDocument"
+              multiple
+          >
+            <template #label>
+              {{document.tags.length}} ausgewählt
+            </template>
+          </USelectMenu>
+        </UFormGroup>
 
-      <UFormGroup
-          label="Kunde zuweisen:"
-      >
-        <USelectMenu
-            :options="customers"
-            option-attribute="name"
-            value-attribute="id"
-            v-model="document.customer"
-            @change="updateDocument"
-            searchable
-            :search-attributes="['name']"
+        <UFormGroup
+            label="Projekt zuweisen:"
         >
-          <template #label>
-            {{customers.find(item => item.id === document.customer) ? customers.find(item => item.id === document.customer).name : document.customer }}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
+          <USelectMenu
+              :options="dataStore.projects"
+              option-attribute="name"
+              value-attribute="id"
+              v-model="document.project"
+              @change="updateDocument"
+              searchable
+              :search-attributes="['name']"
+          >
+            <template #label>
+              {{dataStore.projects.find(item => item.id === document.project) ? dataStore.projects.find(item => item.id === document.project).name : "Kein Projekt ausgewählt" }}
+            </template>
+          </USelectMenu>
+        </UFormGroup>
 
-      <UButton
-        v-if="document.tags.includes('Eingangsrechnung')"
-        @click="createVendorInvoice"
-      >
-        Eingangsrechnung erstellen
-      </UButton>
+        <UFormGroup
+            label="Kunde zuweisen:"
+        >
+          <USelectMenu
+              :options="dataStore.customers"
+              option-attribute="name"
+              value-attribute="id"
+              v-model="document.customer"
+              @change="updateDocument"
+              searchable
+              :search-attributes="['name']"
+          >
+            <template #label>
+              {{dataStore.customers.find(item => item.id === document.customer) ? dataStore.customers.find(item => item.id === document.customer).name : "Kein Kunde ausgewählt" }}
+            </template>
+          </USelectMenu>
+        </UFormGroup>
 
 
+      </template>
     </UCard>
+
+
+<!--    <UCard class="h-full">
+
+
+
+
+
+
+
+
+
+
+
+
+    </UCard>-->
   </USlideover>
 </template>
 
@@ -274,8 +261,4 @@ const createVendorInvoice = async () => {
   display: none;
 }
 
-.bigPreview {
-  height: 70vh;
-  width: 100%;
-}
 </style>

spaces/components/Tiptap.vue

@@ -0,0 +1,24 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script setup>
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+
+const props = defineProps({
+  content: {
+    type: "String",
+    required: true
+  }
+})
+
+const {content } = props
+
+const editor = useEditor({
+  content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+  extensions: [
+    StarterKit,
+  ],
+})
+</script>