ledger balance

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -75,7 +75,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .tooltip {
     @apply ms-auto;

src/market/acquisition/AcquisitionResultTable.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatEveDate, formatIsk, percentFormater } from '@/formaters';
-import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { AcquiredType } from './AcquiredType';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {MinusIcon, PlusIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {AcquiredType} from './AcquiredType';
 import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
 
 type Result = {
@@ -246,7 +245,7 @@ const total = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tax/TaxInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useMarketTaxStore } from "./tax";
+import {storeToRefs} from "pinia";
+import {useMarketTaxStore} from "./tax";
 
 const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 
@@ -18,7 +18,7 @@ const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/tracking/TrackingResultTable.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { SliderCheckbox } from '@/components';
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
-import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { useAcquiredTypesStore } from '../acquisition';
-import { TrackingResult } from './tracking';
+import {SliderCheckbox} from '@/components';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {BookmarkSlashIcon, ShoppingCartIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useAcquiredTypesStore} from '../acquisition';
+import {TrackingResult} from './tracking';
 
 type Result = {
     type: MarketType;
@@ -168,7 +167,7 @@ const getLineColor = (result: Result) => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }

src/market/type/MarketTypeInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList } from '@vueuse/core';
+import {vOnClickOutside} from '@vueuse/components';
+import {useVirtualList} from '@vueuse/core';
 import log from 'loglevel';
-import { nextTick, ref, watch, watchEffect } from 'vue';
-import { MarketType, searchMarketTypes } from './MarketType';
+import {nextTick, ref, watch, watchEffect} from 'vue';
+import {MarketType, searchMarketTypes} from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
 interface Emits {
@@ -105,7 +105,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fake-input {
     @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 

src/market/type/MarketTypeLabel.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { InformationCircleIcon } from '@heroicons/vue/24/outline';
-import { routeNames } from '@/routes';
+import {ClipboardButton} from '@/components';
+import {InformationCircleIcon} from '@heroicons/vue/24/outline';
+import {routeNames} from '@/routes';
+import {computedAsync} from "@vueuse/core";
+import {getMarketType} from "@/market";
 
 
 interface Props {
@@ -10,29 +12,39 @@ interface Props {
     hideCopy?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     name: "",
     id: 0,
     hideCopy: false
 });
+
+const computedName = computedAsync<string>(async () => {
+  if (props.name) {
+    return props.name;
+  } else if (props.id) {
+    return await getMarketType(props.id).then(marketType => marketType.name);
+  }
+  return "";
+}, "");
 </script>
 
 <template>
-    <div v-if="id || name" class="flex flex-row">
+    <div v-if="id || computedName" class="flex flex-row">
         <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1 mt-1" alt="" />
-        <template v-if="name">
-            {{ name }}
-            <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="button btn-icon ms-1 me-1 mt-1" title="Show item info">
+        <template v-if="computedName">
+          {{ computedName }}
+          <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="btn-icon ms-1 me-1 mt-1" title="Show item info">
                 <InformationCircleIcon  />
             </RouterLink>
-            <ClipboardButton v-if="!hideCopy" :value="name" />
+            <ClipboardButton v-if="!hideCopy" :value="computedName" />
         </template>
     </div>
 </template>
 
 <style scoped>
-@reference "tailwindcss";
-button:deep(>svg), .button:deep(>svg) {
+@reference "@/style.css";
+
+button:deep(>svg), .btn-icon:deep(>svg) {
     @apply !w-4 !h-4;
 }
 </style>