From 03cc504ae9a700a80c5a4b306611c86048ba2928 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Thu, 22 Aug 2024 20:10:23 +0200
Subject: [PATCH] feat: Add filters, move categories on storage page

---
 messages/en.json                            | 16 +++++--
 messages/no.json                            | 16 +++++--
 src/app/[locale]/(default)/storage/page.tsx | 46 +++++++++++++++++----
 3 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index d562ae6..c2983e6 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -56,13 +56,21 @@
       "quantityInfo": "{quantity} units available",
       "locationInfo": "Location: {location}"
     },
-    "combobox": {
+    "dropdown": {
+      "filters": "Filters",
+      "buttonLabel": "Sort results",
       "popularity": "Popularity",
       "sortDescending": "Inventory (descending)",
       "sortAscending": "Inventory (ascending)",
-      "name": "Name (in alphabetical order)",
-      "defaultDescription": "Choose sorting...",
-      "defaultPlaceholder": "Search filters..."
+      "name": "Name (in alphabetical order)"
+    },
+    "combobox": {
+      "defaultDescription": "Choose category...",
+      "defaultPlaceholder": "Search category...",
+      "cables": "Cables",
+      "sensors": "Sensors",
+      "peripherals": "PC peripherals",
+      "miniPC": "Mini PC"
     }
   }
 }
diff --git a/messages/no.json b/messages/no.json
index bb475fd..2ad06f4 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -56,13 +56,21 @@
       "quantityInfo": "{quantity} stk. på lager",
       "locationInfo": "Hylleplass: {location}"
     },
-    "combobox": {
+    "dropdown": {
+      "filters": "Filtre",
+      "buttonLabel": "Sorter resultater",
       "popularity": "Popularitet",
       "sortDescending": "Lagerbeholdning (synkende)",
       "sortAscending": "Lagerbeholdning (stigende)",
-      "name": "Navn (alfabetisk)",
-      "defaultDescription": "Velg sortering...",
-      "defaultPlaceholder": "Søk etter filtere..."
+      "name": "Navn (alfabetisk)"
+    },
+    "combobox": {
+      "defaultDescription": "Velg kategori...",
+      "defaultPlaceholder": "Søk etter kategori...",
+      "cables": "Cables",
+      "sensors": "Sensors",
+      "peripherals": "PC peripherals",
+      "miniPC": "Mini PC"
     }
   }
 }
diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
index 9ea099b..bd65f4e 100644
--- a/src/app/[locale]/(default)/storage/page.tsx
+++ b/src/app/[locale]/(default)/storage/page.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
 
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
+import { Button } from '@/components/ui/Button';
 import {
   Card,
   CardContent,
@@ -14,6 +15,14 @@ import {
   CardTitle,
 } from '@/components/ui/Card';
 import { Combobox } from '@/components/ui/Combobox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
 import { SearchBar } from '@/components/ui/SearchBar';
 
 export async function generateMetadata({
@@ -49,27 +58,48 @@ export default function StoragePage({
 
   const categories = [
     {
-      value: 'popularity',
-      label: t('combobox.popularity'),
+      value: 'cables',
+      label: t('combobox.cables'),
     },
     {
-      value: 'sortDescending',
-      label: t('combobox.sortDescending'),
+      value: 'sensors',
+      label: t('combobox.sensors'),
     },
     {
-      value: 'sortAscending',
-      label: t('combobox.sortAscending'),
+      value: 'peripherals',
+      label: t('combobox.peripherals'),
     },
     {
-      value: 'name',
-      label: t('combobox.name'),
+      value: 'miniPC',
+      label: t('combobox.miniPC'),
     },
   ];
+
+  const filters = [
+    'dropdown.popularity',
+    'dropdown.sortDescending',
+    'dropdown.sortAscending',
+    'dropdown.name',
+  ] as const;
+
   return (
     <>
       <h1>{t('title')}</h1>
       <div className='my-4 flex justify-center gap-2'>
         <SearchBar className='max-w-2xl' />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>{t('dropdown.buttonLabel')}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>{t('dropdown.filters')}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {filters.map((filter) => (
+              <DropdownMenuItem key={filter}>{t(filter)}</DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
         <Combobox
           choices={categories}
           defaultDescription={t('combobox.defaultDescription')}