From 2868aab8023df85b6c5c15598638ec26fe20e48d Mon Sep 17 00:00:00 2001 From: saidaipparla Date: Wed, 19 Oct 2016 11:21:55 +0200 Subject: [PATCH] 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 | 19 +++++++++++++ .../TOC/__tests__/DefaultLayer-test.jsx | 28 ++++++++++++++++++- .../TOC/fragments/css/visibilitycheck.css | 6 ++++ web/client/plugins/TOC.jsx | 3 ++ 4 files changed, 55 insertions(+), 1 deletion(-) diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx index c0ff7b691a..f77695f1f3 100644 --- a/web/client/components/TOC/DefaultLayer.jsx +++ b/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: , visibilityCheckType: "glyph" }; }, @@ -61,6 +68,18 @@ var DefaultLayer = React.createClass({ }, renderTools() { const tools = []; + if (this.props.activateRemoveLayer) { + tools.push( + )} + 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( { 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(, + 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', diff --git a/web/client/components/TOC/fragments/css/visibilitycheck.css b/web/client/components/TOC/fragments/css/visibilitycheck.css index 1a778f2dc4..b7376823b9 100644 --- a/web/client/components/TOC/fragments/css/visibilitycheck.css +++ b/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; +} diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index 300645691e..d7a2087b4d 100644 --- a/web/client/plugins/TOC.jsx +++ b/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={}