Merge pull request #210 from autodo-app/195

Fix bugs in Refueling add/edit UX
autodo-app · Jan 26, 2020 · cf8539b · cf8539b
2 parents 3ca204d + 534debc
commit cf8539b
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 25 deletions.
diff --git a/lib/screens/add_edit/refueling.dart b/lib/screens/add_edit/refueling.dart
@@ -151,7 +151,11 @@ class _DateFormState extends State<_DateForm> {
   @override
   initState() {
     _ctrl = TextEditingController();
-    if (initial != null) _ctrl.text = DateFormat.yMd().format(initial);
+    if (initial != null) {
+      _ctrl.text = DateFormat.yMd().format(initial);
+    } else {
+      _ctrl.text = DateFormat.yMd().format(DateTime.now());
+    }
     super.initState();
   }
 
@@ -198,6 +202,11 @@ class _DateFormState extends State<_DateForm> {
 
   @override
   build(context) => Row(children: <Widget>[
+        IconButton(
+          icon: Icon(Icons.calendar_today),
+          tooltip: AutodoLocalizations.chooseDate,
+          onPressed: (() => chooseDate(context, _ctrl.text)),
+        ),
         Expanded(
           child: TextFormField(
               decoration: InputDecoration(
@@ -221,23 +230,77 @@ class _DateFormState extends State<_DateForm> {
                 if (nextNode != null) return changeFocus(node, nextNode);
               }),
         ),
-        IconButton(
-          icon: Icon(Icons.calendar_today),
-          tooltip: AutodoLocalizations.chooseDate,
-          onPressed: (() => chooseDate(context, _ctrl.text)),
-        )
       ]);
 }
 
+class _CarToggleForm extends StatefulWidget {
+  final List<bool> initialState;
+  final List<Car> cars;
+  final Function onSaved;
+
+  _CarToggleForm(this.initialState, this.cars, this.onSaved);
+
+  @override
+  _CarToggleFormState createState() =>
+      _CarToggleFormState(initialState, cars, onSaved);
+}
+
+class _CarToggleFormState extends State<_CarToggleForm> {
+  List<bool> isSelected;
+  final List<Car> cars;
+  final Function onSaved;
+
+  _CarToggleFormState(this.isSelected, this.cars, this.onSaved);
+
+  @override
+  build(context) => FormField(
+        builder: (state) => Center(
+          child: ToggleButtons(
+            children: cars.map((c) => Text(c.name)).toList(),
+            onPressed: (int index) {
+              setState(() {
+                for (int buttonIndex = 0;
+                    buttonIndex < isSelected.length;
+                    buttonIndex++) {
+                  if (buttonIndex == index) {
+                    isSelected[buttonIndex] = true;
+                  } else {
+                    isSelected[buttonIndex] = false;
+                  }
+                }
+              });
+            },
+            isSelected: isSelected,
+            // Constraints are per the Material spec
+            constraints: BoxConstraints(minWidth: 88, minHeight: 36),
+            textStyle: Theme.of(context).primaryTextTheme.button,
+            color: Theme.of(context)
+                .primaryTextTheme
+                .button
+                .color
+                .withOpacity(0.7),
+            selectedColor: Theme.of(context).accentTextTheme.button.color,
+            fillColor: Theme.of(context).primaryColor,
+            borderWidth: 2.0,
+            borderRadius: BorderRadius.circular(5),
+          ),
+        ),
+        onSaved: (_) => onSaved(isSelected),
+        validator: (_) => null,
+      );
+}
+
 class RefuelingAddEditScreen extends StatefulWidget {
   final bool isEditing;
   final _OnSaveCallback onSave;
   final Refueling refueling;
+  final List<Car> cars;
 
   RefuelingAddEditScreen({
     Key key = const ValueKey('__add_edit_refueling__'),
     @required this.onSave,
     @required this.isEditing,
+    @required this.cars,
     this.refueling,
   }) : super(key: key);
 
@@ -277,6 +340,12 @@ class _RefuelingAddEditScreenState extends State<RefuelingAddEditScreen> {
     super.dispose();
   }
 
+  List<bool> _carsToInitialState() => (widget.cars
+          .map((c) => c.name)
+          .contains(widget.refueling?.carName))
+      ? widget.cars.map((c) => c.name == widget.refueling?.carName)
+      : List.generate(widget.cars.length, (idx) => (idx == 0) ? true : false);
+
   @override
   build(context) => Scaffold(
         appBar: AppBar(
@@ -292,19 +361,30 @@ class _RefuelingAddEditScreenState extends State<RefuelingAddEditScreen> {
                 padding: EdgeInsets.all(15),
                 child: ListView(
                   children: <Widget>[
+                    (widget.cars.length <= 1)
+                        ? Container()
+                        : (widget.cars.length < 4)
+                            ? _CarToggleForm(
+                                _carsToInitialState(),
+                                widget.cars,
+                                (List<bool> isSelected) => _car = widget
+                                    .cars[isSelected.indexWhere((i) => i)].name,
+                              )
+                            : CarForm(
+                                key: ValueKey('__refueling_car_form__'),
+                                initialValue: widget.refueling?.carName,
+                                onSaved: (val) => _car = val,
+                                node: _carNode,
+                                nextNode: _amountNode),
+                    (widget.cars.length <= 1)
+                        ? Container()
+                        : Padding(padding: EdgeInsets.fromLTRB(0, 16, 0, 16)),
                     _MileageForm(
                         refueling: widget.refueling,
                         onSaved: (val) => _mileage = int.parse(val),
                         node: _mileageNode,
                         nextNode: _carNode),
                     Padding(padding: EdgeInsets.fromLTRB(0, 16, 0, 16)),
-                    CarForm(
-                        key: ValueKey('__refueling_car_form__'),
-                        initialValue: widget.refueling?.carName,
-                        onSaved: (val) => _car = val,
-                        node: _carNode,
-                        nextNode: _amountNode),
-                    Padding(padding: EdgeInsets.fromLTRB(0, 16, 0, 16)),
                     _AmountForm(
                         refueling: widget.refueling,
                         onSaved: (val) => _amount = double.parse(val),

diff --git a/lib/screens/home/screen.dart b/lib/screens/home/screen.dart
@@ -65,18 +65,19 @@ class _HomeScreenState extends State<HomeScreen> {
         MaterialPageRoute(
           builder: (context) => _ScreenWithBanner(
               child: RefuelingAddEditScreen(
-            isEditing: false,
-            onSave: (m, d, a, c, n) {
-              BlocProvider.of<RefuelingsBloc>(context)
-                  .add(AddRefueling(Refueling(
-                mileage: m,
-                date: d,
-                amount: a,
-                cost: c,
-                carName: n,
-              )));
-            },
-          )),
+                  isEditing: false,
+                  onSave: (m, d, a, c, n) {
+                    BlocProvider.of<RefuelingsBloc>(context)
+                        .add(AddRefueling(Refueling(
+                      mileage: m,
+                      date: d,
+                      amount: a,
+                      cost: c,
+                      carName: n,
+                    )));
+                  },
+                  cars: (BlocProvider.of<CarsBloc>(context).state as CarsLoaded)
+                      .cars)),
         ),
         MaterialPageRoute(
             builder: (context) => _ScreenWithBanner(