Make checkboxes work

atst/forms/application_member.py

@@ -108,6 +108,5 @@ class UpdatePermissionsForm(FlaskForm):
 
 
 class UpdateMemberForm(BaseForm):
-    member_role_id = HiddenField()
+    permission_sets = FormField(PermissionsForm)
-    permission_sets = FormField(UpdatePermissionsForm)
     environment_roles = FieldList(FormField(EnvironmentForm))

atst/models/application_role.py

@@ -71,6 +71,20 @@ class ApplicationRole(
         elif self.latest_invitation:
             return self.latest_invitation.user_name
 
+    @property
+    def user_first_name(self):
+        if self.user:
+            return self.user.first_name
+        elif self.latest_invitation:
+            return self.latest_invitation.first_name
+
+    @property
+    def user_last_name(self):
+        if self.user:
+            return self.user.last_name
+        elif self.latest_invitation:
+            return self.latest_invitation.last_name
+
     def __repr__(self):
         return "<ApplicationRole(application='{}', user_id='{}', id='{}', permissions={})>".format(
             self.application.name, self.user_id, self.id, self.permissions

atst/routes/applications/settings.py

@@ -9,7 +9,7 @@ from atst.domain.audit_log import AuditLog
 from atst.domain.common import Paginator
 from atst.domain.environment_roles import EnvironmentRoles
 from atst.forms.application import ApplicationForm, EditEnvironmentForm
-from atst.forms.application_member import NewForm as NewMemberForm
+from atst.forms.application_member import NewForm as MemberForm, UpdateMemberForm
 from atst.forms.data import ENV_ROLE_NO_ACCESS as NO_ACCESS
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.models.environment_role import CSPRole
@@ -36,6 +36,7 @@ def get_environments_obj_for_app(application):
 
 
 def data_for_app_env_roles_form(application):
+    # this whole thing can be deleted when #1067 is rebased/merged! (and check other fns here)
     csp_roles = [role.value for role in CSPRole]
     csp_roles.insert(0, NO_ACCESS)
     # dictionary for sorting application members by environments
@@ -95,16 +96,19 @@ def get_form_permission_value(member, edit_perm_set):
 def get_members_data(application):
     members_data = []
     for member in application.members:
+        perms_team_mgmt = get_form_permission_value(
+            member, PermissionSets.EDIT_APPLICATION_TEAM
+        )
+        perms_env_mgmt = get_form_permission_value(
+            member, PermissionSets.EDIT_APPLICATION_ENVIRONMENTS
+        )
+        perms_del_env = get_form_permission_value(
+            member, PermissionSets.DELETE_APPLICATION_ENVIRONMENTS
+        )
         permission_sets = {
-            "perms_team_mgmt": get_form_permission_value(
+            "perms_team_mgmt": perms_team_mgmt,
-                member, PermissionSets.EDIT_APPLICATION_TEAM
+            "perms_env_mgmt": perms_env_mgmt,
-            ),
+            "perms_del_env": perms_del_env,
-            "perms_env_mgmt": get_form_permission_value(
-                member, PermissionSets.EDIT_APPLICATION_ENVIRONMENTS
-            ),
-            "perms_del_env": get_form_permission_value(
-                member, PermissionSets.DELETE_APPLICATION_ENVIRONMENTS
-            ),
         }
         roles = EnvironmentRoles.get_for_application_member(member.id)
         environment_roles = [
@@ -115,6 +119,15 @@ def get_members_data(application):
             }
             for role in roles
         ]
+        form_data = {
+            "environment_roles": environment_roles,
+            "permission_sets": { "perms_env_mgmt": 'selected' },
+        }
+        # ['edit_application_environments', 'edit_application_team', 'delete_application_environments']
+        # ['edit_application_team']
+
+        # {'perms_team_mgmt': 'edit_application_team', 'perms_env_mgmt': 'view_application', 'perms_del_env': 'view_application'}
+        form = UpdateMemberForm(data=form_data)
         members_data.append(
             {
                 "role_id": member.id,
@@ -122,6 +135,7 @@ def get_members_data(application):
                 "permission_sets": permission_sets,
                 "environment_roles": environment_roles,
                 "role_status": member.status.value,
+                "form": form,
             }
         )
 
@@ -134,7 +148,7 @@ def get_new_member_form(application):
         for e in application.environments
     ]
 
