Add zoom to page extent button

web/client/actions/__tests__/featuregrid-test.js

@@ -31,7 +31,8 @@ const {
     openFeatureGrid, OPEN_FEATURE_GRID,
     closeFeatureGrid, CLOSE_FEATURE_GRID,
     closeFeatureGridConfirm, CLOSE_FEATURE_GRID_CONFIRM,
-    closeFeatureGridConfirmed, FEATURE_GRID_CLOSE_CONFIRMED
+    closeFeatureGridConfirmed, FEATURE_GRID_CLOSE_CONFIRMED,
+    zoomAll, ZOOM_ALL
 } = require('../featuregrid');
 
 const idFeature = "2135";
@@ -198,5 +199,10 @@ describe('Test correctness of featurgrid actions', () => {
         expect(retval).toExist();
         expect(retval.type).toBe(SAVE_ERROR);
     });
+    it('Test zoomAll', () => {
+        const retval = zoomAll();
+        expect(retval).toExist();
+        expect(retval.type).toBe(ZOOM_ALL);
+    });
 
 });

web/client/actions/featuregrid.js

@@ -41,6 +41,7 @@ const FEATURE_GRID_CLOSE_CONFIRMED = 'FEATUREGRID:FEATURE_GRID_CLOSE_CONFIRMED';
 const SET_PERMISSION = 'FEATUREGRID:SET_PERMISSION';
 const DISABLE_TOOLBAR = 'FEATUREGRID:DISABLE_TOOLBAR';
 const OPEN_ADVANCED_SEARCH = 'FEATUREGRID:ADVANCED_SEARCH';
+const ZOOM_ALL = 'FEATUREGRID:ZOOM_ALL';
 const MODES = {
     EDIT: "EDIT",
     VIEW: "VIEW"
@@ -256,7 +257,11 @@ function openAdvancedSearch() {
         type: OPEN_ADVANCED_SEARCH
     };
 }
