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

<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>