Put search conditions in list; add remove button

fcrepo · Feb 28, 2022 · b7e7242 · b7e7242
1 parent bbc5310
commit b7e7242
Showing 1 changed file with 31 additions and 6 deletions.
diff --git a/fcrepo-webapp/src/main/webapp/static/js/common.js b/fcrepo-webapp/src/main/webapp/static/js/common.js
@@ -357,6 +357,7 @@
           addFieldSelect(query);
           addPagination(query);
 
+          createConditionContainer();
           const condition = query.condition || [];
           if (condition.length > 0) {
             condition.map(getConditionParts).forEach(addSearchCondition);
@@ -366,6 +367,15 @@
       }
   }
 
+  function createConditionContainer() {
+    const form = document.getElementById('action_search');
+    const paginationNode = document.getElementById('search_pagination');
+    let wrapper = document.createElement('ul');
+    wrapper.setAttribute('class', 'list-group form-group');
+    wrapper.setAttribute('id', 'search_conditions');
+    form.insertBefore(wrapper, paginationNode);
+  }
+
   /**
    * Add the search inputs needed for the given search condition.
    * If the condition is empty, create the default search inputs.
@@ -377,13 +387,12 @@
       value,
     } = condition || {};
 
-    const form = document.getElementById('action_search');
-    const paginationNode = document.getElementById('search_pagination');
+    const list = document.getElementById('search_conditions');
     const countNode = document.getElementById('search_count');
     const count = Number(countNode.value);
 
-    let wrapper = document.createElement('div');
-    wrapper.setAttribute('class', 'form-group');
+    let wrapper = document.createElement('li');
+    wrapper.setAttribute('class', 'list-group-item');
     wrapper.setAttribute('id', 'condition_group_' + count);
 
     let label1 = document.createElement('label');
@@ -424,6 +433,18 @@
     });
 
     wrapper.appendChild(localoperator);
+
+    const badge = document.createElement('span');
+    badge.setAttribute('class', 'badge');
+    badge.setAttribute('style', 'background-color: #d9534f; cursor: pointer');
+    badge.setAttribute('aria-label', 'Remove Condition');
+    const glyph = document.createElement('span');
+    glyph.setAttribute('class', 'glyphicon glyphicon-remove');
+    glyph.setAttribute('aria-hidden', 'true');
+    badge.appendChild(glyph);
+    badge.addEventListener('click', () => {removeSearchCondition(count)});
+    wrapper.appendChild(badge);
+
     wrapper.appendChild(document.createElement('br'));
     let label3 = document.createElement('label');
     label3.setAttribute('for', 'search_value_' + count);
@@ -439,12 +460,16 @@
       localvalue.setAttribute('value', value);
     }
     wrapper.appendChild(localvalue);
-    wrapper.appendChild(document.createElement('br'));
 
-    form.insertBefore(wrapper, paginationNode);
+    list.appendChild(wrapper);
     countNode.value++;
   }
 
+  function removeSearchCondition(condition) {
+    const group = document.getElementById('condition_group_' + condition);
+    group.remove();
+  }
+
   function addFieldSelect(query) {
     const selectedFields = query.fields || [];