Search in Events/Jobs

- SearchBar now dispatches 'jobsearch' or 'eventsearch' event whenever the user submits a search query
- Jobs/Events will then receive searchText to do general search
- Fixed bug where Jobs/Events wouldn't scroll anymore

src/components/SearchBar.js

@@ -5,47 +5,79 @@ css(`
 `)
 
 class SearchBar extends Shadow {
-  render() {
-    HStack(() => {
-      input("Search", "80%")
-        .attr({
-          "type": "text"
-        })
-        .paddingVertical(0.75, em)
-        .boxSizing("border-box")
-        .paddingHorizontal(1, em)
-        .background("var(--searchbackground)")
-        .color("gray")
-        .marginBottom(1, em)
-        .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
-        .borderRadius(100, px)
-        .fontFamily("Arial")
-        .fontSize(1, em)
-        .outline("none")
-        .cursor("not-allowed")
-        .onTouch(function (start) {
-            if(start) {
-                this.style.backgroundColor = "var(--accent)"
-            } else {
-                this.style.backgroundColor = "var(--searchbackground)"
-            }
-        })
+  constructor(searchText) {
+    super()
+    this.searchText = searchText
+  }
 
-      p("+")
-        .fontWeight("bolder")
-        .paddingVertical(0.75, em)
-        .boxSizing("border-box")
-        .paddingHorizontal(1, em)
-        .background("var(--searchbackground)")
-        .color("var(--accent)")
-        .marginBottom(1, em)
-        .border("1px solid var(--accent)")
-        .borderRadius(15, px)
-    })
+
+  render() {
+    form(() => {
+      HStack(() => {
+        input("Search", "80%")
+          .attr({ name: "searchText", type: "text" })
+          .attr({ value: this.searchText ? this.searchText : "" })
+          .paddingVertical(0.75, em)
+          .boxSizing("border-box")
+          .paddingHorizontal(1, em)
+          .background("var(--searchbackground)")
+          .color("gray")
+          .marginBottom(1, em)
+          .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
+          .borderRadius(100, px)
+          .fontFamily("Arial")
+          .fontSize(1, em)
+          .outline("none")
+          .cursor("not-allowed")
+          .onTouch(function (start) {
+            if (start) {
+              this.style.backgroundColor = "var(--accent)"
+            } else {
+              this.style.backgroundColor = "var(--searchbackground)"
+            }
+          })
+          // .onInput(async (e) => {
+          //   e.preventDefault();
+          //   console.log("helloooo submitted")
+          // }) // can be used for live updating
+
+        p("+")
+          .fontWeight("bolder")
+          .paddingVertical(0.75, em)
+          .boxSizing("border-box")
+          .paddingHorizontal(1, em)
+          .background("var(--searchbackground)")
+          .color("var(--accent)")
+          .marginBottom(1, em)
+          .border("1px solid var(--accent)")
+          .borderRadius(15, px)
+      })
       .width(100, pct)
       .horizontalAlign("center")
       .verticalAlign("center")
       .gap(0.5, em)
+    })
+    .onSubmit(async (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      this.dispatchSearchEvent(data.get("searchText"))
+    })
+  }
+
+  dispatchSearchEvent(searchText) {
+    const app = global.currentApp();
+    switch (app) {
+      case "Jobs":
+        window.dispatchEvent(new CustomEvent('jobsearch', {
+          detail: { searchText: searchText }
+        }));
+        break;
+      case "Events":
+        window.dispatchEvent(new CustomEvent('eventsearch', {
+          detail: { searchText: searchText }
+        }));
+        break;
+    }
   }
 }