Merge pull request #2020 from bookwyrm-social/multi-input

Array input field for forms

bookwyrm/forms/books.py

@@ -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"}
             ),

bookwyrm/static/js/forms.js

@@ -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));
 })();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -79,17 +79,56 @@
                     {% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
                 </div>
 
-                <div class="field">
+                <div>
-                    <label class="label" for="id_subjects">
+                    <label class="label" for="id_add_subjects">
                         {% trans "Subjects:" %}
                     </label>
-                    {{ form.subjects }}
+                    {% for subject in book.subjects %}
-                    <span class="help" id="desc_subjects_help">
+                    <label class="label is-sr-only" for="id_add_subject={% if not forloop.first %}-{{forloop.counter}}{% endif %}">
-                        {% trans "Separate multiple values with commas." %}
+                        {% trans "Add subject" %}
-                    </span>
+                    </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>