sort

src/reprocess/ReprocessResultTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatIsk, percentFormater } from '@/formaters';
+import { SortableHeader, useSort } from '@/table';
 import { useStorage } from '@vueuse/core';
 import { computed } from 'vue';
 import BuySellSlider from './BuySellSlider.vue';
@@ -16,12 +17,15 @@ const props = withDefaults(defineProps<Props>(), {
 const threshold = useStorage('reprocess-threshold', 0);
 const useSellOrder = useStorage('reprocess-use-sell-order', false);
 
-const computedResult = computed(() => {
+const { sortedArray, headerProps } = useSort(computed(() => {
     return props.result.map(r =>({
         ...r,
         buy_ratio: r.buy === 0 ? 1 : (r.buy_reprocess / r.buy) - 1,
         sell_ratio: r.sell === 0 ? 1 : (r.sell_reprocess / r.sell) - 1
-    })).sort((a, b) => a.name.localeCompare(b.name))
+    }))
+}), {
+    defaultSortKey: 'name',
+    defaultSortDirection: 'asc'
 })
 
 const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
@@ -40,14 +44,14 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
     <table>
         <thead>
             <tr>
-                <th>Item</th>
-                <th>Market</th>
-                <th>Reprocess</th>
-                <th>Percent</th>
+                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell' : 'buy'">Market</SortableHeader>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_reprocess' : 'buy_reprocess'">Reprocess</SortableHeader>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_ratio' : 'buy_ratio'">Percent</SortableHeader>
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
+            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
                 <td>{{ r.name }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>

src/table/SortableHeader.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { SortDirection } from './sort';
+
+interface Props {
+    currentSortKey: string | null;
+    sortDirection?: SortDirection | null;
+    sortKey: string;
+}
+interface Emit {
+    (e: 'sort', key: string, direction: SortDirection): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emit>();
+
+</script>
+
+<template>
+    <th>
+        <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
+        <slot />
+        <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
+    </th>
+</template>
+
+<style scoped>
+th {
+    @apply relative h-8;
+}
+span.asc, span.desc {
+    @apply absolute end-2 cursor-pointer text-xs;
+}
+span.asc {
+    @apply top-0.5;
+}
+span.desc {
+    @apply bottom-0.5;
+}
+</style>

src/table/index.ts

@@ -0,0 +1,3 @@
+export { default as SortableHeader } from './SortableHeader.vue';
+export * from './sort';
+

src/table/sort.ts

@@ -0,0 +1,42 @@
+import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+
+export type SortDirection = "asc" | "desc";
+export type UseSortOptions = {
+    defaultSortKey?: string;
+    defaultSortDirection?: SortDirection;
+};
+
+export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
+    const sortKey = ref<string | null>(options?.defaultSortKey ?? null);
+    const sortDirection = ref<SortDirection | null>(options?.defaultSortDirection ?? null);
+    const sortBy = (key: string, direction: SortDirection) => {
+        sortKey.value = key;
+        sortDirection.value = direction;
+    };
+    const headerProps = computed(() => ({
+        onSort: sortBy,
+        currentSortKey: sortKey.value,
+        sortDirection: sortDirection.value,
+    }));
+
+    const sortedArray = computed(() => toValue(array).sort((a, b) => {
+        if (sortKey.value === null || sortDirection.value === null) {
+            return 0;
+        }
+
+        const aValue = (a as any)[sortKey.value];
+        const bValue = (b as any)[sortKey.value];
+
+        if (aValue === bValue) {
+            return 0;
+        }
+
+        if (sortDirection.value === "asc") {
+            return aValue > bValue ? 1 : -1;
+        } else {
+            return aValue > bValue ? -1 : 1;
+        }
+    }));
+
+    return { sortedArray, headerProps };
+}