Merge pull request #622 from dod-ccpo/oversight-invites-styling

Oversight invites styling

atst/forms/officers.py

@@ -1,5 +1,5 @@
 from flask_wtf import FlaskForm
-from wtforms.fields import StringField
+from wtforms.fields import StringField, BooleanField
 from wtforms.fields.html5 import TelField
 from wtforms.validators import Email, Length, Optional
 
@@ -15,6 +15,7 @@ class OfficerForm(FlaskForm):
     email = StringField("Email", validators=[Optional(), Email()])
     phone_number = TelField("Phone Number", validators=[PhoneNumber()])
     dod_id = StringField("DoD ID", validators=[Optional(), Length(min=10), IsNumber()])
+    invite = BooleanField("Invite to Task Order Builder")
 
 
 class EditTaskOrderOfficersForm(CacheableForm):

styles/sections/_task_order.scss

@@ -361,6 +361,48 @@
     }
 
     .officer__form {
+        padding: 1.5rem;
+        background-color: $color-aqua-lightest;
+        border-left-color: $color-blue;
+        border-left-style: solid;
+        border-left-width: $gap / 2;
+        margin-top: 1.5rem;
+
+      .edit-officer {
+        margin-bottom: $gap * 2;
+
+        h4 {
+          color: $color-gray;
+          margin-top: 0;
+        }
+
+        p {
+          font-size: 1.5rem;
+        }
+      }
+
+      .usa-input__title {
+        font-weight: normal;
+      }
+
+      .form-row {
+        margin-bottom: 0rem;
+        margin-top: 0rem;
+        margin-right: 2rem;
+
+        .usa-input {
+          margin-bottom: 1.5rem;
+        }
+
+        &.officer__form--dodId {
+          margin-top: 1.5rem;
+
+          .usa-input {
+            margin-bottom: 0rem;
+          }
+        }
+      }
+
       .officer__form--actions {
         display: flex;
         flex-direction: row;

templates/components/checkbox_input.html

@@ -1,11 +1,17 @@
-{% macro CheckboxInput(field, inline=False, classes="") -%}
+{% macro CheckboxInput(
+  field,
+  label=field.label | striptags,
+  inline=False,
+  classes="") -%}
   <checkboxinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
     <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
 
       <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
         <legend>
           {{ field() }}
-          {{ field.label }}
+          <label for={{field.name}}>
+            {{ label }}
+          </label>
 
           {% if field.description %}
             <span class='usa-input__help'>{{ field.description | safe }}</span>

templates/portfolios/task_orders/invitations.html

@@ -13,44 +13,52 @@
   </a>
 {% endmacro %}
 
-{% macro EditOfficerInfo(form, officer_type) -%}
+{% macro EditOfficerInfo(form, officer_type, invited) -%}
-<div class='officer__form'>
   <template v-if="editing">
-    <div class='alert'>
+    <div class='officer__form'>
-      <div class='alert__content'>
+      <div class="edit-officer">
-        <div class='form-row'>
+        <h4>{{ ("task_orders.invitations." + officer_type + ".edit_title")  | translate}}</h4>
-          <div class='form-col form-col--half'>
+      </div>
-            {{ TextInput(form.first_name) }}
+      <div class='form-row'>
-          </div>
+        <div class='form-col form-col--half'>
-
+          {{ TextInput(form.first_name) }}
-          <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name) }}
-          </div>
         </div>
 
