Update text for amount of results after filters are applied

Resources/Private/Partials/Recommender/Result.html

@@ -5,8 +5,8 @@
     <div>
         <div class="container mb-2">
             <div class="row">
-                <h2 class="col no-padding"><f:translate key="result.countAll" arguments="{count: '{results -> f:count()}'}"/></h2>
-                <h4 class="col no-padding"><f:translate key="result.countMatching" arguments="{count: '{countResults}'}"/></h4>
+                <h2 id="results-all" class="col no-padding" data-result-count="{results -> f:count()}"><f:translate key="result.countAll" arguments="{count: '{results -> f:count()}'}"/></h2>
+                <h4 id="results-matching" class="col no-padding" data-result-count="{countResults}"><f:translate key="result.countMatching" arguments="{count: '{countResults}'}"/></h4>
                 <div id="result-action-wrapper" class="col row col-md-auto align-self-center">
                     <div id="button-action-wrapper">
                         <button id="button-filter-collapse" class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one"><f:translate key="button.filter" default="Filter"/></button>

Resources/Public/JavaScript/Recommender/main.js

@@ -183,9 +183,12 @@ $(document).ready(function () {
         listRows = getListRows();
         tableRows = getTableRows();
 
+        var countMatching = 0;
+
         for (let i = 0; i < listRows.length; i++) {
             if (matchFilters(listRows[i])) {
                 listRows[i].style.display = "list-item";
+                countMatching++;
             } else {
                 listRows[i].style.display = "none";
             }
@@ -198,6 +201,24 @@ $(document).ready(function () {
                 tableRows[i].style.display = "none";
             }
         }
+
+        updateResultsCount(countMatching);
+    }
+
+    function updateResultsCount(newCountMatching) {
+        var countAll = $("#results-all").data('result-count');
+        var countMatching = $("#results-matching").data('result-count');
+        var countDiffer = countAll - countMatching;
+
+        var newCountAll = newCountMatching + countDiffer
+
+        var labelParts = $("#results-all").text().split(' ');
+        labelParts[0] = newCountAll;
+        $("#results-all").text(labelParts.join(' '));
+
+        var labelParts = $("#results-matching").text().split(' ');
+        labelParts[0] = newCountMatching;
+        $("#results-matching").text(labelParts.join(' '));
     }
 
     function resetFilters() {