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

ignorable columns

Browse Source
This commit is contained in:
Sirttas
2023-11-07 13:47:42 +01:00
parent ee6bbfd442
commit 088ea5d929
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/table/SortableHeader.vue
View File

@@ -4,23 +4,29 @@ import { SortDirection } from './sort';
interface Props {
currentSortKey: string | null;
sortDirection?: SortDirection | null;
showColumn?: (k: string) => boolean;
unsortable?: boolean;
sortKey: string;
}
interface Emit {
(e: 'sort', key: string, direction: SortDirection): void;
}
defineProps<Props>();
withDefaults(defineProps<Props>(), {
showColumn: () => () => true,
unsortable: false
});
const emit = defineEmits<Emit>();
</script>
<template>
<th>
<th v-if="showColumn(sortKey)">
<slot />
<span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
<span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
<template v-if="!unsortable">
<span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
<span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
</template>
</th>
</template>

8
src/components/table/sort.ts
View File

@@ -4,6 +4,7 @@ export type SortDirection = "asc" | "desc";
export type UseSortOptions = {
defaultSortKey?: string;
defaultSortDirection?: SortDirection;
ignoredColums?: MaybeRefOrGetter<string[]>;
};
export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
@@ -13,10 +14,11 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
sortKey.value = key;
sortDirection.value = direction;
};
const showColumn = (sortKey: string) => toValue(options?.ignoredColums)?.includes(sortKey) ?? true;
const headerProps = computed(() => ({
onSort: sortBy,
onSort: sortBy, showColumn,
currentSortKey: sortKey.value,
sortDirection: sortDirection.value,
sortDirection: sortDirection.value
}));
const sortedArray = computed(() => toValue(array).sort((a, b) => {
@@ -38,5 +40,5 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
}
}));
return { sortedArray, headerProps };
return { sortedArray, headerProps, showColumn };
}

35
src/market/scan/ScanResultTable.vue
View File

@@ -24,6 +24,7 @@ type Result = {
interface Props {
items?: ScanResult[];
infoOnly?: boolean;
ignoredColums?: string[];
}
interface Emits {
@@ -37,7 +38,8 @@ const scoreFormater = new Intl.NumberFormat("en-US", {
const props = withDefaults(defineProps<Props>(), {
items: () => [],
infoOnly: false
infoOnly: false,
ignoredColums: () => []
});
defineEmits<Emits>();
@@ -47,7 +49,13 @@ const days = useStorage('market-scan-days', 365);
const threshold = useStorage('market-scan-threshold', 10);
const filter = ref("");
const onlyCheap = ref(false);
const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
const columnsToIgnore = computed(() => {
if (props.infoOnly && !props.ignoredColums.includes('buttons')) {
return [...props.ignoredColums, 'buttons'];
}
return props.ignoredColums;
});
const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
.filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
.map(r => {
const quartils = getHistoryQuartils(r.history, days.value);
@@ -68,7 +76,8 @@ const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
};
}).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
defaultSortKey: 'score',
defaultSortDirection: 'desc'
defaultSortDirection: 'desc',
ignoredColums: columnsToIgnore
})
const getLineColor = (result: Result) => {
if (props.infoOnly) {
@@ -116,22 +125,22 @@ const getLineColor = (result: Result) => {
<SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
<SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
<th v-if="!infoOnly"></th>
<SortableHeader v-bind="headerProps" sortKey="buttons" unsortable></SortableHeader>
</tr>
</thead>
<tbody>
<tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
<td>
<td v-if="showColumn('name')">
<MarketTypeLabel :id="r.typeID" :name="r.name" />
</td>
<td class="text-right">{{ formatIsk(r.buy) }}</td>
<td class="text-right">{{ formatIsk(r.sell) }}</td>
<td class="text-right">{{ formatIsk(r.q1) }}</td>
<td class="text-right">{{ formatIsk(r.median) }}</td>
<td class="text-right">{{ formatIsk(r.q3) }}</td>
<td class="text-right">{{ percentFormater.format(r.profit) }}</td>
<td class="text-right">{{ scoreFormater.format(r.score) }}</td>
<td v-if="!infoOnly" class="text-right">
<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" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
<button class="btn-icon me-1" @click="$emit('remove', r.type)"><BookmarkSlashIcon /></button>
</td>