From a2f2104a08743610d85df3f0c30055ddc8a62813 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Mon, 14 Mar 2022 10:42:53 -0700
Subject: [PATCH 1/4] Create non-functional UI for editing array fields

---
 .../templates/book/edit/edit_book_form.html   | 70 ++++++++++++-------
 1 file changed, 45 insertions(+), 25 deletions(-)

diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index 38a7fe35..d886d12f 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/bookwyrm/templates/book/edit/edit_book_form.html
@@ -22,7 +22,7 @@
                         {% trans "Title:" %}
                     </label>
                     <input type="text" name="title" value="{{ form.title.value|default:'' }}" maxlength="255" class="input" required="" id="id_title" aria-describedby="desc_title">
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.title.errors id="desc_title" %}
                 </div>
 
@@ -31,7 +31,7 @@
                         {% trans "Subtitle:" %}
                     </label>
                     <input type="text" name="subtitle" value="{{ form.subtitle.value|default:'' }}" maxlength="255" class="input" id="id_subtitle" aria-describedby="desc_subtitle">
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.subtitle.errors id="desc_subtitle" %}
                 </div>
 
@@ -40,7 +40,7 @@
                         {% trans "Description:" %}
                     </label>
                     {{ form.description }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.description.errors id="desc_description" %}
                 </div>
 
@@ -51,7 +51,7 @@
                                 {% trans "Series:" %}
                             </label>
                             <input type="text" class="input" name="series" id="id_series" value="{{ form.series.value|default:'' }}" aria-describedby="desc_series">
-                            
+
                             {% include 'snippets/form_errors.html' with errors_list=form.series.errors id="desc_series" %}
                         </div>
                     </div>
@@ -61,7 +61,7 @@
                                 {% trans "Series number:" %}
                             </label>
                             {{ form.series_number }}
-                            
+
                             {% include 'snippets/form_errors.html' with errors_list=form.series_number.errors id="desc_series_number" %}
                         </div>
                     </div>
@@ -75,21 +75,41 @@
                     <span class="help" id="desc_languages_help">
                         {% trans "Separate multiple values with commas." %}
                     </span>
-                    
+
                     {% 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." %}
-                    </span>
+                    {% 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">
+                        <div class="control is-expanded">
+                            <input id="id_add_subject-{{ forloop.counter }}" type="text" name="subject-" value="{{ subject }}" class="input">
+                        </div>
+                        <div class="control">
+                            <button class="button is-danger is-light" type="button">
+                                <span class="icon icon-x" title="{% trans 'Remove' %}">
+                                    <span class="is-sr-only">{% trans "Remove" %}</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    {% endfor %}
+                    <input class="input" type="text" name="add_subject" 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">
+                        {% trans "Add Another Subject" %}
+                    </button>
+                </span>
             </div>
         </section>
 
@@ -106,7 +126,7 @@
                     <span class="help" id="desc_publishers_help">
                         {% trans "Separate multiple values with commas." %}
                     </span>
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.publishers.errors id="desc_publishers" %}
                 </div>
 
@@ -115,7 +135,7 @@
                         {% trans "First published date:" %}
                     </label>
                     <input type="date" name="first_published_date" class="input" id="id_first_published_date"{% if form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %} aria-describedby="desc_first_published_date">
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.first_published_date.errors id="desc_first_published_date" %}
                 </div>
 
@@ -124,7 +144,7 @@
                         {% trans "Published date:" %}
                     </label>
                     <input type="date" name="published_date" class="input" id="id_published_date"{% if form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d'}}"{% endif %} aria-describedby="desc_published_date">
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.published_date.errors id="desc_published_date" %}
                 </div>
             </div>
@@ -193,7 +213,7 @@
                             </label>
                             <input class="input" name="cover-url" id="id_cover_url" type="url" value="{{ cover_url|default:'' }}" aria-describedby="desc_cover">
                         </div>
-                        
+
                         {% include 'snippets/form_errors.html' with errors_list=form.cover.errors id="desc_cover" %}
                     </div>
                 </div>
@@ -214,7 +234,7 @@
                             <div class="select">
                                 {{ form.physical_format }}
                             </div>
-                            
+
                             {% include 'snippets/form_errors.html' with errors_list=form.physical_format.errors id="desc_physical_format" %}
                         </div>
                     </div>
@@ -224,7 +244,7 @@
                                 {% trans "Format details:" %}
                             </label>
                             {{ form.physical_format_detail }}
-                            
+
                             {% include 'snippets/form_errors.html' with errors_list=form.physical_format_detail.errors id="desc_physical_format_detail" %}
                         </div>
                     </div>
@@ -235,7 +255,7 @@
                         {% trans "Pages:" %}
                     </label>
                     {{ form.pages }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.pages.errors id="desc_pages" %}
                 </div>
             </div>
@@ -251,7 +271,7 @@
                         {% trans "ISBN 13:" %}
                     </label>
                     {{ form.isbn_13 }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.isbn_13.errors id="desc_isbn_13" %}
                 </div>
 
