transfer list

src/components/Dropdown.vue

@@ -31,7 +31,7 @@ useEventListener('keyup', e => {
 
 <template>
     <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="doAutoClose">
-        <button @click="isOpen = !isOpen">
+        <button @click="isOpen = !isOpen" class="cursor-pointer">
             <Transition
                 enter-active-class="transition-transform"
                 enter-from-class="rotate-180"

src/components/tooltip/Tooltip.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { vElementHover } from '@vueuse/components';
-import { useElementBounding } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { useSharedWindowSize } from './tooltip';
+import {vElementHover} from '@vueuse/components';
+import {useElementBounding} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useSharedWindowSize} from './tooltip';
 
 const open = defineModel('open', { default: false });
 
@@ -25,7 +25,7 @@ const positions = computed(() => {
 </script>
 
 <template>
-    <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
+    <div ref="mainDiv" class="flex flex-col items-center justify-center" :class="{
         'open': open,
         'tooltip-top': positions.includes('top'),
         'tooltip-bottom': positions.includes('bottom'),

src/ledger/ledger.ts

@@ -8,7 +8,6 @@ import {
     MainLedgerResponse,
     MainLedgerResponseTypeEnum,
     TransactionResponse,
-    TransferResponseTypeEnum,
     UpdateCombinedLedgerRequest,
     UpdateMainLedgerRequest
 } from "@/generated/mammon";
@@ -24,8 +23,6 @@ export type MainLedger = MainLedgerResponse & {type: MainLedgerResponseTypeEnum}
 export type CombinedLedger = CombinedLedgerResponse & {type: CombinedLedgerResponseTypeEnum}
 export type Ledger = MainLedger | CombinedLedger;
 
-export const TransferTypes = TransferResponseTypeEnum;
-
 export const systemLedgerRef = 'system';
 export const systemLedger = {
     type: LedgerTypes.Main,

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>

src/transaction/TransferList.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+
+import {Transfer, TransferTypes} from "@/transaction/transaction.ts";
+import {LedgerLabel, systemLedger, useLedgersStore} from "@/ledger";
+import {getMarketType, IskLabel, MarketTypeLabel} from "@/market";
+import {computedAsync} from "@vueuse/core";
+
+type TransferWithValue = Transfer & { marketTypeId: number; };
+
+interface Props {
+  transfers?: Transfer[]
+}
+
+const props = defineProps<Props>();
+
+const {findById} = useLedgersStore();
+
+const sortedArray = computedAsync(async () => {
+  if (!props.transfers) {
+    return [];
+  }
+
+  return await Promise.all(props.transfers.map(async (transfer: TransferWithValue) => {
+    const fromLedger = findById(transfer.fromLedgerId) ?? systemLedger
+    const toLedger = findById(transfer.toLedgerId) ?? systemLedger
+
+    const item = transfer.marketTypeId ? await getMarketType(transfer.marketTypeId) : undefined;
+
+    return {
+      ...transfer,
+      fromLedger,
+      toLedger,
+      itemName: item ? item.name : '',
+      fromLedgerName: fromLedger.name,
+      toLedgerName: toLedger.name
+    }
+  }))
+}, []);
+
+</script>
+
+<template>
+  <div>
+    <table>
+      <thead>
+      <tr>
+        <th>From</th>
+        <th>To</th>
+        <th>Item</th>
+        <th>Quantity/Amount</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="t in sortedArray">
+        <td>
+          <LedgerLabel :ledger="t.fromLedger" />
+        </td>
+        <td>
+          <LedgerLabel :ledger="t.toLedger" />
+        </td>
+        <template v-if="t.type === TransferTypes.Item">
+          <td>
+            <MarketTypeLabel :id="t.marketTypeId" :name="t.itemName" />
+          </td>
+          <td class="text-right">{{ t.quantity }}</td>
+        </template>
+        <template v-else-if="t.type === TransferTypes.Isk">
+          <td colspan="2" class="text-right">
+            <IskLabel :amount="t.amount" />
+          </td>
+        </template>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/transaction/index.ts

@@ -0,0 +1,3 @@
+export * from './transaction'
+
+export {default as TransferList} from './TransferList.vue';

src/transaction/transaction.ts

@@ -0,0 +1,5 @@
+import {TransactionResponseTransfersInner, TransferResponseTypeEnum} from "@/generated/mammon";
+
+export const TransferTypes = TransferResponseTypeEnum;
+export type TransferType = TransferResponseTypeEnum;
+export type Transfer = TransactionResponseTransfersInner;