update pin editor

lib/pages/staff/staff_pin_editor.dart

@@ -4,9 +4,11 @@ import 'package:fcs/pages/widgets/local_app_bar.dart';
 import 'package:fcs/pages/widgets/progress.dart';
 import 'package:flutter/material.dart';
 import 'package:pin_input_text_field/pin_input_text_field.dart';
+import 'package:provider/provider.dart';
 
 import '../main/util.dart';
 import '../widgets/local_text.dart';
+import 'model/staff_model.dart';
 
 class StaffPinEditor extends StatefulWidget {
   final User staff;
@@ -22,38 +24,69 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
   bool _enablePinLogin = false;
   String _newPin = "";
   String _confirmPin = "";
+  FocusNode _newPinFocus = FocusNode();
+  FocusNode _confirmPinFocus = FocusNode();
+  TextEditingController _newPinCtl = TextEditingController();
+  TextEditingController _confirmPinCtl = TextEditingController();
 
   @override
   void initState() {
+    _init();
+    super.initState();
+  }
+
+  _init() {
     _staff = widget.staff;
     _enablePinLogin = _staff.enablePinLogin;
     _newPin = _staff.pinDigit ?? "";
     _confirmPin = _staff.confirmPinDigit ?? "";
-    super.initState();
+    _newPinCtl.text = _newPin;
+    _confirmPinCtl.text = _confirmPin;
+    _checkFocusNode();
+
+    if (mounted) {
+      setState(() {});
+    }
+  }
+
+  @override
+  void dispose() {
+    _newPinFocus.dispose();
+    _confirmPinFocus.dispose();
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    final enablePinBox = Row(
-      children: [
-        Checkbox(
-          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          visualDensity: const VisualDensity(
+    final enablePinBox = InkWell(
+      onTap: () {
+        setState(() {
+          _enablePinLogin = !_enablePinLogin;
+        });
+        _checkFocusNode();
+      },
+      child: Row(
+        children: [
+          Checkbox(
+            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+            visualDensity: const VisualDensity(
               horizontal: VisualDensity.minimumDensity,
-              vertical: VisualDensity.minimumDensity),
-          activeColor: primaryColor,
-          side: BorderSide(color: Colors.black38, width: 2),
-          value: _enablePinLogin,
-          onChanged: (value) {
-            setState(() {
-              _enablePinLogin = value ?? false;
-            });
-          },
-        ),
-        const SizedBox(width: 15),
-        LocalText(context, 'staff.enable_pin',
-            fontSize: 15, color: Colors.black)
-      ],
+            ),
+            activeColor: primaryColor,
+            side: BorderSide(color: Colors.black38, width: 2),
+            value: _enablePinLogin,
+            onChanged: (value) {
+              setState(() {
+                _enablePinLogin = value ?? false;
+              });
+              _checkFocusNode();
+            },
+          ),
+          const SizedBox(width: 15),
+          LocalText(context, 'staff.enable_pin',
+              fontSize: 15, color: Colors.black)
+        ],
+      ),
     );
 
     final newPinBox = Column(
@@ -63,14 +96,17 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
             color: Colors.black54, fontSize: 15),
         const SizedBox(height: 8),
         PinInputTextField(
+            controller: _newPinCtl,
+            enabled: _enablePinLogin,
             cursor: Cursor(
                 color: primaryColor, enabled: true, width: 2, height: 23),
             pinLength: 6,
             decoration: BoxLooseDecoration(
-                strokeColorBuilder:
-                    PinListenColorBuilder(primaryColor, Colors.grey.shade400)),
+                strokeColorBuilder: PinListenColorBuilder(
+                    _enablePinLogin ? primaryColor : Colors.grey.shade400,
+                    Colors.grey.shade400)),
             textInputAction: TextInputAction.done,
-            autoFocus: true,
+            focusNode: _newPinFocus,
             onChanged: _newPinChange),
       ],
     );
@@ -82,14 +118,17 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
             color: Colors.black54, fontSize: 15),
         const SizedBox(height: 8),
         PinInputTextField(
+            controller: _confirmPinCtl,
+            enabled: _enablePinLogin,
             pinLength: 6,
             cursor: Cursor(
                 color: primaryColor, enabled: true, width: 2, height: 23),
             decoration: BoxLooseDecoration(
-                strokeColorBuilder:
-                    PinListenColorBuilder(primaryColor, Colors.grey.shade400)),
+                strokeColorBuilder: PinListenColorBuilder(
+                    _enablePinLogin ? primaryColor : Colors.grey.shade400,
+                    Colors.grey.shade400)),
             textInputAction: TextInputAction.done,
-            autoFocus: false,
+            focusNode: _confirmPinFocus,
             onChanged: _confirmPinChange),
       ],
     );
@@ -125,9 +164,9 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
                           style: TextStyle(color: Colors.black, fontSize: 15)),
                     ],
                   ),
-                  const SizedBox(height: 20),
+                  const SizedBox(height: 10),
                   enablePinBox,
-                  const SizedBox(height: 30),
+                  const SizedBox(height: 20),
                   FormField(
                     builder: (FormFieldState<bool> state) {
                       return Column(
@@ -211,9 +250,44 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
         ));
   }
 
+  _checkFocusNode() {
+    if (_enablePinLogin) {
+      _onChangeFocusNode();
+    } else {
+      _cancelFoucsNode();
+    }
+    if (mounted) {
+      setState(() {});
+    }
+  }
+
+  _onChangeFocusNode() {
+    if (this._newPin.length == 6) {
+      _newPinFocus.unfocus();
+      Future.delayed(const Duration(milliseconds: 300), () {
+        _confirmPinFocus.requestFocus();
+      });
+    } else {
+      _confirmPinFocus.unfocus();
+      Future.delayed(const Duration(milliseconds: 300), () {
+        _newPinFocus.requestFocus();
+      });
+    }
+  }
+
+  _cancelFoucsNode() {
+    _newPinFocus.unfocus();
+    Future.delayed(const Duration(milliseconds: 300), () {
+      _confirmPinFocus.unfocus();
+    });
+  }
+
   _newPinChange(pin) {
     setState(() {
       this._newPin = pin;
+      if (this._newPin.length == 6) {
+        _confirmPinFocus.requestFocus();
+      }
     });
   }
 
@@ -231,6 +305,10 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
     });
 
     try {
+      await context.read<StaffModel>().updatePin(
+          userID: _staff.id!,
+          enablePin: _enablePinLogin,
+          pin: int.parse(_confirmPin));
       Navigator.pop(context, true);
     } catch (e) {
       showMsgDialog(context, "Error", e.toString());