Add new application members to an empty application.
The link button to add a new application member to an app that did not
have any ("empty state") was not wired up. This:
- Moves the two steps of the new member modal into macros so that they
can be reused with different button/link types
- Wires the "invite a new team member" button on the application team
page
- Makes a minor CSS tweak so that icons nested under `.empty-state` in
the modal aren't enormous
This commit is contained in:
dandds
parent
fb7efc6057
commit
f974dab330
@ -10,7 +10,7 @@
|
||||
padding: 8rem ($gap * 4) 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
> .icon {
|
||||
@include icon-size(50);
|
||||
@include icon-color($color-gray-light);
|
||||
}
|
||||
|
||||
@ -1,136 +1,15 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/checkbox_input.html" import CheckboxInput %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
|
||||
{% set step_one %}
|
||||
<div class="modal__form--header">
|
||||
<h1>Invite new member</h1>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.first_name, validation='requiredField') }}
|
||||
</div>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.last_name, validation='requiredField') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.email, validation='email') }}
|
||||
</div>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.phone_number, validation='usPhone', optional=True) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.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'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
{% endset %}
|
||||
{% set step_two %}
|
||||
<div class="modal__form">
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ "portfolios.applications.members.new.assign_roles" | translate }}</h1>
|
||||
<a class='icon-link'>
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.applications.members.new.learn_more" | translate }}
|
||||
</a>
|
||||
<div class="environment-roles-new">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--quarter">
|
||||
<span class="environment-roles-new__head">
|
||||
{{ "common.resource_names.environments" | translate }}:
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-col form-col--three-quarters">
|
||||
<span class="environment-roles-new__head">
|
||||
{{ "common.choose_role" | translate }}:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% for environment_data in new_member_form.environment_roles %}
|
||||
<optionsinput inline-template
|
||||
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
|
||||
>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--quarter">
|
||||
<legend>
|
||||
<div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
|
||||
{{ environment_data.environment_name.data }}
|
||||
</div>
|
||||
</legend>
|
||||
</div>
|
||||
<div class="form-col form-col--three-quarters">
|
||||
{{ environment_data.role(**{"v-model": "value"}) }}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</optionsinput>
|
||||
{{ environment_data.environment_id() }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
|
||||
{{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
|
||||
{% call CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
|
||||
{% set field=new_member_form.permission_sets.perms_del_env %}
|
||||
<nestedcheckboxinput
|
||||
name='{{ field.name }}'
|
||||
inline-template
|
||||
key='{{ field.name }}'
|
||||
v-bind:is-parent-checked="isChecked"
|
||||
>
|
||||
<div class="usa-input input__inline-fields input__inline-fields--indented">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
|
||||
<legend>
|
||||
<input
|
||||
id="permission_sets-perms_del_env"
|
||||
name="permission_sets-perms_del_env"
|
||||
type="checkbox"
|
||||
v-model="isChecked"
|
||||
v-bind:disabled="!$parent.isChecked">
|
||||
{{ field.label | safe }}
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</checkboxinput>
|
||||
{% endcall %}
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="add-app-mem"
|
||||
value='Invite member'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
<input
|
||||
type='button'
|
||||
v-on:click="previous()"
|
||||
class='action-group__action usa-button action-group__action--left'
|
||||
value='Previous step'>
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
|
||||
|
||||
{{ MultiStepModalForm(
|
||||
'add-app-mem',
|
||||
new_member_form,
|
||||
url_for("applications.create_member", application_id=application.id),
|
||||
[step_one, step_two],
|
||||
name='add-app-mem',
|
||||
form=new_member_form,
|
||||
form_action=url_for("applications.create_member", application_id=application.id),
|
||||
steps=[
|
||||
member_steps.MemberStepOne(new_member_form),
|
||||
member_steps.MemberStepTwo(new_member_form, application)
|
||||
],
|
||||
button_text=("portfolios.admin.add_new_member" | translate),
|
||||
button_icon="plus",
|
||||
) }}
|
||||
|
||||
127
templates/fragments/applications/new_member_modal_content.html
Normal file
127
templates/fragments/applications/new_member_modal_content.html
Normal file
@ -0,0 +1,127 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/checkbox_input.html" import CheckboxInput %}
|
||||
|
||||
{% macro MemberStepOne(new_member_form) %}
|
||||
<div class="modal__form--header">
|
||||
<h1>Invite new member</h1>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.first_name, validation='requiredField') }}
|
||||
</div>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.last_name, validation='requiredField') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.email, validation='email') }}
|
||||
</div>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.phone_number, validation='usPhone', optional=True) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(new_member_form.user_data.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'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
{% macro MemberStepTwo(new_member_form, application) %}
|
||||
<div class="modal__form">
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ "portfolios.applications.members.new.assign_roles" | translate }}</h1>
|
||||
<a class='icon-link'>
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.applications.members.new.learn_more" | translate }}
|
||||
</a>
|
||||
<div class="environment-roles-new">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--quarter">
|
||||
<span class="environment-roles-new__head">
|
||||
{{ "common.resource_names.environments" | translate }}:
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-col form-col--three-quarters">
|
||||
<span class="environment-roles-new__head">
|
||||
{{ "common.choose_role" | translate }}:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% for environment_data in new_member_form.environment_roles %}
|
||||
<optionsinput inline-template
|
||||
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
|
||||
>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--quarter">
|
||||
<legend>
|
||||
<div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
|
||||
{{ environment_data.environment_name.data }}
|
||||
</div>
|
||||
</legend>
|
||||
</div>
|
||||
<div class="form-col form-col--three-quarters">
|
||||
{{ environment_data.role(**{"v-model": "value"}) }}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</optionsinput>
|
||||
{{ environment_data.environment_id() }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
|
||||
{{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
|
||||
{% call CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
|
||||
{% set field=new_member_form.permission_sets.perms_del_env %}
|
||||
<nestedcheckboxinput
|
||||
name='{{ field.name }}'
|
||||
inline-template
|
||||
key='{{ field.name }}'
|
||||
v-bind:is-parent-checked="isChecked"
|
||||
>
|
||||
<div class="usa-input input__inline-fields input__inline-fields--indented">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
|
||||
<legend>
|
||||
<input
|
||||
id="permission_sets-perms_del_env"
|
||||
name="permission_sets-perms_del_env"
|
||||
type="checkbox"
|
||||
v-model="isChecked"
|
||||
v-bind:disabled="!$parent.isChecked">
|
||||
{{ field.label | safe }}
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</checkboxinput>
|
||||
{% endcall %}
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="add-app-mem"
|
||||
value='Invite member'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
<input
|
||||
type='button'
|
||||
v-on:click="previous()"
|
||||
class='action-group__action usa-button action-group__action--left'
|
||||
value='Previous step'>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@ -4,6 +4,8 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from 'components/save_button.html' import SaveButton %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
|
||||
|
||||
{% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
|
||||
|
||||
@ -11,13 +13,29 @@
|
||||
{% if not application.members %}
|
||||
{% set user_can_invite = user_can(permissions.CREATE_APPLICATION_MEMBER) %}
|
||||
|
||||
{{ EmptyState(
|
||||
("portfolios.applications.team_settings.blank_slate.title" | translate),
|
||||
action_label=("portfolios.applications.team_settings.blank_slate.action_label" | translate),
|
||||
action_href='#' if user_can_invite else None,
|
||||
sub_message=None if user_can_invite else ("portfolios.applications.team_settings.blank_slate.sub_message" | translate),
|
||||
icon='avatar'
|
||||
) }}
|
||||
<div class='empty-state'>
|
||||
<p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>
|
||||
|
||||
{{ Icon('avatar') }}
|
||||
|
||||
{% if not user_can_invite %}
|
||||
<p class='empty-state__sub-message'>{{ ("portfolios.applications.team_settings.blank_slate.sub_message" | translate) }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if user_can_invite %}
|
||||
{{ MultiStepModalForm(
|
||||
name='add-app-mem',
|
||||
form=new_member_form,
|
||||
form_action=url_for("applications.create_member", application_id=application.id),
|
||||
steps=[
|
||||
member_steps.MemberStepOne(new_member_form),
|
||||
member_steps.MemberStepTwo(new_member_form, application)
|
||||
],
|
||||
button_text=("portfolios.applications.team_settings.blank_slate.action_label" | translate),
|
||||
link_classes="usa-button usa-button-big"
|
||||
) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class='subheading'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user