Restructured Banking Allocation

pages/banking/statements/[mode]/[[id]].vue

@@ -26,6 +26,7 @@ const oldItemInfo = ref({})
 const openDocuments = ref([])
 const allocatedDocuments = ref([])
 const openIncomingInvoices = ref([])
+const allocatedIncomingInvoices = ref([])
 
 const accounts = ref([])
 
@@ -36,15 +37,16 @@ const setup = async () => {
   }
   if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
+  manualAllocationSum.value = calculateOpenSum.value
+
   const documents = (await useSupabaseSelect("createddocuments","*, statementallocations(*), customer(id,name)")).filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
+  const incominginvoices = (await useSupabaseSelect("incominginvoices","*, statementallocations(*), vendor(id,name)"))
 
   accounts.value = (await supabase.from("accounts").select()).data
 
   openDocuments.value = documents.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== getDocumentSum(i).toFixed(2))
   openDocuments.value = openDocuments.value.map(i => {
 
-    console.log()
-
     return {
         ...i,
       docTotal: getDocumentSum(i, i.usedAdvanceInvoices.map(i => getDocumentSum(documents.find(x => x.id === i)))),
@@ -56,8 +58,10 @@ const setup = async () => {
   console.log(openDocuments.value)
 
   allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bs_id === itemInfo.value.id))
+  allocatedIncomingInvoices.value = incominginvoices.filter(i => i.statementallocations.find(x => x.bs_id === itemInfo.value.id))
   console.log(allocatedDocuments.value)
-  openIncomingInvoices.value = (await useSupabaseSelect("incominginvoices","*, statementallocations(*)")).filter(i => i.statementallocations.length === 0 || i.statementallocations.find(x => x.bs_id === itemInfo.value.id))
+  console.log(allocatedIncomingInvoices.value)
+  openIncomingInvoices.value = (await useSupabaseSelect("incominginvoices","*, statementallocations(*), vendor(*)")).filter(i => i.statementallocations.length === 0 )
   //console.log(openIncomingInvoices.value)
 
   //        return incominginvoices.value.filter(i => bankstatements.value.filter(x => x.assignments.find(y => y.type === 'incomingInvoice' && y.id === i.id)).length === 0)
@@ -144,6 +148,9 @@ const selectAccount = (id) => {
   showAccountSelection.value = false
 }
 
+
+const manualAllocationSum = ref(itemInfo.value.amount || 0)
+
 const saveAllocation = async (allocation) => {
   const {data,error} = await supabase.from("statementallocations").insert({
     ...allocation,
@@ -152,8 +159,11 @@ const saveAllocation = async (allocation) => {
 
   if(data) {
     await setup()
+    accountToSave.value = null
   }
 
+
+
 }
 
 const removeAllocation = async (allocationId) => {
@@ -163,13 +173,20 @@ const removeAllocation = async (allocationId) => {
 }
 
 const searchString = ref("")
-const filteredRows = computed(() => {
+const filteredDocuments = computed(() => {
 
 
   return useSearch(searchString.value, openDocuments.value)
 
 })
 
+const filteredIncomingInvoices = computed(() => {
+
+
+  return useSearch(searchString.value, openIncomingInvoices.value)
+
+})
+
 
 setup()
 
@@ -209,11 +226,14 @@ setup()
   </UDashboardNavbar>
 
   <UDashboardPanelContent
-    class="flex flex-row"
+    class="flex flex-row workingContainer"
     v-if="!loading"
   >
+    <div
+      class="mx-auto w-2/5"
+    >
+      <div class="px-2">
         <UCard
-        class="w-2/5 mx-auto "
             v-if="itemInfo"
         >
           <template #header>
@@ -272,8 +292,8 @@ setup()
                 <span class="font-semibold">Partner IBAN:</span>
               </td>
               <td>
-              <span v-if="itemInfo.debIban">{{itemInfo.debIban}}</span>
-              <span v-else-if="itemInfo.credIban">{{itemInfo.credIban}}</span>
+                <span v-if="itemInfo.debIban">{{separateIBAN(itemInfo.debIban)}}</span>
+                <span v-else-if="itemInfo.credIban">{{separateIBAN(itemInfo.credIban)}}</span>
                 <span v-else>-</span>
               </td>
             </tr>
@@ -285,7 +305,7 @@ setup()
                 {{dataStore.getBankAccountById(itemInfo.account) ? dataStore.getBankAccountById(itemInfo.account).name || separateIBAN(dataStore.getBankAccountById(itemInfo.account).iban) : ""}}
               </td>
             </tr>
-          <tr class="flex-row flex justify-between">
+<!--            <tr class="flex-row flex justify-between">
               <td colspan="2">
                 <span class="font-semibold">Buchungen:</span>
               </td>
@@ -296,13 +316,13 @@ setup()
             >
 
               <td>
-              <!--            <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
-                          <span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>-->
+                &lt;!&ndash;            <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
+                            <span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>&ndash;&gt;
                 <span v-if="item.cd_id">
                 {{dataStore.getCreatedDocumentById(item.cd_id).documentNumber}}
               </span>
                 <span v-else-if="item.ii_id">
-                {{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}
+&lt;!&ndash;                {{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}&ndash;&gt;
               </span>
                 <span v-else-if="item.account">
                 Buchungskonto: {{accounts.find(i => i.id === item.account).number}} {{accounts.find(i => i.id === item.account).label}}
@@ -322,7 +342,7 @@ setup()
                     v-else-if="item.ii_id"
                 />
               </td>
-          </tr>
+            </tr>-->
             <tr class="flex-row flex justify-between">
               <td colspan="2">
                 <span class="font-semibold">Beschreibung:</span>
@@ -339,9 +359,8 @@ setup()
 
         </UCard>
 
-    <div class="w-2/5 mx-auto">
         <UAlert
-          class="mb-3"
+            class="mb-3 mt-3"
             :color="calculateOpenSum > 0 ? 'rose' : 'primary'"
             variant="outline"
             :title="calculateOpenSum > 0 ? `${displayCurrency(calculateOpenSum)} von ${displayCurrency(Math.abs(itemInfo.amount))} nicht zugewiesen` : 'Kontobewegung vollständig zugewiesen'"
@@ -354,6 +373,11 @@ setup()
             />
           </template>
         </UAlert>
+      </div>
+
+
+      <div class="scrollList mt-3 px-2">
+        <UDivider>Vorhandene Buchungen</UDivider>
 
         <UCard
             class="mt-5"
@@ -373,7 +397,6 @@ setup()
               @click="removeAllocation(itemInfo.statementallocations.find(i => i.account === item.account).id)"
           />
         </UCard>
-
         <UCard
             class="mt-5"
             :ui="{ring: itemInfo.statementallocations.find(i => i.cd_id === document.id) ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
@@ -407,7 +430,44 @@ setup()
               @click="router.push(`/createDocument/show/${document.id}`)"
           />
         </UCard>
+        <UCard
+            class="mt-5"
+            :ui="{ring: itemInfo.statementallocations.find(i => i.ii_id === invoice.id) ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
+            v-for="invoice in allocatedIncomingInvoices"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{invoice.vendor ? invoice.vendor.name : ""}} - {{invoice.reference}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(getInvoiceSum(invoice))}}</span>
+            </div>
+          </template>
+          <UButton
+              icon="i-heroicons-check"
+              variant="outline"
+              class="mr-3"
+              v-if="!itemInfo.statementallocations.find(i => i.ii_id === invoice.id)"
+              @click="saveAllocation({ii_id: document.id, bs_id: itemInfo.id, amount: Number(getInvoiceSum(invoice))})"
+          />
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3"
+              v-if="itemInfo.statementallocations.find(i => i.ii_id === invoice.id)"
+              @click="removeAllocation(itemInfo.statementallocations.find(i => i.ii_id === invoice.id).id)"
+          />
 
+          <UButton
+              variant="outline"
+              icon="i-heroicons-arrow-right-end-on-rectangle"
+              @click="router.push(`/createDocument/show/${document.id}`)"
+          />
+        </UCard>
+      </div>
+    </div>
+
+    <div class="w-2/5 mx-auto">
+      <div class="px-2">
         <UDivider class="my-3">Ohne Beleg buchen</UDivider>
 
         <InputGroup class="mt-3 w-full">
@@ -429,17 +489,26 @@ setup()
               {{option.number}} - {{option.label}}
             </template>
           </USelectMenu>
+          <UInput
+            v-model="manualAllocationSum"
+            type="number"
+            step="0.01"
+          >
+            <template #trailing>
+              <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+            </template>
+          </UInput>
           <UButton
               @click="showAccountSelection = true"
               icon="i-heroicons-magnifying-glass"
+              variant="outline"
           />
           <UButton
               variant="outline"
               icon="i-heroicons-check"
-            @click="saveAllocation({bs_id: itemInfo.id, amount: Number(calculateOpenSum), account: accountToSave })"
-        >
-          Buchen
-        </UButton>
+              :disabled="!accountToSave"
+              @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, account: accountToSave })"
+          />
           <UButton
               @click="accountToSave = ''"
               icon="i-heroicons-x-mark"
@@ -476,7 +545,6 @@ setup()
         >
           Auf Beleg buchen
         </UDivider>
-
         <InputGroup
             class="mt-3 w-full"
         >
@@ -500,12 +568,13 @@ setup()
               @click="searchString = ''"
           />
         </InputGroup>
+      </div>
 
+      <div class="scrollList mt-3 px-2" style="height: 70vh;">
 
         <UCard
             class="mt-5"
-          :ui="{ring: itemInfo.statementallocations.find(i => i.cd_id === document.id) ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
-          v-for="document in filteredRows"
+            v-for="document in filteredDocuments"
         >
           <template #header>
             <div class="flex flex-row justify-between">
@@ -520,14 +589,6 @@ setup()
               v-if="!itemInfo.statementallocations.find(i => i.cd_id === document.id)"
               @click="saveAllocation({cd_id: document.id, bs_id: itemInfo.id, amount: Number(document.openSum)})"
           />
-        <UButton
-            icon="i-heroicons-x-mark"
-            variant="outline"
-            color="rose"
-            class="mr-3"
-            v-if="itemInfo.statementallocations.find(i => i.cd_id === document.id)"
-            @click="removeAllocation(itemInfo.statementallocations.find(i => i.ii_id === document.id).id)"
-        />
 
           <UButton
               variant="outline"
@@ -538,12 +599,11 @@ setup()
 
         <UCard
             class="mt-5"
-          :ui="{ring: /*itemInfo.assignments.find(i => i.id === invoice.id)*/ false ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
-          v-for="item in openIncomingInvoices"
+            v-for="item in filteredIncomingInvoices"
         >
           <template #header>
             <div class="flex flex-row justify-between">
-            <span>{{dataStore.getVendorById(item.vendor) ? dataStore.getVendorById(item.vendor).name : ''}} - {{item.reference}}</span>
+              <span>{{item.vendor ? item.vendor.name : ''}} - {{item.reference}}</span>
               <span class="font-semibold text-rose-600 text-nowrap">-{{displayCurrency(getInvoiceSum(item))}}</span>
             </div>
           </template>
@@ -554,14 +614,6 @@ setup()
               v-if="!itemInfo.statementallocations.find(i => i.ii_id === item.id)"
               @click="saveAllocation({ii_id: item.id, bs_id: itemInfo.id, amount: Number(itemInfo.amount)})"
           />
-        <UButton
-            icon="i-heroicons-x-mark"
-            variant="outline"
-            color="rose"
-            class="mr-3"
-            v-if="itemInfo.statementallocations.find(i => i.ii_id === item.id)"
-            @click="removeAllocation(itemInfo.statementallocations.find(i => i.ii_id === item.id).id)"
-        />
           <UButton
               variant="outline"
               icon="i-heroicons-arrow-right-end-on-rectangle"
@@ -570,10 +622,15 @@ setup()
 
         </UCard>
       </div>
+    </div>
 
   </UDashboardPanelContent>
 </template>
 
 <style scoped>
+.workingContainer {
+  height: 90vh;
+  overflow-y: hidden;
+}
 
 </style>