s

src/main/webapp/app/entities/transaction/transaction-details.vue

@@ -59,7 +59,7 @@
             <tbody>
               <tr v-for="(item, index) in transaction.transactionItems" :key="index" class="transaction-item">
                 <td>
-                  {{ index }}
+                  {{ index + 1 }}
                 </td>
                 <td>
                   {{ item.userAccount?.name }}

src/main/webapp/app/entities/transaction/transaction.component.ts

@@ -24,6 +24,7 @@ export default defineComponent({
     const accountService = inject<AccountService>('accountService');
 
     const isFetching = ref(false);
+    const sums: Ref<number[]> = ref([]);
 
     const clear = () => {};
     // console.log(props.userAccountId);
@@ -34,6 +35,7 @@ export default defineComponent({
         const res = await transactionService().retrieve();
         // const res = await transactionService().retrieveForAccount(props.userAccountId);
         transactions.value = res.data;
+        sums.value = sumAmountsPerColumn(transactions.value);
       } catch (err) {
         alertService.showHttpError(err.response);
       } finally {
@@ -71,12 +73,32 @@ export default defineComponent({
       }
     };
 
+    function sumAmountsPerColumn(transactions: ITransaction[]): number[] {
+      // Jeżeli nie ma transakcji, zwracamy pustą tablicę
+      if (transactions.length === 0) return [];
+      // Liczba kolumn to liczba transactionItems w pierwszej transakcji
+      const columnCount = transactions[0].items.length;
+      // Inicjalizacja tablicy sum z zerami dla każdej kolumny
+      const sums = new Array(columnCount).fill(0);
+
+      // Iteracja przez każdą transakcję
+      for (const transaction of transactions) {
+        for (let i = 0; i < columnCount; i++) {
+          // Dodajemy amount z każdego transactionItem do odpowiedniej kolumny
+          sums[i] += transaction.items[i].amount;
+        }
+      }
+
+      return sums;
+    }
+
     return {
       transactions,
       handleSyncList,
       isFetching,
       retrieveTransactions,
       clear,
+      sums,
       removeId,
       accountService,
       hasAnyAuthorityValues,

src/main/webapp/app/entities/transaction/transaction.vue

@@ -27,26 +27,53 @@
       <table class="table table-striped" aria-describedby="transactions">
         <thead>
           <tr>
-            <th scope="row"><span>ID</span></th>
+            <!--            <th/>-->
-            <th scope="row"><span>Type</span></th>
+            <!--            <th/>-->
-            <th scope="row"><span>Date</span></th>
+            <!--            <th/>-->
-            <th scope="row"><span>Comment</span></th>
+            <th />
+            <th />
 
-            <th scope="row"><span>Event</span></th>
             <th scope="row" v-for="item in transactions[0].items">
               <span>{{ item.userAccount?.name }}</span>
             </th>
             <th scope="row"></th>
           </tr>
+          <tr>
+            <!--            <th/>-->
+            <!--            <th/>-->
+            <!--            <th/>-->
+            <th />
+            <th>Saldo</th>
+            <th v-for="amount in sums">
+              <span class="bold">{{ amount }}</span>
+            </th>
+          </tr>
+          <tr>
+            <!--            <th scope="row"><span>ID</span></th>-->
+            <!--            <th scope="row"><span>Type</span></th>-->
+            <th scope="row"><span>Date</span></th>
+            <!--            <th scope="row"><span>Comment</span></th>-->
+
+            <th scope="row"><span></span></th>
+            <!--            <th scope="row"><span>Transactions:</span></th>-->
+            <th scope="row" v-for="item in transactions[0].items">
+              <span></span>
+              <!--              <span>{{  item.userAccount?.name }}</span>-->
+            </th>
+            <th scope="row"></th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="transaction in transactions" :key="transaction.id" data-cy="entityTable">
             <td>
-              <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }">{{ transaction.id }}</router-link>
+              <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }"
+                >{{ transaction.date }} {{ transaction.type }}
+              </router-link>
+              <div v-if="transaction.comment">{{ transaction.comment }}</div>
             </td>
-            <td>{{ transaction.type }}</td>
+            <!--            <td>{{ transaction.type }}</td>-->
-            <td>{{ transaction.date }}</td>
+            <!--            <td>{{ transaction.date }}</td>-->
-            <td>{{ transaction.comment }}</td>
+            <!--            <td>{{ transaction.comment }}</td>-->
             <td>
               <div v-if="transaction.event">
                 <router-link :to="{ name: 'EventView', params: { eventId: transaction.event.id } }">{{