From c817cc868144b90d1fa632512b153736b22c7bad Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Mon, 8 Jan 2024 06:47:30 +0200
Subject: [PATCH] Add catalog search, fix sorting

---
 src/lib/components/Catalog.svelte | 29 +++++++++++++++++++++++++----
 src/routes/+page.svelte           |  1 -
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte
index 5806af5..a3519f3 100644
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -1,17 +1,38 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
+  import { Button, Search } from 'flowbite-svelte';
   import CatalogItem from './CatalogItem.svelte';
   import Loader from './Loader.svelte';
+  import { GridOutline, SortOutline } from 'flowbite-svelte-icons';
+
+  $: sortedCatalog = $catalog
+    ?.sort((a, b) => a.manga[0].mokuroData.title.localeCompare(b.manga[0].mokuroData.title))
+    .filter((item) => {
+      return item.manga[0].mokuroData.title.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+    });
+
+  let search = '';
 </script>
 
 {#if $catalog}
   {#if $catalog.length > 0}
     <div class="flex flex-col gap-5">
-      <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
-        {#each $catalog as { id } (id)}
-          <CatalogItem {id} />
-        {/each}
+      <div class="flex gap-1 py-2">
+        <Search bind:value={search} />
+        <!-- <Button size="sm" color="alternative"><GridOutline /></Button>
+        <Button size="sm" color="alternative"><SortOutline /></Button> -->
       </div>
+      {#if search && sortedCatalog.length === 0}
+        <div class="text-center p-20">
+          <p>No results found.</p>
+        </div>
+      {:else}
+        <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
+          {#each sortedCatalog as { id } (id)}
+            <CatalogItem {id} />
+          {/each}
+        </div>
+      {/if}
     </div>
   {:else}
     <div class="text-center p-20">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9ca74ec..a282226 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Catalog from '$lib/components/Catalog.svelte';
-  import { createProfile, deleteProfile } from '$lib/settings';
 </script>
 
 <svelte:head>