From 47b07c2bb5d4ec0dfee8cd24f4be3f1909e037b8 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Mon, 29 Apr 2019 06:32:17 -0400
Subject: [PATCH] nested checkbox component

---
 js/components/checkbox_input.js               |  5 +--
 js/components/nested_checkbox_input.js        | 31 +++++++++++++++++++
 js/index.js                                   |  2 ++
 templates/components/checkbox_input.html      |  2 +-
 .../add_new_application_member.html           |  8 ++---
 5 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 js/components/nested_checkbox_input.js

diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js
index 803041eb..db542fef 100644
--- a/js/components/checkbox_input.js
+++ b/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,
     }
   },
 
diff --git a/js/components/nested_checkbox_input.js b/js/components/nested_checkbox_input.js
new file mode 100644
index 00000000..ebe8553c
--- /dev/null
+++ b/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,
+      })
+    },
+  },
+}
diff --git a/js/index.js b/js/index.js
index 44461fc2..5f5a886e 100644
--- a/js/index.js
+++ b/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() {
diff --git a/templates/components/checkbox_input.html b/templates/components/checkbox_input.html
index ac0906a2..157c0409 100644
--- a/templates/components/checkbox_input.html
+++ b/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 %}
diff --git a/templates/fragments/applications/add_new_application_member.html b/templates/fragments/applications/add_new_application_member.html
index 6e039726..d65d34e2 100644
--- a/templates/fragments/applications/add_new_application_member.html
+++ b/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-bind:disabled="!$parent.checked">
+                  v-model="isChecked"
+                  v-bind:disabled="!$parent.isChecked">
                 {{ field.label | safe }}
               </legend>
             </fieldset>