Watch for changes on the options input, which is a grandchild of base-form

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

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',

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
         }
       }

styles/elements/_tables.scss

@@ -126,6 +126,7 @@ table {
       @include h4;
 
       font-size: $lead-font-size;
+      justify-content: space-between;
       flex: 2;
     }
   }

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 }]">

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') }}

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>