Many Changes

spaces/pages/banking/index.vue

@@ -10,7 +10,13 @@
           placeholder="Suche..."
       />
     </InputGroup>-->
-
+    <Toolbar>
+      <UButton
+        @click="router.push('/banking/newAccount')"
+      >
+        + Konto
+      </UButton>
+    </Toolbar>
 
 
     <UTable

spaces/pages/banking/newAccount/index.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Axios from "axios"
+
+
+const newAccounts = ref([])
+
+const setupPage = async () => {
+
+}
+
+
+</script>
+
+<template>
+    New
+  <UButton
+    @click="setupPage"
+  >
+    Setup
+  </UButton>
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/contracts/[mode]/[[id]].vue

@@ -62,11 +62,11 @@ setupPage()
 
 <template>
   <h1
-      class="text-center my-3 font-bold text-2xl"
+      class="mb-3 truncate font-bold text-2xl"
       v-if="currentItem"
-  >{{currentItem.name}}</h1>
+  >Vertrag: {{currentItem.name}}</h1>
   <UTabs
-      v-if="currentItem && mode == 'show'"
+      v-if="currentItem && mode === 'show'"
       :items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Dokumente'}]"
   >
     <template #item="{item}">
@@ -74,7 +74,7 @@ setupPage()
         <div v-if="item.label === 'Informationen'">
           <Toolbar>
             <UButton
-                v-if="mode == 'show' && currentItem.id"
+                v-if="mode === 'show' && currentItem.id"
                 @click="editCustomer"
             >
               Bearbeiten

spaces/pages/createDocument/edit/[[id]].vue

@@ -1,23 +1,17 @@
 <script setup>
 import dayjs from "dayjs"
+import Handlebars from "handlebars"
+
 const dataStore = useDataStore()
 const user = useSupabaseUser()
 const route = useRoute()
 const router = useRouter()
 const supabase = useSupabaseClient()
