Merge pull request #916 from JGreenlee/master

consolidate filter buttons into dropdown <select>
e-mission · Mar 25, 2023 · 17bc991 · 17bc991
2 parents dc3b274 + fb83c24
commit 17bc991
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js
@@ -54,6 +54,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     f.state = false;
   });
   $scope.filterInputs[0].state = true;
+  $scope.selFilter = $scope.filterInputs[0].key;
   ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": null, "dest": $scope.getActiveFilters()});
   $scope.allTrips = false;
   const ONE_WEEK = 7 * 24 * 60 * 60; // seconds
@@ -192,15 +193,24 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     }
   });
 
-  $scope.select = function(selF) {
+  $scope.updateFilterSel = function(selFilterKey) {
     const prev = $scope.getActiveFilters();
-    selF.state = true;
-    $scope.filterInputs.forEach((f) => {
-      if (f !== selF) {
+    const selFilter = $scope.filterInputs.find(f => f.key == selFilterKey);
+    if (selFilter) {
+      selFilter.state = true;
+      $scope.filterInputs.forEach((f) => {
+        if (f !== selFilter) {
+          f.state = false;
+        }
+      });
+      $scope.allTrips = false;
+    } else {
+      $scope.filterInputs.forEach((f) => {
         f.state = false;
-      }
-    });
-    $scope.allTrips = false;
+      });
+      $scope.allTrips = true;
+    }
+
     $scope.recomputeDisplayTrips();
     // scroll to the bottom while changing filters so users don't have to
     // fixes the first of the fit-and-finish issues from
@@ -209,17 +219,6 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": prev, "dest": $scope.getActiveFilters()});
   }
 
-  $scope.resetSelection = function() {
-    const prev = $scope.getActiveFilters();
-    $scope.filterInputs.forEach((f) => {
-      f.state = false;
-    });
-    $scope.allTrips = true;
-    $scope.recomputeDisplayTrips();
-    $ionicScrollDelegate.scrollBottom();
-    ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": prev, "dest": $scope.getActiveFilters()});
-  }
-
   $scope.recomputeDisplayTrips = function() {
     let alreadyFiltered = false;
     $scope.filterInputs.forEach((f) => {

diff --git a/www/js/survey/enketo/infinite_scroll_filters.js b/www/js/survey/enketo/infinite_scroll_filters.js
@@ -21,15 +21,13 @@ angular.module('emission.survey.enketo.trip.infscrollfilters',[
     sf.UNLABELED = {
         key: "unlabeled",
         text: $translate.instant(".unlabeled"),
-        filter: unlabeledCheck,
-        width: "col-50"
+        filter: unlabeledCheck
     }
 
     sf.TO_LABEL = {
         key: "to_label",
         text: $translate.instant(".to-label"),
-        filter: unlabeledCheck,
-        width: "col-50"
+        filter: unlabeledCheck
     }
 
     sf.configuredFilters = [

diff --git a/www/templates/diary/infinite_scroll_list.html b/www/templates/diary/infinite_scroll_list.html
@@ -5,14 +5,14 @@
         <button class="button button-icon" ng-click="increaseHeight()">
             <i class="icon ion-arrow-resize"></i>
         </button>
-        <div class="row buttons labelfilterlist">
-            <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="{{selF.width}} button labelfilter" ng-class="{on:selF.state}" style="text-align: center;font-size: 13px;font-weight: 600; border-radius: 10px;" translate>
-                {{selF.text}}
-            </button>
-            <button ng-click="resetSelection()" class="col-33 button labelfilter last" ng-class="{on:allTrips}" style="text-align: center;font-size: 13px;font-weight: 600; border-radius: 10px;" translate>
+        <select ng-model="selFilter" ng-change="updateFilterSel(selFilter)">
+            <option ng-repeat="filter in filterInputs" value="{{filter.key}}" translate>
+                {{filter.text}}
+            </option>
+            <option value="show-all" translate>
                 {{'.show-all'}}
-            </button>
-        </div>
+            </option>
+        </select>
     </ion-nav-buttons>
 
     <ion-nav-buttons side="right">