mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-22 09:31:08 +00:00
Merge pull request #2020 from bookwyrm-social/multi-input
Array input field for forms
This commit is contained in:
commit
13b82c2740
3 changed files with 96 additions and 29 deletions
|
@ -14,6 +14,14 @@ class CoverForm(CustomForm):
|
|||
help_texts = {f: None for f in fields}
|
||||
|
||||
|
||||
class ArrayWidget(forms.widgets.TextInput):
|
||||
# pylint: disable=unused-argument
|
||||
# pylint: disable=no-self-use
|
||||
def value_from_datadict(self, data, files, name):
|
||||
"""get all values for this name"""
|
||||
return [i for i in data.getlist(name) if i]
|
||||
|
||||
|
||||
class EditionForm(CustomForm):
|
||||
class Meta:
|
||||
model = models.Edition
|
||||
|
@ -41,12 +49,10 @@ class EditionForm(CustomForm):
|
|||
"series_number": forms.TextInput(
|
||||
attrs={"aria-describedby": "desc_series_number"}
|
||||
),
|
||||
"subjects": ArrayWidget(),
|
||||
"languages": forms.TextInput(
|
||||
attrs={"aria-describedby": "desc_languages_help desc_languages"}
|
||||
),
|
||||
"subjects": forms.TextInput(
|
||||
attrs={"aria-describedby": "desc_subjects_help desc_subjects"}
|
||||
),
|
||||
"publishers": forms.TextInput(
|
||||
attrs={"aria-describedby": "desc_publishers_help desc_publishers"}
|
||||
),
|
||||
|
|
|
@ -1,6 +1,19 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Remoev input field
|
||||
*
|
||||
* @param {event} the button click event
|
||||
*/
|
||||
function removeInput(event) {
|
||||
const trigger = event.currentTarget;
|
||||
const input_id = trigger.dataset.remove;
|
||||
const input = document.getElementById(input_id);
|
||||
|
||||
input.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Duplicate an input field
|
||||
*
|
||||
|
@ -29,4 +42,8 @@
|
|||
document
|
||||
.querySelectorAll("[data-duplicate]")
|
||||
.forEach((node) => node.addEventListener("click", duplicateInput));
|
||||
|
||||
document
|
||||
.querySelectorAll("[data-remove]")
|
||||
.forEach((node) => node.addEventListener("click", removeInput));
|
||||
})();
|
||||
|
|
|
@ -79,17 +79,56 @@
|
|||
{% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="id_subjects">
|
||||
<div>
|
||||
<label class="label" for="id_add_subjects">
|
||||
{% trans "Subjects:" %}
|
||||
</label>
|
||||
{{ form.subjects }}
|
||||
<span class="help" id="desc_subjects_help">
|
||||
{% trans "Separate multiple values with commas." %}
|
||||
{% for subject in book.subjects %}
|
||||
<label class="label is-sr-only" for="id_add_subject={% if not forloop.first %}-{{forloop.counter}}{% endif %}">
|
||||
{% trans "Add subject" %}
|
||||
</label>
|
||||
<div class="field has-addons" id="subject_field_wrapper_{{ forloop.counter }}">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
id="id_add_subject-{{ forloop.counter }}"
|
||||
type="text"
|
||||
name="subjects"
|
||||
value="{{ subject }}"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-light"
|
||||
type="button"
|
||||
data-remove="subject_field_wrapper_{{ forloop.counter }}"
|
||||
>
|
||||
{% trans "Remove subject" as text %}
|
||||
<span class="icon icon-x" title="{{ text }}">
|
||||
<span class="is-sr-only">{{ text }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="subjects"
|
||||
id="id_add_subject"
|
||||
value="{{ subject }}"
|
||||
{% if confirm_mode %}readonly{% endif %}
|
||||
>
|
||||
|
||||
{% include 'snippets/form_errors.html' with errors_list=form.subjects.errors id="desc_subjects" %}
|
||||
</div>
|
||||
|
||||
<span class="help">
|
||||
<button class="button is-small" type="button" data-duplicate="id_add_subject" id="another_subject_field">
|
||||
<span class="icon icon-plus" aria-hidden="true"></span>
|
||||
<span>{% trans "Add Another Subject" %}</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@ -162,7 +201,12 @@
|
|||
<input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="help"><button class="button is-small" type="button" data-duplicate="id_add_author" id="another_author_field">{% trans "Add Another Author" %}</button></span>
|
||||
<span class="help">
|
||||
<button class="button is-small" type="button" data-duplicate="id_add_author" id="another_author_field">
|
||||
<span class="icon icon-plus" aria-hidden="true"></span>
|
||||
<span>{% trans "Add Another Author" %}</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue