Many Changes

spaces/components/DocumentDisplay.vue

@@ -5,7 +5,7 @@ const supabase = useSupabaseClient()
 const dataStore = useDataStore()
 const router = useRouter()
 const props = defineProps({
-  document: {
+  documentData: {
     type: Object,
     required: true
   },
@@ -13,9 +13,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   }
+
 })
 
-const {document, openShowModal:openShowModalProp } = props;
+let {documentData, openShowModal:openShowModalProp } = props;
 const tags = dataStore.getDocumentTags
 const openShowModal = ref(false)
 
@@ -27,7 +28,7 @@ const openDocument = async () => {
 
 const updateDocument = async () => {
 
-  const {url, ...objData} = document
+  const {url, ...objData} = documentData
   delete objData.url
 
   const {data,error} = await supabase
@@ -50,7 +51,7 @@ const createVendorInvoice = async () => {
   const {data:vendorInvoiceData,error:vendorInvoiceError} = await supabase
       .from("incomingInvoices")
       .insert([{
-        document: document.id,
+        document: documentData.id,
       }])
       .select()
   if(vendorInvoiceError) {
@@ -62,7 +63,7 @@ const createVendorInvoice = async () => {
         .update({
           vendorInvoice: vendorInvoiceData[0].id
         })
-        .eq('id',document.id)
+        .eq('id',documentData.id)
         .select()
 
     if(documentError) {
@@ -84,16 +85,18 @@ const createVendorInvoice = async () => {
 
 
 const archiveDocument = () => {
-  document.tags = ["Archiviert"]
+  documentData.tags = ["Archiviert"]
   updateDocument()
 }
 
+
+
 </script>
 
 <template>
   <div class="documentListItem">
     <object
-        :data="document.url"
+        :data="documentData.url"
         class="previewEmbed"
         type="application/pdf"
     />
@@ -104,22 +107,21 @@ const archiveDocument = () => {
       <UIcon name="i-heroicons-eye-solid" />
     </UButton>
     <UToggle
-        v-model="document.selected"
+        v-model="documentData.selected"
         class="ml-2"
     />
     <br>
     <UBadge
-      v-if="document.vendorInvoice"
-    >{{dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice) ? dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice).reference : ''}}</UBadge>
+      v-if="documentData.vendorInvoice"
+    >{{dataStore.incomingInvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incomingInvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
     <UBadge
-      v-if="document.inDatev"
+      v-if="documentData.inDatev"
     >DATEV</UBadge>
+    {{documentData}}
   </div>
 
 
 
-  <!-- Slideovers  -->
-
   <USlideover
       v-model="openShowModal"
       fullscreen
@@ -128,7 +130,7 @@ const archiveDocument = () => {
       <template #header>
         <div class="flex items-center gap-2">
           <UBadge
-              v-for="tag in document.tags"
+              v-for="tag in documentData.tags"
           >
             {{tag}}
           </UBadge>
@@ -138,12 +140,13 @@ const archiveDocument = () => {
       <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
         <object
             class="h-full w-full"
-            :data="document.url"
+            :data="documentData.url"
             type="application/pdf"
         />
       </UContainer>
 
       <template #footer>
+
         <UButtonGroup>
           <UButton
             @click="archiveDocument"
@@ -151,7 +154,7 @@ const archiveDocument = () => {
             Archivieren
           </UButton>
           <UButton
-              v-if="document.tags.includes('Eingangsrechnung')"
+              v-if="documentData.tags.includes('Eingangsrechnung')"
               @click="createVendorInvoice"
           >
             Eingangsrechnung erstellen
@@ -164,12 +167,12 @@ const archiveDocument = () => {
         >
           <USelectMenu
               :options="tags"
-              v-model="document.tags"
+              v-model="documentData.tags"
               @close="updateDocument"
               multiple
           >
             <template #label>
-              {{document.tags.length}} ausgewählt
+              {{documentData.tags.length}} ausgewählt
             </template>
           </USelectMenu>
         </UFormGroup>
@@ -181,13 +184,13 @@ const archiveDocument = () => {
               :options="dataStore.projects"
               option-attribute="name"
               value-attribute="id"
-              v-model="document.project"
+              v-model="documentData.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" }}
+              {{dataStore.projects.find(item => item.id === documentData.project) ? dataStore.projects.find(item => item.id === documentData.project).name : "Kein Projekt ausgewählt" }}
             </template>
           </USelectMenu>
         </UFormGroup>
@@ -199,13 +202,13 @@ const archiveDocument = () => {
               :options="dataStore.customers"
               option-attribute="name"
               value-attribute="id"
-              v-model="document.customer"
+              v-model="documentData.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" }}
+              {{dataStore.customers.find(item => item.id === documentData.customer) ? dataStore.customers.find(item => item.id === documentData.customer).name : "Kein Kunde ausgewählt" }}
             </template>
           </USelectMenu>
         </UFormGroup>

spaces/components/DocumentList.vue

@@ -0,0 +1,37 @@
+<script setup>
+const props = defineProps({
+  documents: {
+    type: Array,
+    required:true
+  }
+})
+const dataStore = useDataStore()
+
+
+
+</script>
+
+<template>
+  <div class="documentList">
+    <DocumentDisplay
+        v-for="item in documents"
+        :document-data="item"
+        :key="item.id"
+    />
+  </div>
+</template>
+
+<style scoped>
+.documentList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.documentList::-webkit-scrollbar {
+  display: none;
+}
+</style>

spaces/components/DocumentUpload.vue

@@ -0,0 +1,103 @@
+<script setup >
+
+const props = defineProps({
+  type: {
+    type: String
+  },
+  elementId: {
+    type: String
+  }
+})
+
+const {type, elementId} = props
+
+const dataStore = useDataStore()
+const tags = dataStore.getDocumentTags
+
+const uploadModalOpen = ref(false)
+const uploadInProgress = ref(false)
+const fileUploadFormData = ref({
+  tags: ["Dokument"],
+  project: null
+})
+
+const openModal = () => {
+  console.log("Oepn")
+  uploadModalOpen.value = true
+}
+
+const uploadFiles = async () => {
+  uploadInProgress.value = true;
+
+  let fileData = fileUploadFormData.value
+  fileData[type] = elementId
+
+  await dataStore.uploadFiles(fileData,  document.getElementById("fileUploadInput").files)
+
+  uploadModalOpen.value = false;
+  uploadInProgress.value = false;
+}
+</script>
+
+<template>
+  <UModal
+      v-model="uploadModalOpen"
+  >
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Datei hochladen
+          </h3>
+          <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="uploadModalOpen = false"
+              :disabled="uploadInProgress"
+          />
+        </div>
+      </template>
+
+      <UFormGroup
+          label="Datei:"
+      >
+        <UInput
+            type="file"
+            id="fileUploadInput"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Tags:"
+          class="mt-3"
+      >
+        <USelectMenu
+            multiple
+            searchable
+            searchable-placeholder="Suchen..."
+            :options="tags"
+            v-model="fileUploadFormData.tags"
+        />
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+            @click="uploadFiles"
+            :loading="uploadInProgress"
+        >Hochladen</UButton>
+      </template>
+
+    </UCard>
+  </UModal>
+
+  <UButton
+      @click="openModal"
+  >
+    Hochladen
+  </UButton>
+</template>
+
+<style scoped>
+
+</style>

spaces/components/HistoryDisplay.vue

@@ -36,7 +36,7 @@ const historyItems = computed(() => {
     items = dataStore.historyItems.filter(i => i.document === elementId)
   }
 
-  return items.reverse()
+  return items
 
 })
 const addHistoryItemData = ref({
@@ -63,7 +63,7 @@ const addHistoryItem = async () => {
 
 
   const {data,error} = await supabase
-      .from("historyItems")
+      .from("historyitems")
       .insert([addHistoryItemData.value])
       .select()
 
@@ -139,10 +139,10 @@ const renderText = (text) => {
             v-else
         />
         <div>
-          <h3 v-if="item.user">{{dataStore.profiles.find(profile => profile.id === item.user) ? dataStore.profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
+          <h3 v-if="item.user">{{dataStore.getProfileById(item.user) ? dataStore.getProfileById(item.user).fullName : ""}}</h3>
           <h3 v-else>Spaces Bot</h3>
           <span v-html="renderText(item.text)"/><br>
-          <span class="text-gray-500">{{dayjs(item.created_at).format("DD:MM:YY HH:mm")}}</span>
+          <span class="text-gray-500">{{dayjs(item.created_at).format("DD.MM.YY HH:mm")}}</span>
         </div>
       </div>