Changes in Statement Allocation and Open Sum Calc

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

@@ -29,6 +29,7 @@ const openIncomingInvoices = ref([])
 
 const accounts = ref([])
 
+const loading = ref(true)
 const setup = async () => {
   if(route.params.id) {
     itemInfo.value =  (await supabase.from("bankstatements").select("*, statementallocations(*)").eq("id",route.params.id).single()).data  //dataStore.bankstatements.find(i => i.id === Number(route.params.id))
@@ -42,12 +43,13 @@ const setup = async () => {
   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),
+      docTotal: getDocumentSum(i, i.usedAdvanceInvoices.map(i => getDocumentSum(documents.find(x => x.id === i)))),
       statementTotal: Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0)),
-      openSum: (Number(getDocumentSum(i)) - Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0))).toFixed(2)
+      openSum: (Number(getDocumentSum(i, i.usedAdvanceInvoices.map(i => getDocumentSum(documents.find(x => x.id === i))))) - Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0))).toFixed(2)
     }
   })
 
@@ -63,7 +65,7 @@ const setup = async () => {
 
   let allocations = (await supabase.from("createddocuments").select(`*, statementallocations(*)`).eq("id",50)).data
 
-
+  loading.value = false
 
 }
 
@@ -71,19 +73,36 @@ const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
 }
 
