mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-01 20:10:16 -04:00
6452676b54
In research we found that: - people didn’t initially realise that the permissions expanded when the ‘admin’ option was selected - not having all the options visible at once makes it hard to know what permissions you are (and more importantly aren’t) giving to people This commit makes it so that: - the options within the ‘admin’ option are always visible - a bit of Javascript logic makes it so you can pick ‘caseworker’ and ‘manage service’, for example (by deselecting one when you pick the other)
144 lines
4.3 KiB
HTML
144 lines
4.3 KiB
HTML
{% macro radios(
|
|
field,
|
|
hint=None,
|
|
disable=[],
|
|
option_hints={},
|
|
hide_legend=False
|
|
) %}
|
|
{% call radios_wrapper(
|
|
field, hint, disable, option_hints, hide_legend
|
|
) %}
|
|
{% for option in field %}
|
|
{{ radio(option, disable, option_hints) }}
|
|
{% endfor %}
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
{% macro radios_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="{{ 'form-label' if not hide_legend else '' }}">
|
|
{% if hide_legend %}<span class="visually-hidden">{% endif %}
|
|
{{ field.label.text|safe }}
|
|
{% if hide_legend %}</span>{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{{ caller() }}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro radio(option, disable=[], option_hints={}) %}
|
|
<div class="multiple-choice">
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio_select(
|
|
field,
|
|
hint=None,
|
|
wrapping_class='form-group'
|
|
) %}
|
|
<div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text }}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
|
|
<div class="radio-select-column">
|
|
{% for option in field %}
|
|
<div class="multiple-choice">
|
|
{{ option }}
|
|
<label for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
</label>
|
|
</div>
|
|
{% if loop.first %}
|
|
</div>
|
|
<div class="radio-select-column">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro branding_radios(
|
|
field,
|
|
hint=None,
|
|
branding_dict={},
|
|
show_header=True
|
|
) %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{% if show_header %}
|
|
{{ field.label.text }}
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{% for value, option, checked in field.iter_choices() %}
|
|
<div class="multiple-choice branding-radio">
|
|
<input
|
|
type="radio"
|
|
name="{{ field.name }}"
|
|
id="{{ field.name }}-{{ loop.index }}"
|
|
value="{{ value }}"
|
|
{% if checked %}checked="checked"{% endif %}
|
|
/>
|
|
<label class="block-label" for="{{ field.name }}-{{ loop.index }}">
|
|
{% if branding_dict.get(value, {}).get('colour') %}
|
|
<span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px;"></span>
|
|
{% endif %}
|
|
{% if branding_dict.get(value, {}).get('logo') %}
|
|
<img
|
|
src="{{ branding_dict[value].logo }}"
|
|
height="27"
|
|
/>
|
|
{% endif %}
|
|
{{option}}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro conditional_radio_panel(id) %}
|
|
<div class="conditional-radios-panel" id="panel-{{ id }}">
|
|
{{ caller() }}
|
|
</div>
|
|
{% endmacro %}
|