ledger balance

src/pages/ledger/ListLedgerTransactions.vue

@@ -6,7 +6,7 @@ import {TransactionResponse} from "@/generated/mammon";
 import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
 
-const {ledgerId, ledger} = useLedgerParam();
+const {ledgerId} = useLedgerParam();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
   if (ledgerId.value) {

src/pages/ledger/ListLedgers.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 
-import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
+import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
+const { sortedArray, headerProps } = useSort<Ledger>(ledgers)
+
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");
 
@@ -21,13 +24,35 @@ const openEdit = async (ledgerId: string) => {
 
 <template>
   <div class="mt-4">
-    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel :ledger="ledger" :link="true" />
-      <div class="flex grow">
-        <IskLabel class="ms-2" :amount="ledger.balance" />
-      </div>
-      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Ledger</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Isk Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="l in list" :key="l.data.ledgerId">
+          <td>
+            <LedgerLabel :ledger="l.data" :link="true" />
+          </td>
+          <td class="text-right">
+            <IskLabel class="ms-2" :amount="l.data.balance" />
+          </td>
+          <td class="text-right">
+            <button class="btn-icon ms-2" @click="openEdit(l.data.ledgerId)"><PencilSquareIcon /></button>
+          </td>
+        </tr>
+        </tbody>
+      </template>
+      <template #empty>
+        <div class="text-center mt-4">
+          <span>No ledgers found</span>
+        </div>
+      </template>
+    </VirtualScrollTable>
   </div>
   <EditLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
 </template>

src/pages/ledger/ViewLedgerBalance.vue

@@ -1,11 +1,28 @@
 <script setup lang="ts">
-import {useLedgerParam} from "@/ledger";
+import {getLedgerBalance, useLedgerParam} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {BalanceResponse} from "@/generated/mammon";
+import {IskLabel, MarketTypeLabel} from "@/market";
 
-const {ledgerId, ledger} = useLedgerParam();
+const {ledgerId} = useLedgerParam();
+
+const balance = computedAsync<BalanceResponse>(async () => {
+  if (ledgerId.value) {
+    return await getLedgerBalance(ledgerId.value);
+  }
+  return undefined;
+});
 
 </script>
 
 <template>
-  <div class="mt-4">
+  <div v-if="balance" class="mt-4">
+    <div class="border-b-1">
+      <IskLabel class="mb-2" :amount="balance.iskBalance" />
+    </div>
+    <div v-for="item in balance.itemBalances" :key="item.typeId" class="mt-2 flex gap-2">
+      <MarketTypeLabel :id="item.typeId" />
+      <span>{{item.quantity}}</span>
+    </div>
   </div>
 </template>

src/pages/market/TypeInfo.vue

@@ -115,7 +115,7 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 img.type-image {
     width: 64px;

src/pages/rules/EditRuleBook.vue

@@ -108,7 +108,7 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .rule-dropdown :deep(>button) {
   @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;