transfer list

src/pages/ledger/ListLedgerTransactions.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 
-import {findAllTransactionInLeger, TransferTypes, useLedgerParam} from "@/ledger";
+import {findAllTransactionInLeger, useLedgerParam} from "@/ledger";
 import {computedAsync} from "@vueuse/core";
 import {TransactionResponse} from "@/generated/mammon";
 import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
 import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
+import {TransferList, TransferTypes} from "@/transaction";
+import {Dropdown} from "@/components";
 
 const {ledgerId} = useLedgerParam();
 
@@ -21,7 +23,8 @@ const { sortedArray, headerProps } = useSort(() => transactions.value.map(transa
     transactionId: transaction.transactionId,
     description: transaction.description,
     date: new Date(transaction.datetime),
-    balance: getIskBalance(transaction)
+    balance: getIskBalance(transaction),
+    transfers: transaction.transfers
   }
 }));
 
@@ -47,7 +50,7 @@ const getIskBalance = (transaction: TransactionResponse) => {
 
 <template>
   <div class="mt-4">
-    <VirtualScrollTable  :list="sortedArray" :itemHeight="33" bottom="1rem">
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
       <template #default="{ list }">
         <thead>
         <tr>
@@ -58,7 +61,16 @@ const getIskBalance = (transaction: TransactionResponse) => {
         </thead>
         <tbody>
         <tr v-for="t in list" :key="t.data.transactionId">
-          <td>{{formatEveDate(t.data.date)}}</td>
+          <td>
+            <Dropdown class="transfer-dropdown">
+              <template #button>
+                {{formatEveDate(t.data.date)}}
+              </template>
+              <div>
+                <TransferList :transfers="t.data.transfers" />
+              </div>
+            </Dropdown>
+          </td>
           <td class="text-right">
             <IskLabel :amount="t.data.balance" />
           </td>
@@ -69,3 +81,23 @@ const getIskBalance = (transaction: TransactionResponse) => {
     </VirtualScrollTable>
   </div>
 </template>
+
+<style scoped>
+@reference "@/style.css";
+
+tr:hover>td>.transfer-dropdown :deep(>button) {
+  @apply bg-slate-900;
+}
+
+.transfer-dropdown {
+  @appky z-1000;
+}
+
+.transfer-dropdown :deep(>button) {
+  @apply bg-slate-800 hover:bg-slate-900 border-none flex items-center w-full;
+}
+
+.transfer-dropdown.dropdown-open :deep(>button) {
+  @apply bg-slate-800 rounded-b-none;
+}
+</style>