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
src/market/tracking/TrackingResultTable.vue
+44 -36
View File
@@ -1,12 +1,13 @@
<script setup lang="ts">
import { SliderCheckbox } from '@/components';
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 { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
import { useStorage } from '@vueuse/core';
import { computed, ref } from 'vue';
import { TrackingResult, getHistoryQuartils } from '.';
import { getHistoryQuartils } from './HistoryQuartils';
import { TrackingResult } from './tracking';
type Result = {
type: MarketType;
@@ -112,43 +113,50 @@ const getLineColor = (result: Result) => {
</div>
<div class="end">
<span>Filter: </span>
<input type="search" class="w-96" v-model="filter" >
<input type="search" class="w-96" v-model="filter" />
</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="q1">Q1</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
</tr>
</thead>
<tbody>
<tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
<td v-if="showColumn('name')">
<MarketTypeLabel :id="r.typeID" :name="r.name" />
</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('q1')" class="text-right">{{ formatIsk(r.q1) }}</td>
<td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.median) }}</td>
<td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.q3) }}</td>
<td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.profit) }}</td>
<td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.score) }}</td>
<td v-if="showColumn('buttons')" class="text-right">
<button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
<button class="btn-icon me-1" title="Untrack" @click="$emit('remove', r.type)"><BookmarkSlashIcon /></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="q1">Q1</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
</tr>
</thead>
<tbody>
<tr v-for="r in list" :key="r.data.typeID" :class="getLineColor(r.data)">
<td v-if="showColumn('name')">
<MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
</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('q1')" class="text-right">{{ formatIsk(r.data.q1) }}</td>
<td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.data.median) }}</td>
<td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</td>
<td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.data.profit) }}</td>
<td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.data.score) }}</td>
<td v-if="showColumn('buttons')" class="text-right">
<button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.data.type, r.data.buy, r.data.sell)"><ShoppingCartIcon /></button>
<button class="btn-icon me-1" title="Untrack" @click="$emit('remove', r.data.type)"><BookmarkSlashIcon /></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">