Merge pull request #1065 from dod-ccpo/new-member-modal-part-2

New member modal part 2

atst/forms/application_member.py

@@ -29,13 +29,25 @@ class EnvironmentForm(FlaskForm):
 
 class PermissionsForm(FlaskForm):
     perms_env_mgmt = BooleanField(
-        translate("portfolios.applications.members.new.manage_envs"), default=False
+        translate("portfolios.applications.members.form.env_mgmt.label"),
+        default=False,
+        description=translate(
+            "portfolios.applications.members.form.env_mgmt.description"
+        ),
     )
     perms_team_mgmt = BooleanField(
-        translate("portfolios.applications.members.new.manage_team"), default=False
+        translate("portfolios.applications.members.form.team_mgmt.label"),
+        default=False,
+        description=translate(
+            "portfolios.applications.members.form.team_mgmt.description"
+        ),
     )
     perms_del_env = BooleanField(
-        translate("portfolios.applications.members.new.delete_envs"), default=False
+        translate("portfolios.applications.members.form.del_env.label"),
+        default=False,
+        description=translate(
+            "portfolios.applications.members.form.del_env.description"
+        ),
     )
 
     @property

js/components/checkbox_input.js

@@ -1,13 +1,8 @@
 import { emitEvent } from '../lib/emitters'
-import nestedcheckboxinput from './nested_checkbox_input'
 
 export default {
   name: 'checkboxinput',
 
-  components: {
-    nestedcheckboxinput,
-  },
-
   props: {
     name: String,
     initialChecked: Boolean,

js/components/nested_checkbox_input.js

@@ -1,31 +0,0 @@
-import { emitEvent } from '../lib/emitters'
-
-export default {
-  name: 'nestedcheckboxinput',
-
-  props: {
-    name: String,
-    isParentChecked: Boolean,
-  },
-
-  data: function() {
-    return {
-      isChecked: false,
-    }
-  },
-
-  updated: function() {
-    if (!this.isParentChecked) {
-      this.isChecked = false
-    }
-  },
-
-  methods: {
-    onInput: function(e) {
-      emitEvent('field-change', this, {
-        value: e.target.checked,
-        name: this.name,
-      })
-    },
-  },
-}

js/index.js

@@ -13,7 +13,6 @@ import optionsinput from './components/options_input'
 import multicheckboxinput from './components/multi_checkbox_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
-import nestedcheckboxinput from './components/nested_checkbox_input'
 import EditOfficerForm from './components/forms/edit_officer_form'
 import poc from './components/forms/poc'
 import oversight from './components/forms/oversight'
@@ -78,7 +77,6 @@ const app = new Vue({
     SidenavToggler,
     BaseForm,
     DeleteConfirmation,
-    nestedcheckboxinput,
     NewEnvironment,
     EnvironmentRole,
     SemiCollapsibleText,

styles/sections/_application_edit.scss

@@ -35,6 +35,24 @@
     text-align: left;
   }
 
+  .input__inline-fields {
+    padding: $gap * 2;
+    border: 1px solid $color-gray-lighter;
+
+    &.checked {
+      border: 1px solid $color-blue;
+    }
+
+    label {
+      font-weight: $font-bold;
+    }
+
+    p.usa-input__help {
+      margin-bottom: 0;
+      padding-left: 3rem;
+    }
+  }
+
   .form-row {
     margin-top: 0;
 
@@ -58,6 +76,11 @@
       }
     }
   }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid $color-gray-lighter;
+  }
 }
 
 .environment-roles {
@@ -69,12 +92,11 @@
     text-align: left;
 
     .usa-input {
-      margin: 2rem 0 2rem 0;
+      margin: $gap 0 $gap 0;
 
       .usa-input__title-inline {
-        line-height: $hit-area;
+        margin-top: $gap;
-        font-size: $lead-font-size;
+        margin-left: $gap;
-        padding: 0;
       }
     }
 

templates/components/checkbox_input.html

@@ -10,7 +10,7 @@
     v-bind:initial-checked='{{ field.data|string|lower }}'
     >
     <div>
-      <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
+      <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}' v-bind:class="[{ 'checked': isChecked }]">
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
           <legend>
@@ -25,9 +25,6 @@
           </legend>
         </fieldset>
       </div>
-      {% if caller %}
-        {{ caller() }}
-      {% endif %}
     </div>
   </checkboxinput>
 {%- endmacro %}

templates/fragments/applications/new_member_modal_content.html

@@ -3,121 +3,100 @@
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 
-{% macro MemberStepOne(new_member_form) %}
+{% macro MemberFormTemplate(title, next_button, previous=True) %}
   <div class="modal__form--header">
-    <h1>{{ Icon('avatar') }} Add Member</h1>
+    <h1>{{ Icon('avatar') }} {{ title }}</h1>
     <hr>
   </div>
