Merge pull request #119 from MineraleYT/dev

Feat: add sort functionality for links

components/dashboard/links/Index.vue

@@ -1,12 +1,35 @@
 <script setup>
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#components'
 import { useInfiniteScroll } from '@vueuse/core'
-import { Loader } from 'lucide-vue-next'
+import { ArrowUpDown, Loader } from 'lucide-vue-next'
 
 const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
 let listError = false
+const sortBy = ref('newest')
+
+const displayedLinks = computed(() => {
+  const sorted = [...links.value]
+  switch (sortBy.value) {
+    case 'newest':
+      return sorted.sort((a, b) => b.createdAt - a.createdAt)
+    case 'oldest':
+      return sorted.sort((a, b) => a.createdAt - b.createdAt)
+    case 'az':
+      return sorted.sort((a, b) => a.slug.localeCompare(b.slug))
+    case 'za':
+      return sorted.sort((a, b) => b.slug.localeCompare(a.slug))
+    default:
+      return sorted
+  }
+})
 
 async function getLinks() {
   try {
@@ -58,13 +81,42 @@ function updateLinkList(link, type) {
   <main class="space-y-6">
     <div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between">
       <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>
       <LazyDashboardLinksSearch />
     </div>
     <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <DashboardLinksLink
-        v-for="link in links"
+        v-for="link in displayedLinks"
         :key="link.id"
         :link="link"
         @update:link="updateLinkList"