-    return NewMemberForm(data={"environment_roles": env_roles})
+    return MemberForm(data={"environment_roles": env_roles})
 
 
 def render_settings_page(application, **kwargs):
@@ -304,7 +318,7 @@ def delete_environment(environment_id):
 )
 def create_member(application_id):
     application = Applications.get(application_id)
-    form = NewMemberForm(http_request.form)
+    form = MemberForm(http_request.form)
 
     if form.validate():
         try:

templates/components/checkbox_input.html

@@ -2,11 +2,13 @@
   field,
   label=field.label,
   inline=False,
-  classes="") -%}
+  classes="",
+  key=field.name,
+  id=field.name) -%}
   <checkboxinput
     name='{{ field.name }}'
     inline-template
-    key='{{ field.name }}'
+    key='{{ key }}'
     v-bind:initial-checked='{{ field.data|string|lower }}'
     >
     <div>
@@ -14,8 +16,8 @@
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
           <legend>
-            {{ field(**{"v-model": "isChecked"}) }}
+            {{ field(id=id, checked=True, **{"v-model": "isChecked"}) }}
-            {{ label | safe }}
+            {{ field.label(for=id) | safe }}
 
             {% if field.description %}
               <p class='usa-input__help'>

templates/fragments/applications/new_member_modal_content.html

@@ -24,7 +24,7 @@
   </div>
 {% endmacro %}
 
-{% macro MemberStepOne(new_member_form) %}
+{% macro MemberStepOne(member_form) %}
   {% set next_button %}
     <input
         type='button'
@@ -36,24 +36,24 @@
 
   {% call MemberFormTemplate(title="portfolios.applications.members.form.add_member"|translate, next_button=next_button, previous=False) %}
     <div class='form-row'>