-const separateIBAN = (input)  => {
+const separateIBAN = (input = "")  => {
   const separates = input.match(/.{1,4}/g)
   return separates.join(" ")
 }
 
-const getDocumentSum = (doc) => {
+const getDocumentSum = (doc,advanceInvoices = []) => {
   let sum = 0
+
+  console.log(advanceInvoices)
+
   doc.rows.forEach(row => {
     if(row.mode === "normal" || row.mode === "service" || row.mode === "free") {
       sum += row.quantity * row.price * (1 - row.discountPercent / 100) * (1 + row.taxPercent / 100)
     }
   })
-  return sum
+
+  console.log(sum)
+
+  if(advanceInvoices.length > 0) {
+    advanceInvoices.forEach(i => {
+      console.log(i)
+      sum -= i
+    })
+  }
+
+  console.log(sum)
+
+
+
+  return Number(sum.toFixed(2))
 }
 
 const getInvoiceSum = (invoice) => {
@@ -96,37 +115,16 @@ const getInvoiceSum = (invoice) => {
 }
 
 const calculateOpenSum = computed(() => {
-    let startingAmount = itemInfo.value.amount || 0
+    let startingAmount = 0
 
     itemInfo.value.statementallocations.forEach(item => {
-      if(item.cd_id) {
-        startingAmount = startingAmount - item.amount
-      } else if(item.ii_id) {
-        startingAmount = Number(startingAmount) + item.amount
-      }else if(item.account) {
-        startingAmount = Number(startingAmount) - item.amount
-      }
+      startingAmount += Math.abs(item.amount)
     })
 
-    return startingAmount.toFixed(2)
+    return (Math.abs(itemInfo.value.amount) - startingAmount).toFixed(2)
 })
 
-const calculateAllocatedSum = computed(() => {
-  let startingAmount = 0
 
-  itemInfo.value.statementallocations.forEach(item => {
-    console.log(item)
-
-    if(item.cd_id) {
-      startingAmount = startingAmount + item.amount
-    } else if(item.ii_id) {
-      startingAmount = Number(startingAmount) + item.amount
-    }
-  })
-
-  return startingAmount
-
-})
 
 const saveAllocations = async () =>  {
   let allocationsToBeSaved = itemInfo.value.statementallocations.filter(i => !i.id)
@@ -138,6 +136,14 @@ const saveAllocations = async () =>  {
 
 }
 
+const showAccountSelection = ref(false)
+const accountToSave = ref("")
+
+const selectAccount = (id) => {
+  accountToSave.value = id
+  showAccountSelection.value = false
+}
+
 const saveAllocation = async (allocation) => {
   const {data,error} = await supabase.from("statementallocations").insert({
     ...allocation,
@@ -184,37 +190,9 @@ setup()
     </template>
     <template #center>
       <h1
-          :class="['text-xl','font-medium', Number(calculateOpenSum) === 0 ? ['text-primary-500'] : ['text-rose-600']]"
+          :class="['text-xl','font-medium']"
       >Kontobewegung bearbeiten</h1>
     </template>
-    <template #right>
-<!--      <UButton
-          v-if="mode === 'edit'"
-          @click="saveAllocations"
-      >
-        Speichern
-      </UButton>-->
-      <!--<UButton
-          v-else-if="mode === 'create'"
-          @click="dataStore.createNewItem('customers',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-          v-if="mode === 'edit' || mode === 'create'"
-      >
-        Abbrechen
-      </UButton>
-      <UButton
-          v-if="mode === 'show'"
-          @click="editItem"
-      >
-        Bearbeiten
-      </UButton>-->
-    </template>
     <template #badge v-if="itemInfo">
       <UBadge
           v-if="itemInfo.incomingInvoice || itemInfo.createdDocument"
@@ -232,9 +210,10 @@ setup()
 
   <UDashboardPanelContent
     class="flex flex-row"
+    v-if="!loading"
   >
     <UCard
-        class="w-2/5 mx-auto mt-5"
+        class="w-2/5 mx-auto "
         v-if="itemInfo"
     >
       <template #header>
@@ -282,7 +261,9 @@ setup()
               <span class="font-semibold">Partner:</span>
             </td>
             <td>
-              {{itemInfo.amount > 0 ? itemInfo.debName : itemInfo.credName}}
+              <span v-if="itemInfo.debName">{{itemInfo.debName}}</span>
+              <span v-else-if="itemInfo.credName">{{itemInfo.credName}}</span>
+              <span v-else>-</span>
 
             </td>
           </tr>
@@ -291,7 +272,9 @@ setup()
               <span class="font-semibold">Partner IBAN:</span>
             </td>
             <td>
-              {{itemInfo.amount > 0 ? separateIBAN(itemInfo.debIban) : separateIBAN(itemInfo.credIban)}}
+              <span v-if="itemInfo.debIban">{{itemInfo.debIban}}</span>
+              <span v-else-if="itemInfo.credIban">{{itemInfo.credIban}}</span>
+              <span v-else>-</span>
             </td>
           </tr>
           <tr class="flex-row flex justify-between">
@@ -356,19 +339,41 @@ setup()
 
     </UCard>
 
-<!--    <UDivider
-        class="mt-5 w-2/5 mx-auto"
-        v-if="!itemInfo.createdDocument && !itemInfo.incomingInvoice"
-    />-->
+    <div class="w-2/5 mx-auto">
+      <UAlert
+          class="mb-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'"
+      >
+        <template #description>
+          <UProgress
+              :value="Math.abs(itemInfo.amount) - calculateOpenSum"
+              :max="Math.abs(itemInfo.amount)"
+              :color="calculateOpenSum > 0 ? 'rose' : 'primary'"
+          />
+        </template>
+      </UAlert>
 
-    <div
-        class="w-2/5 mx-auto"
-        v-if="itemInfo.amount > 0 "
-    >
+      <UCard
+          class="mt-5"
+          v-for="item in itemInfo.statementallocations.filter(i => i.account)"
+      >
+        <template #header>
+          <div class="flex flex-row justify-between">
+            <span>{{accounts.find(i => i.id === item.account).number}} - {{accounts.find(i => i.id === item.account).label}}</span>
+            <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+          </div>
+        </template>
+        <UButton
+            icon="i-heroicons-x-mark"
+            variant="outline"
+            color="rose"
+            class="mr-3"
+            @click="removeAllocation(itemInfo.statementallocations.find(i => i.account === item.account).id)"
+        />
+      </UCard>
 
-      <UDivider v-if="allocatedDocuments.length > 0">
-        <span>Zugewiesene Summe: {{displayCurrency(calculateAllocatedSum)}}</span>
-      </UDivider>
       <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'}"
@@ -377,7 +382,7 @@ setup()
         <template #header>
           <div class="flex flex-row justify-between">
             <span>{{document.customer ? document.customer.name : ""}} - {{document.documentNumber}}</span>
-            <span class="font-semibold text-primary-500 text-nowrap">{{displayCurrency(getDocumentSum(document))}}</span>
+            <span class="font-semibold text-nowrap">{{displayCurrency(getDocumentSum(document))}}</span>
           </div>
         </template>
         <UButton
@@ -402,28 +407,100 @@ setup()
             @click="router.push(`/createDocument/show/${document.id}`)"
         />
       </UCard>
-      <UDivider class="mt-3">
-        <span>Offene Summe: {{displayCurrency(calculateOpenSum)}}</span>
-      </UDivider>
-      <UInput
-          id="searchinput"
-          v-model="searchString"
-          icon="i-heroicons-funnel"
-          autocomplete="off"
-          placeholder="Suche..."
-          class="hidden lg:block mt-3"
-          @keydown.esc="$event.target.blur()"
-      >
-        <template #trailing>
-          <UKbd value="/" />
-        </template>
-      </UInput>
 
-      <UButton
-        @click="saveAllocation({bs_id: itemInfo.id, amount: Number(itemInfo.amount), account: 20 })"
+      <UDivider class="my-3">Ohne Beleg buchen</UDivider>
+
+      <InputGroup class="mt-3 w-full">
+        <USelectMenu
+            class="w-full"
+            :options="accounts"
+            value-attribute="id"
+            option-attribute="label"
+            :ui-menu="{ width: 'min-w-max' }"
+            v-model="accountToSave"
+            searchable
+            :search-attributes="['number','label']"
+        >
+          <template #label>
+            <span v-if="accountToSave">{{accounts.find(i => i.id === accountToSave).number}} - {{accounts.find(i => i.id === accountToSave).label}}</span>
+            <span v-else>Kein Konto ausgewählt</span>
+          </template>
+          <template #option="{option}">
+            {{option.number}} - {{option.label}}
+          </template>
+        </USelectMenu>
+        <UButton
+            @click="showAccountSelection = true"
+            icon="i-heroicons-magnifying-glass"
+        />
+        <UButton
+            variant="outline"
+            icon="i-heroicons-check"
+            @click="saveAllocation({bs_id: itemInfo.id, amount: Number(itemInfo.amount), account: accountToSave })"
+        >
+          Buchen
+        </UButton>
+        <UButton
+            @click="accountToSave = ''"
+            icon="i-heroicons-x-mark"
+            variant="outline"
+            color="rose"
+        />
+      </InputGroup>
+      <UModal
+          v-model="showAccountSelection"
       >
-        Als DP markieren
-      </UButton>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                Konto auswählen
+              </h3>
+              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAccountSelection = false" />
+            </div>
+          </template>
+          <UButton
+              v-for="selectableAccount in accounts"
+              variant="outline"
+              class="m-3"
+              @click="selectAccount(selectableAccount.id)"
+          >
+            {{selectableAccount.label}}
+          </UButton>
+        </UCard>
+
+      </UModal>
+
+      <UDivider
+          class="my-3"
+      >
+        Auf Beleg buchen
+      </UDivider>
+
+      <InputGroup
+          class="mt-3 w-full"
+      >
+        <UInput
+            id="searchinput"
+            v-model="searchString"
+            icon="i-heroicons-funnel"
+            autocomplete="off"
+            placeholder="Suche..."
+            class="hidden lg:block w-full mr-1"
+            @keydown.esc="$event.target.blur()"
+        >
+          <template #trailing>
+            <UKbd value="/" />
+          </template>
+        </UInput>
+        <UButton
+            variant="outline"
+            icon="i-heroicons-x-mark"
+            color="rose"
+            @click="searchString = ''"
+        />
+      </InputGroup>
+
 
       <UCard
           class="mt-5"
@@ -459,14 +536,6 @@ setup()
         />
       </UCard>
 
-    </div>
-    <div
-        class="w-2/5 mx-auto"
-        v-if="itemInfo.amount < 0 "
-    >
-      <UDivider>
-        <span>Offene Summe: {{displayCurrency(calculateOpenSum)}}</span>
-      </UDivider>
       <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'}"
@@ -474,7 +543,7 @@ setup()
       >
         <template #header>
           <div class="flex flex-row justify-between">
-            <span>{{dataStore.getVendorById(item.vendor).name}} - {{item.reference}}</span>
+            <span>{{dataStore.getVendorById(item.vendor) ? dataStore.getVendorById(item.vendor).name : ''}} - {{item.reference}}</span>
             <span class="font-semibold text-rose-600 text-nowrap">-{{displayCurrency(getInvoiceSum(item))}}</span>
           </div>
         </template>
@@ -501,6 +570,7 @@ setup()
 
       </UCard>
     </div>
+
   </UDashboardPanelContent>
 </template>