fix #1107 added button for deleting layers in simple way (#1170)

* fix #1107 added button for deleting layers in simple way

* fix added unit test , localized the message for button

web/client/components/TOC/DefaultLayer.jsx

@@ -12,8 +12,11 @@ var VisibilityCheck = require('./fragments/VisibilityCheck');
 var Title = require('./fragments/Title');
 var InlineSpinner = require('../misc/spinners/InlineSpinner/InlineSpinner');
 var WMSLegend = require('./fragments/WMSLegend');
+const ConfirmButton = require('../buttons/ConfirmButton');
 const LayersTool = require('./fragments/LayersTool');
 const SettingsModal = require('./fragments/SettingsModal');
+const Message = require('../I18N/Message');
+const {Glyphicon} = require('react-bootstrap');
 
 var DefaultLayer = React.createClass({
     propTypes: {
@@ -29,11 +32,13 @@ var DefaultLayer = React.createClass({
         updateNode: React.PropTypes.func,
         removeNode: React.PropTypes.func,
         activateLegendTool: React.PropTypes.bool,
+        activateRemoveLayer: React.PropTypes.bool,
         activateSettingsTool: React.PropTypes.bool,
         settingsText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         opacityText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         saveText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         closeText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
+        confirmDeleteText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         modalOptions: React.PropTypes.object,
         settingsOptions: React.PropTypes.object,
         visibilityCheckType: React.PropTypes.string,
@@ -46,10 +51,12 @@ var DefaultLayer = React.createClass({
             propertiesChangeHandler: () => {},
             onToggle: () => {},
             onSettings: () => {},
+            activateRemoveLayer: false,
             activateLegendTool: false,
             activateSettingsTool: false,
             modalOptions: {},
             settingsOptions: {},
+            confirmDeleteText: <Message msgId="layerProperties.confirmDelete" />,
             visibilityCheckType: "glyph"
         };
     },
@@ -61,6 +68,18 @@ var DefaultLayer = React.createClass({
     },
     renderTools() {
         const tools = [];
+        if (this.props.activateRemoveLayer) {
+            tools.push(
+                <ConfirmButton key="removelayer" className="clayer_removal_button"
+                    text={(<Glyphicon glyph="1-close" />)}
+                    style={{"float": "right", cursor: "pointer", backgroundColor: "transparent", marginRight: 3, padding: 0, outline: "none"}}
+                    confirming={{text: this.props.confirmDeleteText,
+                        style: {"float": "right", cursor: "pointer", marginTop: -5}}}
+                        onConfirm={() => {
+                            this.props.removeNode(this.props.node.id, "layers");
+                        }}/>
+            );
+        }
         if (this.props.activateSettingsTool) {
             tools.push(
                 <LayersTool key="toolsettings"

web/client/components/TOC/__tests__/DefaultLayer-test.jsx

@@ -9,7 +9,7 @@
 var React = require('react/addons');
 var ReactDOM = require('react-dom');
 var Layer = require('../DefaultLayer');
-
+// var ConfirmButton = require('../../buttons/ConfirmButton');
 var expect = require('expect');
 
 const TestUtils = React.addons.TestUtils;
@@ -136,6 +136,32 @@ describe('test DefaultLayer module component', () => {
         expect(spy.calls.length).toBe(1);
     });
 
+    it('tests removelayer tool', () => {
+        const l = {
+            name: 'layer000',
+            title: 'Layer001',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms'
+        };
+        const actions = {
+            removeNode: () => {}
+        };
+        let spy = expect.spyOn(actions, "removeNode");
+        const comp = ReactDOM.render(<Layer node={l} activateRemoveLayer={true} removeNode={actions.removeNode} />,
+            document.getElementById("container"));
+        expect(comp).toExist();
+        const domNode = ReactDOM.findDOMNode(comp);
+        expect(domNode).toExist();
+        const tool = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "clayer_removal_button")[0]);
+        expect(tool).toExist();
+        tool.click();
+        const confirmButton = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "btn-warning")[0]);
+        expect(confirmButton).toExist();
+        confirmButton.click();
+        expect(spy.calls.length).toBe(1);
+    });
+
     it('tests settings tool', () => {
         const l = {
             id: 'layerId1',

web/client/components/TOC/fragments/css/visibilitycheck.css

@@ -12,3 +12,9 @@ input[type="checkbox"].visibility-check,input[type="radio"].visibility-check {
     margin-right: 5px;
     margin-top: 5px;
 }
+button.confirm-button.clayer_removal_button {
+    border-color: transparent;
+}
+button.confirm-button.clayer_removal_button .glyphicon {
+    color: #a94442!important;
+}

web/client/plugins/TOC.jsx

@@ -52,6 +52,7 @@ const LayerTree = React.createClass({
         updateSettings: React.PropTypes.func,
         updateNode: React.PropTypes.func,
         removeNode: React.PropTypes.func,
+        activateRemoveLayer: React.PropTypes.bool,
         activateLegendTool: React.PropTypes.bool,
         activateSettingsTool: React.PropTypes.bool,
         visibilityCheckType: React.PropTypes.string,
@@ -68,6 +69,7 @@ const LayerTree = React.createClass({
             removeNode: () => {},
             activateLegendTool: true,
             activateSettingsTool: true,
+            activateRemoveLayer: true,
             visibilityCheckType: "checkbox",
             settingsOptions: {}
         };
@@ -102,6 +104,7 @@ const LayerTree = React.createClass({
                             updateNode={this.props.updateNode}
                             removeNode={this.props.removeNode}
                             visibilityCheckType={this.props.visibilityCheckType}
+                            activateRemoveLayer={this.props.activateRemoveLayer}
                             activateLegendTool={this.props.activateLegendTool}
                             activateSettingsTool={this.props.activateSettingsTool}
                             settingsText={<Message msgId="layerProperties.windowTitle"/>}