Sort addresses by balance

Author: GusevPM

pages/addresses.vue

@@ -75,13 +75,19 @@ await getAddressesCount()
 const page = ref(route.query.page ? parseInt(route.query.page) : 1)
 const pages = computed(() => Math.ceil(count.value / 20))
 
+const sort = reactive({
+	by: "spendable",
+	dir: "desc",
+})
+
 const getAddresses = async () => {
 	isRefetching.value = true
 
 	const { data } = await fetchAddresses({
 		limit: 20,
 		offset: (page.value - 1) * 20,
-		sort: "desc",
+		sort: sort.dir,
+		sort_by: sort.by,
 	})
 	addresses.value = data.value
 
@@ -104,6 +110,23 @@ watch(
 	},
 )
 
+const handleSort = (by) => {
+	switch (sort.dir) {
+		case "desc":
+			if (sort.by == by) sort.dir = "asc"
+			break
+
+		case "asc":
+			sort.dir = "desc"
+
+			break
+	}
+
+	sort.by = by
+
+	getAddresses()
+}
+
 const handlePrev = () => {
 	if (page.value === 1) return
 
@@ -167,7 +190,18 @@ const handleLast = async () => {
 						<thead>
 							<tr>
 								<th><Text size="12" weight="600" color="tertiary" noWrap>Hash</Text></th>
-								<th><Text size="12" weight="600" color="tertiary" noWrap>Balance</Text></th>
+								<th @click="handleSort('spendable')" :class="$style.sortable">
+									<Flex align="center" gap="6">
+										<Text size="12" weight="600" color="tertiary" noWrap>Balance</Text>
+										<Icon
+											v-if="sort.by === 'spendable'"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+								</th>
 								<th><Text size="12" weight="600" color="tertiary" noWrap>First Height</Text></th>
 								<th><Text size="12" weight="600" color="tertiary" noWrap>Last Height</Text></th>
 							</tr>

services/api/address.js

@@ -1,13 +1,14 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-export const fetchAddresses = async ({ limit, offset, sort }) => {
+export const fetchAddresses = async ({ limit, offset, sort, sort_by }) => {
 	try {
 		const url = new URL(`${useServerURL()}/address`)
 
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 		if (sort) url.searchParams.append("sort", sort)
+		if (sort_by) url.searchParams.append("sort_by", sort_by)
 
 		const data = await useFetch(url.href)
 		return data