From 416ea1de82bd5f2069b7e9d9add345359ccb074a Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Wed, 1 May 2019 17:22:32 -0400
Subject: [PATCH] Watch for changes on the options input, which is a grandchild
 of base-form

---
 js/components/options_input.js                  | 8 ++++++++
 js/components/toggler.js                        | 2 +-
 js/mixins/form.js                               | 3 +--
 styles/elements/_tables.scss                    | 1 +
 templates/components/options_input.html         | 3 ++-
 templates/fragments/applications/edit_team.html | 6 +++---
 templates/portfolios/applications/team.html     | 4 ++--
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/js/components/options_input.js b/js/components/options_input.js
index fa4d8a57..2970b135 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -1,8 +1,11 @@
 import { emitEvent } from '../lib/emitters'
+import FormMixin from '../mixins/form'
 
 export default {
   name: 'optionsinput',
 
+  mixins: [FormMixin],
+
   props: {
     name: String,
     initialErrors: {
@@ -10,6 +13,10 @@ export default {
       default: () => [],
     },
     initialValue: String,
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -27,6 +34,7 @@ export default {
       emitEvent('field-change', this, {
         value: e.target.value,
         name: this.name,
+        watch: this.watch,
       })
       this.showError = false
       this.showValid = true
diff --git a/js/components/toggler.js b/js/components/toggler.js
index 583dec53..f1c34c96 100644
--- a/js/components/toggler.js
+++ b/js/components/toggler.js
@@ -1,6 +1,6 @@
 import FormMixin from '../mixins/form'
-import textinput from './text_input'
 import optionsinput from './options_input'
+import textinput from './text_input'
 
 export default {
   name: 'toggler',
diff --git a/js/mixins/form.js b/js/mixins/form.js
index 497497b1..f8e97f4d 100644
--- a/js/mixins/form.js
+++ b/js/mixins/form.js
@@ -16,8 +16,7 @@ export default {
       const { name, valid, parent_uid } = event
       if (typeof this[name] !== undefined) {
         this.fields[name] = valid
-
-        if (parent_uid === this._uid) {
+        if (event['parent_uid'] === this._uid || event['watch']) {
           this.changed = true
         }
       }
diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index 5ad64929..b18b1884 100644
--- a/styles/elements/_tables.scss
+++ b/styles/elements/_tables.scss
@@ -126,6 +126,7 @@ table {
       @include h4;
 
       font-size: $lead-font-size;
+      justify-content: space-between;
       flex: 2;
     }
   }
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index ff8af362..81a1e50c 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -1,13 +1,14 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False) -%}
+{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False, watch=False) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
     key='{{ field.name }}'
+    v-bind:watch='{{ watch | string | lower }}'
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html
index d034ec6a..094ccf40 100644
--- a/templates/fragments/applications/edit_team.html
+++ b/templates/fragments/applications/edit_team.html
@@ -8,9 +8,9 @@
     <li class="accordion-table__item">
       <div class="accordion-table__item-content row">
         <div class="col col--grow">{{ member_form.user_name.data }}</div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False) }}</div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False) }}</div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False) }}</div>
+        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
+        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
+        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
         <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
           {% set open_html %}
             {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html
index 992ef782..f6df4f25 100644
--- a/templates/portfolios/applications/team.html
+++ b/templates/portfolios/applications/team.html
@@ -32,11 +32,11 @@
           {% endif %}
           <header>
             <div class="responsive-table-wrapper__header">
-              <div class="responsive-table-wrapper__title">
+              <div class="responsive-table-wrapper__title row">
                 <div class="h3">
                   {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
                 </div>
-                <a class='icon-link'>
+                <a class="icon-link">
                   {{ Icon('info') }}
                   {{ "portfolios.admin.settings_info" | translate }}
                 </a>