-      {{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
+      {{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }}
     </div>
     <div class='form-row'>
-      {{ TextInput(new_member_form.user_data.last_name, validation='requiredField', optional=False) }}
+      {{ TextInput(member_form.user_data.last_name, validation='requiredField', optional=False) }}
     </div>
     <div class='form-row'>
-      {{ TextInput(new_member_form.user_data.email, validation='email', optional=False) }}
+      {{ TextInput(member_form.user_data.email, validation='email', optional=False) }}
     </div>
     <div class="form-row">
-      {{ PhoneInput(new_member_form.user_data.phone_number, new_member_form.user_data.phone_ext)}}
+      {{ PhoneInput(member_form.user_data.phone_number, member_form.user_data.phone_ext)}}
     </div>
     <div class='form-row'>
-      {{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
+      {{ TextInput(member_form.user_data.dod_id, validation='dodId', optional=False) }}
     </div>
     <a href="#">How do I find the DoD ID?</a>
   {% endcall %}
 {% endmacro %}
-{% macro MemberStepTwo(new_member_form, application) %}
+{% macro MemberStepTwo(member_form, application) %}
   {% set next_button %}
     <input
       type="submit"
@@ -63,41 +63,41 @@
   {% endset %}
 
   {% call MemberFormTemplate(title="portfolios.applications.members.form.step_2_title"|translate, next_button=next_button) %}
-    <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
+  <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
-    <div class="application-perms">
+  <div class="application-perms">
-      {{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
+    {{ CheckboxInput(member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
-      {{ CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
+    {{ CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
-      {{ CheckboxInput(new_member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
+    {{ CheckboxInput(member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
-    </div>
+  </div>
-    <div class="environment-roles-new">
+  <div class="environment-roles-new">
-      <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
+    <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
-      <hr>
+    <hr>
-      {% for environment_data in new_member_form.environment_roles %}
+    {% for environment_data in member_form.environment_roles %}
-        <optionsinput inline-template
+      <optionsinput inline-template
-          v-bind:initial-value="'{{ environment_data.role.data | string }}'"
+        v-bind:initial-value="'{{ environment_data.role.data | string }}'"
-          v-bind:name="'{{ environment_data.name | string }}'"
+        v-bind:name="'{{ environment_data.name | string }}'"
-          v-bind:optional="true"
+        v-bind:optional="true"
-        >
+      >
-          <div class="usa-input">
+        <div class="usa-input">
-            <fieldset data-ally-disabled="true" class="usa-input__choices">
+          <fieldset data-ally-disabled="true" class="usa-input__choices">
-              <div class="form-row">
+            <div class="form-row">
-                <div class="form-col form-col--two-thirds">
+              <div class="form-col form-col--two-thirds">
-                  <legend>
+                <legend>
-                    <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
+                  <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
-                      {{ environment_data.environment_name.data }}
+                    {{ environment_data.environment_name.data }}
-                    </div>
+                  </div>
-                  </legend>
+                </legend>
-                </div>
-                <div class="form-col form-col--third">
-                  {{ environment_data.role(**{"v-model": "value"}) }}
-                </div>
               </div>
-            </fieldset>
+              <div class="form-col form-col--third">
-          </div>
+                {{ environment_data.role(**{"v-model": "value"}) }}
-        </optionsinput>
+              </div>
-        {{ environment_data.environment_id() }}
+            </div>
-        <hr>
+          </fieldset>
-      {% endfor %}
+        </div>
-    </div>
+      </optionsinput>
+      {{ environment_data.environment_id() }}
+      <hr>
+    {% endfor %}
+  </div>
   {% endcall %}
 {% endmacro %}

templates/portfolios/applications/settings.html

@@ -10,6 +10,10 @@
 {% from "components/save_button.html" import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
+{% from "components/icon.html" import Icon %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/checkbox_input.html" import CheckboxInput %}
+{% from "components/phone_input.html" import PhoneInput %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
 
@@ -87,11 +91,11 @@
         </a>
         {{ MultiStepModalForm(
             name=new_member_modal_name,
-            form=new_member_form,
+            form=member.form,
             form_action=url_for("applications.create_member", application_id=application.id),
             steps=[
-              member_steps.MemberStepOne(new_member_form),
+              member_steps.MemberStepOne(member.form),
-              member_steps.MemberStepTwo(new_member_form, application)
+              member_steps.MemberStepTwo(member.form, application)
             ],
           ) }}
       {% endif %}
@@ -126,12 +130,62 @@
           </thead>
           <tbody>
             {% for member in members %}
+              {% import "fragments/applications/new_member_modal_content.html" as member_steps %}
+              {% set modal_name = "edit_member-{}".format(loop.index) %}
+              {% call Modal(modal_name, dismissable=True) %}
+              <form id='{{ modal_name }}'>
+                <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
+                  <div class="application-perms">
+                    {% set team_mgmt = "perms_team_mgmt-{}".format(member.role_id) %}
+                    {% set env_mgmt = "perms_env_mgmt-{}".format(member.role_id) %}
+                    {% set del_env = "perms_del_env-{}".format(member.role_id) %}
+                    {{ CheckboxInput(member.form.permission_sets.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
+                    {{ CheckboxInput(member.form.permission_sets.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
+                    {{ CheckboxInput(member.form.permission_sets.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
+                  </div>
+                  <div class="environment-roles-new">
+                    <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
+                    <hr>
+                    {% for environment_data in member.form.environment_roles %}
+                      <optionsinput inline-template
+                        v-bind:initial-value="'{{ environment_data.role.data | string }}'"
+                        v-bind:name="'{{ environment_data.name | string }}'"
+                        v-bind:optional="true"
+                      >
+                        <div class="usa-input">
+                          <fieldset data-ally-disabled="true" class="usa-input__choices">
+                            <div class="form-row">
+                              <div class="form-col form-col--two-thirds">
+                                <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--third">
+                                {{ environment_data.role(**{"v-model": "value"}) }}
+                              </div>
+                            </div>
+                          </fieldset>
+                        </div>
+                      </optionsinput>
+                      {{ environment_data.environment_id() }}
+                      <hr>
+                    {% endfor %}
+                  </div>
+                </form>
+              {% endcall %}
               <tr>
                 <td>
-                  {{ member.user_name }}<br>
+                  {{ member.user_name }}
+                  <a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
+                    {{ Icon('edit') }}
+                  </a>
+                  <br>
                   {% if member.role_status == 'pending' %}
                     <span class='label label--purple'>INVITE PENDING</span>
                   {% endif %}
+
                 </td>
 
                 <td>