-  <div class='form-row'>
+
-    {{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
+  {{ caller() }}
-  </div>
+
-  <div class='form-row'>
-    {{ TextInput(new_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) }}
-  </div>
-  <div class="form-row">
-    {{ PhoneInput(new_member_form.user_data.phone_number, new_member_form.user_data.phone_ext)}}
-  </div>
-  <div class='form-row'>
-    {{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
-  </div>
   <div class='action-group'>
+    {{ next_button }}
+    {% if previous %}
+      <input
+          type='button'
+          v-on:click="previous()"
+          class='action-group__action usa-button usa-button-secondary'
+          value='{{ "common.previous" | translate }}'>
+    {% endif %}
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
+  </div>
+{% endmacro %}
+
+{% macro MemberStepOne(new_member_form) %}
+  {% set next_button %}
     <input
         type='button'
         v-on:click="next()"
         v-bind:disabled="invalid"
         class='action-group__action usa-button'
-        value='Next'>
+        value='{{ "portfolios.applications.members.form.next_button" | translate }}'>
-    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
+  {% endset %}
-  </div>
+
+  {% 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) }}
+    </div>
+    <div class='form-row'>
+      {{ TextInput(new_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) }}
+    </div>
+    <div class="form-row">
+      {{ PhoneInput(new_member_form.user_data.phone_number, new_member_form.user_data.phone_ext)}}
+    </div>
+    <div class='form-row'>
+      {{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
+    </div>
+  {% endcall %}
 {% endmacro %}
 {% macro MemberStepTwo(new_member_form, application) %}
-  <div class="modal__form">
+  {% set next_button %}
-    <div class="modal__form--header">
+    <input
-      <h1>{{ "portfolios.applications.members.new.assign_roles" | translate }}</h1>
+      type="submit"
-      <a class='icon-link'>
+      class='action-group__action usa-button'
-        {{ Icon('info') }}
+      form="add-app-mem"
-        {{ "portfolios.applications.members.new.learn_more" | translate }}
+      value='{{ "portfolios.applications.members.form.add_member" | translate}}'>
-      </a>
+  {% endset %}
-      <div class="environment-roles-new">
+
-        <div class="form-row">
+  {% call MemberFormTemplate(title="portfolios.applications.members.form.step_2_title"|translate, next_button=next_button) %}
-          <div class="form-col form-col--quarter">
+    <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
-            <span class="environment-roles-new__head">
+    <div class="application-perms">
-              {{ "common.resource_names.environments" | translate }}:
-            </span>
-          </div>
-          <div class="form-col form-col--three-quarters">
-            <span class="environment-roles-new__head">
-              {{ "common.choose_role" | translate }}:
-            </span>
-          </div>
-        </div>
-        {% for environment_data in new_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--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>
-                </div>
-              </fieldset>
-            </div>
-          </optionsinput>
-          {{ environment_data.environment_id() }}
-        {% endfor %}
-      </div>
-      <h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
       {{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
-      {% call CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
+      {{ CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
-        {% set field=new_member_form.permission_sets.perms_del_env %}
+      {{ CheckboxInput(new_member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
-        <nestedcheckboxinput
+    </div>
-          name='{{ field.name }}'
+    <div class="environment-roles-new">
-          inline-template
+      <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
-          key='{{ field.name }}'
+      <hr>
-          v-bind:is-parent-checked="isChecked"
+      {% for environment_data in new_member_form.environment_roles %}
-          >
+        <optionsinput inline-template
-          <div class="usa-input input__inline-fields input__inline-fields--indented">
+          v-bind:initial-value="'{{ environment_data.role.data | string }}'"
-            <fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
+          v-bind:name="'{{ environment_data.name | string }}'"
-              <legend>
+          v-bind:optional="true"
-                <input
+        >
-                  id="permission_sets-perms_del_env"
+          <div class="usa-input">
-                  name="permission_sets-perms_del_env"
+            <fieldset data-ally-disabled="true" class="usa-input__choices">
-                  type="checkbox"
+              <div class="form-row">
-                  v-model="isChecked"
+                <div class="form-col form-col--two-thirds">
-                  v-bind:disabled="!$parent.isChecked">
+                  <legend>
-                {{ field.label | safe }}
+                    <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
-              </legend>
+                      {{ 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>
-        </checkboxinput>
+        </optionsinput>
-      {% endcall %}
+        {{ environment_data.environment_id() }}
+        <hr>
+      {% endfor %}
     </div>
-    <div class='action-group'>
+  {% endcall %}
-      <input
-        type="submit"
-        class='action-group__action usa-button'
-        form="add-app-mem"
-        value='Invite member'>
-      <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
-      <input
-          type='button'
-          v-on:click="previous()"
-          class='action-group__action usa-button action-group__action--left'
-          value='Previous step'>
-    </div>
-  </div>
 {% endmacro %}

translations.yaml

@@ -57,6 +57,7 @@ common:
   next: Next
   'yes': 'Yes'
   'no': 'No'
+  previous: Previous
   response_label: Response required
   save: Save
   save_changes: Save Changes
@@ -336,6 +337,21 @@ portfolios:
       add_to_environment: Add to existing environment
     team_text: Team
     members:
+      form:
+        env_mgmt:
+          label: Manage Environments
+          description: Add and rename project environments, assign environment access roles to team members.
+        team_mgmt:
+          label: Edit Team
+          description: Add and remove team members.
+        del_env:
+          label: Delete Application
+          description: Delete this application.
+        env_access: Environment Access
+        next_button: "Next: Permissions"
+        project_perms: Project Permissions
+        step_2_title: Set Permissions and Roles
+        add_member: Add Member
       new:
         assign_roles: Assign Member Environments and Roles
         learn_more: Learn more about these roles