Merge pull request #1063 from dod-ccpo/new-member-modal-part-1

New member modal part 1

alembic/versions/0ee5a34a1b84_add_extension_to_invites.py

@@ -0,0 +1,30 @@
+"""add extension to invites
+
+Revision ID: 0ee5a34a1b84
+Revises: 4a3122ffe898
+Create Date: 2019-09-09 16:16:32.018776
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '0ee5a34a1b84' # pragma: allowlist secret
+down_revision = '4a3122ffe898' # pragma: allowlist secret
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('application_invitations', sa.Column('phone_ext', sa.String(), nullable=True))
+    op.add_column('portfolio_invitations', sa.Column('phone_ext', sa.String(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('portfolio_invitations', 'phone_ext')
+    op.drop_column('application_invitations', 'phone_ext')
+    # ### end Alembic commands ###

atst/forms/member.py

@@ -21,6 +21,7 @@ class NewForm(FlaskForm):
         translate("forms.new_member.phone_number_label"),
         validators=[Optional(), PhoneNumber()],
     )
+    phone_ext = StringField("Extension")
     dod_id = StringField(
         translate("forms.new_member.dod_id_label"),
         validators=[Required(), Length(min=10), IsNumber()],

atst/models/mixins/invites.py

@@ -49,6 +49,7 @@ class InvitesMixin(object):
     first_name = Column(String)
     last_name = Column(String)
     phone_number = Column(String)
+    phone_ext = Column(String)
 
     def __repr__(self):
         role_id = self.role.id if self.role else None

styles/sections/_application_edit.scss

@@ -25,6 +25,8 @@
 }
 
 #modal--add-app-mem {
+  text-align: left;
+
   input[type="checkbox"] + label::before {
     margin-left: 0;
   }
@@ -32,6 +34,30 @@
   .input__inline-fields {
     text-align: left;
   }
+
+  .form-row {
+    margin-top: 0;
+
+    .usa-input {
+      margin: 0;
+      width: 45rem;
+
+      input,
+      label,
+      .usa-input__message {
+        max-width: unset;
+      }
+
+      label .icon-validation {
+        left: unset;
+        right: -$gap * 4;
+      }
+
+      &--validation--phoneExt {
+        width: 18rem;
+      }
+    }
+  }
 }
 
 .app-team-settings-link {

templates/fragments/applications/new_member_modal_content.html

@@ -1,33 +1,27 @@
 {% 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 %}
 
 {% macro MemberStepOne(new_member_form) %}
   <div class="modal__form--header">
-    <h1>Invite new member</h1>
+    <h1>{{ Icon('avatar') }} Add Member</h1>
+    <hr>
   </div>
   <div class='form-row'>
-    <div class='form-col form-col--half'>
-      {{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
-    </div>
-    <div class='form-col form-col--half'>
-      {{ TextInput(new_member_form.user_data.last_name, validation='requiredField', optional=False) }}
-    </div>
+    {{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
   </div>
   <div class='form-row'>
-    <div class='form-col form-col--half'>
-      {{ TextInput(new_member_form.user_data.email, validation='email', optional=False) }}
-    </div>
-    <div class='form-col form-col--half'>
-      {{ TextInput(new_member_form.user_data.phone_number, validation='usPhone', optional=True) }}
-    </div>
+    {{ TextInput(new_member_form.user_data.last_name, validation='requiredField', optional=False) }}
   </div>
   <div class='form-row'>
-    <div class='form-col form-col--half'>
-      {{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
-    </div>
-    <div class='form-col form-col--half'>
-    </div>
+    {{ 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'>
     <input