diff --git a/components/StoreView.vue b/components/StoreView.vue index ea9bdaa7..ae2702a9 100644 --- a/components/StoreView.vue +++ b/components/StoreView.vue @@ -176,9 +176,12 @@ active ? 'bg-zinc-900 outline-hidden' : '', 'w-full text-left block px-4 py-2 text-sm', ]" - @click="() => (currentSort = option.param)" + @click.prevent="handleSortClick(option, $event)" > {{ option.name }} + + {{ sortOrder === 'asc' ? '↑' : '↓' }} + @@ -389,8 +392,13 @@ const sorts: Array = [ name: "Recently Added", param: "recent", }, + { + name: "Name", + param: "name", + }, ]; const currentSort = ref(sorts[0].param); +const sortOrder = ref<"asc" | "desc">("desc"); const options: Array = [ ...(tags.length > 0 @@ -466,7 +474,7 @@ async function updateGames(query: string, resetGames: boolean) { results: Array>; count: number; }>( - `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}${query ? "&" + query : ""}`, + `/api/v1/store?take=50&skip=${resetGames ? 0 : games.value?.length || 0}&sort=${currentSort.value}&order=${sortOrder.value}${query ? "&" + query : ""}`, ); if (resetGames) { games.value = newValues.results; @@ -483,6 +491,20 @@ watch(filterQuery, (newUrl) => { watch(currentSort, (_) => { updateGames(filterQuery.value, true); }); +watch(sortOrder, (_) => { + updateGames(filterQuery.value, true); +}); await updateGames(filterQuery.value, true); - + +function handleSortClick(option: StoreSortOption, event: MouseEvent) { + event.stopPropagation(); + if (currentSort.value === option.param) { + sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'; + } else { + currentSort.value = option.param; + sortOrder.value = option.param === 'name' ? 'asc' : 'desc'; + } +} + + \ No newline at end of file diff --git a/server/api/v1/store/index.get.ts b/server/api/v1/store/index.get.ts index 9a61e676..377913d1 100644 --- a/server/api/v1/store/index.get.ts +++ b/server/api/v1/store/index.get.ts @@ -18,7 +18,8 @@ const StoreRead = type({ company: "string?", companyActions: "string = 'published,developed'", - sort: "'default' | 'newest' | 'recent' = 'default'", + sort: "'default' | 'newest' | 'recent' | 'name' = 'default'", + order: "'asc' | 'desc' = 'desc'", }); export default defineEventHandler(async (h3) => { @@ -101,10 +102,13 @@ export default defineEventHandler(async (h3) => { switch (options.sort) { case "default": case "newest": - sort.mReleased = "desc"; + sort.mReleased = options.order; break; case "recent": - sort.created = "desc"; + sort.created = options.order; + break; + case "name": + sort.mName = options.order; break; } @@ -119,4 +123,4 @@ export default defineEventHandler(async (h3) => { ]); return { results, count }; -}); +}); \ No newline at end of file