From f6155a9e080f9e92490a4dfcd47de7fbb928047b Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Tue, 25 Feb 2020 12:12:03 +0200
Subject: [PATCH 1/6] [FEATURE] CheckBox for boolean properties

---
 app/scripts/modules/ui/DataView.js            | 41 +++++++++++++++++++
 .../modules/ui/helpers/DataViewHelper.js      | 24 +++++++++++
 2 files changed, 65 insertions(+)

diff --git a/app/scripts/modules/ui/DataView.js b/app/scripts/modules/ui/DataView.js
index 5d46581e..0b0e4553 100644
--- 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 = {},
+            propertyName,
+            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
index 27635da0..a3694e22 100644
--- 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
 };

From 1a2ab24e4b1502a437ca5a8f9474aaa15e964a0e Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Thu, 5 Mar 2020 14:57:06 +0200
Subject: [PATCH 2/6] removed multiline declaration of variables

---
 app/scripts/modules/ui/DataView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/scripts/modules/ui/DataView.js b/app/scripts/modules/ui/DataView.js
index 0b0e4553..4d06b5dc 100644
--- a/app/scripts/modules/ui/DataView.js
+++ b/app/scripts/modules/ui/DataView.js
@@ -483,9 +483,9 @@ DataView.prototype._onCheckBoxHandler = function (target) {
      * @param {Object} e
      */
     target.onchange = function (e) {
-        var propertyData = {},
-            propertyName,
-            target = e.target;
+        var propertyData = {};
+        var propertyName;
+        var target = e.target;
 
         propertyData.controlId = target.getAttribute('data-control-id');
 

From 6e11c667f109fbc289d0a378e8df41e0930982e9 Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Mon, 9 Mar 2020 10:59:06 +0200
Subject: [PATCH 3/6] test added

---
 tests/modules/ui/DataView.spec.js | 32 ++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/tests/modules/ui/DataView.spec.js b/tests/modules/ui/DataView.spec.js
index bc44c3cf..a7c0d8c2 100644
--- 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;

From 9540e754cf2a83dfe9121bdfaa5104be9b694aab Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Tue, 10 Mar 2020 16:40:06 +0200
Subject: [PATCH 4/6] fixed review comments

---
 app/scripts/modules/ui/helpers/DataViewHelper.js | 10 +++++-----
 app/styles/less/themes/base/globals.less         |  5 +++++
 tests/styles/themes/dark/dark.css                |  4 ++++
 tests/styles/themes/light/light.css              |  4 ++++
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/scripts/modules/ui/helpers/DataViewHelper.js b/app/scripts/modules/ui/helpers/DataViewHelper.js
index a3694e22..cbb2705b 100644
--- a/app/scripts/modules/ui/helpers/DataViewHelper.js
+++ b/app/scripts/modules/ui/helpers/DataViewHelper.js
@@ -152,13 +152,13 @@ function _wrapInSelectTag (value, attributes, type) {
 function _wrapInCheckBox (value, attributes) {
     var html = '';
 
-    html = '<input type="checkbox" id="';
-    html += attributes['data-property-name'];
-    html += '" ';
+    attributes.id = attributes['data-property-name'];
+
+    html = '<input verical-aligment type="checkbox"';
     html += _generateTagAttributes(attributes);
     html += value ? ' checked />' : ' />';
-    html += '<label for="';
-    html += attributes['data-property-name'];
+    html += '<label verical-aligment for="';
+    html += attributes["id"];
     html += '" gray>';
     html += value;
     html += '</label>';
diff --git a/app/styles/less/themes/base/globals.less b/app/styles/less/themes/base/globals.less
index 29f11241..bcc52094 100644
--- a/app/styles/less/themes/base/globals.less
+++ b/app/styles/less/themes/base/globals.less
@@ -54,6 +54,11 @@ pre {
     white-space: pre-wrap;
 }
 
+[verical-aligment] {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 section-title, value {
     color: @title-color;
 }
diff --git a/tests/styles/themes/dark/dark.css b/tests/styles/themes/dark/dark.css
index 77b965ef..70463bad 100644
--- a/tests/styles/themes/dark/dark.css
+++ b/tests/styles/themes/dark/dark.css
@@ -41,6 +41,10 @@ pre {
   word-wrap: break-word;
   white-space: pre-wrap;
 }
+[verical-aligment] {
+  display: inline-block;
+  vertical-align: middle;
+}
 section-title,
 value {
   color: #cbcbcb;
diff --git a/tests/styles/themes/light/light.css b/tests/styles/themes/light/light.css
index c362b985..f47a62e7 100644
--- a/tests/styles/themes/light/light.css
+++ b/tests/styles/themes/light/light.css
@@ -41,6 +41,10 @@ pre {
   word-wrap: break-word;
   white-space: pre-wrap;
 }
+[verical-aligment] {
+  display: inline-block;
+  vertical-align: middle;
+}
 section-title,
 value {
   color: #000000;

From 708dad692322c82f0bf56faf3a7bf1f43b12fd01 Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Wed, 11 Mar 2020 15:58:48 +0200
Subject: [PATCH 5/6] fixed lint errors

---
 .jscsrc                                          | 1 -
 app/scripts/modules/ui/helpers/DataViewHelper.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.jscsrc b/.jscsrc
index c497dc32..d037d206 100644
--- a/.jscsrc
+++ b/.jscsrc
@@ -101,6 +101,5 @@
         "that"
     ],
     "validateIndentation": 4,
-    "validateLineBreaks": "LF",
     "validateQuoteMarks": true
 }
diff --git a/app/scripts/modules/ui/helpers/DataViewHelper.js b/app/scripts/modules/ui/helpers/DataViewHelper.js
index cbb2705b..4918d244 100644
--- a/app/scripts/modules/ui/helpers/DataViewHelper.js
+++ b/app/scripts/modules/ui/helpers/DataViewHelper.js
@@ -158,7 +158,7 @@ function _wrapInCheckBox (value, attributes) {
     html += _generateTagAttributes(attributes);
     html += value ? ' checked />' : ' />';
     html += '<label verical-aligment for="';
-    html += attributes["id"];
+    html += attributes.id;
     html += '" gray>';
     html += value;
     html += '</label>';

From 464ffcbd749a33ce338e6e1190b40cd2f4620870 Mon Sep 17 00:00:00 2001
From: Naydenov <nayden.naydenov@sap.com>
Date: Wed, 11 Mar 2020 18:03:47 +0200
Subject: [PATCH 6/6] revert jscsrc changes

---
 .jscsrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.jscsrc b/.jscsrc
index d037d206..c497dc32 100644
--- a/.jscsrc
+++ b/.jscsrc
@@ -101,5 +101,6 @@
         "that"
     ],
     "validateIndentation": 4,
+    "validateLineBreaks": "LF",
     "validateQuoteMarks": true
 }