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

Oversight invites styling
This commit is contained in:
leigh-mil
2019-02-12 11:58:58 -05:00
committed by GitHub
5 changed files with 103 additions and 35 deletions

View File

@@ -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>

View File

@@ -13,44 +13,52 @@
</a>
{% endmacro %}
{% macro EditOfficerInfo(form, officer_type) -%}
<div class='officer__form'>
{% macro EditOfficerInfo(form, officer_type, invited) -%}
<template v-if="editing">
<div class='alert'>
<div class='alert__content'>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name) }}
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name) }}
</div>
<div class='officer__form'>
<div class="edit-officer">
<h4>{{ ("task_orders.invitations." + officer_type + ".edit_title") | translate}}</h4>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name) }}
</div>
<div class='form-row'>
<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.last_name) }}
</div>
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
<div class='form-row'>
<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 %}
{{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
{% endif %}
<div class='alert__actions officer__form--actions'>
<a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
{{ Icon("x") }}
<span>Cancel</span>
</a>
<input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
</div>
</div>
<div class='alert__actions officer__form--actions'>
<a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
{{ Icon("x") }}
<span>Cancel</span>
</a>
<input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
</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>