Merge pull request #622 from dod-ccpo/oversight-invites-styling
Oversight invites styling
This commit is contained in:
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user