feat: Implement sorting options for links in dashboard

This commit is contained in:
MinerAle 2025-03-02 22:06:47 +01:00
parent 33c2631aa7
commit a0aa7c43bc

View file

@ -23,9 +23,9 @@ const displayedLinks = computed(() => {
case 'oldest': case 'oldest':
return sorted.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()) return sorted.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
case 'az': case 'az':
return sorted.sort((a, b) => (a.title || '').localeCompare(b.title || '')) return sorted.sort((a, b) => a.slug.localeCompare(b.slug))
case 'za': case 'za':
return sorted.sort((a, b) => (b.title || '').localeCompare(a.title || '')) return sorted.sort((a, b) => b.slug.localeCompare(a.slug))
default: default:
return sorted return sorted
} }
@ -81,11 +81,8 @@ function updateLinkList(link, type) {
<main class="space-y-6"> <main class="space-y-6">
<div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between"> <div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between">
<DashboardNav class="flex-1"> <DashboardNav class="flex-1">
<DashboardLinksEditor @update:link="updateLinkList" />
</DashboardNav>
<LazyDashboardLinksSearch />
</div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<DashboardLinksEditor @update:link="updateLinkList" />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
@ -93,8 +90,8 @@ function updateLinkList(link, type) {
Sort by: {{ Sort by: {{
sortBy === 'newest' ? 'Newest First' sortBy === 'newest' ? 'Newest First'
: sortBy === 'oldest' ? 'Oldest First' : sortBy === 'oldest' ? 'Oldest First'
: sortBy === 'az' ? 'A to Z' : sortBy === 'az' ? 'Slug A-Z'
: 'Z to A' : 'Slug Z-A'
}} }}
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -114,6 +111,9 @@ function updateLinkList(link, type) {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
</DashboardNav>
<LazyDashboardLinksSearch />
</div>
<section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<DashboardLinksLink <DashboardLinksLink
v-for="link in displayedLinks" v-for="link in displayedLinks"