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

Compare commits

base: eveal:4814d24efbe774d4ef5223d15f82e9bf59a75083
Branches Tags
eveal:main eveal:feature/preferences
...
compare: eveal:540d4814d9073428a70ad05483daab3b392f8a39
Branches Tags
eveal:main eveal:feature/preferences

2 Commits
4814d24efb ... 540d4814d9

Author SHA1 Message Date
Sirttas
540d4814d9 reprocess virtual scroll 2024-05-21 15:56:47 +02:00
Sirttas
884412f5a9 cleanup css 2024-05-21 15:54:20 +02:00
2 changed files with 29 additions and 24 deletions
Expand all files Collapse all files

4
src/components/Modal.vue
View File

@@ -48,13 +48,11 @@ useEventListener('keyup', e => {
</template>
<style scoped lang="postcss">
.fade-enter-from, .fade-leave-to {
opacity: 0;
@apply opacity-0;
}
.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>