Merge pull request #1159 from GSA/staging

Staging

Author: istankevychgsa

_includes/training-resources/filter.html

@@ -211,6 +211,7 @@
           <button type="button" aria-label="Price Band 500" data-min="500" data-max="1000" data-column-num="{{ columns.price }}" class="filterBtn usa-button padding-1 margin-bottom-2 margin-right-0 text-bold text-color border-1px bg-button radius-lg button-border">$500 - $1,000</button>
           <button type="button" aria-label="Price Band 1000" data-min="1000" data-max="2000" data-column-num="{{ columns.price }}" class="filterBtn usa-button padding-1 margin-bottom-2 margin-right-0 text-bold text-color border-1px bg-button radius-lg button-border">$1,000 - $2,000</button>
           <button type="button" aria-label="Price Band 2000" data-min="2000" data-max="10000" data-column-num="{{ columns.price }}" class="filterBtn usa-button padding-1 margin-bottom-2 margin-right-0 text-bold text-color border-1px bg-button radius-lg button-border">$2,000 - $10,000</button>
+          <button type="button" aria-label="Price Band 10000" data-min="10000" data-max="15000" data-column-num="{{ columns.price }}" class="filterBtn usa-button padding-1 margin-bottom-2 margin-right-0 text-bold text-color border-1px bg-button radius-lg button-border">$10,000 - $15,000</button>
         </div>
 
         <label class="margin-top-0 text-color font-sans-xs text-bold">Training Providers<i class="fa fa-info-circle usa-tooltip margin-left-1 font-size-16" data-position="right" title="Filter your search by training providers" aria-label="Information about filtering your search"></i></label>

_includes/training-resources/results.html

@@ -1,7 +1,7 @@
 <div id="career-advancement-results-container" class="tablet:grid-col-7 desktop:grid-col-8 padding-right-4 padding-top-8">
   <section class="margin-bottom-1">
-    <div id="career-search-results-filter-remove-all-button" class="margin-y-1">
-      <a href="javascript:void(0)" class="text-color" id="career-facet-remove-all-filters-button"><strong>Clear All</strong></a>
+    <div id="career-search-results-filter-remove-all-button-training" class="margin-y-1">
+      <a href="javascript:void(0)" class="text-color" id="career-facet-remove-all-filters-button-training" style="display: none;"><strong>Clear All</strong></a>
     </div>
   </section>
   <section>

assets/js/training-courses.js

@@ -135,7 +135,7 @@ $(document).ready(function () {
       updateButtonState();
     });
 
-    $('#per-page-top').change(function () {
+    $('#per-page-top, #per-page-bot').change(function () {
       var length = $(this).val();
       table.page.len(length).draw();
       updateButtonState();
@@ -144,6 +144,32 @@ $(document).ready(function () {
     // Draw the table
     table.draw();
 
+    function countNonEmptyCollections(obj) {
+      let count = 0;
+      Object.keys(obj).forEach(key => {
+        const value = obj[key];
+        if (Array.isArray(value) && value.length > 0) {
+          // Count non-empty arrays
+          count++;
+        } else if (value instanceof Set && value.size > 0) {
+          // Count non-empty sets
+          count++;
+        }
+      });
+
+      const selectedGsLevels = $('.gs-level-filter.active').map(function() { return $(this).data('gs-level'); }).get();
+      const selectedJobSeries = $('.job-series-filter.active').map(function() { return $(this).data('job-series'); }).get();
+      const selectedCompetencies = $('.competency-filter:checked').map(function() { return $(this).data('competency'); }).get();
+      const filterCount = selectedGsLevels.length + selectedJobSeries.length + selectedCompetencies.length;
+      count += filterCount;
+
+      if (count ==  0) {
+        $("#career-facet-remove-all-filters-button-training").css('display', 'none');
+      }  else {
+        $("#career-facet-remove-all-filters-button-training").css('display', 'block');
+      }
+    }
+
     function filterTable() {
       const selectedGsLevels = $('.gs-level-filter.active').map(function() { return $(this).data('gs-level'); }).get();
       const selectedJobSeries = $('.job-series-filter.active').map(function() { return $(this).data('job-series'); }).get();
@@ -163,6 +189,8 @@ $(document).ready(function () {
       }).flat().join('|');
 
       table.column(8).search(filterRegex, true, false).draw();
+
+      countNonEmptyCollections(activeFilters);
     }
 
     $('.gs-level-filter, .job-series-filter').on('click', function() {
@@ -213,7 +241,7 @@ $(document).ready(function () {
         activeFilters[columnIndex].clear();
         activeFilters[columnIndex].add('all');
       }
-
+      countNonEmptyCollections(activeFilters);
       // Apply the filters
       table.draw();
       window.history.replaceState({}, "", location.pathname);
@@ -252,6 +280,20 @@ $(document).ready(function () {
       }
     });
 
+    // Event handler for clear all
+    $("#career-facet-remove-all-filters-button-training").on('click', function () {
+      activeFilters = {};
+      $('.filterBtn').removeClass('active');
+      $('input[type="checkbox"]').prop('checked', false);
+      $("#career-facet-remove-all-filters-button-training").css('display', 'none');
+      $('.gs-level-filter').removeClass('active');
+      $('.job-series-filter').removeClass('active');
+      updateSelectAllState('job-career-competency-select-training');
+      updateSelectAllState('general-career-competency-select-training');
+      filterTable();
+      $(this).hide();
+    });
+
     // Event handler for "Select All" / "Deselect All" button
     $('#training-download-button-1').on('click', function () {
       var $button = $(this);
@@ -303,7 +345,8 @@ $(document).ready(function () {
                 0: [0, 500],
                 500: [500, 1000],
                 1000: [1000, 2000],
-                2000: [2000, 10000]
+                2000: [2000, 10000],
+                10000: [10000, 15000]
               };
               var isInRange = filterValues.some(filterValue => {
                 if (rangeMappings[filterValue]) {