-
+function zoomAll() {
+    return {
+        type: ZOOM_ALL
+    };
+}
 module.exports = {
     SELECT_FEATURES,
     DESELECT_FEATURES,
@@ -294,6 +299,7 @@ module.exports = {
     FEATURE_GRID_CLOSE_CONFIRMED, closeFeatureGridConfirmed,
     DISABLE_TOOLBAR, disableToolbar,
     OPEN_ADVANCED_SEARCH, openAdvancedSearch,
+    ZOOM_ALL, zoomAll,
     setLayer,
     selectFeatures,
     deselectFeatures,

web/client/components/data/featuregrid/toolbars/Toolbar.jsx

@@ -32,6 +32,13 @@ module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeo
             visible={mode === "VIEW"}
             onClick={events.showQueryPanel}
             glyph="filter"/>
+        <TButton
+            id="zoom-all"
+            tooltip={<Message msgId="featuregrid.toolbar.zoomAll"/>}
+            disabled={disableToolbar}
+            visible={mode === "VIEW"}
+            onClick={events.zoomAll}
+            glyph="zoom-to"/>
         <TButton
             id="back-view"
             tooltip={<Message msgId="featuregrid.toolbar.quitEditMode"/>}

web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx

@@ -54,6 +54,38 @@ describe('Featuregrid toolbar component', () => {
         editButton = document.getElementById("fg-edit-mode");
         expect(isVisibleButton(editButton)).toBe(false);
     });
+    it('check search button', () => {
+        const events = {
+            showQueryPanel: () => {}
+        };
+        spyOn(events, "showQueryPanel");
+        ReactDOM.render(<Toolbar events={events} mode="VIEW" />, document.getElementById("container"));
+        const el = document.getElementsByClassName("featuregrid-toolbar")[0];
+        expect(el).toExist();
+        let editButton = document.getElementById("fg-search");
+        expect(isVisibleButton(editButton)).toBe(true);
+        editButton.click();
+        expect(events.showQueryPanel).toHaveBeenCalled();
+        ReactDOM.render(<Toolbar events={events} mode="EDIT" isEditingAllowed/>, document.getElementById("container"));
+        editButton = document.getElementById("fg-search");
+        expect(isVisibleButton(editButton)).toBe(false);
+    });
+    it('check zoom-all button', () => {
+        const events = {
+            zoomAll: () => {}
+        };
+        spyOn(events, "zoomAll");
+        ReactDOM.render(<Toolbar events={events} mode="VIEW" />, document.getElementById("container"));
+        const el = document.getElementsByClassName("featuregrid-toolbar")[0];
+        expect(el).toExist();
+        let editButton = document.getElementById("fg-zoom-all");
+        expect(isVisibleButton(editButton)).toBe(true);
+        editButton.click();
+        expect(events.zoomAll).toHaveBeenCalled();
+        ReactDOM.render(<Toolbar events={events} mode="EDIT" isEditingAllowed/>, document.getElementById("container"));
+        editButton = document.getElementById("fg-zoom-all");
+        expect(isVisibleButton(editButton)).toBe(false);
+    });
     it('check back-view button', () => {
         const events = {
             switchViewMode: () => {}

web/client/epics/featuregrid.js

@@ -9,6 +9,7 @@ const Rx = require('rxjs');
 const {get, head, isEmpty, find} = require('lodash');
 const { LOCATION_CHANGE } = require('react-router-redux');
 const axios = require('../libs/ajax');
+const bbox = require('@turf/bbox');
 const {fidFilter} = require('../utils/ogc/Filter/filter');
 const {getDefaultFeatureProjection} = require('../utils/FeatureGridUtils');
 const {isSimpleGeomType} = require('../utils/MapUtils');
@@ -19,6 +20,7 @@ const {findGeometryProperty} = require('../utils/ogc/WFS/base');
 const {setControlProperty} = require('../actions/controls');
 const {query, QUERY_CREATE, QUERY_RESULT, LAYER_SELECTED_FOR_SEARCH, FEATURE_TYPE_LOADED, featureTypeSelected, createQuery} = require('../actions/wfsquery');
 const {reset, QUERY_FORM_RESET} = require('../actions/queryform');
+const {zoomToExtent} = require('../actions/map');
 const {BROWSE_DATA} = require('../actions/layers');
 const {parseString} = require('xml2js');
 const {stripPrefix} = require('xml2js/lib/processors');
@@ -27,7 +29,7 @@ const {SORT_BY, CHANGE_PAGE, SAVE_CHANGES, SAVE_SUCCESS, DELETE_SELECTED_FEATURE
     CLEAR_CHANGES, START_EDITING_FEATURE, TOGGLE_MODE, MODES, geometryChanged, DELETE_GEOMETRY, deleteGeometryFeature,
     SELECT_FEATURES, DESELECT_FEATURES, START_DRAWING_FEATURE, CREATE_NEW_FEATURE,
     CLEAR_CHANGES_CONFIRMED, FEATURE_GRID_CLOSE_CONFIRMED,
-    openFeatureGrid, closeFeatureGrid, OPEN_FEATURE_GRID, CLOSE_FEATURE_GRID, CLOSE_FEATURE_GRID_CONFIRM, OPEN_ADVANCED_SEARCH} = require('../actions/featuregrid');
+    openFeatureGrid, closeFeatureGrid, OPEN_FEATURE_GRID, CLOSE_FEATURE_GRID, CLOSE_FEATURE_GRID_CONFIRM, OPEN_ADVANCED_SEARCH, ZOOM_ALL} = require('../actions/featuregrid');
 
 const {TOGGLE_CONTROL} = require('../actions/controls');
 const {setHighlightFeaturesPath} = require('../actions/highlight');
@@ -37,7 +39,7 @@ const {selectedFeaturesSelector, changesMapSelector, newFeaturesSelector, hasCha
     isFeatureGridOpen} = require('../selectors/featuregrid');
 
 const {error} = require('../actions/notifications');
-const {describeSelector, isDescribeLoaded, getFeatureById, wfsURL, wfsFilter} = require('../selectors/query');
+const {describeSelector, isDescribeLoaded, getFeatureById, wfsURL, wfsFilter, featureCollectionResultSelector} = require('../selectors/query');
 const drawSupportReset = () => changeDrawingStatus("clean", "", "featureGrid", [], {});
 /**
  * Intercept OGC Exception (200 response with exceptionReport) to throw error in the stream
@@ -472,5 +474,9 @@ module.exports = {
                     )
                 ).takeUntil(action$.ofType(OPEN_FEATURE_GRID, LOCATION_CHANGE))
             )
-        )
+        ),
+    onFeatureGridZoomAll: (action$, store) =>
+        action$.ofType(ZOOM_ALL).switchMap(() =>
+            Rx.Observable.of(zoomToExtent(bbox(featureCollectionResultSelector(store.getState())), "EPSG:4326"))
+    )
 };

web/client/plugins/featuregrid/toolbarEvents.js

@@ -8,7 +8,8 @@ const {toggleTool,
     startEditingFeature,
     startDrawingFeature,
     deleteGeometry,
-    openAdvancedSearch
+    openAdvancedSearch,
+    zoomAll
 } = require('../../actions/featuregrid');
 
 module.exports = {
@@ -24,5 +25,6 @@ module.exports = {
     startDrawingFeature: () => startDrawingFeature(),
     switchViewMode: () => toggleViewMode(),
     onClose: () => closeFeatureGridConfirm(),
-    showQueryPanel: () => openAdvancedSearch()
+    showQueryPanel: () => openAdvancedSearch(),
+    zoomAll: () => zoomAll()
 };

web/client/selectors/__tests__/query-test.js

@@ -11,6 +11,7 @@ const {
     wfsURL,
     wfsFilter,
     resultsSelector,
+    featureCollectionResultSelector,
     paginationInfo,
     featureLoadingSelector,
     isDescribeLoaded,
@@ -339,6 +340,11 @@ describe('Test query selectors', () => {
         expect(attr[0].label).toBe("name");
         expect(attr[0].valueId).toBe("id");
     });
+    it('test featureCollectionResultSelector selector', () => {
+        const fc = featureCollectionResultSelector(initialState);
+        expect(fc).toExist();
+        expect(fc.features.length).toBe(4);
+    });
 
 
 });

web/client/selectors/query.js

@@ -4,6 +4,7 @@ module.exports = {
     wfsFilter: state => state && state.query && state.query.filterObj,
     attributesSelector: state => get(state, `query.featureTypes.${get(state, "query.filterObj.featureTypeName")}.attributes`),
     resultsSelector: (state) => get(state, "query.result.features"),
+    featureCollectionResultSelector: state => get(state, "query.result"),
     getFeatureById: (state, id) => {
         let features = state && state.query && state.query.result && state.query.result.features;
         return head(features.filter(f => f.id === id));

web/client/translations/data.de-DE

@@ -844,7 +844,8 @@
                 "cancelChanges": "Änderungen abbrechen",
                 "deleteGeometry": "Geometrie löschen",
                 "downloadGridData": "Daten herunterladen",
-                "hideShowColumns": "Spalten ausblenden / anzeigen"
+                "hideShowColumns": "Spalten ausblenden / anzeigen",
+                "zoomAll": "Zoom zur Erweterung der Seite"
             }
         },
         "wfsdownload": {

web/client/translations/data.en-US

@@ -843,7 +843,8 @@
                 "cancelChanges": "Cancel changes",
                 "deleteGeometry": "Delete geometry",
                 "downloadGridData": "Download grid data",
-                "hideShowColumns": "Hide/show columns"
+                "hideShowColumns": "Hide/show columns",
+                "zoomAll": "Zoom to page extent"
             }
         },
         "wfsdownload": {

web/client/translations/data.es-ES

@@ -847,7 +847,8 @@
                 "cancelChanges": "Cancelar cambios",
                 "deleteGeometry": "Eliminar geometría",
                 "downloadGridData": "Descargar datos",
-                "hideShowColumns": "Ocultar / mostrar columnas"
+                "hideShowColumns": "Ocultar / mostrar columnas",
+                "zoomAll": "Zoom a la extensión de la página"
             }
         },
         "wfsdownload": {

web/client/translations/data.fr-FR

@@ -848,7 +848,8 @@
                 "cancelChanges": "Annuler les modifications",
                 "deleteGeometry": "Supprimer la géométrie",
                 "downloadGridData": "Télécharger les données",
-                "hideShowColumns": "Masquer / afficher les colonnes"
+                "hideShowColumns": "Masquer / afficher les colonnes",
+                "zoomAll": "Zoom sur la page"
             }
         },
         "wfsdownload": {

web/client/translations/data.it-IT

@@ -844,7 +844,8 @@
                 "cancelChanges": "Annulla i cambiamenti",
                 "deleteGeometry": "Elimina la geometria",
                 "downloadGridData": "Esporta i dati della griglia",
-                "hideShowColumns": "Nascondi/mostra colonne"
+                "hideShowColumns": "Nascondi/mostra colonne",
+                "zoomAll": "Zoom all'estensione della pagina"
             }
         },
         "wfsdownload": {