Changes

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

@@ -53,9 +53,23 @@ const getInvoiceSum = (invoice) => {
     sum += account.amountTax
     sum += account.amountNet
   })
-  return sum
+  return sum.toFixed(2)
 }
 
+const calculateOpenSum = computed(() => {
+    let startingAmount = itemInfo.value.amount
+
+    itemInfo.value.assignments.forEach(item => {
+      if(item.type === "createdDocument") {
+        let doc = dataStore.getCreatedDocumentById(item.id)
+        startingAmount = startingAmount - getDocumentSum(doc)
+      }
+    })
+
+    return startingAmount.toFixed(2)
+})
+
+
 setup()
 
 </script>
@@ -121,9 +135,11 @@ setup()
     </template>
   </UDashboardNavbar>
 
-  <UDashboardPanelContent>
+  <UDashboardPanelContent
+    class="flex flex-row"
+  >
     <UCard
-        class="w-4/5 mx-auto mt-10"
+        class="w-2/5 mx-auto mt-5"
         v-if="itemInfo"
     >
       <template #header>
@@ -190,12 +206,28 @@ setup()
           </td>
         </tr>
         <tr class="flex-row flex justify-between">
-          <td>
+          <td colspan="2">
             <span class="font-semibold">Verknüpftes Dokument:</span>
           </td>
+
+        </tr>
+        <tr
+            class="flex-row flex justify-between mb-3"
+            v-for="item in itemInfo.assignments"
+        >
           <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>
+<!--            <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>-->
+            <span v-if="item.type === 'createdDocument'">
+              {{dataStore.getCreatedDocumentById(item.id).documentNumber}}
+            </span>
+          </td>
+          <td>
+            <UButton
+              variant="outline"
+              icon="i-heroicons-arrow-right-end-on-rectangle"
+              @click="router.push(`/createDocument/show/${item.id}`)"
+            />
           </td>
         </tr>
         <tr class="flex-row flex justify-between">
@@ -209,32 +241,53 @@ setup()
           </td>
         </tr>
       </table>
+
     </UCard>
 
-    <UDivider
-        class="mt-5 w-4/5 mx-auto"
+<!--    <UDivider
+        class="mt-5 w-2/5 mx-auto"
         v-if="!itemInfo.createdDocument && !itemInfo.incomingInvoice"
-    />
+    />-->
 
-    <UCard
-        class="w-4/5 mx-auto mt-5"
-        v-if="itemInfo.amount > 0 && !itemInfo.createdDocument"
-        :ui="{ring: itemInfo.createdDocument === document.id ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
-        v-for="document in dataStore.getOpenDocuments()"
+    <div
+        class="w-2/5 mx-auto"
+        v-if="itemInfo.amount > 0 "
     >
-      <template #header>
-        <div class="flex flex-row justify-between">
-          <span>{{dataStore.getCustomerById(document.customer).name}} - {{document.documentNumber}}</span>
-          <span class="font-semibold text-primary-500">{{displayCurrency(getDocumentSum(document))}}</span>
-        </div>
-      </template>
-      <UButton
-        icon="i-heroicons-check"
-        variant="outline"
-        v-if="Number(getDocumentSum(document)) === itemInfo.amount"
-        @click="itemInfo.createdDocument = document.id"
-      />
-    </UCard>
+      <UDivider
+        label="Test"
+      >
+        <span>Offene Summe: {{displayCurrency(calculateOpenSum)}}</span>
+      </UDivider>
+      <UCard
+          class="mt-5"
+          :ui="{ring: itemInfo.assignments.find(i => i.id === document.id) ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
+          v-for="document in dataStore.getOpenDocuments()"
+      >
+        <template #header>
+          <div class="flex flex-row justify-between">
+            <span>{{dataStore.getCustomerById(document.customer).name}} - {{document.documentNumber}}</span>
+            <span class="font-semibold text-primary-500">{{displayCurrency(getDocumentSum(document))}}</span>
+          </div>
+        </template>
+        <UButton
+            icon="i-heroicons-check"
+            variant="outline"
+            class="mr-3"
+            v-if="!itemInfo.assignments.find(i => i.id === document.id)"
+            @click="itemInfo.assignments.push({type: 'createdDocument',id: document.id})"
+        />
+        <UButton
+            icon="i-heroicons-x-mark"
+            variant="outline"
+            color="rose"
+            v-if="itemInfo.assignments.find(i => i.id === document.id)"
+            @click="itemInfo.assignments = itemInfo.assignments.filter(i => i.id !== document.id)"
+        />
+      </UCard>
+
+    </div>
+
+