Document Restructure

Introduced ExternalDevices Settingspage
Added DocumentDisplay.vue Component
Some Changes to Spaces

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

@@ -0,0 +1,178 @@
+<template>
+  <div id="main">
+
+
+
+
+
+
+    <div
+      class="previewDoc"
+    >
+      <embed
+        :src="fileurl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
+        width="40vw"
+        height="50vh"
+      >
+    </div>
+    <div
+      class="inputData"
+    >
+      <UFormGroup label="Lieferant:" required>
+        <USelectMenu
+          v-model="invoice.vendor"
+          :options="vendors"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name','vendorNumber']"
+        >
+
+        </USelectMenu>
+      </UFormGroup>
+
+      <UFormGroup label="Rechnungsreferenz:" required>
+        <UInput
+          v-model="invoice.reference"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="Rechnungsdatum:" required>
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDate" />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="invoice.date" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <UFormGroup label="Fälligkeitsdatum:" required>
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDueDate" />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="invoice.dueDate" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <UFormGroup label="Beschreibung:" required>
+        <UTextarea
+          v-model="invoice.description"
+        />
+      </UFormGroup>
+
+<!--      <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>-->
+
+
+<!--      <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
+        <UFormGroup label="Text:" required>
+          <UInput v-model="lineItem.text"/>
+        </UFormGroup>
+        <UFormGroup label="Produkt:" required>
+          <UInput v-model="lineItem.productId"/>
+        </UFormGroup>
+        <UFormGroup label="Projekt:" required>
+          <UInput v-model="lineItem.projectId"/>
+        </UFormGroup>
+        <UFormGroup label="Anzahl:" required>
+          <UInput v-model="lineItem.quantity"/>
+        </UFormGroup>
+        <UFormGroup label="Einheit:" required>
+          <UInput v-model="lineItem.unit"/>
+        </UFormGroup>
+        <UFormGroup label="Einzelpreis:" required>
+          <UInput v-model="lineItem.unitPriceNet"/>
+        </UFormGroup>
+        <UFormGroup label="USt:" required>
+          <UInput v-model="lineItem.vat"/>
+        </UFormGroup>
+        <UFormGroup label="Rabatt:" required>
+          <UInput v-model="lineItem.discount"/>
+        </UFormGroup>
+        <UFormGroup label="Buchungskonto:" required>
+          <UInput v-model="lineItem.skrAccountId"/>
+        </UFormGroup>
+        <UFormGroup label="Positionspreis:" required>
+          <UInput disabled/>
+        </UFormGroup>
+      </div>-->
+      {{vendorInvoiceData}}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const supabase = useSupabaseClient()
+const route = useRoute()
+
+const {vendors} = storeToRefs(useDataStore())
+
+
+
+const invoice = ref({
+    vendor: 0,
+    reference: "",
+    date: new Date(),
+    dueDate: new Date(),
+    paymentType: "",
+    description: "",
+  state: "Entwurf"
+})
+
+const labelDate = computed(() => invoice.value.date.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
+const labelDueDate = computed(() => invoice.value.dueDate.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
+
+
+
+//const currentVendorInvoice = (await supabase.from('vendorInvoices').select().eq('id', route.params.id)).data
+const document = (await supabase.from('documents').select().eq("id",18)).data[0]
+
+console.log(document)
+
+let fileurl = (await supabase.storage.from('documents').createSignedUrl(document.path,60*60)).data.signedUrl
+
+
+let vendorInvoiceData = ref({
+  reference: "",
+  date: "",
+  vendorId: 0,
+  lineItems: []
+})
+
+
+
+
+
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+
+.previewDoc {
+  width: 50vw;
+  min-height: 80vh;
+}
+
+.previewDoc embed {
+  width: 90%;
+  height: 100%;
+}
+
+.inputData {
+
+}
+
+
+
+
+.lineItemRow {
+  display: flex;
+  flex-direction: row;
+}
+</style>