Filtering edits (hashgraph#931)

Signed-off-by: Michael Garber <michael.garber@swirldslabs.com> Signed-off-by: Kim Rader <kim.rader@swirldslabs.com>
kimbor · Jun 24, 2024 · 4005c86 · 4005c86
1 parent 2dca8b0
commit 4005c86
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 50 deletions.
diff --git a/_includes/hipstable.md b/_includes/hipstable.md
@@ -1,29 +1,28 @@
 <div class="hip-filters filter-wrap">
     <div class="filter-group">
         <h4>Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
-        <label><input type="checkbox" class="filter check-all" value="all" checked> All</label>
-        <label><input type="checkbox" class="filter" value="core" checked> Core</label>
-        <label><input type="checkbox" class="filter" value="service" checked> Service</label>
-        <label><input type="checkbox" class="filter" value="mirror" checked> Mirror</label>
-        <label><input type="checkbox" class="filter" value="application" checked> Application</label>
-        <label><input type="checkbox" class="filter" value="informational" checked> Informational</label>
-        <label><input type="checkbox" class="filter" value="process" checked> Process</label>
+        <select id="type-filter" class="type-filter" multiple>
+            <option value="core">Core</option>
+            <option value="service">Service</option>
+            <option value="mirror">Mirror</option>
+            <option value="application">Application</option>
+            <option value="informational">Informational</option>
+            <option value="process">Process</option>
+        </select>
     </div>
     <div class="filter-group">
         <h4>Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
-        <!-- Status Filter Dropdown -->
         <select id="status-filter" class="status-filter" multiple>
-            <option value="draft">Draft</option>
-            <option value="withdrawn">Withdrawn</option>
             <option value="review">Review</option>
-            <option value="stagnant">Stagnant</option>
-            <option value="deferred">Deferred</option>
             <option value="last call">Last Call</option>
             <option value="accepted">Accepted</option>
             <option value="rejected">Rejected</option>
             <option value="final">Final</option>
             <option value="active">Active</option>
             <option value="replaced">Replaced</option>
+            <option value="stagnant">Stagnant</option>
+            <option value="deferred">Deferred</option>
+            <option value="withdrawn">Withdrawn</option>
         </select>
     </div>
     <div class="filter-group">

diff --git a/assets/js/filter.js b/assets/js/filter.js
@@ -1,6 +1,4 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const typeCategoryCheckboxes = document.querySelectorAll('.hip-filters .filter:not(.check-all)');
-    const checkAllCheckbox = document.querySelector('.hip-filters .check-all');
     const statusSelect = $('#status-filter');
     const councilApprovalFilters = document.querySelectorAll('input[name="council-approval-filter"]');
     const noHipsMessage = document.querySelector('.no-hips-message');
@@ -23,29 +21,31 @@ document.addEventListener('DOMContentLoaded', () => {
         placeholder: "Select statuses",
         allowClear: true
     }).on('change', () => {
-        if (statusSelect.val().length === 0) {
-            filterRows();
-        } else {
-            filterRows();
-        }
+        filterRows();
+    });
+
+    $('#type-filter').select2({
+        placeholder: "Select types",
+        allowClear: true
+    }).on('change', () => {
+        filterRows();
     });
 
     function filterRows() {
-        const selectedTypes = Array.from(typeCategoryCheckboxes)
-            .filter(checkbox => checkbox.checked)
-            .map(checkbox => checkbox.value.trim().toLowerCase());
+        let selectedTypes = $('#type-filter').val();
+        if (!selectedTypes || selectedTypes.length === 0) {
+            selectedTypes = $('#type-filter option').map(function() { return this.value }).get();
+        }
 
-        // If nothing is selected in the Status select, treat it as "all"
         const selectedStatuses = statusSelect.val().length > 0 ? statusSelect.val() : ['all'];
-        // If no council approval filter is selected, treat it as "all"
         const selectedCouncilApproval = document.querySelector('input[name="council-approval-filter"]:checked')?.value || 'all';
         let anyRowVisible = false;
         document.querySelectorAll('.hipstable tbody tr').forEach(row => {
             const rowTypes = [row.getAttribute('data-type').trim().toLowerCase(), row.getAttribute('data-category').trim().toLowerCase()];
             const rowStatus = row.getAttribute('data-status').trim().toLowerCase();
             const rowCouncilApproval = row.getAttribute('data-council-approval');
 
-            const typeCategoryMatch = checkAllCheckbox.checked || selectedTypes.some(type => rowTypes.includes(type));
+            const typeCategoryMatch = selectedTypes.some(type => rowTypes.includes(type));
             const statusMatch = selectedStatuses.includes('all') || selectedStatuses.includes(rowStatus);
             const councilApprovalMatch = selectedCouncilApproval === 'all' || selectedCouncilApproval === rowCouncilApproval;
 
@@ -60,48 +60,25 @@ document.addEventListener('DOMContentLoaded', () => {
         noHipsMessage.style.display = anyRowVisible ? 'none' : 'block';
         updateTableVisibility();
     }
-
 
     function updateTableVisibility() {
         let anyTableVisible = false;
-
         document.querySelectorAll('.hipstable').forEach(table => {
             const isVisible = Array.from(table.querySelectorAll('tbody tr')).some(row => row.style.display !== 'none');
             anyTableVisible = anyTableVisible || isVisible;
-
             table.style.display = isVisible ? '' : 'none';
             const heading = table.previousElementSibling;
-            if (heading) heading.style.display = isVisible ? '' : 'none';
+            heading.style.display = isVisible ? '' : 'none';
         });
-
         noHipsMessage.textContent = anyTableVisible ? '' : 'No HIPs match this filter.';
     }
 
     function bindEventListeners() {
-        typeCategoryCheckboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', () => {
-                const allChecked = Array.from(typeCategoryCheckboxes).every(cb => cb.checked);
-                checkAllCheckbox.checked = allChecked;
-                filterRows();
-            });
-        });
-
-        if (checkAllCheckbox) {
-            checkAllCheckbox.addEventListener('change', () => {
-                const isChecked = checkAllCheckbox.checked;
-                typeCategoryCheckboxes.forEach(cb => {
-                    cb.checked = isChecked;
-                });
-                filterRows();
-            });
-        }
-
         if (councilApprovalFilters.length > 0) {
             councilApprovalFilters.forEach(filter => filter.addEventListener('change', filterRows));
         }
     }
 
-
     bindEventListeners();
     filterRows();
-});
+});