Input for DoD ID appears all the time, but is only editable if an ID hasn't already been given, and invite checkbox appears if officer hasn't been invited

This commit is contained in:
leigh-mil 2019-02-09 13:42:48 -05:00
parent 10cfa17894
commit 4f3e7f2d66
4 changed files with 45 additions and 6 deletions

View File

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

View File

@ -366,11 +366,13 @@
border-left-color: $color-blue; border-left-color: $color-blue;
border-left-style: solid; border-left-style: solid;
border-left-width: $gap / 2; border-left-width: $gap / 2;
margin-top: 1.5rem;
.edit-officer { .edit-officer {
h4 { h4 {
color: $color-gray; color: $color-gray;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-top: 0;
} }
p { p {
@ -385,6 +387,18 @@
.form-row { .form-row {
margin-bottom: 0rem; margin-bottom: 0rem;
margin-top: 0rem; margin-top: 0rem;
.usa-input {
margin-bottom: 1.5rem;
}
&.officer__form--dodId {
margin-top: 1.5rem;
.usa-input {
margin-bottom: 0rem;
}
}
} }
.officer__form--actions { .officer__form--actions {

View File

@ -13,7 +13,7 @@
</a> </a>
{% endmacro %} {% endmacro %}
{% macro EditOfficerInfo(form, officer_type) -%} {% macro EditOfficerInfo(form, officer_type, invited) -%}
<template v-if="editing"> <template v-if="editing">
<div class='officer__form'> <div class='officer__form'>
<div class="edit-officer"> <div class="edit-officer">
@ -39,9 +39,26 @@
{{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }} {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
</div> </div>
</div> </div>
{% if form.dod_id.data %} <div class='form-row officer__form--dodId'>
{{ TextInput(form.dod_id, validation='dodId', disabled=True)}} <div class="form-col">
{% endif %} {% if not invited %}
<div class='form-row'>
<div class='usa-input'>
<fieldset v-on:change="onInput" class="usa-input__choices">
<legend>
{{ form.invite }}
<label for="contracting_officer-invite">{{ ("forms.officers." + officer_type + "_invite") | translate }}</label>
</legend>
</fieldset>
</div>
</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>
</div>
<div class='alert__actions officer__form--actions'> <div class='alert__actions officer__form--actions'>
<a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link"> <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
{{ Icon("x") }} {{ Icon("x") }}
@ -67,8 +84,11 @@
{% set email = task_order[prefix + "_email"] %} {% set email = task_order[prefix + "_email"] %}
{% set phone_number = task_order[prefix + "_phone_number"] %} {% set phone_number = task_order[prefix + "_phone_number"] %}
{% set dod_id = task_order[prefix + "_dod_id"] %} {% set dod_id = task_order[prefix + "_dod_id"] %}
{% set invited = False %}
{% if task_order[officer_type] %} {% if task_order[officer_type] %}
{% set invited = True %}
<div class="officer__info"> <div class="officer__info">
<div class="row"> <div class="row">
<div class="officer__info--name">{{ first_name }} {{ last_name }}</div> <div class="officer__info--name">{{ first_name }} {{ last_name }}</div>
@ -119,7 +139,7 @@
</div> </div>
{% endif %} {% endif %}
{{ EditOfficerInfo(form, officer_type) }} {{ EditOfficerInfo(form, officer_type, invited) }}
</div> </div>
</edit-officer-form> </edit-officer-form>
</div> </div>

View File

@ -255,6 +255,10 @@ forms:
portfolio: portfolio:
name_label: Portfolio Name name_label: Portfolio Name
name_length_validation_message: Portfolio names must be at least 4 and not more than 100 characters 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: fragments:
edit_application_form: 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.' explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.'