Client - Filter form sends requests when the value field is changed

geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx

@@ -14,7 +14,6 @@ import ReactSelect from 'react-select';
 import Message from '@mapstore/framework/components/I18N/Message';
 import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
 import { getFilterLabelById } from '@js/utils/GNSearchUtils';
-
 const SelectSync = localizedProps('placeholder')(ReactSelect);
 const SelectAsync = localizedProps('placeholder')(ReactSelect.Async);
 

geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx

@@ -15,7 +15,8 @@ import FaIcon from '@js/components/home/FaIcon';
 import isEqual from 'lodash/isEqual';
 import FilterByExtent from './FilterByExtent';
 import FilterItems from './FilterItems';
-
+import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
 /**
  * FilterForm component allows to configure a list of field that can be used to apply filter on the page
  * @name FilterForm
@@ -31,7 +32,9 @@ function FilterForm({
     onChange,
     onClose,
     extentProps,
-    suggestionsRequestTypes
+    suggestionsRequestTypes,
+    submitOnChangeField,
+    timeDebounce
 }) {
 
     const [values, setValues] = useState({});
@@ -42,6 +45,7 @@ function FilterForm({
         values
     };
 
+
     useEffect(() => {
         const newValues = state.current.fields.reduce((acc, { id: formId, suggestionsRequestKey }) => {
             const filterKey = suggestionsRequestKey
@@ -55,13 +59,18 @@ function FilterForm({
                 [filterKey]: (filterKey) ? castArray(state.current.query[filterKey]) : []
             };
         }, {});
-        setValues({
-            ...newValues,
-            ...(query?.extent && { extent: query.extent }),
-            ...(query?.f && { f: query.f })
-        });
+
+        ((!submitOnChangeField
+            || (!isEmpty(newValues) && isEmpty(values))
+            || (!isEmpty(query) && isEmpty(values))))
+            && setValues({
+                ...newValues,
+                ...(query?.extent && { extent: query.extent }),
+                ...(query?.f && { f: query.f })
+            });
     }, [query]);
 
+
     function handleApply() {
         onChange(values);
     }
@@ -83,6 +92,12 @@ function FilterForm({
         onChange(emptyValues);
     }
 
+    useEffect( () => {
+        submitOnChangeField
+        && onChange(values);
+    },
+    [values]);
+
     return (
         <div className="gn-filter-form" style={styleContainerForm} >
             <div className="gn-filter-form-header">
@@ -117,24 +132,25 @@ function FilterForm({
                             queryExtent={query.extent}
                             layers={extentProps?.layers}
                             vectorLayerStyle={extentProps?.style}
-                            onChange={({extent}) =>
+                            onChange={debounce(({extent}) =>
                                 setValues({
                                     ...values,
                                     extent
-                                })
+                                }), timeDebounce)
                             }
                         />
                     </form>
                 </div>
             </div>
             <div className="gn-filter-form-footer">
-                <Button
+                {(!submitOnChangeField) && <Button
                     size="sm"
                     variant="primary"
                     onClick={handleApply}
                 >
                     <Message msgId="gnhome.apply"/>
                 </Button>
+                }
                 <Button
                     size="sm"
                     variant="default"
@@ -156,15 +172,20 @@ FilterForm.defaultProps = {
     onChange: PropTypes.func,
     onClose: PropTypes.func,
     extentProps: PropTypes.object,
-    suggestionsRequestTypes: PropTypes.object
+    suggestionsRequestTypes: PropTypes.object,
+    submitOnChangeField: PropTypes.bool,
+    timeDebounce: PropTypes.number
+
 };
 
 FilterForm.defaultProps = {
     query: {},
     fields: [],
     onChange: () => {},
     onClose: () => {},
-    suggestionsRequestTypes: {}
+    suggestionsRequestTypes: {},
+    submitOnChangeField: true,
+    timeDebounce: 500
 };
 
 const arePropsEqual = (prevProps, nextProps) => {

geonode_mapstore_client/client/js/components/FiltersForm/__tests__/FiltersForm-test.jsx

@@ -36,7 +36,7 @@ describe('FiltersForm component', () => {
                 done(e);
             }
         };
-        ReactDOM.render( <FiltersForm show onChange={onChange}/>, document.getElementById("container"));
+        ReactDOM.render( <FiltersForm show onChange={onChange} submitOnChangeField={false} />, document.getElementById("container"));
         const filterFormNode = document.querySelector('.gn-filter-form');
         expect(filterFormNode).toBeTruthy();
         const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-footer > button');
@@ -53,7 +53,7 @@ describe('FiltersForm component', () => {
                 done(e);
             }
         };
-        ReactDOM.render( <FiltersForm show onChange={onChange}/>, document.getElementById("container"));
+        ReactDOM.render( <FiltersForm show onChange={onChange} submitOnChangeField={false} />, document.getElementById("container"));
         const filterFormNode = document.querySelector('.gn-filter-form');
         expect(filterFormNode).toBeTruthy();
         const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-footer > button');
@@ -69,12 +69,22 @@ describe('FiltersForm component', () => {
                 done(e);
             }
         };
-        ReactDOM.render( <FiltersForm show onClose={onClose}/>, document.getElementById("container"));
+        ReactDOM.render( <FiltersForm show onClose={onClose} />, document.getElementById("container"));
         const filterFormNode = document.querySelector('.gn-filter-form');
         expect(filterFormNode).toBeTruthy();
         const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-header > button');
         expect(footerButtons.length).toBe(1);
         const closeButton = footerButtons[0];
         Simulate.click(closeButton);
     });
+
+    it('should the apply button hidden with submitOnChangeField flag', () => {
+        ReactDOM.render( <FiltersForm show  submitOnChangeField />, document.getElementById("container"));
+        const filterFormNode = document.querySelector('.gn-filter-form');
+        expect(filterFormNode).toBeTruthy();
+        const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-footer > button');
+        expect(footerButtons.length).toBe(1);
+
+    });
+
 });

geonode_mapstore_client/client/js/routes/Home.jsx

@@ -455,6 +455,7 @@ function Home({
                                 query={query}
                                 onChange={isSmallDevice && handleUpdateSmallDevice || handleUpdate}
                                 onClose={handleShowFilterForm}
+                                submitOnChangeField={!isSmallDevice}
                             />
 
                         </div>

geonode_mapstore_client/client/static/mapstore/configs/localConfig.json

@@ -219,6 +219,15 @@
                                 "filter{is_approved}": false
                             },
                             "authenticated": true
+                        },
+                        {
+                            "id": "favorite",
+                            "labelId": "gnhome.favorites",
+                            "type": "filter",
+                            "query": {
+                                "favorite": true
+                            },
+                            "authenticated": true
                         }
                     ]
                 },