Merge pull request #1481 from bibliotechy/1203-better-ui-for-adding-authors

Improve UI for adding authors to books

bookwyrm/static/js/bookwyrm.js

@@ -45,6 +45,13 @@ let BookWyrm = new class {
                 'change',
                 this.disableIfTooLarge.bind(this)
             ));
+        
+        document.querySelectorAll('[data-duplicate]')
+                .forEach(node => node.addEventListener(
+                    'click',
+                    this.duplicateInput.bind(this)
+            
+            ))
     }
 
     /**
@@ -368,4 +375,24 @@ let BookWyrm = new class {
             );
         }
     }
+
+    duplicateInput (event ) {
+        const trigger = event.currentTarget;
+        const input_id = trigger.dataset['duplicate']
+        const orig = document.getElementById(input_id);
+        const parent = orig.parentNode;
+        const new_count = parent.querySelectorAll("input").length + 1
+
+        let input = orig.cloneNode();
+
+        input.id += ("-" + (new_count))
+        input.value = ""
+
+        let label = parent.querySelector("label").cloneNode();
+
+        label.setAttribute("for", input.id)
+
+        parent.appendChild(label)
+        parent.appendChild(input)
+    }
 }();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -119,10 +119,16 @@
                 </fieldset>
                 {% endif %}
                 <div class="field">
-                    <label class="label" for="id_add_author">{% trans "Add Authors:" %}</label>
+                    <label class="label">{% trans "Add Authors:" %}</label>
-                    <input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'John Doe, Jane Smith' %}" value="{{ add_author }}" {% if confirm_mode %}readonly{% endif %}>
+                    {% for author in add_author %}
-                    <span class="help">{% trans "Separate multiple values with commas." %}</span>
+                    <label class="label is-sr-only" for="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}">{% trans "Add Author" %}</label>
+                    <input class="input" type="text" name="add_author" id="id_add_author{% if not forloop.first %}-{{forloop.counter}}{% endif %}" placeholder="{% trans 'Jane Doe' %}" value="{{ author }}" {% if confirm_mode %}readonly{% endif %}>
+                    {% empty %}
+                    <label class="label is-sr-only" for="id_add_author">{% trans "Add Author" %}</label>
+                    <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>
             </div>
         </section>
     </div>

bookwyrm/views/books/edit_book.py

@@ -51,13 +51,14 @@ class EditBook(View):
         if not form.is_valid():
             return TemplateResponse(request, "book/edit/edit_book.html", data)
 
-        add_author = request.POST.get("add_author")
+        # filter out empty author fields
-        # we're adding an author through a free text field
+        add_author = [author for author in request.POST.getlist("add_author") if author]
         if add_author:
             data["add_author"] = add_author
             data["author_matches"] = []
             data["isni_matches"] = []
-            for author in add_author.split(","):
+
+            for author in add_author:
                 if not author:
                     continue
                 # check for existing authors