Added Editing to IncomingInvoices

pages/incomingInvoices/edit/[id].vue

@@ -14,23 +14,6 @@ const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 
-const availableDocuments = ref([])
-const setup = async () => {
-  let filetype = (await supabase.from("filetags").select().eq("tenant",profileStore.currentTenant).eq("incomingDocumentType","invoices").single()).data.id
-  console.log(filetype)
-  let ids = (await supabase.from("files").select("id").eq("tenant",profileStore.currentTenant).eq("type", filetype)).data.map(i => i.id)
-  availableDocuments.value = await useFiles().selectSomeDocuments(ids)
-
-}
-
-setup()
-
-
-//let currentDocument  = ref(null)
-//Working
-const mode = ref(route.params.mode || "show")
-const useNetMode = ref(false)
-
 const itemInfo = ref({
   vendor: 0,
   expense: true,
@@ -51,28 +34,28 @@ const itemInfo = ref({
   ]
 })
 
+const setup = async () => {
+  let filetype = (await supabase.from("filetags").select().eq("tenant",profileStore.currentTenant).eq("incomingDocumentType","invoices").single()).data.id
+  console.log(filetype)
 
-
-
-//Functions
-const setupPage = async () => {
-  if((mode.value === "show" || mode.value === "edit" ) && route.params.id){
-    itemInfo.value = await useSupabaseSelectSingle("incominginvoices",route.params.id)
-    //currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
-  }
-  console.log(itemInfo.value)
+  itemInfo.value = await useSupabaseSelectSingle("incominginvoices", route.params.id, "*, files(*)")
+  await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
 
 }
 
-const currentDocument = computed(() => {
-  if(itemInfo.value) {
-    return dataStore.getDocumentById(itemInfo.value.document)
+setup()
+
+const useNetMode = ref(false)
+
+const loadedFile = ref(null)
+const loadFile = async (id) => {
+  console.log(id)
+  loadedFile.value = await useFiles().selectDocument(id)
+  console.log(loadedFile.value)
+}
+
 
-  } else {
-    return null
-  }
 
-})
 
 const changeNetMode = (mode) => {
   useNetMode.value = mode
@@ -137,117 +120,42 @@ const totalCalculated = computed(() => {
 
 })
 
-const setState = async (newState) => {
-  if(mode.value === 'show') {
-    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
-  } else if(mode.value === 'edit') {
-    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
-  }
-  await router.push("/incomingInvoices")
+const updateIncomingInvoice = async () => {
+
+  let item = itemInfo.value
+  delete item.files
+
+  const data = await dataStore.updateItem('incominginvoices',item)
 }
 
 
-
-setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="itemInfo ? 'Eingangsbeleg bearbeiten' : 'Eingangsbeleg erstellen'">
+  <UDashboardNavbar :title="'Eingangsbeleg erstellen'">
     <template #right>
       <UButton
-          @click="dataStore.createNewItem('incominginvoices',itemInfo)"
-          v-if="mode === 'edit' && !itemInfo.id"
+          @click="updateIncomingInvoice"
       >
         Speichern
       </UButton>
-      <UButton
-          @click="dataStore.updateItem('incominginvoices',itemInfo)"
-          v-if="mode === 'edit' && itemInfo.id"
-      >
-        Speichern
-      </UButton>
-      <UTooltip
-        text="Bearbeiten ist nur im Entwurfsstatus möglich"
-        v-if="mode !== 'edit'"
-      >
-        <UButton
-            :disabled="itemInfo.state !== 'Entwurf'"
-            @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
-        >
-          Bearbeiten
-        </UButton>
-      </UTooltip>
-
-      <UButton
-          @click="setState('Entwurf')"
-          v-if="itemInfo.state !== 'Entwurf'"
-          color="cyan"
-      >
-        Status zu Entwurf
-      </UButton>
-      <UButton
-          @click="setState('Gebucht')"
-          v-if="itemInfo.state !== 'Gebucht'"
-          color="rose"
-      >
-        Status auf Gebucht
-      </UButton>
     </template>
   </UDashboardNavbar>
   <UDashboardPanelContent>
-    <div v-if="!itemInfo.document">
-      <!--    <div v-if="availableDocuments.length === 0" class="w-1/2 mx-auto text-center">
-            <p class="text-2xl mt-5">Keine Dokumente zur Auswahl vefügbar</p>
-            <UButton
-              @click="router.push(`/documents`)"
-              class="mt-5"
-              variant="outline"
-            >
-              Zu den Dokumenten
-            </UButton>
-          </div>-->
-
-
-      <DocumentList
-          :documents="availableDocuments"
-          :return-document-id="true"
-          @selectDocument="(documentId) => itemInfo.document = documentId"
-      />
-    </div>
     <div
-        v-else
-        class="flex justify-between mt-5"
+        class="flex justify-between mt-5 workingContainer"
     >
       <object
-          v-if="currentDocument ? currentDocument.url : false"
-          :data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
+          v-if="loadedFile"
+          :data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
           type="application/pdf"
-          class="mx-5 documentPreview w-full"
+          class="mx-5 documentPreview"
       />
       <div class="w-3/5 mx-5">
 
-        <div v-if="mode === 'show'">
 
-          <div class="truncate mb-5">
-            <p>Status: {{itemInfo.state}}</p>
-            <p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
-            <p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
-            <p>Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor}`">{{dataStore.getVendorById(itemInfo.vendor).name}}</nuxt-link></p>
-            <p>Bezahlt: {{itemInfo.paid}}</p>
-            <p>Beschreibung: {{itemInfo.description}}</p>
 
-            <!--     TODO: Buchungszeilen darstellen     -->
-          </div>
-
-          <HistoryDisplay
-              type="incomingInvoice"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-              :render-headline="true"
-          />
-        </div>
-
-        <div v-else class=" scrollContainer">
+        <div class=" scrollContainer">
           <InputGroup class="mb-3">
             <UButton
                 :variant="itemInfo.expense ? 'solid' : 'outline'"
@@ -263,7 +171,7 @@ setupPage()
             </UButton>
           </InputGroup>
 
-          <UFormGroup label="Lieferant:" required>
+          <UFormGroup label="Lieferant:" >
             <InputGroup>
               <USelectMenu
                   v-model="itemInfo.vendor"
@@ -274,6 +182,7 @@ setupPage()
                   :search-attributes="['name','vendorNumber']"
                   class="flex-auto"
                   searchable-placeholder="Suche..."
+                  :color="!itemInfo.vendor ? 'rose' : 'primary'"
               >
                 <template #option="{option}">
                   {{option.vendorNumber}} - {{option.name}}
@@ -283,7 +192,7 @@ setupPage()
                 </template>
               </USelectMenu>
               <UButton
-                  @click="router.push('/vendors/create')"
+                  @click="router.push('/standardEntity/vendors/create')"
               >
                 + Lieferant
               </UButton>
@@ -295,7 +204,6 @@ setupPage()
           <UFormGroup
               class="mt-3"
               label="Rechnungsreferenz:"
-              required
           >
             <UInput
                 v-model="itemInfo.reference"
@@ -303,19 +211,28 @@ setupPage()
           </UFormGroup>
 
           <InputGroup class="mt-3" gap="2">
-            <UFormGroup label="Rechnungsdatum:" required>
+            <UFormGroup label="Rechnungsdatum:">
               <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'" />
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                    variant="outline"
+                    :color="!itemInfo.date ? 'rose' : 'primary'"
+                />
 
                 <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.date" @close="close" />
+                  <LazyDatePicker v-model="itemInfo.date" @close="itemInfo.dueDate = itemInfo.date" />
                 </template>
               </UPopover>
             </UFormGroup>
 
-            <UFormGroup label="Fälligkeitsdatum:" required>
+            <UFormGroup label="Fälligkeitsdatum:">
               <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'" />
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                    variant="outline"
+                />
 
                 <template #panel="{ close }">
                   <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
@@ -326,14 +243,14 @@ setupPage()
 
 
 
-          <UFormGroup label="Zahlart:" required>
+          <UFormGroup label="Zahlart:" >
             <USelectMenu
                 :options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
                 v-model="itemInfo.paymentType"
             />
           </UFormGroup>
 
-          <UFormGroup label="Beschreibung:" required>
+          <UFormGroup label="Beschreibung:" >
             <UTextarea
                 v-model="itemInfo.description"
             />
@@ -385,7 +302,7 @@ setupPage()
 
             <UFormGroup
                 label="Kategorie"
-                class=" mb-3"
+                class="mb-3"
             >
               <USelectMenu
                   :options="dataStore.accounts"
@@ -395,6 +312,7 @@ setupPage()
                   :search-attributes="['label']"
                   searchable-placeholder="Suche..."
                   v-model="item.account"
+                  :color="!item.account ? 'rose' : 'primary'"
               >
                 <template #label>
                   {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
@@ -425,24 +343,6 @@ setupPage()
 
 
             <InputGroup>
-              <UFormGroup
-                  label="Umsatzsteuer"
-                  class="w-32"
-                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
-              >
-                <USelectMenu
-                    :options="taxOptions"
-                    v-model="item.taxType"
-                    value-attribute="key"
-                    option-attribute="label"
-                    :ui-menu="{ width: 'min-w-max' }"
-                    @change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
-                >
-                  <template #label>
-                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
-                  </template>
-                </USelectMenu>
-              </UFormGroup>
               <UFormGroup
                   v-if="useNetMode"
                   label="Gesamtbetrag exkl. Steuer in EUR"
@@ -454,8 +354,10 @@ setupPage()
                     type="number"
                     step="0.01"
                     v-model="item.amountNet"
+                    :color="!item.amountNet ? 'rose' : 'primary'"
                     :disabled="item.taxType === null"
-                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
+                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
+                            item.amountGross = Number(item.amountNet) + NUmber(item.amountTax)"
                 >
                   <template #trailing>
                     <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
@@ -474,7 +376,9 @@ setupPage()
                     step="0.01"
                     :disabled="item.taxType === null"
                     v-model="item.amountGross"
-                    @keyup="item.amountNet = Number((item.amountGross / (1 + Number(item.taxType)/100)).toFixed(2)),
+                    :color="!item.amountGross ? 'rose' : 'primary'"
+                    :ui-menu="{ width: 'min-w-max' }"
+                    @keyup="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
                   item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
                 >
                   <template #trailing>
@@ -483,8 +387,25 @@ setupPage()
                 </UInput>
 
               </UFormGroup>
-
-
+              <UFormGroup
+                  label="Umsatzsteuer"
+                  class="w-32"
+                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
+              >
+                <USelectMenu
+                    :options="taxOptions"
+                    v-model="item.taxType"
+                    value-attribute="key"
+                    :ui-menu="{ width: 'min-w-max' }"
+                    option-attribute="label"
+                    @change="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
+                    item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
+                >
+                  <template #label>
+                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
+                  </template>
+                </USelectMenu>
+              </UFormGroup>
             </InputGroup>
 
 
@@ -492,7 +413,7 @@ setupPage()
                 class="mt-3"
                 @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
             >
-              Position hinzufügen
+              Betrag aufteilen
             </UButton>
             <UButton
                 v-if="index !== 0"
@@ -519,6 +440,7 @@ setupPage()
 <style scoped>
 .documentPreview {
   aspect-ratio: 1 / 1.414;
+  height: 80vh;
 }
 
 
@@ -541,4 +463,8 @@ setupPage()
   display: flex;
   flex-direction: row;
 }
+
+.workingContainer {
+  height: 80vh;
+}
 </style>

pages/incomingInvoices/show/[id].vue

@@ -52,11 +52,14 @@ const setupPage = async () => {
 }
 
 const setState = async (newState) => {
-  if(mode.value === 'show') {
-    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
-  } else if(mode.value === 'edit') {
-    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
-  }
+
+  let item = itemInfo.value
+  delete item.files
+  item.vendor = item.vendor.id
+  item.state = newState
+
+  await dataStore.updateItem('incominginvoices',item)
+
   await router.push("/incomingInvoices")
 }
 
@@ -68,6 +71,12 @@ setupPage()
 <template>
   <UDashboardNavbar :title="'Eingangsbeleg anzeigen'">
     <template #right>
+      <UButton
+          @click="router.push(`/incomingInvoices/edit/${itemInfo.id}`)"
+          v-if="itemInfo.state !== 'Gebucht'"
+      >
+        Bearbeiten
+      </UButton>
       <UButton
           @click="setState('Gebucht')"
           v-if="itemInfo.state !== 'Gebucht'"