From b50e27f4b09a8dcdbf3690a2c827f069efd9d602 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 17 Dec 2024 20:42:12 +1100
Subject: [PATCH] feat(library admin): client side search

---
 pages/admin/library/index.vue     | 44 +++++++++++++++++++++++++++++--
 pages/store/index.vue             |  2 ++
 server/api/v1/store/developers.ts | 20 ++++++++++++++
 server/api/v1/store/publishers.ts | 20 ++++++++++++++
 4 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 server/api/v1/store/developers.ts
 create mode 100644 server/api/v1/store/publishers.ts

diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index 05bae11..d37fe28 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -41,12 +41,26 @@
         </div>
       </div>
     </div>
+    <div class="mt-2 grid grid-cols-1">
+      <input
+        type="text"
+        name="search"
+        id="search"
+        class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
+        placeholder="Search library..."
+        v-model="searchQuery"
+      />
+      <MagnifyingGlassIcon
+        class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
+        aria-hidden="true"
+      />
+    </div>
     <ul
       role="list"
       class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
     >
       <li
-        v-for="game in libraryNotifications"
+        v-for="game in filteredLibraryGames"
         :key="game.id"
         class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
       >
@@ -127,6 +141,18 @@
           </div>
         </div>
       </li>
+      <p
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+        v-if="filteredLibraryGames.length == 0 && libraryGames.length != 0"
+      >
+        No results
+      </p>
+      <p
+        class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
+        v-if="filteredLibraryGames.length == 0 && libraryGames.length == 0"
+      >
+        No games imported
+      </p>
     </ul>
   </div>
 </template>
@@ -134,6 +160,7 @@
 <script setup lang="ts">
 import { ExclamationTriangleIcon } from "@heroicons/vue/16/solid";
 import { InformationCircleIcon } from "@heroicons/vue/20/solid";
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 definePageMeta({
   layout: "admin",
 });
@@ -142,9 +169,11 @@ useHead({
   title: "Libraries",
 });
 
+const searchQuery = ref("");
+
 const headers = useRequestHeaders(["cookie"]);
 const libraryState = await $fetch("/api/v1/admin/library", { headers });
-const libraryNotifications = libraryState.games.map((e) => {
+const libraryGames = libraryState.games.map((e) => {
   const noVersions = e.status.noVersions;
   const toImport = e.status.unimportedVersions.length > 0;
 
@@ -157,4 +186,15 @@ const libraryNotifications = libraryState.games.map((e) => {
     hasNotifications: noVersions || toImport,
   };
 });
+
+const filteredLibraryGames = computed(() =>
+  libraryGames.filter((e) => {
+    if (!searchQuery.value) return true;
+    const searchQueryLower = searchQuery.value.toLowerCase();
+    if (e.mName.toLowerCase().includes(searchQueryLower)) return true;
+    if (e.mShortDescription.toLowerCase().includes(searchQueryLower))
+      return true;
+    return false;
+  })
+);
 </script>
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 33d6167..ef1ee03 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -109,6 +109,8 @@ const updated = await $fetch("/api/v1/store/updated", { headers });
 const released = await $fetch("/api/v1/store/released", {
   headers,
 });
+const developers = await $fetch("/api/v1/store/developers", { headers });
+const publishers = await $fetch("/api/v1/store/publishers", { headers });
 
 useHead({
   title: "Store",
diff --git a/server/api/v1/store/developers.ts b/server/api/v1/store/developers.ts
new file mode 100644
index 0000000..a47f846
--- /dev/null
+++ b/server/api/v1/store/developers.ts
@@ -0,0 +1,20 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await h3.context.session.getUserId(h3);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const developers = await prisma.developer.findMany({
+    include: {
+      games: true,
+    },
+    orderBy: {
+      games: {
+        _count: "desc",
+      },
+    },
+    take: 3,
+  });
+
+  return developers;
+});
diff --git a/server/api/v1/store/publishers.ts b/server/api/v1/store/publishers.ts
new file mode 100644
index 0000000..8587336
--- /dev/null
+++ b/server/api/v1/store/publishers.ts
@@ -0,0 +1,20 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await h3.context.session.getUserId(h3);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const publishers = await prisma.publisher.findMany({
+    include: {
+      games: true,
+    },
+    orderBy: {
+      games: {
+        _count: "desc",
+      },
+    },
+    take: 4,
+  });
+
+  return publishers;
+});