Add skip/unskip helpers to tangy-form item callbacks

Tangerine-Community · Jan 7, 2020 · c8a65dd · c8a65dd
1 parent c0d580f
commit c8a65dd
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/tangy-form-item-callback-helpers.js b/tangy-form-item-callback-helpers.js
@@ -83,6 +83,22 @@ export class TangyFormItemHelpers {
     })
   }
 
+  skip(name) {
+    this.inputs.forEach(inputEl => {
+      if (inputEl.name === name) {
+        inputEl.skipped = true
+      }
+    })
+  }
+
+  unskip(name) {
+    this.inputs.forEach(inputEl => {
+      if (inputEl.name === name) {
+        inputEl.skipped = false
+      }
+    })
+  }
+
   inputEnable(name) {
     this.inputs.forEach(inputEl => {
       if (inputEl.name === name) {

diff --git a/tangy-form-item.js b/tangy-form-item.js
@@ -488,7 +488,7 @@ export class TangyFormItem extends PolymerElement {
     // Declare namespaces for helper functions for the eval context in form.on-change.
     // We have to do this because bundlers modify the names of things that are imported
     // but do not update the evaled code because it knows not of it.
-    let {getValue, inputHide, inputShow, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold, goTo, goToEnd} = this.exposeHelperFunctions()
+    let {getValue, inputHide, inputShow, skip, unskip, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold, goTo, goToEnd} = this.exposeHelperFunctions()
     if (this.hasAttribute("incorrect-threshold")) {
       hideInputsUponThreshhold(this)
     }
@@ -507,6 +507,8 @@ export class TangyFormItem extends PolymerElement {
   exposeHelperFunctions() {
     let helpers = new TangyFormItemHelpers(this)
     let getValue = (name) => helpers.getValue(name)
+    let skip = (name) => helpers.skip(name)
+    let unskip = (name) => helpers.unskip(name)
     let inputHide = (name) => helpers.inputHide(name)
     let inputShow = (name) => helpers.inputShow(name)
     let inputEnable = (name) => helpers.inputEnable(name)
@@ -526,7 +528,7 @@ export class TangyFormItem extends PolymerElement {
     let hideInputsUponThreshhold = (input) => helpers.hideInputsUponThreshhold(input)
     let goTo = (itemId, skipValidation = false) => helpers.goTo(itemId, skipValidation)
     let goToEnd = (skipValidation = false) => helpers.goToEnd(skipValidation)
-    return {getValue, inputHide, inputShow, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold, goTo, goToEnd};
+    return {getValue, inputHide, inputShow, skip, unskip, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold, goTo, goToEnd};
   }
 
   onOpenButtonPress() {
@@ -627,7 +629,7 @@ export class TangyFormItem extends PolymerElement {
     let firstInputWithIssue = ''
     for (let input of inputEls) {
       if (!input.hidden) {
-        let {getValue, inputHide, inputShow, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold} = this.exposeHelperFunctions();
+        let {getValue, inputHide, inputShow, skip, unskip, inputDisable, inputEnable, itemHide, itemShow, itemDisable, itemEnable, isChecked, notChecked, itemsPerMinute, numberOfItemsAttempted, numberOfCorrectItems, numberOfIncorrectItems, gridAutoStopped, hideInputsUponThreshhold} = this.exposeHelperFunctions();
         if ((input.validate && !input.validate()) || (input.hasAttribute('valid-if') && !eval(input.getAttribute('valid-if')))) {
           input.invalid = true
           if (!firstInputWithIssue) firstInputWithIssue = input.name

diff --git a/test/tangy-form-item_test.html b/test/tangy-form-item_test.html
@@ -103,6 +103,31 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="SkipHelperFixture">
+      <template>
+        <tangy-form id="my-form" title="My Form">
+          <tangy-form-item id="item1"
+            on-change="
+              if (inputs.input1.value === '') {
+                skip('input2')
+              } else {
+                unskip('input2')
+              }
+            "
+          >
+            <tangy-checkbox name="input1">
+              Do you like tangerines?
+            </tangy-checkbox>
+            <tangy-input 
+              name="input2"
+              label="Where do tangerines come from?"
+            >
+            </tangy-input>
+          </tangy-form-item>
+        </tangy-form>
+      </template>
+    </test-fixture>
+
     <test-fixture id="SkipIfFixture">
       <template>
         <tangy-form id="my-form" title="My Form">
@@ -317,7 +342,25 @@
           )
         })
 
-        test('should skip input', () => {
+        test('should skip input due to skip helper', () => {
+          const element = fixture('SkipHelperFixture');
+          element.newResponse()
+          // Make sure initial state is that input2 is skipped.
+          assert.equal(element.querySelector('tangy-form-item').querySelector('[name=input2]').hasAttribute('skipped'), true)
+          // Trigger action that will unskip.
+          element.querySelector('tangy-form-item').querySelector('[name=input1]').value = 'on'
+          element.querySelector('tangy-form-item').querySelector('[name=input1]').dispatchEvent(new Event('change', {bubbles:true}))
+          assert.equal(element.querySelector('tangy-form-item').querySelector('[name=input2]').hasAttribute('skipped'), false)
+          // Assign a value and make sure it gets set back to default when skipped.
+          element.querySelector('tangy-form-item').querySelector('[name=input2]').value = 'foo'
+          assert.equal(element.querySelector('tangy-form-item').querySelector('[name=input2]').value, 'foo')
+          element.querySelector('tangy-form-item').querySelector('[name=input1]').value = ''
+          element.querySelector('tangy-form-item').querySelector('[name=input1]').dispatchEvent(new Event('change', {bubbles:true}))
+          assert.equal(element.querySelector('tangy-form-item').querySelector('[name=input2]').hasAttribute('skipped'), true)
+          assert.equal(element.querySelector('tangy-form-item').querySelector('[name=input2]').value, '')
+        })
+
+        test('should skip input due to skip-if', () => {
           const element = fixture('SkipIfFixture');
           element.newResponse()
           // Make sure initial state is that input2 is skipped.