nested checkbox component

js/components/checkbox_input.js

@@ -1,10 +1,11 @@
 import { emitEvent } from '../lib/emitters'
+import nestedcheckboxinput from './nested_checkbox_input'
 
 export default {
   name: 'checkboxinput',
 
   components: {
-    checkboxinput: this,
+    nestedcheckboxinput,
   },
 
   props: {
@@ -14,7 +15,7 @@ export default {
 
   data: function() {
     return {
-      checked: this.initialChecked,
+      isChecked: this.initialChecked,
     }
   },
 

js/components/nested_checkbox_input.js

@@ -0,0 +1,31 @@
+import { emitEvent } from '../lib/emitters'
+
+export default {
+  name: 'nestedcheckboxinput',
+
+  props: {
+    name: String,
+    isParentChecked: Boolean,
+  },
+
+  data: function() {
+    return {
+      isChecked: false,
+    }
+  },
+
+  updated: function() {
+    if (!this.isParentChecked) {
+      this.isChecked = false
+    }
+  },
+
+  methods: {
+    onInput: function(e) {
+      emitEvent('field-change', this, {
+        value: e.target.checked,
+        name: this.name,
+      })
+    },
+  },
+}

js/index.js

@@ -11,6 +11,7 @@ import optionsinput from './components/options_input'
 import multicheckboxinput from './components/multi_checkbox_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
+import nestedcheckboxinput from './components/nested_checkbox_input'
 import EditOfficerForm from './components/forms/edit_officer_form'
 import poc from './components/forms/poc'
 import oversight from './components/forms/oversight'
@@ -74,6 +75,7 @@ const app = new Vue({
     KoReview,
     BaseForm,
     DeleteConfirmation,
+    nestedcheckboxinput,
   },
 
   mounted: function() {

templates/components/checkbox_input.html

@@ -14,7 +14,7 @@
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
           <legend>
-            {{ field(**{"v-model": "checked"}) }}
+            {{ field(**{"v-model": "isChecked"}) }}
             {{ label | safe }}
 
             {% if field.description %}

templates/fragments/applications/add_new_application_member.html

@@ -89,11 +89,11 @@
       {{ CheckboxInput(member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
       {% call CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
         {% set field=member_form.permission_sets.perms_del_env %}
-        <checkboxinput
+        <nestedcheckboxinput
           name='{{ field.name }}'
           inline-template
           key='{{ field.name }}'
-          v-bind:initial-checked='{{ field.data|string|lower }}'
+          v-bind:is-parent-checked="isChecked"
           >
           <div class="usa-input input__inline-fields input__inline-fields--indented">
             <fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
@@ -102,8 +102,8 @@
                   id="permission_sets-perms_del_env"
                   name="permission_sets-perms_del_env"
                   type="checkbox"
-                  v-model="checked"
+                  v-model="isChecked"
-                  v-bind:disabled="!$parent.checked">
+                  v-bind:disabled="!$parent.isChecked">
                 {{ field.label | safe }}
               </legend>
             </fieldset>