From 7676b3f0d2798af5bdc8a2f822d5a0ab262d99e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C5=82awek=20Zatorski?= <zatorski@gmail.com>
Date: Tue, 19 Nov 2024 13:21:44 +0100
Subject: [PATCH] vertical account names

---
 .../transaction/transaction.component.ts       |  3 ++-
 .../app/entities/transaction/transaction.vue   | 10 +++++-----
 src/main/webapp/content/css/loading.css        | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/entities/transaction/transaction.component.ts b/src/main/webapp/app/entities/transaction/transaction.component.ts
index 1bcd825..78d3e60 100644
--- a/src/main/webapp/app/entities/transaction/transaction.component.ts
+++ b/src/main/webapp/app/entities/transaction/transaction.component.ts
@@ -89,7 +89,8 @@ export default defineComponent({
         }
       }
 
-      return sums;
+      // Zaokrąglanie każdej sumy do dwóch miejsc po przecinku
+      return sums.map(sum => Number(sum.toFixed(2)));
     }
 
     return {
diff --git a/src/main/webapp/app/entities/transaction/transaction.vue b/src/main/webapp/app/entities/transaction/transaction.vue
index 50f0740..2a96859 100644
--- a/src/main/webapp/app/entities/transaction/transaction.vue
+++ b/src/main/webapp/app/entities/transaction/transaction.vue
@@ -33,8 +33,8 @@
             <th />
             <th />
 
-            <th scope="row" v-for="item in transactions[0].items">
-              <span>{{ item.userAccount?.name }}</span>
+            <th class="rotate" scope="row" v-for="item in transactions[0].items">
+              <div class="rotate">{{ item.userAccount?.name }}</div>
             </th>
             <th scope="row"></th>
           </tr>
@@ -44,7 +44,7 @@
             <!--            <th/>-->
             <th />
             <th>Saldo</th>
-            <th v-for="amount in sums">
+            <th v-for="amount in sums" class="border-left">
               <span class="bold">{{ amount }}</span>
             </th>
           </tr>
@@ -56,7 +56,7 @@
 
             <th scope="row"><span></span></th>
             <!--            <th scope="row"><span>Transactions:</span></th>-->
-            <th scope="row" v-for="item in transactions[0].items">
+            <th scope="row" v-for="item in transactions[0].items" class="border-left">
               <span></span>
               <!--              <span>{{  item.userAccount?.name }}</span>-->
             </th>
@@ -81,7 +81,7 @@
                 }}</router-link>
               </div>
             </td>
-            <td v-for="item in transaction.items">{{ item.amount }}</td>
+            <td v-for="item in transaction.items" class="border-left">{{ item.amount }}</td>
             <td class="text-right">
               <div class="btn-group">
                 <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }" custom v-slot="{ navigate }">
diff --git a/src/main/webapp/content/css/loading.css b/src/main/webapp/content/css/loading.css
index 678e7b6..fb60f8a 100644
--- a/src/main/webapp/content/css/loading.css
+++ b/src/main/webapp/content/css/loading.css
@@ -150,3 +150,21 @@
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
+
+th.rotate {
+  /*height:10px;*/
+  height: 180px;
+  /*width:50px;*/
+  white-space: nowrap;
+  position: relative;
+  border: 1px;
+}
+
+th.rotate > div {
+  transform: rotate(290deg);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 126px;
+  margin: auto;
+}