style and template updates for adding a new portfolio user
This commit is contained in:
dandds
parent
ccaad6cbbc
commit
878a31ba19
@ -163,12 +163,9 @@ body {
|
|||||||
.icon-link {
|
.icon-link {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.progress-menu ul {
|
.progress-menu ul {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
|
|||||||
@ -197,6 +197,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
th:first-child {
|
th:first-child {
|
||||||
padding-left: 3 * $gap;
|
padding-left: 3 * $gap;
|
||||||
@ -294,6 +295,21 @@
|
|||||||
float: right;
|
float: right;
|
||||||
padding: 3 * $gap;
|
padding: 3 * $gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.modal-link.icon-link {
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1.7rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 1.7rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-content {
|
.application-content {
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
{% from "components/modal.html" import Modal %}
|
{% from "components/modal.html" import Modal %}
|
||||||
|
{% from "components/icon.html" import Icon %}
|
||||||
|
|
||||||
{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
|
{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
|
||||||
|
|
||||||
@ -28,7 +29,10 @@
|
|||||||
{% set step_count = steps|length %}
|
{% set step_count = steps|length %}
|
||||||
<multi-step-modal-form inline-template>
|
<multi-step-modal-form inline-template>
|
||||||
<div>
|
<div>
|
||||||
<button v-on:click="openModal('{{ name }}')" type="button" class="icon-link">{{ button_text }}</button>
|
<a class='icon-link modal-link' v-on:click="openModal('{{ name }}')">
|
||||||
|
{{ button_text }}
|
||||||
|
{{ Icon('plus-circle-solid') }}
|
||||||
|
</a>
|
||||||
<form action="{{ form_action }}" method="POST">
|
<form action="{{ form_action }}" method="POST">
|
||||||
{{ form.csrf_token }}
|
{{ form.csrf_token }}
|
||||||
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
|
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
|
||||||
|
|||||||
80
templates/fragments/admin/add_new_portfolio_member.html
Normal file
80
templates/fragments/admin/add_new_portfolio_member.html
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
{% from "components/icon.html" import Icon %}
|
||||||
|
{% from "components/text_input.html" import TextInput %}
|
||||||
|
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||||
|
|
||||||
|
{% macro SimpleOptionsInput(field) %}
|
||||||
|
<div class="usa-input">
|
||||||
|
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||||
|
<legend>
|
||||||
|
<div class="usa-input__title-inline">
|
||||||
|
{{ field.label | striptags}}
|
||||||
|
</div>
|
||||||
|
</legend>
|
||||||
|
{{ field() }}
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% set step_one %}
|
||||||
|
<div class="modal__form--header">
|
||||||
|
<h1>Invite New Portfolio Member</h1>
|
||||||
|
</div>
|
||||||
|
<div class='form-row'>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
{{ TextInput(member_form.first_name, validation='requiredField') }}
|
||||||
|
</div>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
{{ TextInput(member_form.last_name, validation='requiredField') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='form-row'>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
{{ TextInput(member_form.email, validation='email') }}
|
||||||
|
</div>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
{{ TextInput(member_form.phone_number, validation='usPhone', optional=True) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='form-row'>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
{{ TextInput(member_form.dod_id, validation='dodId') }}
|
||||||
|
</div>
|
||||||
|
<div class='form-col form-col--half'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='action-group'>
|
||||||
|
<input
|
||||||
|
type='button'
|
||||||
|
v-on:click="next()"
|
||||||
|
v-bind:disabled="invalid"
|
||||||
|
class='action-group__action usa-button'
|
||||||
|
value='Next Step'>
|
||||||
|
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||||
|
</div>
|
||||||
|
{% endset %}
|
||||||
|
{% set step_two %}
|
||||||
|
<div class="modal__form--padded">
|
||||||
|
<div class="modal__form--header">
|
||||||
|
<h1>Assign Member Permissions</h1>
|
||||||
|
<a class='icon-link'>
|
||||||
|
{{ Icon('info') }}
|
||||||
|
{{ "portfolios.admin.permissions_info" | translate }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{ SimpleOptionsInput(member_form.perms_app_mgmt) }}
|
||||||
|
{{ SimpleOptionsInput(member_form.perms_funding) }}
|
||||||
|
{{ SimpleOptionsInput(member_form.perms_reporting) }}
|
||||||
|
{{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }}
|
||||||
|
<div class='action-group'>
|
||||||
|
<input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
|
||||||
|
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endset %}
|
||||||
|
{{ MultiStepModalForm(
|
||||||
|
'add-port-mem',
|
||||||
|
member_form,
|
||||||
|
url_for("portfolios.create_member", portfolio_id=portfolio.id),
|
||||||
|
[step_one, step_two],
|
||||||
|
button_text="portfolios.admin.add_new_member" | translate)
|
||||||
|
}}
|
||||||
@ -47,19 +47,20 @@
|
|||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
|
||||||
<div class="members-table-footer">
|
<div class="members-table-footer">
|
||||||
<a class='icon-link'>
|
{% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
|
||||||
{{ "portfolios.admin.add_member" | translate }}
|
{% include "fragments/admin/add_new_portfolio_member.html" %}
|
||||||
{{ Icon('plus-circle-solid') }}
|
|
||||||
</a>
|
|
||||||
<input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
||||||
|
<input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -5,19 +5,6 @@
|
|||||||
{% from "components/text_input.html" import TextInput %}
|
{% from "components/text_input.html" import TextInput %}
|
||||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||||
|
|
||||||
{% macro SimpleOptionsInput(field) %}
|
|
||||||
<div class="usa-input">
|
|
||||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
|
||||||
<legend>
|
|
||||||
<div class="usa-input__title-inline">
|
|
||||||
{{ field.label | striptags}}
|
|
||||||
</div>
|
|
||||||
</legend>
|
|
||||||
{{ field() }}
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
|
{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
|
||||||
|
|
||||||
{% block portfolio_content %}
|
{% block portfolio_content %}
|
||||||
@ -64,70 +51,6 @@
|
|||||||
{% include "fragments/admin/portfolio_members.html" %}
|
{% include "fragments/admin/portfolio_members.html" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% set step_one %}
|
|
||||||
<div class="modal__form--header">
|
|
||||||
<h1>Invite New Portfolio Member</h1>
|
|
||||||
</div>
|
|
||||||
<div class='form-row'>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
{{ TextInput(member_form.first_name, validation='requiredField') }}
|
|
||||||
</div>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
{{ TextInput(member_form.last_name, validation='requiredField') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='form-row'>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
{{ TextInput(member_form.email, validation='email') }}
|
|
||||||
</div>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
{{ TextInput(member_form.phone_number, validation='usPhone', optional=True) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='form-row'>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
{{ TextInput(member_form.dod_id, validation='dodId') }}
|
|
||||||
</div>
|
|
||||||
<div class='form-col form-col--half'>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='action-group'>
|
|
||||||
<input
|
|
||||||
type='button'
|
|
||||||
v-on:click="next()"
|
|
||||||
v-bind:disabled="invalid"
|
|
||||||
class='action-group__action usa-button'
|
|
||||||
value='Next Step'>
|
|
||||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
|
||||||
</div>
|
|
||||||
{% endset %}
|
|
||||||
{% set step_two %}
|
|
||||||
<div class="modal__form--padded">
|
|
||||||
<div class="modal__form--header">
|
|
||||||
<h1>Assign Member Permissions</h1>
|
|
||||||
<a class='icon-link'>
|
|
||||||
<span class='icon'>{{ Icon('info') }}</span>
|
|
||||||
{{ "portfolios.admin.permissions_info" | translate }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{{ SimpleOptionsInput(member_form.perms_app_mgmt) }}
|
|
||||||
{{ SimpleOptionsInput(member_form.perms_funding) }}
|
|
||||||
{{ SimpleOptionsInput(member_form.perms_reporting) }}
|
|
||||||
{{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }}
|
|
||||||
<div class='action-group'>
|
|
||||||
<input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
|
|
||||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endset %}
|
|
||||||
{{ MultiStepModalForm(
|
|
||||||
'add-port-mem',
|
|
||||||
member_form,
|
|
||||||
url_for("portfolios.create_member", portfolio_id=portfolio.id),
|
|
||||||
[step_one, step_two],
|
|
||||||
button_text="add new member")
|
|
||||||
}}
|
|
||||||
|
|
||||||
{% include "fragments/audit_events_log.html" %}
|
{% include "fragments/audit_events_log.html" %}
|
||||||
|
|
||||||
{% if user_can(permissions.VIEW_PORTFOLIO_ACTIVITY_LOG) %}
|
{% if user_can(permissions.VIEW_PORTFOLIO_ACTIVITY_LOG) %}
|
||||||
|
|||||||
@ -571,6 +571,7 @@ portfolios:
|
|||||||
add_member: Add a New Member
|
add_member: Add a New Member
|
||||||
permissions_info: Learn more about these permissions
|
permissions_info: Learn more about these permissions
|
||||||
activity_log_title: Activity Log
|
activity_log_title: Activity Log
|
||||||
|
add_new_member: Add a New Member
|
||||||
members:
|
members:
|
||||||
archive_button: Archive User
|
archive_button: Archive User
|
||||||
permissions:
|
permissions:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user