46 lines
1.5 KiB
HTML
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 %}
|