transaction list display

src/market/IskLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import {formatIsk} from "@/formaters";
+
+interface Props {
+  amount: number;
+}
+
+const { amount } = defineProps<Props>();
+</script>
+
+<template>
+  <span :class="amount >= 0 ? 'text-emerald-400' : 'text-amber-700'">{{ formatIsk(amount) }}</span>
+</template>

src/market/index.ts

@@ -6,3 +6,5 @@ export * from './type';
 export * from './appraisal';
 export * from './market';
 
+export { default as IskLabel } from './IskLabel.vue';
+

src/market/type/MarketType.ts

@@ -1,27 +1,40 @@
+import {esiAxiosInstance} from '@/service';
+
 export type MarketType = {
-    id: number;
+    type_id: number;
     group_id: number;
-    marketgroup_id: number;
+    market_group_id: number;
     name: string;
     published: boolean;
     description: string;
-    basePrice: number;
+    base_price: number;
     icon_id: number;
     volume: number;
-    portionSize: number;
+    portion_size: number;
 }
 
+const cache = new Map<number, MarketType>(); // TODO move to pinia store
+
+const fetchType = (id: number): Promise<MarketType> => {
+    if (cache.has(id)) {
+        return Promise.resolve(cache.get(id)!);
+    }
+    return esiAxiosInstance.get<MarketType>(`/universe/types/${id}/`).then(r => {
+        cache.set(id, r.data);
+        return r.data;
+    });
+};
+
 export const getMarketType = async (type: string | number): Promise<MarketType> => (await getMarketTypes([type]))[0];
 export const getMarketTypes = async (types: (string | number)[]): Promise<MarketType[]> => {
     if (types.length === 0) {
         return [];
-    } else if (types.length === 1 && typeof types[0] === "number") {
-        return [];
     }
-    return []
+    const ids = types.filter((t): t is number => typeof t === 'number');
+    return Promise.all(ids.map(fetchType));
 }
 
-const blueprintMarketGrous = [ // TODO add all groups
+const blueprintMarketGroups = [ // TODO add all groups
     2,
     2157,
     2159,