Merge pull request #18 from samuelralak/problem-filter

Problem: Cannot filter the problem tracker

src/components/elements/Problem.svelte

@@ -34,6 +34,7 @@
     </p>{/if}
   <AddProblem parent={problem.UID} />
 </AccordionItem>
+
 {#if problem.Children}
   {#each problem.Children.entries() as [childProblem]}
     {#if $consensusTipState.Problems.get(childProblem)}

src/components/modals/AddProblem.svelte

@@ -183,7 +183,7 @@
 <Button size="small" icon={DataEnrichmentAdd}
   on:click={() => {
     formOpen = true;
-  }}>{#if parent.length == 64}Create a sub-Problem{:else}Log a New Problem Now{/if} </Button>
+  }}>{#if parent.length == 64}Create a sub-Problem{:else}New Problem Now{/if} </Button>
 
 <Modal
   bind:open={formOpen}

src/routes/problems/+page.svelte

@@ -1,22 +1,53 @@
 <script lang="ts">
-  import { Accordion } from "carbon-components-svelte";
-  import AddProblem from "../../components/modals/AddProblem.svelte";
-  import ProblemComponent from "../../components/elements/Problem.svelte";
-
-  import { consensusTipState } from "$lib/stores/nostrocket_state/master_state";
-  import { derived, type Readable } from "svelte/store";
-  import type { Problem } from "$lib/stores/nostrocket_state/types";
-//problem: cannot filter the problem tracker by content etc
-//problem: problems without titles are still being rendered becasue the ProblemComponent is pulling them from consensusTipState and our filtering is currently done in this if statement.
-//solutoin to both of these problems: create a new derived store here and pass it to the ProblemComponent so that we can filter based on user input. See https://github.com/pablof7z/vendata.io/ for examples
+    import {Accordion, Column, Row, TextInput} from "carbon-components-svelte";
+    import AddProblem from "../../components/modals/AddProblem.svelte";
+    import ProblemComponent from "../../components/elements/Problem.svelte";
+    import {consensusTipState} from "$lib/stores/nostrocket_state/master_state";
+    import {derived, writable} from "svelte/store";
+    //problem: cannot filter the problem tracker by content etc
+    //problem: problems without titles are still being rendered becasue the ProblemComponent is pulling them from consensusTipState and our filtering is currently done in this if statement.
+    //solutoin to both of these problems: create a new derived store here and pass it to the ProblemComponent so that we can filter based on user input. See https://github.com/pablof7z/vendata.io/ for examples
+
+    const queryInput = writable<string>('')
+    const problems = derived([consensusTipState, queryInput], ([$current, $queryInput]) => {
+        const filterQuery = $queryInput.toLowerCase()
+        const problemArray = [...($current.Problems)]
+
+        return new Map(problemArray.filter(([_, {Title, Summary, FullText}]) => {
+            const filterText = `${Title} ${Summary} ${FullText}`.toLowerCase()
+            return Boolean(Title) && filterText.indexOf(filterQuery) !== -1
+        }))
+    })
+
+    const handleQueryInput = (event) => $queryInput = event.detail
 </script>
 
-<h2>Problem Tracker</h2>
-<AddProblem />
+
+<Row>
+    <Column md={4} lg={14}>
+        <h2>Problem Tracker</h2>
+    </Column>
+    <Column>
+        <AddProblem/>
+    </Column>
+</Row>
+
+
+<Row padding>
+    <Column>
+        <TextInput placeholder="Search..."
+                   bind:value={$queryInput}
+                   on:input={handleQueryInput}
+        />
+    </Column>
+</Row>
+
 
 <Accordion>
-  {#each $consensusTipState.Problems as [id, problem]}
-    {#if (!problem.Parents && problem.Head && problem.Title)}<ProblemComponent {problem} depth={0} />{/if}
-  {/each}
+    {#each $problems as [id, problem]}
+        {#if (!problem.Parents && problem.Head && problem.Title)}
+            <ProblemComponent {problem} depth={0}/>
+        {/if}
+    {/each}
 </Accordion>