Add the filtering logic of the browse page

Gemfile.lock

@@ -210,8 +210,9 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
     mini_mime (1.1.2)
-    minitest (5.18.0)
-    msgpack (1.6.1)
+    mini_portile2 (2.8.1)
+    minitest (5.17.0)
+    msgpack (1.6.0)
     multi_json (1.15.0)
     multipart-post (2.3.0)
     mysql2 (0.5.3)
@@ -235,6 +236,9 @@ GEM
     netrc (0.11.0)
     newrelic_rpm (9.0.0)
     nio4r (2.5.8)
+    nokogiri (1.14.2)
+      mini_portile2 (~> 2.8.0)
+      racc (~> 1.4)
     nokogiri (1.14.2-x86_64-linux)
       racc (~> 1.4)
     oj (3.14.2)
@@ -418,6 +422,7 @@ GEM
     zeitwerk (2.6.7)
 
 PLATFORMS
+  ruby
   x86_64-linux
 
 DEPENDENCIES

app/javascript/controllers/browse_filters_controller.js

@@ -0,0 +1,65 @@
+import {Controller} from "@hotwired/stimulus"
+import debounce from "debounce"
+// Connects to data-controller="browse-filters"
+export default class extends Controller {
+
+    initialize() {
+        this.dispatchInputEvent = debounce(this.dispatchInputEvent.bind(this), 900);
+    }
+
+    dispatchInputEvent(event) {
+        if (event.target.name !== "search") {
+            return
+        }
+        this.#dispatchEvent("search", [event.target.value])
+    }
+
+    dispatchFilterEvent(event) {
+        let checks;
+        let filter;
+
+        switch (event.target.name) {
+            case "format":
+                checks = event.target.value === '' ? [] : [event.target.value]
+                filter = "format"
+                break;
+            case "Sort_by":
+                checks = [event.target.value]
+                filter = "sort_by"
+                break;
+            case "search":
+                return
+            case "views":
+                checks = event.target.checked ?  ['true'] : []
+                filter = "show_views"
+                break;
+            case "retired":
+                checks = event.target.checked ?  ['true'] : []
+                filter = "show_retired"
+                break;
+            default:
+                checks = this.#getSelectedChecks().map(x => x.name)
+                filter = this.element.id.split("_")[0]
+        }
+
+        this.#dispatchEvent(filter, checks)
+    }
+
+
+    #dispatchEvent(filter, checks){
+        let data = {
+            [filter]: checks,
+        }
+        const customEvent = new CustomEvent('changed', {
+            detail: {
+                data: data
+            }, bubbles: true
+        });
+
+        this.element.dispatchEvent(customEvent);
+    }
+    #getSelectedChecks() {
+        return Array.from(this.element.querySelectorAll('input:checked'))
+    }
+
+}

app/javascript/controllers/index.js

@@ -4,6 +4,9 @@
 
 import { application } from "./application"
 
+import BrowseFiltersController from "./browse_filters_controller"
+application.register("browse-filters", BrowseFiltersController)
+
 import ChosenController from "./chosen_controller"
 application.register("chosen", ChosenController)
 
@@ -37,6 +40,9 @@ application.register("metadata-downloader", MetadataDownloaderController)
 import OntoportalAutocompleteController from "./ontoportal_autocomplete_controller"
 application.register("ontoportal-autocomplete", OntoportalAutocompleteController)
 
+import ShowFilterCountController from "./show_filter_count_controller"
+application.register("show-filter-count", ShowFilterCountController)
+
 import ShowModalController from "./show_modal_controller"
 application.register("show-modal", ShowModalController)
 

app/javascript/controllers/turbo_frame_controller.js

@@ -14,13 +14,10 @@ export default class extends Controller {
     }
 
     updateFrame(event) {
-        const { data } = event.detail
-        const values = Object.values(data)
-
-        // remove null and empty values
-        values.filter((value) => value !== "" || value !== undefined)
-
-        if (values.length === 0) {
+
+        const newData = event.detail.data
+        const values = Object.entries(newData)[0][1]
+        if (values.filter(x => x.length !== 0).length === 0 && this.placeHolderValue) {
             this.frame.innerHTML = this.placeHolderValue
         } else {
             this.frame.innerHTML = ""

app/javascript/mixins/useHistory.js

@@ -22,16 +22,20 @@ export class HistoryService {
     }
 
     getUpdatedURL(currentUrl, newData) {
-        const base = document.location.origin
-        const url = new URL(currentUrl, base)
 
-        this.#updateURLFromState(url.searchParams, this.getState().data)
-        this.#addNewDataToUrl(url, newData)
-        return url.pathname + url.search
-    }
+        const url = new URL(currentUrl, document.location.origin)
+        const urlParams = url.searchParams
+        this.#updateURLFromState(urlParams, this.getState())
 
-    #addNewDataToUrl(url, newData) {
-        const wantedData = this.#filterUnwantedData(newData, this.unWantedData);
+
+        this.#filterUnwantedData(newData).forEach(([updatedParam, newValue]) => {
+            newValue = Array.isArray(newValue) ? newValue : [newValue]
+            if (newValue !== null && Array.from(newValue).length > 0) {
+                urlParams.set(updatedParam, newValue.join(','))
+            }else{
+                urlParams.delete(updatedParam)
+            }
+        })
 
         wantedData.forEach(([updatedParam, newValue]) => {
             if (newValue === null) {
@@ -43,10 +47,13 @@ export class HistoryService {
         });
     }
 
-    #filterUnwantedData(data, unWantedData) {
-        return Object.entries(data).filter(([key]) => !unWantedData.some(uw => key.toLowerCase().includes(uw.toLowerCase())))
+    #filterUnwantedData(newData) {
+        const unWantedData = ['turbo', 'controller', 'target', 'value']
+        return Object.entries(newData).filter(([key]) => unWantedData.filter(x => key.toLowerCase().includes(x)).length === 0)
     }
 
+    #initStateFromUrl(currentUrl) {
+
     #initStateFromUrl(currentUrl) {
         const url = new URL(currentUrl, document.location.origin)
         const urlParams = url.searchParams
@@ -58,9 +65,19 @@ export class HistoryService {
     }
 
     #updateURLFromState(urlParams, state) {
-        Object.entries(state).forEach(([key, val]) => {
-            if (key !== 'p'){
-                urlParams.set(key, val)
+        let oldValue = null
+        urlParams.forEach((newVal, key) => {
+            oldValue = state[key]
+
+            if (oldValue !== undefined && oldValue !== newVal) {
+                if (newVal.length !== 0){
+                    urlParams.set(key, newVal)
+                }else{
+                    urlParams.remove(key)
+                }
+
+            } else if (oldValue !== undefined) {
+                state[key] = newVal
             }
         })
     }

package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "@hotwired/stimulus": "^3.0.1",
     "@hotwired/turbo-rails": "^7.1.1",
+    "debounce": "^1.2.1",
     "esbuild": "^0.14.41",
     "flatpickr": "^4.6.13",
     "split.js": "^1.6.5",

yarn.lock

@@ -30,6 +30,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.4.tgz#70a3ca56809f7aaabb80af2f9c01ae51e1a8ed41"
   integrity sha512-tz4oM+Zn9CYsvtyicsa/AwzKZKL+ITHWkhiu7x+xF77clh2b4Rm+s6xnOgY/sGDWoFWZmtKsE95hxBPkgQQNnQ==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 esbuild-android-64@0.14.54:
   version "0.14.54"
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"