Fixed featuregrid toolbar and example (#2072)

geosolutions-it · Aug 1, 2017 · ea79dc6 · ea79dc6
1 parent 092192e
commit ea79dc6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/web/client/components/data/featuregrid/toolbars/Toolbar.jsx b/web/client/components/data/featuregrid/toolbars/Toolbar.jsx
@@ -24,7 +24,7 @@ const getSaveMessageId = ({saving, saved}) => {
     return "featuregrid.toolbar.saveChanges";
 };
 
-module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false} = {}) =>
+module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false, isDownloadOpen, isColumnsOpen} = {}) =>
     (<ButtonGroup id="featuregrid-toolbar" className="featuregrid-toolbar featuregrid-toolbar-margin">
         <OverlayTrigger placement="top" overlay={<Tooltip id="fe-edit-mode"><Message msgId="featuregrid.toolbar.editMode"/></Tooltip>}>
             <Button key="edit-mode" bsStyle="primary" id="fg-edit-mode" style={getStyle(mode === "VIEW" && isEditingAllowed)} className="square-button" onClick={events.switchEditMode}><Glyphicon glyph="pencil"/></Button>
@@ -52,9 +52,9 @@ module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeo
             <Button key="delete-geometry" bsStyle="primary" id="fg-delete-geometry" style={getStyle(mode === "EDIT" && hasGeometry && selectedCount === 1)} className="square-button" onClick={events.deleteGeometry}><Glyphicon glyph="polygon-trash"/></Button>
         </OverlayTrigger>
         <OverlayTrigger placement="top" overlay={<Tooltip id="fe-download-grid"><Message msgId="featuregrid.toolbar.downloadGridData"/></Tooltip>}>
-            <Button key="download-grid" bsStyle="primary" id="fg-download-grid" style={getStyle(mode === "VIEW")} className="square-button" onClick={events.download}><Glyphicon glyph="features-grid-download"/></Button>
+            <Button key="download-grid" bsStyle="primary" id="fg-download-grid" bsStyle={isDownloadOpen ? "success" : "primary"} style={getStyle(mode === "VIEW")} className="square-button" onClick={events.download}><Glyphicon glyph="features-grid-download"/></Button>
         </OverlayTrigger>
         <OverlayTrigger placement="top" overlay={<Tooltip id="fe-grid-settings"><Message msgId="featuregrid.toolbar.hideShowColumns"/></Tooltip>}>
-            <Button key="grid-settings" bsStyle="primary" id="fg-grid-settings" className="square-button" style={getStyle(selectedCount <= 1 && mode === "VIEW")} onClick={events.settings}><Glyphicon glyph="features-grid-set"/></Button>
+            <Button key="grid-settings" bsStyle="primary" id="fg-grid-settings" bsStyle={isColumnsOpen ? "success" : "primary"} className="square-button" style={getStyle(selectedCount <= 1 && mode === "VIEW")} onClick={events.settings}><Glyphicon glyph="features-grid-set"/></Button>
         </OverlayTrigger>
     </ButtonGroup>);
diff --git a/web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx b/web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx
@@ -215,6 +215,11 @@ describe('Featuregrid toolbar component', () => {
         expect(isVisibleButton(button)).toBe(true);
         button.click();
         expect(events.settings).toHaveBeenCalled();
+        ReactDOM.render(<Toolbar events={events} mode="VIEW" selectedCount={0} isColumnsOpen/>, document.getElementById("container"));
+        button = document.getElementById("fg-grid-settings");
+        expect(isVisibleButton(button)).toBe(true);
+        expect(button.className).toExist();
+        expect(button.className.indexOf("success") >= 0).toBe(true);
         ReactDOM.render(<Toolbar events={events} mode="EDIT" selectedCount={1} />, document.getElementById("container"));
         button = document.getElementById("fg-grid-settings");
         expect(isVisibleButton(button)).toBe(false);
@@ -228,6 +233,4 @@ describe('Featuregrid toolbar component', () => {
         button = document.getElementById("fg-grid-settings");
         expect(isVisibleButton(button)).toBe(false);
     });
-
-
 });
diff --git a/web/client/examples/featuregrid/index.html b/web/client/examples/featuregrid/index.html
@@ -15,7 +15,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.4/leaflet.draw.js"></script>
     </head>
-    <body class="ms2">
+    <body class="ms2" data-ms2-container="ms2">
         <div id="container"></div>
         <script src="../../dist/featuregrid.js"></script>
     </body>

diff --git a/web/client/plugins/featuregrid/panels/index.jsx b/web/client/plugins/featuregrid/panels/index.jsx
@@ -23,6 +23,8 @@ const Toolbar = connect(
         isDrawing: isDrawingSelector,
         isSimpleGeom: isSimpleGeomSelector,
         selectedCount: selectedFeaturesCount,
+        isDownloadOpen: state => state && state.controls && state.controls.wfsdownload && state.controls.wfsdownload.enabled,
+        isColumnsOpen: state => state && state.featuregrid && state.featuregrid.tools && state.featuregrid.tools.settings,
         isEditingAllowed: (state) => isAdminUserSelector(state) || canEditSelector(state)
     }),
     (dispatch) => ({events: bindActionCreators(toolbarEvents, dispatch)})