-        <div class='form-row'>
+        <div class='form-col form-col--half'>
-          <div class='form-col form-col--half'>
+          {{ TextInput(form.last_name) }}
-            {{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
+        </div>
-          </div>
+      </div>
 
-          <div class='form-col form-col--half'>
+      <div class='form-row'>
-            {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
+        </div>
+
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
+        </div>
+      </div>
+      <div class='form-row officer__form--dodId'>
+        <div class="form-col">
+          {% if not invited %}
+            <div class='form-row'>
+              {{ CheckboxInput(form.invite, label=(("forms.officers." + officer_type + "_invite") | translate)) }}
+            </div>
+          {% endif %}
+          <div class='form-row'>
+            {{ TextInput(form.dod_id, tooltip="task_orders.new.oversight.dod_id_tooltip" | translate, tooltip_title='Why', validation='dodId', disabled=invited)}}
           </div>
         </div>
-        {% if form.dod_id.data %}
+      </div>
-          {{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
+      <div class='alert__actions officer__form--actions'>
-        {% endif %}
+        <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
-        <div class='alert__actions officer__form--actions'>
+          {{ Icon("x") }}
-          <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
+          <span>Cancel</span>
-            {{ Icon("x") }}
+        </a>
-            <span>Cancel</span>
+        <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
-          </a>
-          <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
-        </div>
       </div>
     </div>
   </template>
-</div>
 {% endmacro %}
 
 {% macro OfficerInfo(task_order, officer_type, form) %}
@@ -67,8 +75,11 @@
       {% set email = task_order[prefix + "_email"] %}
       {% set phone_number = task_order[prefix + "_phone_number"] %}
       {% set dod_id = task_order[prefix + "_dod_id"] %}
+      {% set invited = False %}
+
 
       {% if task_order[officer_type] %}
+        {% set invited = True %}
         <div class="officer__info">
           <div class="row">
             <div class="officer__info--name">{{ first_name }} {{ last_name }}</div>
@@ -101,7 +112,7 @@
         <div class="officer__actions">
           {{ Link("Update", "edit", onClick="edit") }}
           {{ Link("Remove", "trash", classes="remove") }}
-          <button type='button' class='usa-button usa-button-primary'>
+          <button v-if="!editing" type='button' class='usa-button usa-button-primary' v-on:click="edit">
             {{ ("task_orders.invitations." + officer_type + ".invite_button_text") | translate  }}
           </button>
         </div>
@@ -113,13 +124,13 @@
           </div>
         </div>
         <div class="officer__actions">
-          <button type='button' class='usa-button usa-button-primary'>
+          <button v-if="!editing" type='button' class='usa-button usa-button-primary' v-on:click="edit">
             {{ ("task_orders.invitations." + officer_type + ".add_button_text") | translate }}
           </button>
         </div>
       {% endif %}
 
-      {{ EditOfficerInfo(form, officer_type) }}
+      {{ EditOfficerInfo(form, officer_type, invited) }}
       </div>
     </edit-officer-form>
   </div>

translations.yaml

@@ -254,6 +254,10 @@ forms:
   portfolio:
     name_label: Portfolio Name
     name_length_validation_message: Portfolio names must be at least 4 and not more than 100 characters
+  officers:
+    contracting_officer_invite: Invite KO to Task Order Builder
+    contracting_officer_representative_invite: Invite COR to Task Order Builder
+    security_officer_invite: Invite SO to Task Order Builder
 fragments:
   edit_application_form:
     explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.'
@@ -461,21 +465,25 @@ task_orders:
       pending_to: Pending TO Completion
   invitations:
     dod_id_label: DoD ID
+    edit_text: A new invitation e-mail will be sent when new information is saved.
     contracting_officer:
       title: Contracting Officer (KO) Information
       description: You'll need a signature from your KO. You might want to work with your program Financial Manager to get your TO documents moving in the right direction.
       add_button_text: Add / Invite KO
       invite_button_text: Invite KO
+      edit_title: Edit KO
     contracting_officer_representative:
       title: Contracting Officer Representative (COR) Information
       description: Your COR may assist in submitting the Task Order documents within their official system of record.
       add_button_text: Add / Invite COR
       invite_button_text: Invite COR
+      edit_title: Edit COR
     security_officer:
       title: IA Security Officer Information
       description: Your Security Officer will need to answer some security configuration questions in order to generate a DD-254 document, then digitally sign.
       add_button_text: Add / Invite Security Officer
       invite_button_text: Invite Security Officer
+      edit_title: Edit SO
   ko_review:
     alert_title: Verify Your Info
     title: Task Order Builder