Refactor form header and footer into macro

This commit is contained in:
leigh-mil
2019-09-10 13:03:12 -04:00
parent dd2996f3b8
commit d33332034a
2 changed files with 84 additions and 69 deletions

View File

@@ -76,6 +76,11 @@
}
}
}
hr {
border: none;
border-bottom: 1px solid $color-gray-lighter;
}
}
.environment-roles {

View File

@@ -3,11 +3,38 @@
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/phone_input.html" import PhoneInput %}
{% macro MemberStepOne(new_member_form) %}
{% macro MemberFormTemplate(title, next_button, previous=True) %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} Add Member</h1>
<h1>{{ Icon('avatar') }} {{ title }}</h1>
<hr>
</div>
{{ caller() }}
<div class='action-group'>
{{ next_button }}
{% if previous %}
<input
type='button'
v-on:click="previous()"
class='action-group__action usa-button usa-button-secondary'
value='Previous'>
{% endif %}
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
</div>
{% endmacro %}
{% macro MemberStepOne(new_member_form) %}
{% set next_button %}
<input
type='button'
v-on:click="next()"
v-bind:disabled="invalid"
class='action-group__action usa-button'
value='Next'>
{% endset %}
{% call MemberFormTemplate(title="Add Member", next_button=next_button, previous=False) %}
<div class='form-row'>
{{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
</div>
@@ -23,22 +50,18 @@
<div class='form-row'>
{{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
</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>
{% endcall %}
{% endmacro %}
{% macro MemberStepTwo(new_member_form, application) %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} Set Permissions and Roles</h1>
<hr>
</div>
{% set next_button %}
<input
type="submit"
class='action-group__action usa-button'
form="add-app-mem"
value='Add Member'>
{% endset %}
{% call MemberFormTemplate(title="Set Permissions and Roles", next_button=next_button) %}
<h4>Project Permissions</h4>
<div class="application-perms">
{{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
@@ -75,18 +98,5 @@
<hr>
{% endfor %}
</div>
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button'
form="add-app-mem"
value='Add 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'>
</div>
{% endcall %}
{% endmacro %}