Merge pull request #53 from offtherailz/map-browser

#41 add external viewer link button
geosolutions-it · Aug 13, 2015 · b7b2528 · b7b2528
2 parents 16a3a46 + d5895f5
commit b7b2528
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/web/client/components/MapManager/MapItem.jsx b/web/client/components/MapManager/MapItem.jsx
@@ -9,18 +9,37 @@
 var React = require('react');
 var BootstrapReact = require('react-bootstrap');
 var ListGroupItem = BootstrapReact.ListGroupItem;
+var Button = BootstrapReact.Button;
+var Glyphicon = BootstrapReact.Glyphicon;
+var Tooltip = BootstrapReact.Tooltip;
+var OverlayTrigger = BootstrapReact.OverlayTrigger;
+
 
 var MapItem = React.createClass({
     propTypes: {
         id: React.PropTypes.number,
         name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         description: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         attributes: React.PropTypes.object,
-        glyphicon: React.PropTypes.string
+        viewerUrl: React.PropTypes.string
+    },
+    renderButtons: function() {
+        // render preview button if the viewerUrl is passed
+        if (this.props.viewerUrl) {
+            const previewURL = this.props.viewerUrl + "?mapId=" + this.props.id;
+            const tooltip = <Tooltip>Open map in a new tab</Tooltip>;
+            return (<div>
+                <OverlayTrigger placement="right" overlay={tooltip}>
+                    <Button bsStyle="info" target="_blank" href={previewURL}> <Glyphicon glyph={"new-window"}/>
+                    </Button>
+                </OverlayTrigger>
+                </div>);
+        }
+        return "";
     },
     render: function() {
         return (
-           <ListGroupItem header={this.props.name}>{this.props.description}</ListGroupItem>
+           <ListGroupItem header={this.props.name}>{this.props.description} {this.renderButtons()}</ListGroupItem>
         );
     }
 });

diff --git a/web/client/components/MapManager/MapList.jsx b/web/client/components/MapManager/MapList.jsx
@@ -15,17 +15,17 @@ var MapItem = require('./MapItem');
 var MapList = React.createClass({
     propTypes: {
         panelProps: React.PropTypes.object,
-        data: React.PropTypes.array
+        data: React.PropTypes.array,
+        viewerUrl: React.PropTypes.string
     },
     getInitialState: function() {
-        return {maps: this.props.data};
+        return {maps: this.props.data || []};
     },
     renderMaps: function(maps) {
-        if (maps) {
-            return this.state.maps.map(function(map) {
-                return <MapItem key={map.id} {...map} />;
-            });
-        }
+        const viewerUrl = this.props.viewerUrl;
+        return maps.map(function(map) {
+            return <MapItem viewerUrl={viewerUrl} key={map.id} {...map} />;
+        });
     },
     render: function() {
         return (<Panel {...this.props.panelProps}><ListGroup>{this.renderMaps(this.state.maps)}</ListGroup></Panel>);

diff --git a/web/client/components/MapManager/__tests__/MapItem-test.jsx b/web/client/components/MapManager/__tests__/MapItem-test.jsx
@@ -9,6 +9,8 @@ var React = require('react/addons');
 var MapItem = require('../MapItem.jsx');
 var expect = require('expect');
 
+var TestUtils = require('react/addons').addons.TestUtils;
+
 describe('This test for MapItem', () => {
     afterEach((done) => {
         React.unmountComponentAtNode(document.body);
@@ -43,4 +45,14 @@ describe('This test for MapItem', () => {
         expect(headings.length).toBe(1);
         expect(headings[0].innerHTML).toBe(testName);
     });
+
+    it('test viewer url', () => {
+        const testName = "test";
+        const testDescription = "testDescription";
+        var component = TestUtils.renderIntoDocument(<MapItem id={1} name={testName} description={testDescription} viewerUrl="viewer"/>);
+        var a = TestUtils.findRenderedDOMComponentWithTag(
+           component, 'a'
+        );
+        expect(a.props.href).toBe("viewer?mapId=1");
+    });
 });
diff --git a/web/client/examples/manager/app.jsx b/web/client/examples/manager/app.jsx
@@ -12,5 +12,5 @@ var MapList = require('../../components/MapManager/MapList');
 var GeoStoreApi = require('../../api/GeoStoreDAO');
 GeoStoreApi.getResourcesByCategory("MAP", "*", {start: 0, limit: 20}).then( function(data) {
     React.render(
-        <MapList data={data.results} panelProps={{header: "Maps", collapsible: true, defaultExpanded: true }} totalCount={data.totalCount}/>, document.getElementById("mapList"));
+        <MapList data={data.results} viewerUrl="../viewer" panelProps={{header: "Maps", collapsible: true, defaultExpanded: true }} totalCount={data.totalCount}/>, document.getElementById("mapList"));
 });