From fd1d0b527a004965c22bac281a84fac2eab384ad Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Thu, 25 Apr 2019 11:37:15 -0400
Subject: [PATCH] Delete environments permission disabled by default in new app
 member form

It will be enabled when the user checks the "manage environments"
permission. This updates the Jinja and Vue checkbox input components so
that Vue can monitor the inpur state.
---
 js/components/checkbox_input.js               | 11 +++++++
 styles/components/_forms.scss                 |  6 +++-
 templates/components/checkbox_input.html      | 30 ++++++++++++-------
 .../add_new_application_member.html           | 25 ++++++++++++++--
 4 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js
index 6e646fa1..803041eb 100644
--- a/js/components/checkbox_input.js
+++ b/js/components/checkbox_input.js
@@ -3,8 +3,19 @@ import { emitEvent } from '../lib/emitters'
 export default {
   name: 'checkboxinput',
 
+  components: {
+    checkboxinput: this,
+  },
+
   props: {
     name: String,
+    initialChecked: Boolean,
+  },
+
+  data: function() {
+    return {
+      checked: this.initialChecked,
+    }
   },
 
   methods: {
diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss
index 696a71ce..5c30f1aa 100644
--- a/styles/components/_forms.scss
+++ b/styles/components/_forms.scss
@@ -182,8 +182,12 @@
 .input__inline-fields  {
   margin: 1rem 0 1rem 0;
 
+  &.input__inline-fields--indented {
+    margin-left: 4*$gap;
+  }
+
   &> fieldset.usa-input__choices label {
     display: inline;
     font-weight: $font-normal;
   }
- }
+}
diff --git a/templates/components/checkbox_input.html b/templates/components/checkbox_input.html
index 998d825d..ac0906a2 100644
--- a/templates/components/checkbox_input.html
+++ b/templates/components/checkbox_input.html
@@ -3,19 +3,29 @@
   label=field.label,
   inline=False,
   classes="") -%}
-  <checkboxinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
-    <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
+  <checkboxinput
+    name='{{ field.name }}'
+    inline-template
+    key='{{ field.name }}'
+    v-bind:initial-checked='{{ field.data|string|lower }}'
+    >
+    <div>
+      <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
 
-      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
-        <legend>
-          {{ field() }}
-          {{ label | safe }}
+        <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"}) }}
+            {{ label | safe }}
 
-          {% if field.description %}
+            {% if field.description %}
             <span class='usa-input__help'>{{ field.description | safe }}</span>
-          {% endif %}
-        </legend>
-      </fieldset>
+            {% endif %}
+          </legend>
+        </fieldset>
+      </div>
+      {% if caller %}
+        {{ caller() }}
+      {% endif %}
     </div>
   </checkboxinput>
 {%- endmacro %}
diff --git a/templates/fragments/applications/add_new_application_member.html b/templates/fragments/applications/add_new_application_member.html
index cba84e70..3f0eb559 100644
--- a/templates/fragments/applications/add_new_application_member.html
+++ b/templates/fragments/applications/add_new_application_member.html
@@ -84,9 +84,30 @@
         {% endfor %}
       </div>
       <h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
-      {{ CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
-      {{ CheckboxInput(member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
       {{ 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
+          name='{{ field.name }}'
+          inline-template
+          key='{{ field.name }}'
+          v-bind:initial-checked='{{ field.data|string|lower }}'
+          >
+          <div class="usa-input input__inline-fields input__inline-fields--indented">
+            <fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
+              <legend>
+                <input
+                  id="permission_sets-perms_del_env"
+                  name="permission_sets-perms_del_env"
+                  type="checkbox"
+                  v-model="checked"
+                  v-bind:disabled="!$parent.checked">
+                {{ field.label | safe }}
+              </legend>
+            </fieldset>
+          </div>
+        </checkboxinput>
+      {% endcall %}
     </div>
     <div class='action-group'>
       <input