Add difference calculation and display to MassDataInsertTable.vue and refine response handling in CollectedOrderInvoicesCompareDataStructure.vue

src/components/forms/other/elements/MassDataInsertTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getDataColumns, getDataRows, progress, getResponse} from "@/components/forms/other/MassDataInserter.vue";
+import {getDataColumns, getDataRows, progress, getResponse, getResponses} from "@/components/forms/other/MassDataInserter.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { ref, computed, defineEmits, defineProps } from 'vue';
 
@@ -15,6 +15,27 @@ const toggleDetails = (row) => {
 const isRowDetailsVisible = (row) => {
   return rowDetailsVisible.value.includes(row);
 };
+
+// Get the difference for a row from the response
+const getRowDifference = (row) => {
+  const response = getResponse(row);
+  if (response && response.data && response.data.difference !== undefined && response.data.difference !== null && response.data.difference !== 0) {
+    return response.data.difference;
+  }
+  return null;
+};
+
+// Calculate total difference from all responses
+const getTotalDifference = () => {
+  const responses = getResponses();
+  let total = 0;
+  responses.forEach((r) => {
+    if (r.data && r.data.difference !== undefined && r.data.difference !== null) {
+      total += Number(r.data.difference) || 0;
+    }
+  });
+  return total;
+};
 </script>
 
 <template>
@@ -28,6 +49,7 @@ const isRowDetailsVisible = (row) => {
         <!-- Status processing -->
         <template v-if="progress.total > 0">
           <th>{{ SessionUser.objects.global.language.status }}</th>
+          <th>Difference</th>
         </template>
       </tr>
     </thead>
@@ -50,6 +72,12 @@ const isRowDetailsVisible = (row) => {
             <span v-if="progress.completed.includes(row)" class="tag is-success is-clickable">{{ SessionUser.objects.global.language.succeeded }}</span>
             <span v-if="progress.failed.includes(row)" class="tag is-danger is-clickable">{{ SessionUser.objects.global.language.failed }}</span>
           </td>
+          <!-- Show difference if not 0 -->
+          <td class="has-text-left">
+            <span v-if="getRowDifference(row) !== null" class="tag is-warning">
+              {{ getRowDifference(row) }}
+            </span>
+          </td>
         </template>
       </tr>
       <!-- Details row -->
@@ -73,6 +101,9 @@ const isRowDetailsVisible = (row) => {
             class="has-text-left"
         >
           {{ getDataRows().length }} {{ SessionUser.objects.global.language.rows.toLowerCase() }}
+          <span v-if="getTotalDifference() !== 0" class="ml-3 tag is-warning">
+            Total difference: {{ getTotalDifference() }}
+          </span>
         </td>
       </tr>
     </tfoot>

src/components/forms/other/structures/CollectedOrderInvoicesCompareDataStructure.vue

@@ -28,7 +28,6 @@ export const init = () => {
     generateNewColumn("customer_number", columnTypes.number, applyColumnProperties({required: true, label: SessionUser.objects.collectedOrderInvoices.columns.customer_number.label})),
     generateNewColumn("customer_name", columnTypes.string, applyColumnProperties({required: false, label: SessionUser.objects.collectedOrderInvoices.columns.name.label})),
     generateNewColumn("total_net_amount", columnTypes.decimal, applyColumnProperties({required: false, label: SessionUser.objects.collectedOrderInvoices.columns.total_net_amount.label})),
-
   ]);
 
   /**
@@ -46,7 +45,6 @@ export const init = () => {
         customer_number: object.customer_number,
         customer_name: object.customer_name,
         total_net_amount: object.total_net_amount,
-
       };
       // Add the parsed object to the parsed objects array
       parsedObjects.push(parsedObject);
@@ -89,12 +87,17 @@ const processInvoice = (object) => {
   ).then((response) => {
     // If the request was successful, check if the object is valid
     if (response.status === 200) {
+      // Store the difference from the API response into the object
+      const responseData = response.data?.data || response.data;
+      if (responseData && responseData.difference !== undefined) {
+        object.difference = responseData.difference;
+      }
       // Add the response to the responses
       setResponses([...getResponses(), {
         object: object,
         success: true,
         response: response,
-        data: response.data?.data || response.data,
+        data: responseData,
       }]);
       // If the object is valid, add it to the completed objects
       setCompleted([...getCompleted(), object]);