Merge 6e11c66 into 767c5fc

SAP · Mar 9, 2020 · c139052 · c139052
2 parents 767c5fc + 6e11c66
commit c139052
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/app/scripts/modules/ui/DataView.js b/app/scripts/modules/ui/DataView.js
@@ -185,6 +185,8 @@ DataView.prototype._generateHTMLForKeyValuePair = function (key, currentView) {
         valueHTML = JSONFormatter.formatJSONtoHTML(value);
     } else if (typeof type === 'object') {
         valueHTML = DVHelper.wrapInSelectTag(value, attributes, type);
+    } else if (type === 'boolean') {
+        valueHTML = DVHelper.wrapInCheckBox(value, attributes);
     } else {
         valueHTML = DVHelper.valueNeedsQuotes(value, DVHelper.wrapInTag('value', value, attributes));
     }
@@ -355,6 +357,10 @@ DataView.prototype._onClickHandler = function () {
         if (targetElement.nodeName === 'SELECT') {
             that._onChangeHandler(targetElement);
         }
+
+        if (targetElement.nodeName === 'INPUT') {
+            that._onCheckBoxHandler(targetElement);
+        }
     };
 };
 
@@ -460,4 +466,39 @@ DataView.prototype._onChangeHandler = function (target) {
     };
 };
 
+/**
+ * Change event handler for the boolean values.
+ * @param {element} target - HTML DOM element
+ * @private
+ */
+DataView.prototype._onCheckBoxHandler = function (target) {
+    var that = this;
+
+    if (!target) {
+        return;
+    }
+
+    /**
+     * Handler for change event.
+     * @param {Object} e
+     */
+    target.onchange = function (e) {
+        var propertyData = {};
+        var propertyName;
+        var target = e.target;
+
+        propertyData.controlId = target.getAttribute('data-control-id');
+
+        propertyName = target.getAttribute('data-property-name');
+        propertyData.property = propertyName.charAt(0).toUpperCase() + propertyName.slice(1);
+
+        propertyData.value = target.checked;
+
+        that.onPropertyUpdated(propertyData);
+
+        target.removeEventListener('onchange', this);
+        that._selectValue = true;
+    };
+};
+
 module.exports = DataView;
diff --git a/app/scripts/modules/ui/helpers/DataViewHelper.js b/app/scripts/modules/ui/helpers/DataViewHelper.js
@@ -143,6 +143,29 @@ function _wrapInSelectTag (value, attributes, type) {
     return html;
 }
 
+/**
+ * @param {boolean} value
+ * @param {Object} attributes
+ * @returns {string}
+ * @private
+ */
+function _wrapInCheckBox (value, attributes) {
+    var html = '';
+
+    html = '<input type="checkbox" id="';
+    html += attributes['data-property-name'];
+    html += '" ';
+    html += _generateTagAttributes(attributes);
+    html += value ? ' checked />' : ' />';
+    html += '<label for="';
+    html += attributes['data-property-name'];
+    html += '" gray>';
+    html += value;
+    html += '</label>';
+
+    return html;
+}
+
 /**
  * Check if property value needs quotes.
  * @param {string|boolean|number|null} value
@@ -372,5 +395,6 @@ module.exports = {
     toggleCollapse: _toggleCollapse,
     wrapInTag: _wrapInTag,
     wrapInSelectTag: _wrapInSelectTag,
+    wrapInCheckBox: _wrapInCheckBox,
     valueNeedsQuotes: _valueNeedsQuotes
 };
diff --git a/tests/modules/ui/DataView.spec.js b/tests/modules/ui/DataView.spec.js
@@ -759,7 +759,7 @@ describe('DataView', function () {
             });
         });
 
-        describe('_changeHandler', function () {
+        describe('_changeHandler enum type', function () {
             var sampleView;
             var blurHandlerSpy;
             var changeHandlerSpy;
@@ -789,6 +789,36 @@ describe('DataView', function () {
             });
         });
 
+        describe('_changeHandler boolean type', function () {
+            var sampleView;
+            var blurHandlerSpy;
+            var checkBoxHandler;
+            var dataViewElement;
+            var selectBox;
+
+            beforeEach(function () {
+                sampleView = new DataViewComponent('data-view');
+                sampleView.setData(mockDataWithTypes);
+                dataViewElement = document.getElementById('data-view');
+                blurHandlerSpy = sinon.spy(DataViewComponent.prototype, '_onBlurHandler');
+                checkBoxHandler = sinon.spy(DataViewComponent.prototype, '_onCheckBoxHandler');
+                selectBox = dataViewElement.querySelector('input[type="checkbox"][data-control-id]');
+            });
+
+            afterEach(function () {
+                dataViewElement = null;
+                blurHandlerSpy.restore();
+                checkBoxHandler.restore();
+            });
+
+            it('should not trigger blur handler', function () {
+                selectBox.click();
+                selectBox.dispatchEvent(new Event('change'));
+                expect(blurHandlerSpy.notCalled).to.equal(true);
+                expect(checkBoxHandler.notCalled).to.equal(false);
+            });
+        });
+
         describe('_onEnterHandler', function () {
             var sampleView;
             var enterHandlerSpy;