Search resources

src/lib/components/Search.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+    let searchTerm = '';
+
+    const dispatch = createEventDispatcher();
+
+    function onSubmit(){
+        dispatch("search", {searchTerm})
+    }
+
+</script>
+
+<form on:submit|preventDefault={onSubmit} class="p-4 space-y-4">
+	<label for="search" />
+	<input
+		type="text"
+		bind:value={searchTerm}
+		placeholder="Search by keyword"
+		id="search"
+		name="search"
+		class="p-2 rounded-lg border-2 border-green-500 dark:border-green-700 text-green-700 dark:text-green-500"
+	/>
+	<button
+		type="submit"
+		class="p-2 rounded-lg bg-green-700 text-white dark:bg-green-900/75"
+	>
+		Search
+	</button>
+</form>

src/routes/resources/+page.svelte

@@ -2,8 +2,10 @@
   import type { PageData } from "./$types";
   import { onMount } from "svelte";
   import { DEFAULT_DISPLAY_LIMIT } from "$lib/constants";
-  import type { Tag, FilterOption, FilterLogic } from "$lib/interfaces";
+  import type { Tag, FilterOption, FilterLogic, Resource } from "$lib/interfaces";
   import { setIntersection } from "$lib/utils";
+  import Collapsible from "$lib/components/Collapsible.svelte";
+  import Search from "lib//components/Search.svelte";
   import ListItem from "./ListItem.svelte";
   import ResourceNav from "$lib/components/ResourceNav.svelte";
   import ScrollTopButton from "$lib/components/ScrollTopButton.svelte";
@@ -14,7 +16,12 @@
   $: displayedResourceLimit
   let resources = data.payload.resources;
   let displayedResources = resources;
-  let tagLogicAnd: boolean = true;
+  let searchResults: Resource[];
+  let filterByTags: Resource[];
+  let tagLogicAnd: boolean = true; // Whether all the selected tags must match the resource (vs any of the selected tags)
+  // TODO: make this a user preference
+  $: tagLogic = tagLogicAnd ? "and" : "or";
+
   let tags: Tag[] = data.payload.tags;
   let tags_count = data.payload.tags_count;
 
@@ -30,8 +37,28 @@
     filterObject.push(tagOption)
   }
 
+  function filterBySearchInput(event: CustomEvent<{searchTerm: string}>) {
+    const { searchTerm } = event.detail;
+    // check if filterByTags has at least 1 item
+    // var for resources or filter
+    let resourcesOrFilter = resources;
+
+    if (filterByTags ){
+      resourcesOrFilter = filterByTags;
+    }
+
+    // console.log("filterBySearchInput:", searchTerm)
+    let searchResults = resourcesOrFilter.filter(({description, title}) => {
+     return  description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      title.toLowerCase().includes(searchTerm.toLowerCase());
+    } )
+
+    displayedResources = searchResults;
+  }
+
   const filterResources = (event: CustomEvent<{filterOptions: FilterOption[], filterLogic: FilterLogic}>) => {
     const {filterOptions, filterLogic} = event.detail
+
     // Reset displayed resources
     displayedResources = [];
 
@@ -55,21 +82,29 @@
       }
     }
 
+    // search to rely on displayedResources
+    filterByTags = displayedResources;
+
     // Force svelte re-render
     displayedResources = displayedResources;
   }
 
+  // Update the displayedResourceLimit based on the scroll position
   const updateLimit = (event: CustomEvent<{displayLimit: number}>) => {
     const {displayLimit} = event.detail
     displayedResourceLimit = displayLimit
   }
+
+  let mainH1El: HTMLHeadingElement | null;
+
 </script>
 
 <h1>Resources</h1>
 <div class="py-1 dark:text-zinc-200">
   <p class="italic">{resources.length} resources and counting!!</p>
 </div>
 <ResourceNav />
+<Search on:search={filterBySearchInput}></Search>
 <FilterForm filterOptions={filterObject} filterLogicAnd={tagLogicAnd} on:filter={filterResources} />
 
 <ol

yarn.lock

@@ -21,10 +21,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@esbuild/linux[email protected]":
+"@esbuild/darwin[email protected]":
   version "0.18.15"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.15.tgz"
-  integrity sha512-MsHtX0NgvRHsoOtYkuxyk4Vkmvk3PLRWfA4okK7c+6dT0Fu4SUqXAr9y4Q3d8vUf1VWWb6YutpL4XNe400iQ1g==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.15.tgz"
+  integrity sha512-bMqBmpw1e//7Fh5GLetSZaeo9zSC4/CMtrVFdj+bqKPGJuKyfNJ5Nf2m3LknKZTS+Q4oyPiON+v3eaJ59sLB5A==
 
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
@@ -643,6 +643,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"