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

reprocess virtual scroll

Browse Source
This commit is contained in:
Sirttas
2024-05-21 15:56:47 +02:00
parent 884412f5a9
commit 540d4814d9
2 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Modal.vue
View File

@@ -55,5 +55,4 @@ useEventListener('keyup', e => {
.fade-enter-active, .fade-leave-active {
@apply transition-opacity;
}
</style>

49
src/reprocess/ReprocessResultTable.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 { MarketTypeLabel } from '@/market/type';
import { useStorage } from '@vueuse/core';
@@ -46,24 +46,31 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
<input type="number" min="-100" max="100" step="1" v-model="threshold" />
</div>
</div>
<table>
<thead>
<tr>
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
</tr>
</thead>
<tbody>
<tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }">
<td>
<MarketTypeLabel :id="r.typeID" :name="r.name" />
</td>
<td class="text-right">{{ formatIsk(r.market) }}</td>
<td class="text-right">{{ formatIsk(r.materials) }}</td>
<td class="text-right">{{ percentFormater.format(r.ratio) }}</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="market">Market</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
</tr>
</thead>
<tbody>
<tr v-for="r in list" :key="r.data.typeID" :class="{'line-green': r.data.ratio >= threshold / 100 }">
<td>
<MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
</td>
<td class="text-right">{{ formatIsk(r.data.market) }}</td>
<td class="text-right">{{ formatIsk(r.data.materials) }}</td>
<td class="text-right">{{ percentFormater.format(r.data.ratio) }}</td>
</tr>
</tbody>
</template>
<template #empty>
<div class="text-center mt-4">
<span>No items found</span>
</div>
</template>
</VirtualScrollTable>
</template>