encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2025-07-29 17:39:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Vertical forms

Browse Source
This commit is contained in:
David Smith 2020-07-13 14:42:12 +01:00
parent 39c22e057d
commit 5577d3632e
12 changed files with 74 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
rest_framework/templates/rest_framework/vertical/checkbox.html
View File

@ -1,18 +1,16 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
<div class="checkbox"> <div class="form-check">
<label> <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}> {% if field.label %}<label class="form-check-label">{{ field.label }}</label>{% endif %}
{% if field.label %}{{ field.label }}{% endif %}
</label>
</div>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %} {% for error in field.errors %}
<span class="help-block">{{ error }}</span> <span class="invalid-feedback">{{ error }}</span>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>
</div>

31
rest_framework/templates/rest_framework/vertical/checkbox_multiple.html
View File

@ -1,37 +1,30 @@
{% load rest_framework %} {% load rest_framework %}
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
{% if style.inline %}
<div> <div>
{% for key, text in field.choices|items %} {% for key, text in field.choices|items %}
<label class="checkbox-inline"> <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}> <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
{{ text }} <label class="form-check-label">{{ text }}</label>
</label>
{% endfor %}
</div>
{% else %}
{% for key, text in field.choices|items %}
<div class="checkbox">
<label>
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
{{ text }}
</label>
</div> </div>
{% endfor %} {% endfor %}
{% endif %}
{% if field.errors %} {% if field.errors %}
{# A fake input to trigger the error messages as it needs to be after a valid input #}
{# If it's with the last input and it's inline then the error stacks under the last input label #}
{# It has no name so no data will be sent #}
<input type="radio" class="is-invalid" style="display: none"/>
{% for error in field.errors %} {% for error in field.errors %}
<span class="help-block">{{ error }}</span> <span class="invalid-feedback">{{ error }}</span>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>
</div>

4
rest_framework/templates/rest_framework/vertical/dict_field.html
View File

@ -1,7 +1,7 @@
<div class="mb-3"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<p class="form-control-static">Dictionaries are not currently supported in HTML input.</p> <p class="form-label">Dictionaries are not currently supported in HTML input.</p>
</div> </div>

4
rest_framework/templates/rest_framework/vertical/fieldset.html
View File

@ -2,9 +2,7 @@
<fieldset> <fieldset>
{% if field.label %} {% if field.label %}
<legend {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{{ field.label }}
</legend>
{% endif %} {% endif %}
{% for nested_field in field %} {% for nested_field in field %}

10
rest_framework/templates/rest_framework/vertical/input.html
View File

@ -1,17 +1,17 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}> <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control{% if field.errors %} is-invalid{% endif %}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %} {% for error in field.errors %}
<span class="help-block">{{ error }}</span> <span class="invalid-feedback">{{ error }}</span>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>

4
rest_framework/templates/rest_framework/vertical/list_field.html
View File

@ -1,7 +1,7 @@
<div class="mb-3"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<p class="form-control-static">Lists are not currently supported in HTML input.</p> <p class="form-label">Lists are not currently supported in HTML input.</p>
</div> </div>

6
rest_framework/templates/rest_framework/vertical/list_fieldset.html
View File

@ -1,9 +1,7 @@
<fieldset> <fieldset>
{% if field.label %} {% if field.label %}
<legend {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{{ field.label }}
</legend>
{% endif %} {% endif %}
<p>Lists are not currently supported in HTML input.</p> <p class="form-label">Lists are not currently supported in HTML input.</p>
</fieldset> </fieldset>

47
rest_framework/templates/rest_framework/vertical/radio.html
View File

@ -2,56 +2,39 @@
{% load rest_framework %} {% load rest_framework %}
{% trans "None" as none_choice %} {% trans "None" as none_choice %}
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
{% endif %} {% endif %}
{% if style.inline %}
<div> <div>
{% if field.allow_null or field.allow_blank %} {% if field.allow_null or field.allow_blank %}
<label class="radio-inline"> <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} /> <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
{{ none_choice }} <label class="form-check-label">{{ none_choice }}</label>
</label>
{% endif %}
{% for key, text in field.choices|items %}
<label class="radio-inline">
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
{{ text }}
</label>
{% endfor %}
</div>
{% else %}
{% if field.allow_null or field.allow_blank %}
<div class="radio">
<label>
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
{{ none_choice }}
</label>
</div> </div>
{% endif %} {% endif %}
{% for key, text in field.choices|items %} {% for key, text in field.choices|items %}
<div class="radio"> <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<label> <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}> <label class="form-check-label">{{ text }}</label>
{{ text }}
</label>
</div> </div>
{% endfor %} {% endfor %}
{% endif %}
{% if field.errors %} {% if field.errors %}
{# A fake input to trigger the error messages as it needs to be after a valid input #}
{# If it's with the last input and it's inline then the error stacks under the last input label #}
{# It has no name so no data will be sent #}
<input type="radio" class="is-invalid" style="display: none"/>
{% for error in field.errors %} {% for error in field.errors %}
<span class="help-block">{{ error }}</span> <span class="invalid-feedback">{{ error }}</span>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>
</div>

10
rest_framework/templates/rest_framework/vertical/select.html
View File

@ -1,13 +1,13 @@
{% load rest_framework %} {% load rest_framework %}
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
{% endif %} {% endif %}
<select class="form-control" name="{{ field.name }}"> <select class="form-select{% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
{% if field.allow_null or field.allow_blank %} {% if field.allow_null or field.allow_blank %}
<option value="" {% if not field.value %}selected{% endif %}>--------</option> <option value="" {% if not field.value %}selected{% endif %}>--------</option>
{% endif %} {% endif %}
@ -24,11 +24,11 @@
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %} {% for error in field.errors %}
<span class="help-block">{{ error }}</span> <span class="invalid-feedback">{{ error }}</span>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>

12
rest_framework/templates/rest_framework/vertical/select_multiple.html
View File

@ -2,14 +2,12 @@
{% load rest_framework %} {% load rest_framework %}
{% trans "No items to select." as no_items %} {% trans "No items to select." as no_items %}
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{{ field.label }}
</label>
{% endif %} {% endif %}
<select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}"> <select multiple {{ field.choices|yesno:",disabled" }} class="form-select {% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
{% for select in field.iter_options %} {% for select in field.iter_options %}
{% if select.start_option_group %} {% if select.start_option_group %}
<optgroup label="{{ select.label }}"> <optgroup label="{{ select.label }}">
@ -24,10 +22,10 @@
</select> </select>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %} {% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>

10
rest_framework/templates/rest_framework/vertical/textarea.html
View File

@ -1,17 +1,17 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}"> <div class="mb-3">
{% if field.label %} {% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}> <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
{% endif %} {% endif %}
<textarea name="{{ field.name }}" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea> <textarea name="{{ field.name }}" class="form-control{% if field.errors %} is-invalid{% endif %}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %} {% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
{% endif %} {% endif %}
{% if field.help_text %} {% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% endif %}
</div> </div>

14
tests/test_bound_fields.py
View File

@ -79,9 +79,9 @@ class TestSimpleBoundField:
rendered = renderer.render_field(serializer['bool_field'], {}) rendered = renderer.render_field(serializer['bool_field'], {})
expected_packed = ( expected_packed = (
'<divclass="mb-3">' '<divclass="mb-3">'
'<divclass="checkbox">' '<divclass="form-check">'
'<label>' '<inputclass="form-check-input"type="checkbox"name="bool_field"value="true"checked>'
'<inputtype="checkbox"name="bool_field"value="true"checked>' '<labelclass="form-check-label">'
'Boolfield' 'Boolfield'
'</label>' '</label>'
'</div>' '</div>'
@ -167,16 +167,16 @@ class TestNestedBoundField:
rendered = renderer.render_field(field, {}) rendered = renderer.render_field(field, {})
expected_packed = ( expected_packed = (
'<fieldset>' '<fieldset>'
'<legend>Nested2</legend>' '<labelclass="form-label">Nested2</label>'
'<fieldset>' '<fieldset>'
'<legend>Nested1</legend>' '<labelclass="form-label">Nested1</label>'
'<divclass="mb-3">' '<divclass="mb-3">'
'<label>Textfield</label>' '<labelclass="form-label">Textfield</label>'
'<inputname="nested2.nested1.text_field"class="form-control"type="text"value="">' '<inputname="nested2.nested1.text_field"class="form-control"type="text"value="">'
'</div>' '</div>'
'</fieldset>' '</fieldset>'
'<divclass="mb-3">' '<divclass="mb-3">'
'<label>Textfield</label>' '<labelclass="form-label">Textfield</label>'
'<inputname="nested2.text_field"class="form-control"type="text"value="test">' '<inputname="nested2.text_field"class="form-control"type="text"value="test">'
'</div>' '</div>'
'</fieldset>' '</fieldset>'