style and template updates for adding a new portfolio user
This commit is contained in:
dandds
parent
ccaad6cbbc
commit
878a31ba19
@ -163,10 +163,7 @@ body {
|
||||
.icon-link {
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 0;
|
||||
|
||||
.icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -197,6 +197,7 @@
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
thead {
|
||||
th:first-child {
|
||||
padding-left: 3 * $gap;
|
||||
@ -294,6 +295,21 @@
|
||||
float: right;
|
||||
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 {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
|
||||
|
||||
@ -28,7 +29,10 @@
|
||||
{% set step_count = steps|length %}
|
||||
<multi-step-modal-form inline-template>
|
||||
<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.csrf_token }}
|
||||
{% 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>
|
||||
|
||||
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
||||
<div class="members-table-footer">
|
||||
<a class='icon-link'>
|
||||
{{ "portfolios.admin.add_member" | translate }}
|
||||
{{ Icon('plus-circle-solid') }}
|
||||
</a>
|
||||
<input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />
|
||||
{% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
|
||||
{% include "fragments/admin/add_new_portfolio_member.html" %}
|
||||
{% endif %}
|
||||
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
||||
<input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@ -5,19 +5,6 @@
|
||||
{% 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 secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
@ -64,70 +51,6 @@
|
||||
{% include "fragments/admin/portfolio_members.html" %}
|
||||
{% 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" %}
|
||||
|
||||
{% if user_can(permissions.VIEW_PORTFOLIO_ACTIVITY_LOG) %}
|
||||
|
||||
@ -571,6 +571,7 @@ portfolios:
|
||||
add_member: Add a New Member
|
||||
permissions_info: Learn more about these permissions
|
||||
activity_log_title: Activity Log
|
||||
add_new_member: Add a New Member
|
||||
members:
|
||||
archive_button: Archive User
|
||||
permissions:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user