-import {decode} from 'base64-arraybuffer'
 
 
 
 
-const tabItems = [
-  {
-    label: "Editor"
-  },
-  {
-    label: "Vorschau"
-  }
-]
+
 
 const itemInfo = ref({
   type: "invoices",
@@ -31,8 +25,10 @@ const itemInfo = ref({
   },
   project: null,
   documentNumber: null,
-  documentDate: null,
-  deliveryDate: null,
+  documentNumberTitle: "Rechnungsnummer",
+  documentDate: dayjs(),
+  deliveryDate: dayjs(),
+  deliveryDateType: "Lieferdatum",
   dateOfPerformance: null,
   createdBy: user.value.id,
   title: null,
@@ -41,6 +37,22 @@ const itemInfo = ref({
   endText: null,
   rows: [
 
+  ],
+  contactPerson: null,
+  contactPersonName: null,
+  contactTel: null,
+  contactEMail: null,
+})
+
+const tabItems = computed(() => {
+  return [
+    {
+      label: "Editor"
+    },
+    {
+      label: "Vorschau",
+      disabled: !itemInfo.value.customer && !itemInfo.value.contact
+    }
   ]
 })
 
@@ -51,11 +63,52 @@ const setupPage = () => {
 
   if(route.query) {
     if(route.query.type) itemInfo.value.type = route.query.type
+
+    if(itemInfo.value.type === "invoices") {
+      itemInfo.value.documentNumberTitle = "Rechnungsnummer"
+      itemInfo.value.title = `Rechnung-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+    } else if(itemInfo.value.type === "quotes") {
+      itemInfo.value.documentNumberTitle = "Angebotsnummer"
+      itemInfo.value.title = `Angebot-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+    } else if(itemInfo.value.type === "deliveryNotes") {
+      itemInfo.value.documentNumberTitle = "Lieferscheinnummer"
+      itemInfo.value.title = `Lieferschein-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+    }
+
+    itemInfo.value.startText = dataStore.getTextTemplatesByDocumentType(itemInfo.value.type).find(i => i.default && i.pos === "startText").text
+    itemInfo.value.endText = dataStore.getTextTemplatesByDocumentType(itemInfo.value.type).find(i => i.default && i.pos === "endText").text
+
+    setContactPersonData()
+
+
     if(route.query.project) itemInfo.value.project = Number(route.query.project)
+    if(route.query.contact) itemInfo.value.contact = Number(route.query.contact)
     if(route.query.customer) itemInfo.value.customer = Number(route.query.customer)
   }
 }
 
+const setCustomerData = () => {
+  let customer = dataStore.getCustomerById(itemInfo.value.customer)
+  itemInfo.value.contact = null
+  if(customer) {
+    itemInfo.value.address.street = customer.infoData.street
+    itemInfo.value.address.zip = customer.infoData.zip
+    itemInfo.value.address.city = customer.infoData.city
+    itemInfo.value.address.special = customer.infoData.special
+  }
+}
+
+const setContactPersonData = () => {
+  if(!itemInfo.value.contactPerson) itemInfo.value.contactPerson = user.value.id
+
+  let profile = dataStore.getProfileById(itemInfo.value.contactPerson)
+
+  itemInfo.value.contactPersonName = profile.fullName
+  itemInfo.value.contactTel = profile.mobileTel || profile.fixedTel || ""
+  itemInfo.value.contactEMail = profile.email
+
+}
+
 
 
 const getRowAmount = (row) => {
@@ -122,11 +175,13 @@ const documentTotal = computed(() => {
 
   itemInfo.value.rows.forEach(row => {
     if(row.mode === 'free' || row.mode === 'normal'){
-      let rowPrice = Number(Number(row.quantity) * Number(row.price)).toFixed(2)
-      totalNet += Number(rowPrice)
+      console.log(row)
+      let rowPrice = Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) ).toFixed(2)
+      console.log(rowPrice)
+      totalNet = totalNet + Number(rowPrice)
 
       if(row.taxPercent === 19) {
-        total19 += Number(rowPrice * 0.19)
+        total19 = total19 + Number(rowPrice * 0.19)
       }
     }
   })
@@ -170,18 +225,21 @@ const getDocumentData = () => {
     } else {
       return row
     }
-
-
-
-
-
   })
 
+  //Compile Start & EndText
+  const templateStartText = Handlebars.compile(itemInfo.value.startText);
+  const templateEndText = Handlebars.compile(itemInfo.value.endText);
+  console.log(templateStartText({vorname: contactData.firstName, nachname: contactData.lastName}))
+  console.log(templateEndText({zahlungsziel_in_tagen: 14}))
+
+
+
   const returnData = {
 
     recipient: {
       name: customerData.name,
-      contact: `${contactData.firstName} ${contactData.lastName}`,
+      contact: contactData ? `${contactData.firstName} ${contactData.lastName}` : "",
       street: customerData.infoData.street,
       special: "",
       city: customerData.infoData.city,
@@ -190,17 +248,19 @@ const getDocumentData = () => {
     info: {
       customerNumber: customerData.customerNumber,
       documentNumber: itemInfo.value.documentNumber,
+      documentNumberTitle: itemInfo.value.documentNumberTitle,
       documentDate: dayjs(itemInfo.value.documentDate, 'DD.MM.YYYY').format("DD.MM.YYYY"),
       deliveryDate: dayjs(itemInfo.value.deliveryDate, 'DD.MM.YYYY').format("DD.MM.YYYY"),
-      contactPerson: userData.fullName ||"",
-      contactTel: userData.mobileTel ||"",
-      contactEMail: userData.email,
-      project: dataStore.getProjectById(itemInfo.value.project).name
+      deliveryDateType: itemInfo.value.deliveryDateType,
+      contactPerson: itemInfo.value.contactPersonName,
+      contactTel: itemInfo.value.contactTel,
+      contactEMail: itemInfo.value.contactEMail,
+      project: dataStore.getProjectById(itemInfo.value.project) ? dataStore.getProjectById(itemInfo.value.project).name : null
     },
     title: itemInfo.value.title,
     description: itemInfo.value.description,
-    endText: itemInfo.value.endText,
-    startText: itemInfo.value.startText,
+    endText: templateEndText({zahlungsziel_in_tagen: 14}),
+    startText: templateStartText({vorname: contactData.firstName, nachname: contactData.lastName}),
     rows: rows,
     total: documentTotal.value
   }
@@ -214,7 +274,16 @@ const getDocumentData = () => {
 const showDocument = ref(false)
 const uri = ref("")
 const generateDocument = async () => {
-  uri.value = await useCreatePdf(getDocumentData())
+  const ownTenant = dataStore.ownTenant
+  const path = ownTenant.letterheadConfig[itemInfo.value.type]
+  console.log(path)
+  console.log(ownTenant)
+
+  const {data,error} = await supabase.storage.from("files").download(path)
+  console.log(data)
+  console.log(error)
+
+  uri.value = await useCreatePdf(getDocumentData(), await data.arrayBuffer())
   //alert(uri.value)
   showDocument.value = true
 }
@@ -316,7 +385,6 @@ const closeDocument = async () => {
   //console.log(uri)
 }
 
-
 setupPage()
 </script>
 
@@ -365,11 +433,19 @@ setupPage()
                       searchable
                       searchable-placeholder="Suche..."
                       v-model="itemInfo.customer"
-
+                      @change="setCustomerData"
                   >
-                    <template #label>
+                    <UButton
+                        :color="itemInfo.customer ? 'primary' : 'rose'"
+                        variant="outline"
+                        class="flex-1 justify-between">
                       {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt"}}
-                    </template>
+
+                      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="['transform rotate-90']" />
+                    </UButton>
+<!--                    <template #label>
+                      {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt"}}
+                    </template>-->
                   </USelectMenu>
                 </UFormGroup>
                 <UFormGroup
@@ -384,6 +460,14 @@ setupPage()
                       searchable-placeholder="Suche..."
                       v-model="itemInfo.contact"
                   >
+                    <UButton
+                        :color="itemInfo.contact ? 'primary' : 'rose'"
+                        variant="outline"
+                        class="flex-1 justify-between">
+                      {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Kontakt ausgewählt"}}
+
+                      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="['transform rotate-90']" />
+                    </UButton>
                     <template #label>
                       {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Kontakt ausgewählt"}}
                     </template>
@@ -422,52 +506,78 @@ setupPage()
               </div>
               <div class="flex-auto">
                 <UFormGroup
-                    label="Rechnungsnummer:"
+                    :label="itemInfo.documentNumberTitle + ':'"
                 >
                   <UInput
                       v-model="itemInfo.documentNumber"
-                      placeholder="Leer lassen für automatisch generierte Nummer"
+                      placeholder="XXXX"
+                      disabled
                   />
                 </UFormGroup>
+
+
                 <UFormGroup
                     label="Datum:"
                 >
-                  <UInput
-                      v-model="itemInfo.documentDate"
-                  />
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.documentDate ? dayjs(itemInfo.documentDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.documentDate" @close="close" />
+                    </template>
+                  </UPopover>
                 </UFormGroup>
+
+
+
+
                 <UFormGroup
-                    label="Lieferdatum:"
+                    class="mt-3"
                 >
-                  <UInput
-                      v-model="itemInfo.deliveryDate"
+                  <USelectMenu
+                    :options="['Lieferdatum'/*,'Lieferzeitraum'*/,'Leistungsdatum'/*,'Leistungszeitraum'*/,'Kein Lieferdatum anzeigen']"
+                    v-model="itemInfo.deliveryDateType"
+                    class="mb-2"
                   />
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.deliveryDate ? dayjs(itemInfo.deliveryDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.deliveryDate" @close="close" />
+                    </template>
+                  </UPopover>
                 </UFormGroup>
                 <UFormGroup
                     label="Ansprechpartner:"
                 >
-                  <UInput
-
+                  <USelectMenu
+                    :options="dataStore.profiles"
+                    v-model="itemInfo.contactPerson"
+                    option-attribute="fullName"
+                    value-attribute="id"
+                    @change="setContactPersonData"
                   />
                 </UFormGroup>
                 <UFormGroup
                     label="Kontakt Telefon:"
                 >
                   <UInput
-
+                    v-model="itemInfo.contactTel"
                   />
                 </UFormGroup>
                 <UFormGroup
                     label="Kontakt E-Mail:"
                 >
                   <UInput
-
-                  />
-                </UFormGroup><UFormGroup
-                    label="Kontakt E-Mail:"
-                >
-                  <UInput
-
+                      v-model="itemInfo.contactEMail"
                   />
                 </UFormGroup>
                 <UFormGroup
@@ -514,14 +624,35 @@ setupPage()
                 class="my-3"
             />
 
+            <UFormGroup
+              label="Vorlage auswählen"
+            >
+              <USelectMenu
+                  :options="dataStore.getTextTemplatesByDocumentType(itemInfo.type)"
+                  v-model="itemInfo.startText"
+                  option-attribute="text"
+                  value-attribute="text"
+              >
+                <template #option="{option}">
+                  {{option.name}} - {{option.text}}
+                </template>
+                <template #label>
+                  {{dataStore.texttemplates.find(i => i.text === itemInfo.startText) ? dataStore.texttemplates.find(i => i.text === itemInfo.startText).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
+                </template>
+              </USelectMenu>
+            </UFormGroup>
+
+
             <UFormGroup
                 label="Einleitung:"
             >
               <UTextarea
                 v-model="itemInfo.startText"
+                :rows="6"
               />
             </UFormGroup>
 
+
             <UDivider
                 class="my-3"
             />
@@ -673,7 +804,7 @@ setupPage()
                     <td
                         v-if="row.mode === 'free' || row.mode === 'normal'"
                     >
-                      <div class="text-right font-bold">{{getRowAmount(row)}} €</div>
+                      <p class="text-right font-bold whitespace-nowrap">{{getRowAmount(row)}} €</p>
                     </td>
                     <td>
                       <UButton
@@ -880,11 +1011,30 @@ setupPage()
                 class="my-3"
             />
 
+            <UFormGroup
+                label="Vorlage auswählen"
+            >
+              <USelectMenu
+                  :options="dataStore.getTextTemplatesByDocumentType(itemInfo.type)"
+                  v-model="itemInfo.endText"
+                  option-attribute="text"
+                  value-attribute="text"
+              >
+                <template #option="{option}">
+                  {{option.name}} - {{option.text}}
+                </template>
+                <template #label>
+                  {{dataStore.texttemplates.find(i => i.text === itemInfo.endText) ? dataStore.texttemplates.find(i => i.text === itemInfo.endText).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
+                </template>
+              </USelectMenu>
+            </UFormGroup>
+
             <UFormGroup
                 label="Nachbemerkung:"
             >
               <UTextarea
                 v-model="itemInfo.endText"
+                :rows="6"
               />
             </UFormGroup>
           </div>

spaces/pages/tasks/[mode]/[[id]].vue

@@ -75,156 +75,152 @@ setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentItem && mode == 'show'" >
-      <template #header>
-        <UBadge>
-          {{currentItem.categorie}}
-        </UBadge>
+  <h1
+      class="mb-3 truncate font-bold text-2xl"
+      v-if="currentItem"
+  >Aufgabe: {{currentItem.name}}</h1>
+  <UTabs
+    :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
+    v-if="currentItem && mode === 'show'"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          <Toolbar>
+            <UButton
+                v-if="mode === 'show' && currentItem.id"
+                @click="editItem"
+            >
+              Bearbeiten
+            </UButton>
+            <UButton
+                v-if="currentItem.project"
+                @click="router.push(`/projects/show/${currentItem.project}`)"
+            >
+              Zum Projekt
+            </UButton>
+          </Toolbar>
 
-        {{currentItem.name}}
-      </template>
+          <div class="truncate">
+            <p>Kategorie: {{currentItem.categorie}}</p>
+            <p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
+            <p>Beschreibung: {{currentItem.description}}</p>
+          </div>
 
-      <InputGroup>
-        <UButton
-          v-if="currentItem.project"
-          @click="router.push(`/projects/show/${currentItem.project}`)"
-          class="mb-3"
-        >
-          Zum Projekt
-        </UButton>
-      </InputGroup>
+        </div>
+        <!-- TODO: Logbuch Tasks -->
+      </UCard>
+    </template>
+  </UTabs>
+  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
 
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
 
-      Beschreibung:<br>
-      {{currentItem.description}}<br>
-      Projekt: {{currentItem.project ? dataStore.getProjectById(currentItem.project).name : "Kein Projekt zugeordnet"}}
+    <UFormGroup
+        label="Kategorie:"
+    >
+      <USelectMenu
+          v-model="itemInfo.categorie"
+          :options="categories"
+      />
+    </UFormGroup>
 
-
-
-
-      <template #footer>
-        <UButton
-            v-if="mode == 'show' && currentItem.id"
-            @click="editItem"
-        >
-          Bearbeiten
-        </UButton>
-      </template>
-
-
-
-    </UCard>
-    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-      <template #header v-if="mode === 'edit'">
-        {{itemInfo.name}}
-      </template>
-
-      <UFormGroup
-          label="Name:"
+    <UFormGroup
+        label="Benutzer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.user"
+          :options="dataStore.profiles"
+          option-attribute="fullName"
+          value-attribute="id"
+          searchable-placeholder="Suche..."
+          searchable
+          :search-attributes="['fullName']"
       >
-        <UInput
-            v-model="itemInfo.name"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-          label="Kategorie:"
+        <template #label>
+          {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Projekt:"
+    >
+      <USelectMenu
+          v-model="itemInfo.project"
+          :options="dataStore.projects"
+          option-attribute="name"
+          value-attribute="id"
+          searchable-placeholder="Suche..."
+          searchable
+          :search-attributes="['name']"
       >
-        <USelectMenu
-            v-model="itemInfo.categorie"
-            :options="categories"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-          label="Benutzer:"
+        <template #label>
+          {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Objekt:"
+    >
+      <USelectMenu
+          v-model="itemInfo.plant"
+          :options="dataStore.plants"
+          option-attribute="name"
+          value-attribute="id"
+          searchable-placeholder="Suche..."
+          searchable
+          :search-attributes="['name']"
       >
-        <USelectMenu
-            v-model="itemInfo.user"
-            :options="dataStore.profiles"
-            option-attribute="fullName"
-            value-attribute="id"
-            searchable-placeholder="Suche..."
-            searchable
-            :search-attributes="['fullName']"
-        >
-          <template #label>
-            {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Projekt:"
+        <template #label>
+          {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Kein Objekt ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+
+
+
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+      />
+    </UFormGroup>
+
+
+    <template #footer>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('tasks',itemInfo)"
       >
-        <USelectMenu
-            v-model="itemInfo.project"
-            :options="dataStore.projects"
-            option-attribute="name"
-            value-attribute="id"
-            searchable-placeholder="Suche..."
-            searchable
-            :search-attributes="['name']"
-        >
-          <template #label>
-            {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Objekt:"
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('tasks',itemInfo)"
       >
-        <USelectMenu
-            v-model="itemInfo.plant"
-            :options="dataStore.plants"
-            option-attribute="name"
-            value-attribute="id"
-            searchable-placeholder="Suche..."
-            searchable
-            :search-attributes="['name']"
-        >
-          <template #label>
-            {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Kein Objekt ausgewählt"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-
-
-
-
-      <UFormGroup
-          label="Beschreibung:"
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
       >
-        <UTextarea
-            v-model="itemInfo.description"
-        />
-      </UFormGroup>
+        Abbrechen
+      </UButton>
+    </template>
 
-
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="dataStore.updateItem('tasks',itemInfo)"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="dataStore.createNewItem('tasks',itemInfo)"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
-
-    </UCard>
-  </div>
+  </UCard>
 </template>
 
 <style scoped>

spaces/pages/vendors/[mode]/[[id]].vue

@@ -55,7 +55,7 @@ setupPage()
       v-if="currentItem "
   >Lieferant: {{currentItem.name}}</h1>
   <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Ansprechpartner'}]"
+    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Ansprechpartner'},{label: 'Dokumente'}]"
     v-if="currentItem && mode == 'show'"
   >
     <template #item="{item}">
@@ -105,6 +105,18 @@ setupPage()
           </UTable>
 
         </div>
+        <div v-else-if="item.label === 'Dokumente'">
+          <InputGroup>
+            <DocumentUpload
+                type="vendor"
+                :element-id="currentItem.id"
+            />
+          </InputGroup>
+
+          <DocumentList
+              :documents="dataStore.getDocumentsByVendorId(currentItem.id)"
+          />
+        </div>
       </UCard>
     </template>
   </UTabs>