@@ -260,7 +280,7 @@
                         {% trans "ISBN 10:" %}
                     </label>
                     {{ form.isbn_10 }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.isbn_10.errors id="desc_isbn_10" %}
                 </div>
 
@@ -269,7 +289,7 @@
                         {% trans "Openlibrary ID:" %}
                     </label>
                     {{ form.openlibrary_key }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.openlibrary_key.errors id="desc_openlibrary_key" %}
                 </div>
 
@@ -278,7 +298,7 @@
                         {% trans "Inventaire ID:" %}
                     </label>
                     {{ form.inventaire_id }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.inventaire_id.errors id="desc_inventaire_id" %}
                 </div>
 
@@ -287,7 +307,7 @@
                         {% trans "OCLC Number:" %}
                     </label>
                     {{ form.oclc_number }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.oclc_number.errors id="desc_oclc_number" %}
                 </div>
 
@@ -296,7 +316,7 @@
                         {% trans "ASIN:" %}
                     </label>
                     {{ form.asin }}
-                    
+
                     {% include 'snippets/form_errors.html' with errors_list=form.ASIN.errors id="desc_ASIN" %}
                 </div>
             </div>

From 35e6dede098b46c1d0b851281657b5e03c82061d Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Mon, 14 Mar 2022 11:34:14 -0700
Subject: [PATCH 2/4] Script to remove input fields

---
 bookwyrm/static/js/forms.js                     | 17 +++++++++++++++++
 .../templates/book/edit/edit_book_form.html     |  8 ++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/bookwyrm/static/js/forms.js b/bookwyrm/static/js/forms.js
index 7d946d14..99887389 100644
--- a/bookwyrm/static/js/forms.js
+++ b/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));
 })();
diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index d886d12f..fc15d26a 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/bookwyrm/templates/book/edit/edit_book_form.html
@@ -87,12 +87,16 @@
                     <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">
+                    <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="subject-" value="{{ subject }}" class="input">
                         </div>
                         <div class="control">
-                            <button class="button is-danger is-light" type="button">
+                            <button
+                                class="button is-danger is-light"
+                                type="button"
+                                data-remove="subject_field_wrapper_{{ forloop.counter }}"
+                            >
                                 <span class="icon icon-x" title="{% trans 'Remove' %}">
                                     <span class="is-sr-only">{% trans "Remove" %}</span>
                                 </span>

From 716e357060f29f7d4c2df74bd584cd8e658024e6 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Mon, 14 Mar 2022 12:54:50 -0700
Subject: [PATCH 3/4] Use plus icon on add field button

---
 bookwyrm/forms/books.py                       |  2 +-
 .../templates/book/edit/edit_book_form.html   | 32 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/bookwyrm/forms/books.py b/bookwyrm/forms/books.py
index 64b85d0b..91d9b8f0 100644
--- a/bookwyrm/forms/books.py
+++ b/bookwyrm/forms/books.py
@@ -45,7 +45,7 @@ class EditionForm(CustomForm):
                 attrs={"aria-describedby": "desc_languages_help desc_languages"}
             ),
             "subjects": forms.TextInput(
-                attrs={"aria-describedby": "desc_subjects_help desc_subjects"}
+                attrs={"aria-describedby": "desc_subjects"}
             ),
             "publishers": forms.TextInput(
                 attrs={"aria-describedby": "desc_publishers_help desc_publishers"}
diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index fc15d26a..42f1840d 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/bookwyrm/templates/book/edit/edit_book_form.html
@@ -89,7 +89,13 @@
                     </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="subject-" value="{{ subject }}" class="input">
+                            <input
+                                id="id_add_subject-{{ forloop.counter }}"
+                                type="text"
+                                name="subjects"
+                                value="{{ subject }}"
+                                class="input"
+                            >
                         </div>
                         <div class="control">
                             <button
@@ -97,21 +103,30 @@
                                 type="button"
                                 data-remove="subject_field_wrapper_{{ forloop.counter }}"
                             >
-                                <span class="icon icon-x" title="{% trans 'Remove' %}">
-                                    <span class="is-sr-only">{% trans "Remove" %}</span>
+                                {% 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="add_subject" id="id_add_subject" value="{{ subject }}" {% if confirm_mode %}readonly{% endif %}>
+                    <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">
-                        {% trans "Add Another Subject" %}
+                        <span class="icon icon-plus" aria-hidden="true"></span>
+                        <span>{% trans "Add Another Subject" %}</span>
                     </button>
                 </span>
             </div>
@@ -186,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>

From a37f83c458594219efc9722c1fe182ddf6520a77 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Mon, 14 Mar 2022 14:55:41 -0700
Subject: [PATCH 4/4] Get the field working

---
 bookwyrm/forms/books.py | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/forms/books.py b/bookwyrm/forms/books.py
index 91d9b8f0..72df1371 100644
--- a/bookwyrm/forms/books.py
+++ b/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"}
-            ),
             "publishers": forms.TextInput(
                 attrs={"aria-describedby": "desc_publishers_help desc_publishers"}
             ),