Merge pull request #1603 from LianaHus/staticAnalysisTab

check/uncheck all in testing tab and Analysis tab

src/app/staticanalysis/staticAnalysisView.js

@@ -50,7 +50,7 @@ staticAnalysisView.prototype.render = function () {
         ${this.modulesView}
       </div>
       <div class="${css.buttons}">
-        <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
+        <button class="${css.buttonRun}" onclick="${function () { self.run() }}" >Run</button>
         <label class="${css.label}" for="autorunstaticanalysis">
           <input id="autorunstaticanalysis"
             type="checkbox"
@@ -59,8 +59,8 @@ staticAnalysisView.prototype.render = function () {
           >
           Auto run
         </label>
-        <label class="${css.label}" for="checkallstaticanalysis">
-          <input id="checkallstaticanalysis"
+        <label class="${css.label}" for="checkAllEntries">
+          <input id="checkAllEntries"
             type="checkbox"
             onclick="${function (event) { self.checkAll(event) }}"
             style="vertical-align:bottom"
@@ -135,29 +135,23 @@ staticAnalysisView.prototype.run = function () {
   }
 }
 
-staticAnalysisView.prototype.checkAll = function (event) {
-  if (!this.view) {
-    return
-  }
-  var all = this.view.querySelectorAll('[name="staticanalysismodule"]')
-  var isAnySelected = false
-  for (var i = 0; i < all.length; i++) {
-    if (all[i].checked === true) {
-      isAnySelected = true
-      break
-    }
-  }
-  for (var j = 0; j < all.length; j++) {
-    all[j].checked = !isAnySelected
+staticAnalysisView.prototype.checkModule = function (event) {
+  let selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
+  let checkAll = this.view.querySelector('[id="checkAllEntries"]')
+  if (event.target.checked) {
+    checkAll.checked = true
+  } else if (!selected.length) {
+    checkAll.checked = false
   }
-  event.target.checked = !isAnySelected
 }
 
-staticAnalysisView.prototype.checkModule = function (event) {
-  var selectAll = this.view.querySelector('[id="checkallstaticanalysis" ]')
-  if (event.target.checked) {
-    selectAll.checked = true
+staticAnalysisView.prototype.checkAll = function (event) {
+  if (!this.view) {
+    return
   }
+  // checks/unchecks all
+  var checkBoxes = this.view.querySelectorAll('[name="staticanalysismodule"]')
+  checkBoxes.forEach((checkbox) => { checkbox.checked = event.target.checked })
 }
 
 staticAnalysisView.prototype.renderModules = function () {
@@ -170,6 +164,7 @@ staticAnalysisView.prototype.renderModules = function () {
         <label class="${css.label}">
           <input id="staticanalysismodule_${categoryId}_${i}"
             type="checkbox"
+            class="staticAnalysisItem"
             name="staticanalysismodule"
             index=${item._index}
             checked="true"

src/app/tabs/styles/test-tab-styles.js

@@ -45,6 +45,8 @@ var css = csjs`
   .buttons {
     ${styles.rightPanel.testTab.box_listTests};
     margin: 2%;
+    display: flex;
+    align-items: center;
   }
   .runButton {
     ${styles.rightPanel.testTab.button_runTests};
@@ -58,6 +60,9 @@ var css = csjs`
     font-weight: bold;
     margin-bottom: 1em;
   }
+  .label {
+    display: flex;
+    align-items: center;
+  }
 `
-
 module.exports = css

src/app/tabs/test-tab.js

@@ -100,8 +100,8 @@ module.exports = class TestTab {
     }
 
     self._deps.filePanel.event.register('newTestFileCreated', file => {
-      var testList = document.querySelector("[class^='testList']")
-      var test = yo`<label><input onchange=${(e) => toggleCheckbox(e, file)} type="checkbox" checked="true">${file}</label>`
+      var testList = self.view.querySelector("[class^='testList']")
+      var test = yo`<label class="singleTestLabel"><input class="singleTest" onchange=${(e) => toggleCheckbox(e.target.checked, file)} type="checkbox" checked="true">${file}</label>`
       testList.appendChild(test)
       self.data.allTests.push(file)
       self.data.selectedTests.push(file)
@@ -133,13 +133,32 @@ module.exports = class TestTab {
 
     function listTests () {
       var tests = self.data.allTests
-      return tests.map(test => yo`<label><input onchange =${(e) => toggleCheckbox(e, test)} type="checkbox" checked="true">${test} </label>`)
+      return tests.map(test => yo`<label class="singleTestLabel"><input class="singleTest" onchange =${(e) => toggleCheckbox(e.target.checked, test)} type="checkbox" checked="true">${test} </label>`)
     }
 
-    function toggleCheckbox (e, test) {
-      var selectedTests = self.data.selectedTests
-      selectedTests = e.target.checked ? [...selectedTests, test] : selectedTests.filter(el => el !== test)
+    function toggleCheckbox (eChecked, test) {
+      if (!self.data.selectedTests) {
+        self.data.selectedTests = self._view.el.querySelectorAll('.singleTest:checked')
+      }
+      let selectedTests = self.data.selectedTests
+      selectedTests = eChecked ? [...selectedTests, test] : selectedTests.filter(el => el !== test)
       self.data.selectedTests = selectedTests
+      let checkAll = self._view.el.querySelector('[id="checkAllTests"]')
+      if (eChecked) {
+        checkAll.checked = true
+      } else if (!selectedTests.length) {
+        checkAll.checked = false
+      }
+    }
+
+    function checkAll (event) {
+      let checkBoxes = self._view.el.querySelectorAll('.singleTest')
+      const checkboxesLabels = self._view.el.querySelectorAll('.singleTestLabel')
+      // checks/unchecks all
+      for (let i = 0; i < checkBoxes.length; i++) {
+        checkBoxes[i].checked = event.target.checked
+        toggleCheckbox(event.target.checked, checkboxesLabels[i].innerText)
+      }
     }
 
     var runTests = function () {
@@ -177,12 +196,20 @@ module.exports = class TestTab {
           <br/>
           For more details, see
           How to test smart contracts guide in our documentation.
-          <div class=${css.generateTestFile} onclick=${generateTestFile}>Generate test file</div>
+          <div class="${css.generateTestFile}" onclick="${generateTestFile}">Generate test file</div>
         </div>
         <div class="${css.tests}">
           ${self.testList}
-          <div class=${css.buttons}>
-            <div class=${css.runButton} onclick=${runTests}>Run Tests</div>
+          <div class="${css.buttons}">
+            <div class="${css.runButton}"  onclick="${runTests}">Run Tests</div>
+            <label class="${css.label}" for="checkAllTests">
+              <input id="checkAllTests"
+                type="checkbox"
+                onclick="${function (event) { checkAll(event) }}"
+                checked="true"
+              >
+              Check/Uncheck all
+            </label>
           </div>
           ${testsOutput}
           ${testsSummary}