Added Vehicles

Added Bankimport, BankAccounts, BankStatements
Some Visual Changes
Added Contacts
Changes in VendorInvoices
Added layouts with default an one for Login PAge
Added Input Group Component

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

@@ -9,146 +9,166 @@
     <div
       class="previewDoc"
     >
-<!--      <embed
-        :src="fileurl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
-        width="40vw"
-        height="50vh"
-      >-->
+      <embed
+          v-if="currentDocument"
+          :src="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
+
+      >
+
     </div>
     <div
       class="inputData"
     >
       <UFormGroup label="Lieferant:" required>
         <USelectMenu
-          v-model="invoice.vendor"
+          v-model="itemInfo.vendor"
           :options="vendors"
           option-attribute="name"
           value-attribute="id"
           searchable
           :search-attributes="['name','vendorNumber']"
         >
-
+          <template #label>
+            {{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
+          </template>
         </USelectMenu>
       </UFormGroup>
 
-      <UFormGroup label="Rechnungsreferenz:" required>
+      <UFormGroup
+          class="mt-3"
+          label="Rechnungsreferenz:"
+          required
+      >
         <UInput
-          v-model="invoice.reference"
+          v-model="itemInfo.reference"
         />
       </UFormGroup>
 
-      <UFormGroup label="Rechnungsdatum:" required>
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDate" />
+      <InputGroup class="mt-3" gap="2">
+        <UFormGroup label="Rechnungsdatum:" required>
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />
 
-          <template #panel="{ close }">
-            <LazyDatePicker v-model="invoice.date" @close="close" />
-          </template>
-        </UPopover>
-      </UFormGroup>
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="itemInfo.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="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />
+
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+      </InputGroup>
 
-      <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"
+          v-model="itemInfo.description"
         />
       </UFormGroup>
 
-<!--      <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>-->
+      <UFormGroup label="Betrag:" required>
+        <UInput
+          type="number"
+          step="0.01"
+          v-model="itemInfo.amount"
+        >
+          <template #trailing>
+            <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+          </template>
+        </UInput>
+      </UFormGroup>
+
+      <InputGroup class="mt-3">
+        <UButton
+            @click="updateItem"
+        >
+          Speichern
+        </UButton>
+      </InputGroup>
+
+      <DevOnly>
+        {{itemInfo}}<br>
+        {{currentVendorInvoice}}<br>
+        {{currentDocument}}
+      </DevOnly>
 
 
-<!--      <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}}<br>
-      {{currentVendorInvoice}}<br>
-      {{getDocumentById(78)}}
     </div>
   </div>
 </template>
 
 <script setup>
+import InputGroup from "~/components/InputGroup.vue";
+import * as dayjs from "dayjs";
+
 const supabase = useSupabaseClient()
 const route = useRoute()
+const toast = useToast()
 
 const {vendors} = storeToRefs(useDataStore())
-const {getVendorInvoiceById, getDocumentById} = useDataStore()
+const {getVendorInvoiceById, getDocumentById, fetchVendorInvoices} = useDataStore()
+
+let currentVendorInvoice = null
+let currentDocument  = ref(null)
+//Working
+const mode = ref(route.params.mode || "show")
 
 
-const invoice = ref({
-    vendor: 0,
-    reference: "",
-    date: new Date(),
-    dueDate: new Date(),
-    paymentType: "",
-    description: "",
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentVendorInvoice = await getVendorInvoiceById(Number(useRoute().params.id))
+    currentDocument.value = await getDocumentById(currentVendorInvoice.document)
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentVendorInvoice
+
+
+
+}
+
+
+
+
+
+const itemInfo = ref({
+  vendor: 0,
+  reference: "",
+  date:  null,
+  dueDate: null,
+  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 = ref(getVendorInvoiceById(Number(route.params.id)))
-console.log(currentVendorInvoice)
-const currentDocument = getDocumentById(Number(currentVendorInvoice.document))
-console.log(currentDocument)
-//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: []
-})
-
-
-
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("vendorInvoices")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    /*itemInfo.value = {
+      id: 0,
+    }*/
+    toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
+    fetchVendorInvoices()
+  }
+}
 
 
 
+setupPage()
 </script>
 
 <style scoped>
@@ -158,7 +178,7 @@ let vendorInvoiceData = ref({
 }
 
 .previewDoc {
-  width: 50vw;
+  min-width: 50vw;
   min-height: 80vh;
 }
 
@@ -168,7 +188,7 @@ let vendorInvoiceData = ref({
 }
 
 .inputData {
-
+  max-width: 40vw;
 }