eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

virtual scroll table

Browse Source
This commit is contained in:
Sirttas
2024-05-21 13:29:09 +02:00
parent b81282b42e
commit 7a7dba010e
4 changed files with 154 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/market/acquisition/AcquisitionResultTable.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { SortableHeader, useSort } from '@/components/table';
import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
import { formatIsk, percentFormater } from '@/formaters';
import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
@@ -137,40 +137,47 @@ const getLineColor = (result: Result) => {
</div>
</div>
</div>
<table>
<thead>
<tr>
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="remaining">Remaining Amount</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
</tr>
</thead>
<tbody>
<tr v-for="r in sortedArray" :key="r.id" :class="getLineColor(r)">
<td v-if="showColumn('name')">
<div class="flex">
<MarketTypeLabel :id="r.type.id" :name="r.name" />
<AcquisitionQuantilsTooltip :id="r.type.id" :buy="r.buy" :sell="r.sell" />
</div>
</td>
<td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.buy) }}</td>
<td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.sell) }}</td>
<td v-if="showColumn('price')" class="text-right">{{ formatIsk(r.price) }}</td>
<td v-if="showColumn('remaining')" class="text-right">{{ r.remaining }}/{{ r.quantity }}</td>
<td v-if="showColumn('precentProfit')" class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
<td v-if="showColumn('iskProfit')" class="text-right">{{ formatIsk(r.iskProfit) }}</td>
<td v-if="showColumn('buttons')" class="text-right">
<button class="btn-icon me-1" @click="$emit('buy', r.acquisitions, r.price, r.buy, r.sell)"><PlusIcon /></button>
<button class="btn-icon me-1" @click="$emit('sell', r.acquisitions)"><MinusIcon /></button>
</td>
</tr>
</tbody>
</table>
<VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
<template #default="{ list }">
<thead>
<tr>
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="remaining">Remaining Amount</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
</tr>
</thead>
<tbody>
<tr v-for="r in list" :key="r.data.id" :class="getLineColor(r.data)">
<td v-if="showColumn('name')">
<div class="flex">
<MarketTypeLabel :id="r.data.type.id" :name="r.data.name" />
<AcquisitionQuantilsTooltip :id="r.data.type.id" :buy="r.data.buy" :sell="r.data.sell" />
</div>
</td>
<td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
<td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>
<td v-if="showColumn('price')" class="text-right">{{ formatIsk(r.data.price) }}</td>
<td v-if="showColumn('remaining')" class="text-right">{{ r.data.remaining }}/{{ r.data.quantity }}</td>
<td v-if="showColumn('precentProfit')" class="text-right">{{ percentFormater.format(r.data.precentProfit) }}</td>
<td v-if="showColumn('iskProfit')" class="text-right">{{ formatIsk(r.data.iskProfit) }}</td>
<td v-if="showColumn('buttons')" class="text-right">
<button class="btn-icon me-1" @click="$emit('buy', r.data.acquisitions, r.data.price, r.data.buy, r.data.sell)"><PlusIcon /></button>
<button class="btn-icon me-1" @click="$emit('sell', r.data.acquisitions)"><MinusIcon /></button>
</td>
</tr>
</tbody>
</template>
<template #empty>
<div class="text-center mt-4">
<span>No items found</span>
</div>
</template>
</VirtualScrollTable>
</template>
<style scoped lang="postcss">