SearchForm integrated in TopicDetail

src/FormatDetail.svelte

@@ -1,8 +1,5 @@
 <script>
     import ItemCard from "./ItemCard.svelte"
-    
-    import VideoCard from "./VideoCard.svelte"
-    import SearchForm from "./SearchForm.svelte"
 
     export let format;
     export let alltopics;
@@ -15,8 +12,6 @@
         });
 </script>
 
-<SearchForm {alltopics}/>
-
 <div class="md:flex md:items-center md:justify-between mb-8">
     <div class="flex-1 min-w-0">
       <h2 class="text-2xl font-bold leading-7 text-gray-100 sm:text-3xl sm:truncate"> {format}</h2>

src/SearchForm.svelte

@@ -1,22 +1,24 @@
 <script>
   import ComboBox from "./tailwindui/ComboBox.svelte"
+  import { createEventDispatcher } from 'svelte';
+
   export let alltopics;
 
   let query = {
-    text: "some text",
-    topic: "algebra",
-    format: "book",
-    level: "beginner",
-    sortby: ""
+    text: "",
+    topic: "",
+    format: "",
+    level: "",
+    sortby: "rating"
   };
-  let results = [];
 
-  function handleSubmit(ev){
-    console.log({query})
-  }
+	const dispatch = createEventDispatcher();
+
+  $: dispatch('queryChanged', query);
+
 </script>
 
-<form class="w-full bg-gray-100 p-2 inline-flex" on:submit|preventDefault={handleSubmit}>
+<form class="w-full bg-gray-100 p-2 inline-flex" on:submit|preventDefault>
     <sl-input type="search" placeholder="Type something to search items by keywords" size="medium" clearable class="flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
@@ -41,10 +43,9 @@
 
     <sl-select class="ml-2 w-44" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
       <sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
-      <sl-menu-item value="">Sort by</sl-menu-item>
-      <sl-menu-item value="rating">Rating</sl-menu-item>
-      <sl-menu-item value="year">Year</sl-menu-item>
-      <sl-menu-item value="name">Name</sl-menu-item>
+      <sl-menu-item value="rating">Sort by Rating</sl-menu-item>
+      <sl-menu-item value="year">Sort by Year</sl-menu-item>
+      <sl-menu-item value="name">Sort by Name</sl-menu-item>
     </sl-select>
 </form>
 

src/TopicDetail.svelte

@@ -11,15 +11,42 @@
     export let alltopics;
 
     let items = [];
+    let filteredItems = [];
+
+    let query = {
+        text: "",
+        topic: "",
+        format: "",
+        level: "",
+        sortby: "rating"
+    };
 
     $: fetch(`/learn/items.json?_shape=array&topics__contains=${topicname}`)
         .then(r => r.json())
         .then(data => {
             items = data;
+            filteredItems = data;
         });  
+    
+    function handleQueryChanged(event){
+        console.log("queryChanged: ", event.detail);
+        query = event.detail;
+    }
+
+    $:  filteredItems = items.filter(item => {
+            if(query.text && !item.name.toLowerCase().includes(query.text.toLowerCase())){ return false; }
+            if(query.format && !item.links.includes(query.format)) { return false; }
+            if(query.level && item.difficulty != query.level){ return false; }
+            return true;
+        }).sort((a,b) => {
+            if(query.sortby == 'rating') { return (a.rating - b.rating) };
+            if(query.sortby == 'year') { return (a.year - b.year)};
+            if(query.sortby == 'name') { return a.name.localeCompare(b.name)};
+        });
+    
 </script>
 
-<SearchForm {alltopics}/>
+<SearchForm {alltopics} on:queryChanged={handleQueryChanged}/>
 
 <TopicMasonryGrid {topicname} {alltopics}/>
 
@@ -40,7 +67,7 @@
                 {#if format.id == 'book'}
                 <sl-tab-panel name="{format.id}">
                     <div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
-                        {#each items.filter(x => x.links.includes(format.id + '|')) as item}
+                        {#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
                         <BookCard {item}/>
                         {/each}
                     </div>
@@ -50,7 +77,7 @@
                 {:else if format.id == 'video'}
                 <sl-tab-panel name="{format.id}">
                     <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
-                        {#each items.filter(x => x.links.includes(format.id + '|')) as item}
+                        {#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
                         <VideoCard {item}/>
                         {/each}    
                     </div>     
@@ -59,7 +86,7 @@
                 {:else} 
                 <sl-tab-panel name="{format.id}">
                     <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
-                        {#each items.filter(x => x.links.includes(format.id + '|')) as item}
+                        {#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
                         <GenericCard {item}/>
                         {/each} 
                     </div>

src/TopicList.svelte

@@ -4,6 +4,4 @@
     import SearchForm from "./SearchForm.svelte"
 </script>
 
-<SearchForm {alltopics}/>
-
 <TopicMasonryGrid {alltopics}/>