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 { .fade-enter-active, .fade-leave-active {
@apply transition-opacity; @apply transition-opacity;
} }
</style> </style>

23
src/reprocess/ReprocessResultTable.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { SortableHeader, useSort } from '@/components/table'; import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
import { formatIsk, percentFormater } from '@/formaters'; import { formatIsk, percentFormater } from '@/formaters';
import { MarketTypeLabel } from '@/market/type'; import { MarketTypeLabel } from '@/market/type';
import { useStorage } from '@vueuse/core'; import { useStorage } from '@vueuse/core';
@@ -46,7 +46,8 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
<input type="number" min="-100" max="100" step="1" v-model="threshold" /> <input type="number" min="-100" max="100" step="1" v-model="threshold" />
</div> </div>
</div> </div>
<table> <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
<template #default="{ list }">
<thead> <thead>
<tr> <tr>
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader> <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
@@ -56,14 +57,20 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }"> <tr v-for="r in list" :key="r.data.typeID" :class="{'line-green': r.data.ratio >= threshold / 100 }">
<td> <td>
<MarketTypeLabel :id="r.typeID" :name="r.name" /> <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
</td> </td>
<td class="text-right">{{ formatIsk(r.market) }}</td> <td class="text-right">{{ formatIsk(r.data.market) }}</td>
<td class="text-right">{{ formatIsk(r.materials) }}</td> <td class="text-right">{{ formatIsk(r.data.materials) }}</td>
<td class="text-right">{{ percentFormater.format(r.ratio) }}</td> <td class="text-right">{{ percentFormater.format(r.data.ratio) }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </template>
<template #empty>
<div class="text-center mt-4">
<span>No items found</span>
</div>
</template>
</VirtualScrollTable>
</template> </template>