commit 8b5d70abcf25757a96382b03b243f039b28fe28f
author William Hesse <whesse@google.com> Tue Jan 07 14:16:13 2020 +0000
committer William Hesse <whesse@google.com> Tue Jan 07 14:16:13 2020 +0000
tree d8ce93a724ea18d35b5361ceffdffc5745e15033
parent 30251ff521ba8cac91f97f973c09d79e5a2e1d10

[results feed] Choose which results to filter with radio buttons

Only three choices are given:
  Show all changes
  Show latest failures
  Show latest unapproved failures

Change-Id: Ifae64742b6d7c2182c38fd2ca9de29c8722fad38
Reviewed-on: https://dart-review.googlesource.com/c/dart_ci/+/130421
Reviewed-by: Alexander Thomas <athom@google.com>

results_feed/lib/src/services/filter_component.dart

diff --git a/results_feed/lib/src/services/filter_component.dart b/results_feed/lib/src/services/filter_component.dart
index bd027f6..1a88f7a 100644
--- a/results_feed/lib/src/services/filter_component.dart
+++ b/results_feed/lib/src/services/filter_component.dart
@@ -4,7 +4,8 @@
 
 import 'package:angular/angular.dart';
 import 'package:angular_components/angular_components.dart';
-import 'package:angular_components/material_toggle/material_toggle.dart';
+import 'package:angular_components/material_radio/material_radio.dart';
+import 'package:angular_components/material_radio/material_radio_group.dart';
 import 'package:angular_components/material_select/material_select.dart';
 import 'package:angular_components/material_select/material_select_item.dart';
 
@@ -16,35 +17,35 @@
   allConfigurationGroups
 ], directives: [
   coreDirectives,
-  MaterialToggleComponent,
+  MaterialRadioComponent,
+  MaterialRadioGroupComponent,
   MaterialSelectComponent,
-  MaterialSelectItemComponent
+  MaterialSelectItemComponent,
+  NgModel,
 ], template: '''
-    <material-toggle
-        (checkedChange)="onShowLatestFailures(\$event)"
-        [checked]="filter.showLatestFailures"
-        label="Show only latest failures">
-    </material-toggle>
-    <hr>
-    <material-toggle
-        (checkedChange)="onShowUnapprovedOnly(\$event)"
-        [checked]="filter.showUnapprovedOnly"
-        label="Show only unapproved failures">
-    </material-toggle>
-    <hr>
-   <b>Show changes on builders:</b>
-    <material-select
-        class="bordered-list"
-        focusList
-        [selection]="groupSelector"
-        [itemRenderer]="identityFunction">
-      <material-select-item
-          *ngFor="let group of allConfigurationGroups"
-          focusItem
-          [value]="group">
-      </material-select-item>
-    </material-select>
-  ''')
+  <material-radio-group
+      [ngModel]="changeType"
+      (ngModelChange)="setChangeType(\$event)">
+    <material-radio
+        *ngFor="let option of changeTypes"
+        style="display: flex"
+        [value]="option">{{option['label']}}
+    </material-radio>
+  </material-radio-group>
+  <hr>
+  <b>Show changes on builders:</b>
+  <material-select
+      class="bordered-list"
+      focusList
+      [selection]="groupSelector"
+      [itemRenderer]="identityFunction">
+    <material-select-item
+        *ngFor="let group of allConfigurationGroups"
+        focusItem
+        [value]="group">
+    </material-select-item>
+  </material-select>
+''')
 class FilterComponent {
   static const allConfigurationGroups = Filter.allConfigurationGroups;
 
@@ -58,6 +59,11 @@
     groupSelector = SelectionModel.multi(
         selectedValues: service.filter.configurationGroups);
     groupSelector.selectionChanges.listen(onSelectionChange);
+    changeType = changeTypes.firstWhere(
+        (type) =>
+            type['latestFailures'] == filter.showLatestFailures &&
+            type['unapprovedOnly'] == filter.showUnapprovedOnly,
+        orElse: () => changeTypes.first);
   }
 
   void onSelectionChange(_) {
@@ -73,13 +79,31 @@
     filter.updateUrl();
   }
 
-  void onShowLatestFailures(bool event) {
-    service.filter = filter.copy(showLatestFailures: event);
-    filter.updateUrl();
-  }
+  List<Map> changeTypes = [
+    {
+      'label': 'Show all changes',
+      'latestFailures': false,
+      'unapprovedOnly': false
+    },
+    {
+      'label': 'Show latest failures',
+      'latestFailures': true,
+      'unapprovedOnly': false
+    },
+    {
+      'label': 'Show latest unapproved failures',
+      'latestFailures': true,
+      'unapprovedOnly': true
+    },
+  ];
 
-  void onShowUnapprovedOnly(bool event) {
-    service.filter = filter.copy(showUnapprovedOnly: event);
+  Map changeType;
+
+  void setChangeType(Map event) {
+    changeType = event;
+    service.filter = filter.copy(
+        showLatestFailures: event['latestFailures'],
+        showUnapprovedOnly: event['unapprovedOnly']);
     filter.updateUrl();
   }