Filter classrooms by text

courses_legacy/static/js/reports/classroom-participation-report/classroom-participation-report.component.js

@@ -17,8 +17,9 @@
 
         var ctrl = this;
 
-        ctrl.classrooms = null;
-        ctrl.fetchClassrooms = throttleDebounce.debounce(1000, fetchClassrooms);
+        ctrl.classrooms = [];
+        ctrl.filterClassrooms = filterClassrooms;
+        ctrl.filteredClassrooms = [];
         ctrl.minimized = false;
         ctrl.search = '';
         ctrl.toggleDetails = toggleDetails;
@@ -31,21 +32,29 @@
         function fetchClassrooms() {
             var params = { date: ctrl.date };
 
-            if (ctrl.search) {
-
-            }
-
             ClassroomReport.query(params, (data) => {
                 ctrl.classrooms = data;
-                ctrl.total = { actives: 0, not_actives: 0, not_involved: 0, total: 0 };
-                ctrl.classrooms.forEach(classroom => {
-                  var participation = classroom.participation;
-                  ctrl.total.actives += participation.actives;
-                  ctrl.total.not_actives += participation.not_actives;
-                  ctrl.total.not_involved += participation.not_involved;
-                  ctrl.total.total += participation.actives + participation.not_actives + participation.not_involved;
+                filterClassrooms();
+            });
+        }
+
+        function filterClassrooms() {
+            if (ctrl.search) {
+                ctrl.filteredClassrooms = ctrl.classrooms.filter(classroom => {
+                    return classroom.name.toLowerCase().includes(ctrl.search.toLowerCase());
                 });
+            } else {
+                ctrl.filteredClassrooms = ctrl.classrooms;
+            }
+
+            ctrl.total = { actives: 0, not_actives: 0, not_involved: 0, total: 0 };
+            ctrl.filteredClassrooms.forEach(classroom => {
+              const participation = classroom.participation;
+              ctrl.total.actives += participation.actives;
+              ctrl.total.not_actives += participation.not_actives;
+              ctrl.total.not_involved += participation.not_involved;
             });
+            ctrl.total.total = ctrl.total.actives + ctrl.total.not_actives + ctrl.total.not_involved;
         }
 
         function toggleDetails() {

courses_legacy/templates/components/classroom-participation-report.template.html

 {% verbatim %}
 
-<section class="widget container-fluid" ng-if="$ctrl.classrooms">
+<section class="widget container-fluid" ng-if="$ctrl.classrooms.length > 0">
   <header class="widget-header">
     <div class="row">
       <div class="col-sm-12 col-md-12">
@@ -18,7 +18,7 @@
   <main class="widget-body" ng-if="!$ctrl.minimized">
     <div class="filter-row">
       <span>Busque pelo nome da sala:</span>
-      <input name="classroom" placeholder="Busque por uma sala" aria-label="Sala de aula" ng-model="$ctrl.search" ng-change="$ctrl.fetchClassrooms()">
+      <input name="classroom" placeholder="Busque por uma sala" aria-label="Sala de aula" ng-model="$ctrl.search" ng-change="$ctrl.filterClassrooms()">
     </div>
     <div class="table-wrapper">
       <table>
@@ -33,7 +33,7 @@
         </thead>
         <tbody>
           <div>
-            <tr ng-repeat="classroom in $ctrl.classrooms">
+            <tr ng-repeat="classroom in $ctrl.filteredClassrooms">
               <td><b>{{ classroom.name }}</b></td>
               <td>{{ classroom.participation.actives }}</td>
               <td>{{ classroom.participation.not_actives }}</td>