vertical account names

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 {

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 }">

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;
+}