danvics/Sink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implement sorting options for links in dashboard

Browse source
This commit is contained in:
MinerAle 2025-03-02 22:06:47 +01:00
parent 33c2631aa7
commit a0aa7c43bc
1 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
components/dashboard/links/Index.vue
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,39 +81,39 @@ 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" /> <div class="flex items-center gap-2">
<DashboardLinksEditor @update:link="updateLinkList" />
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" size="sm">
<ArrowUpDown class="mr-2 h-4 w-4" />
Sort by: {{
sortBy === 'newest' ? 'Newest First'
: sortBy === 'oldest' ? 'Oldest First'
: sortBy === 'az' ? 'Slug A-Z'
: 'Slug Z-A'
}}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="sortBy = 'newest'">
Newest First
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'oldest'">
Oldest First
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'az'">
A to Z
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'za'">
Z to A
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</DashboardNav> </DashboardNav>
<LazyDashboardLinksSearch /> <LazyDashboardLinksSearch />
</div> </div>
<div class="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" size="sm">
<ArrowUpDown class="mr-2 h-4 w-4" />
Sort by: {{
sortBy === 'newest' ? 'Newest First'
: sortBy === 'oldest' ? 'Oldest First'
: sortBy === 'az' ? 'A to Z'
: 'Z to A'
}}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="sortBy = 'newest'">
Newest First
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'oldest'">
Oldest First
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'az'">
A to Z
</DropdownMenuItem>
<DropdownMenuItem @click="sortBy = 'za'">
Z to A
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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"