Remove show/hide behaviour from permissions form

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)
This commit is contained in:
Chris Hill-Scott
2018-06-21 14:00:00 +01:00
parent f4d2958d58
commit 6452676b54
4 changed files with 47 additions and 31 deletions

View File

@@ -137,7 +137,7 @@
{% endmacro %}
{% macro conditional_radio_panel(id) %}
<div class="js-hidden panel panel-border-wide conditional-radios-panel" id="panel-{{ id }}">
<div class="conditional-radios-panel" id="panel-{{ id }}">
{{ caller() }}
</div>
{% endmacro %}

View File

@@ -2,25 +2,21 @@
{% from "components/radios.html" import radio, radios, radios_wrapper, conditional_radio_panel %}
{% if 'caseworking' in current_service.permissions %}
<div data-module="conditional-radios">
{% call radios_wrapper(form.user_type, hide_legend=True) %}
<div class="conditional-radios" data-module='conditional-radios'>
{% call radios_wrapper(form.user_type) %}
{% for option in form.user_type %}
{{ radio(option) }}
<div class="bottom-gutter-1-3">
{{ radio(option, option_hints={
'admin': 'See dashboard and team members',
'caseworker': 'Send messages and see sent messages'
}) }}
</div>
{% if option.data == 'admin' %}
{% call conditional_radio_panel(option.data) %}
<div class="bottom-gutter-1-2">
<p class="form-label">
All admin users can see
</p>
<ul class="list list-bullet">
<li>templates</li>
<li>history of sent messages</li>
<li>who the other team members are</li>
</ul>
</div>
{% call conditional_radio_panel('admin') %}
<fieldset class="form-group">
<legend class="form-label">
Permissions
Extra permissions
</legend>
{{ checkbox(form.send_messages) }}
{{ checkbox(form.manage_templates) }}
@@ -29,9 +25,11 @@
</fieldset>
{% endcall %}
{% endif %}
{% endfor %}
{% endcall %}
</div>
{% else %}
<fieldset class="form-group">
<legend class="form-label">