add search input to filter form (#427)

GeoNode · Aug 13, 2021 · e22bdbc · e22bdbc
1 parent d006ea4
commit e22bdbc
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 9 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx
@@ -16,6 +16,15 @@ import FilterByExtent from './FilterByExtent';
 import FilterItems from './FilterItems';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
+import withDebounceOnCallback from '@mapstore/framework/components/misc/enhancers/withDebounceOnCallback';
+import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
+import { FormControl as FormControlRB } from 'react-bootstrap';
+const FormControl = localizedProps('placeholder')(FormControlRB);
+function InputControl({ onChange, value, ...props }) {
+    return <FormControl {...props} value={value} onChange={event => onChange(event.target.value)}/>;
+}
+const InputControlWithDebounce = withDebounceOnCallback('onChange', 'value')(InputControl);
+
 /**
  * FilterForm component allows to configure a list of field that can be used to apply filter on the page
  * @name FilterForm
@@ -65,6 +74,12 @@ function FilterForm({
                     <form
                         style={style}
                     >
+                        <InputControlWithDebounce
+                            placeholder="gnhome.search"
+                            value={query.q || ''}
+                            debounceTime={300}
+                            onChange={(q) => handleFieldChange({ q })}
+                        />
                         <FilterItems
                             id={id}
                             items={fields}

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -117,7 +117,8 @@
             "pendingApproval": "Ausstehende Genehmigung",
             "featuredList": "Vorgestellt",
             "uploadDataset": "Datensatz hochladen",
-            "createDataset": "Dataset erstellen"
+            "createDataset": "Dataset erstellen",
+            "search": "Suchen..."
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -118,7 +118,8 @@
             "pendingApproval": "Pending approval",
             "featuredList": "Featured",
             "uploadDataset": "Upload dataset",
-            "createDataset": "Create dataset"
+            "createDataset": "Create dataset",
+            "search": "Search..."
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -117,7 +117,8 @@
             "pendingApproval": "Aprobación pendiente",
             "featuredList": "Presentada",
             "uploadDataset": "Subir conjunto de datos",
-            "createDataset": "Crear conjunto de datos"
+            "createDataset": "Crear conjunto de datos",
+            "search": "Buscar..."
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -117,7 +117,8 @@
             "pendingApproval": "En attente de validation",
             "featuredList": "Mis en exergue",
             "uploadDataset": "Télécharger l'ensemble de données",
-            "createDataset": "Créer un ensemble de données"
+            "createDataset": "Créer un ensemble de données",
+            "search": "Chercher..."
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -119,7 +119,8 @@
             "pendingApproval": "In attesa di approvazione",
             "featuredList": "In primo piano",
             "uploadDataset": "Carica dataset",
-            "createDataset": "Crea dataset"
+            "createDataset": "Crea dataset",
+            "search": "Cerca..."
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html
@@ -199,8 +199,9 @@
 
             function hashChange() {
                 const newQParam = getQParamFromHash();
-                if (newQParam !== value) {
+                if (!value || newQParam !== value) {
                     searchInput.value = newQParam;
+                    value = newQParam;
                 }
                 searchClear.style.display = newQParam ? 'block' : 'none';
             }
@@ -226,9 +227,9 @@
             searchInput.addEventListener('keyup', function(event) {
                 if (event.keyCode === 13) {
                     event.preventDefault();
-                    if (value) {
-                        onSearch(value);
-                    }
+
+                    onSearch(value);
+
                 }
             });