From 054d030e15b2f35a51330b5d768fd090c00661e6 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Thu, 25 Apr 2019 09:56:37 -0400
Subject: [PATCH] Vue binding for environment role selections.

The environment name will be grayed out until something besides the
default "no access" is selected.

Small changes to the application member subforms:
- filter for "None" as a string
- have nested forms inherit from FlaskForm; each nested form adds its
  own validation error flash otherwise if there are validation problems
---
 atst/forms/application_member.py              | 12 +++++--
 js/components/options_input.js                |  1 +
 styles/sections/_application_edit.scss        |  5 +++
 .../add_new_application_member.html           | 34 +++++++++++--------
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/atst/forms/application_member.py b/atst/forms/application_member.py
index 4e54a17b..12e71873 100644
--- a/atst/forms/application_member.py
+++ b/atst/forms/application_member.py
@@ -1,3 +1,4 @@
+from flask_wtf import FlaskForm
 from wtforms.fields import FormField, FieldList, HiddenField, BooleanField
 
 from .forms import BaseForm
@@ -8,13 +9,18 @@ from atst.domain.permission_sets import PermissionSets
 from atst.utils.localization import translate
 
 
-class EnvironmentForm(BaseForm):
+class EnvironmentForm(FlaskForm):
     environment_id = HiddenField()
     environment_name = HiddenField()
-    role = SelectField(environment_name, choices=ENV_ROLES, default=None)
+    role = SelectField(
+        environment_name,
+        choices=ENV_ROLES,
+        default=None,
+        filters=[lambda x: None if x == "None" else x],
+    )
 
 
-class PermissionsForm(BaseForm):
+class PermissionsForm(FlaskForm):
     perms_env_mgmt = BooleanField(
         translate("portfolios.applications.members.new.manage_envs"), default=False
     )
diff --git a/js/components/options_input.js b/js/components/options_input.js
index a2ad1838..fa4d8a57 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -18,6 +18,7 @@ export default {
       showError: showError,
       showValid: !showError && !!this.initialValue,
       validationError: this.initialErrors.join(' '),
+      value: this.initialValue,
     }
   },
 
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index ab642442..3b106c1e 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -85,3 +85,8 @@
 .environment-roles-new__head {
   font-weight: $font-bold;
 }
+
+.environment-name--gray {
+  font-weight: $font-normal;
+  color: $color-gray-medium;
+}
diff --git a/templates/fragments/applications/add_new_application_member.html b/templates/fragments/applications/add_new_application_member.html
index 1f55efde..cba84e70 100644
--- a/templates/fragments/applications/add_new_application_member.html
+++ b/templates/fragments/applications/add_new_application_member.html
@@ -5,7 +5,7 @@
 
 {% set step_one %}
   <div class="modal__form--header">
-    <h1>Invite new portfolio member</h1>
+    <h1>Invite new member</h1>
   </div>
   <div class='form-row'>
     <div class='form-col form-col--half'>
@@ -62,20 +62,24 @@
           </div>
         </div>
         {% for environment_data in member_form.environment_roles %}
-          <div class="usa-input">
-            <fieldset data-ally-disabled="true" class="form-row usa-input__choices">
-              <div class="form-col form-col--quarter">
-                <legend>
-                  <div class="usa-input__title-inline">
-                    {{ environment_data.environment_name.data }}
-                  </div>
-                </legend>
-              </div>
-              <div class="form-col form-col--three-quarters">
-                {{ environment_data.role() }}
-              </div>
-            </fieldset>
-          </div>
+          <optionsinput inline-template
+            v-bind:initial-value="'{{ environment_data.role.data | string }}'"
+          >
+            <div class="usa-input">
+              <fieldset data-ally-disabled="true" class="form-row usa-input__choices">
+                <div class="form-col form-col--quarter">
+                  <legend>
+                    <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
+                      {{ environment_data.environment_name.data }}
+                    </div>
+                  </legend>
+                </div>
+                <div class="form-col form-col--three-quarters">
+                  {{ environment_data.role(**{"v-model": "value"}) }}
+                </div>
+              </fieldset>
+            </div>
+          </optionsinput>
           {{ environment_data.environment_id() }}
         {% endfor %}
       </div>