atst/templates/components/multi_step_modal_form.html
2020-02-19 11:42:03 -05:00

46 lines
1.5 KiB
HTML

{% from "components/modal.html" import Modal %}
{% from "components/icon.html" import Icon %}
{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
{% macro FormSteps(step_count, current_step) -%}
{% set count = numbers[step_count - 1] %}
<div class="progress-menu progress-menu--{{ count }}">
<ul>
{% for step in range(step_count) %}
<li class="progress-menu__item
{% if loop.index < current_step %}
progress-menu__item--complete
{% elif loop.index == current_step %}
progress-menu__item--active
{% else %}
progress-menu__item--incomplete
{% endif %}">
<a v-on:click="goToStep({{ step }})">
Step {{ loop.index }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endmacro %}
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False, classes="") -%}
{% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}>
{% call Modal(name=name, dismissable=dismissable, classes=classes) %}
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }}
<div v-if="$root.activeModal === '{{ name }}'">
{% for step in steps %}
<div v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>
{% endfor %}
</div>
</form>
{% endcall %}
</multi-step-modal-form>
{% endmacro %}