src/market/acquisition/AcquisitionsPanel.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {getMarketTypes, MarketTypePrice, useAppraisalStore} from "@/market";
 import {ref, watch} from 'vue';
+import {ArrowPathIcon} from '@heroicons/vue/24/outline';
+import {useAutoRefresh} from '@/composables';
 import {AcquiredType} from './AcquiredType';
 import {RawAcquiredType} from './acquisition';
 import AcquisitionResultTable from './AcquisitionResultTable.vue';
@@ -44,10 +46,18 @@ const refresh = async (itms: RawAcquiredType[] = props.items) => {
 
 watch(() => props.items, refresh, {immediate: true});
 
-defineExpose({refresh});
+const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(() => refresh(), 5 * 60 * 1000);
 </script>
 
 <template>
+    <div class="flex">
+        <div class="ms-auto flex">
+            <button class="rounded-e-none" @click="refresh()">Refresh</button>
+            <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
+                <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
+            </button>
+        </div>
+    </div>
     <template v-if="enriched.length > 0">
         <AcquisitionResultTable :items="enriched" :ignoredColumns="ignoredColumns" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell }, props.ledgerId)" @sell="types => sellModal?.open(types, props.ledgerId)" />
         <BuyModal ref="buyModal" />

src/pages/ledger/ViewLedgerAcquisitions.vue

@@ -21,4 +21,4 @@ const items = useProcessedResource<RawAcquiredType[]>(async () => {
     <div class="mt-4">
         <AcquisitionsPanel :items="items" :ledgerId="ledgerId" :ignoredColumns="['date', 'ledger']" />
     </div>
-</template>
+</template>

src/pages/market/Acquisitions.vue

@@ -1,29 +1,11 @@
 <script setup lang="ts">
 import {AcquisitionsPanel, useAcquiredTypesStore} from '@/market/acquisition';
-import {ArrowPathIcon} from '@heroicons/vue/24/outline';
-import {useAutoRefresh} from '@/composables';
-import {ref} from 'vue';
 
 const acquiredTypesStore = useAcquiredTypesStore();
-const panel = ref<InstanceType<typeof AcquisitionsPanel>>();
-
-const refresh = async () => {
-  await panel.value?.refresh();
-}
-
-const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(refresh, 5 * 60 * 1000);
 </script>
 
 <template>
     <div class="mt-4">
-        <div class="flex">
+        <AcquisitionsPanel :items="acquiredTypesStore.acquiredTypes" ignoredColumns="date" />
-            <div class="ms-auto flex">
-                <button class="rounded-e-none" @click="refresh">Refresh</button>
-                <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
-                    <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
-                </button>
-            </div>
-        </div>
-        <AcquisitionsPanel ref="panel" :items="acquiredTypesStore.acquiredTypes" ignoredColumns="date" />
     </div>
-</template>
+</template>