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/apps/Events/Events.js

@@ -31,19 +31,36 @@ css(`
 `)
 
 class Events extends Shadow {
+    static searchableKeys = ['title', 'description', 'location'];
+    
     constructor() {
         super()
         this.events = global.currentNetwork.data.events;
+        this.searchedEvents = [];
+        this.searchText = "";
     }
 
     render() {
         VStack(() => {
 
-            SearchBar()
+            SearchBar(this.searchText)
 
             VStack(() => {
                 if (!this.events || this.events == []) {
                     LoadingCircle()
+                } else if (this.searchText) {
+                    if (this.searchedEvents.length > 0) {
+                        for (let i = 0; i < this.searchedEvents.length; i++) {
+                            EventCard(this.searchedEvents[i])
+                        }
+                    } else {
+                        h2("Could not find any events with your search criteria.")
+                        .color("var(--divider)")
+                        .fontWeight("bold")
+                        .marginTop(7.5, em)
+                        .marginBottom(0.5, em)
+                        .textAlign("center")
+                    }
                 } else if (this.events.length > 0) {
                     for (let i = 0; i < this.events.length; i++) {
                         EventCard(this.events[i])
@@ -63,6 +80,22 @@ class Events extends Shadow {
         .boxSizing("border-box")
         .height(100, pct)
         .width(100, pct)
+        .onEvent("eventsearch", this.onEventSearch)
+    }
+
+    onEventSearch = (e) => {
+        let searchText = e.detail.searchText.toLowerCase().trim();
+        if (!searchText) {
+            this.searchedEvents = [];
+        } else {
+            this.searchedEvents = this.events.filter(event =>
+                Events.searchableKeys.some(key =>
+                    String(event[key]).toLowerCase().includes(searchText)
+                )
+            );
+        }
+        this.searchText = searchText
+        this.rerender()
     }
 
     async getEvents(networkId) {

src/apps/Jobs/Jobs.js

@@ -32,9 +32,13 @@ css(`
 `)
 
 class Jobs extends Shadow {
+    static searchableKeys = ['title', 'description', 'location', 'company', 'salary_period', 'salary_number'];
+
     constructor() {
         super()
         this.jobs = global.currentNetwork.data.jobs;
+        this.searchedJobs = [];
+        this.searchText = ""; // for mainting searchText after re-render
     }
 
     render() {
@@ -42,11 +46,24 @@ class Jobs extends Shadow {
 
             // JobForm()
 
-            SearchBar()
+            SearchBar(this.searchText)
 
             VStack(() => {
                 if (!this.jobs || this.jobs == []) {
                     LoadingCircle()
+                } else if (this.searchText) {
+                    if (this.searchedJobs.length > 0) {
+                        for (let i = 0; i < this.searchedJobs.length; i++) {
+                            JobCard(this.searchedJobs[i])
+                        }
+                    } else {
+                        h2("Could not find any jobs with your search criteria.")
+                        .color("var(--divider)")
+                        .fontWeight("bold")
+                        .marginTop(7.5, em)
+                        .marginBottom(0.5, em)
+                        .textAlign("center")
+                    }
                 } else if (this.jobs.length > 0) {
                     for (let i = 0; i < this.jobs.length; i++) {
                         JobCard(this.jobs[i])
@@ -66,6 +83,26 @@ class Jobs extends Shadow {
         .boxSizing("border-box")
         .height(100, pct)
         .width(100, pct)
+        .onEvent("jobsearch", this.onJobSearch)
+    }
+
+    onJobSearch = (e) => {
+        let searchText = e.detail.searchText.toLowerCase().trim();
+        if (!searchText) {
+            this.searchedJobs = [];
+        } else {
+            this.searchedJobs = this.jobs.filter(job =>
+                Jobs.searchableKeys.some(key => {
+                    if (key === "salary_number" || key === "salary_period") {
+                        return String(job["salary_number"]).toLowerCase().includes(searchText.replace(/\/.*$/, '').replace(/[,$]/g, '')) && String(job["salary_period"]).toLowerCase().includes(searchText.replace(/^[^/]*\/?/, ''));
+                    } else {
+                        return String(job[key]).toLowerCase().includes(searchText);
+                    }
+                })
+            );
+        }
+        this.searchText = searchText
+        this.rerender()
     }
 
     async getJobs(networkId) {