lp2097555 OPAC_Expert_Search_Rows_Delete

Fixes to simple.js so that expert search can add and delete rows again.

Plugs the Aria announcement status from Advanced Search into Expert
Search, since that has to exist to use the same functions for adding and
deleting rows.

Fixes bug where new Expert Search rows are created
already filled with the same values as the first row.

Signed-off-by: Steven Mayo <[email protected]>
Signed-off-by: Garry Collum <[email protected]>
Signed-off-by: Stephanie Leary <[email protected]>

Author: smayo-gpls

Open-ILS/src/templates-bootstrap/opac/parts/advanced/expert.tt2

@@ -9,7 +9,7 @@
         <div class="row my-2">
             <div class="col-md-6">
                 <div id="adv_expert_rows_here">
-                    <fieldset class="row row-cols-auto align-items-end" id="adv_expert_row">
+                    <fieldset class="row row-cols-auto align-items-end adv_expert_row" id="adv_expert_row">
                         <legend class="visually-hidden">[% l('Expert search term group 1') %]</legend>
 
                         <div class="col-auto col-marc-tag d-inline-block">
@@ -25,19 +25,29 @@
                             <input class="form-control" id="expert_term" type="search" name="term" />
                         </div>
                         <div class="col-auto col-row-remove">
-                            <button type="button" class="btn btn-remove btn-sm row-remover my-1" onclick="removeSearchRows($event)">
+                            <button type="button" class="btn btn-remove btn-sm row-remover my-1" onclick="killRowIfAtLeast(1, event)">
                                 <i class="fas fa-times" aria-hidden="true" title="[% l('Remove search term group 1') %]"></i>
                                 <span class="visually-hidden">[% l('Remove search term group 1') %]</span>
                             </button>
                         </div>
                     </fieldset>
                 </div>
                 <div class="row mt-2">
-                    <div class="col-md-12">
+                    <div class="col-md-10 d-flex align-items-start justify-content-between">
                         <button type="button" class="btn btn-opac btn-sm my-1" onclick="addExpertRow()">
                             <i class="fas fa-plus-circle" aria-hidden="true"></i> 
                             [% l("Add Search Terms") %]
                         </button>
+                        
+                        <div id="expert_search_status" role="status">
+                            [% # ARIA live announcements toggled by ariaStatus() in simple.js %]
+                            <div class="m-0 alert alert-warning d-none" id="aria-search-row-removed">
+                                [% l('Search term logic group removed.'); %]
+                            </div>
+                            <div class="m-0 alert alert-success d-none" id="aria-search-row-added">
+                                [% l('Search term logic group added.'); %]
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

Open-ILS/web/js/ui/default/opac/simple.js

@@ -41,25 +41,30 @@ function addSearchRow() {
 }
 
 function addExpertRow() {
-    const clone = document.getElementById('adv_expert_row').cloneNode(true);
+    // Needs to use class instead of id so you can delete the first row
+    const clone = document.getElementsByClassName('adv_expert_row')[0].cloneNode(true);
     clone.id = '';
+    // Clear input values in the new row
+    clone.getElementsByTagName("input").forEach(input => {
+        input.value = '';
+    });
     const parent = document.getElementById("adv_expert_rows_here");
     parent.appendChild(clone);
+    displayAlert('aria-search-row-added');
     reindexLegends(parent);
 }
 
-function killRowIfAtLeast(min) {
+function killRowIfAtLeast(min, $event) {
     const link = $event.target;
-    //console.debug("Target: ", link);
-    var row = link.parentNode.parentNode;
-    //console.debug("Row: ", row);
-    if (row.parentNode.getElementsByTagName("fieldset").length > min) {
-        row.parentNode.removeChild(row);
+    let row = link.closest("fieldset");
+    let parent = row.parentNode;
+    if (parent.getElementsByTagName("fieldset").length > min) {
+        parent.removeChild(row);
         displayAlert('aria-search-row-removed');
         // re-number the legends 
-        reindexLegends(tBody);
+        reindexLegends(parent);
         // focus on first input in last row
-        row.parentNode.querySelector('input').focus();
+        parent.querySelector('input').focus();
     }
 }