Merge branch 'master' of tzw/fcs into master

lib/helpers/theme.dart

@@ -8,7 +8,7 @@ const buttonColor = const Color(0xFFFFFFFF);
 const buttonBkColor = const Color(0xFF268944);
 const labelColor = const Color(0xFF757575);
 var dividerColor = Colors.grey.shade400;
-const dangerColor= const Color(0xffff0606);
+const dangerColor = const Color(0xffff0606);
 
 const TextStyle labelStyle =
     TextStyle(fontSize: 20, color: labelColor, fontWeight: FontWeight.w500);

lib/pages/fcs_shipment/fcs_shipment_editor.dart

@@ -26,6 +26,7 @@ class FcsShipmentEditor extends StatefulWidget {
 }
 
 class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
+  final _formKey = GlobalKey<FormState>();
   var dateFormatter = new DateFormat('dd MMM yyyy');
   TextEditingController _shipmentNumberController = new TextEditingController();
   TextEditingController _cutoffDateController = new TextEditingController();
@@ -111,26 +112,47 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
                 Navigator.of(context).pop();
               }
             }),
-        body: ListView(
+        body: Form(
+          key: _formKey,
+          child: ListView(
               padding: const EdgeInsets.only(left: 10, right: 10),
               children: <Widget>[
                 InputText(
                   labelTextKey: "FCSshipment.number",
                   iconData: Ionicons.ios_airplane,
                   controller: _shipmentNumberController,
+                  validator: (value) {
+                    if (value!.isEmpty) {
+                      return "Enter shipment number";
+                    }
+                    return null;
+                  },
                 ),
                 InputDate(
                   labelTextKey: "FCSshipment.cutoff_date",
                   iconData: Icons.date_range,
                   controller: _cutoffDateController,
+                  validator: (value) {
+                    if (value!.isEmpty) {
+                      return "Select cutoff date";
+                    }
+                    return null;
+                  },
                 ),
                 InputDate(
                   labelTextKey: "FCSshipment.ETA",
                   iconData: Icons.date_range,
                   controller: _arrivalDateController,
+                  validator: (value) {
+                    if (value!.isEmpty) {
+                      return "Select ETA date";
+                    }
+                    return null;
+                  },
                 ),
                 DropdownButtonFormField(
-                value: _currentShipmentType == "" ? null : _currentShipmentType,
+                  value:
+                      _currentShipmentType == "" ? null : _currentShipmentType,
                   decoration: InputDecoration(
                       enabledBorder: UnderlineInputBorder(
                           borderSide: BorderSide(color: primaryColor)),
@@ -139,7 +161,8 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
                       fillColor: Colors.white,
                       labelStyle: languageModel.isEng
                           ? newLabelStyle(color: Colors.black54, fontSize: 20)
-                        : newLabelStyleMM(color: Colors.black54, fontSize: 20),
+                          : newLabelStyleMM(
+                              color: Colors.black54, fontSize: 20),
                       labelText: AppTranslations.of(context)!
                           .text('FCSshipment.shipment_type'),
                       icon: Icon(Ionicons.ios_airplane, color: primaryColor)),
@@ -169,6 +192,7 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
                 SizedBox(height: 15)
               ]),
         ),
+      ),
     );
   }
 
@@ -180,45 +204,20 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
     fcsShipment.consignee = _consigneeController.text;
     fcsShipment.port = _portController.text;
     fcsShipment.destination = _destinationController.text;
-    try {
+
     var cutoffDate = _cutoffDateController.text;
     var arrivalDate = _arrivalDateController.text;
     fcsShipment.cutoffDate =
         (cutoffDate == "" ? null : dateFormatter.parse(cutoffDate))!;
     fcsShipment.arrivalDate =
         (arrivalDate == "" ? null : dateFormatter.parse(arrivalDate))!;
-    } catch (e) {
-      // showMsgDialog(context, "Error", e.toString()); // shold never happen
-    }
     return fcsShipment;
   }
 
-  Future<bool> _validate(FcsShipment fcsShipment) async {
-    if (fcsShipment.shipmentNumber == "") {
-      await showMsgDialog(context, "Error", "Invalid shipment number!");
-      return false;
-    }
-    if (fcsShipment.shipType == null) {
-      await showMsgDialog(context, "Error", "Invalid shipment type!");
-      return false;
-    }
-    if (fcsShipment.cutoffDate == null) {
-      await showMsgDialog(context, "Error", "Invalid cutoff date!");
-      return false;
-    }
-    if (fcsShipment.arrivalDate == null) {
-      await showMsgDialog(context, "Error", "Invalid ETA date!");
-      return false;
-    }
-    return true;
-  }
-
   Future<void> _create() async {
+    if (!_formKey.currentState!.validate()) return;
     FcsShipment fcsShipment = _getPayload();
-    bool valid = await _validate(fcsShipment);
+
-    if (!valid) {
-      return;
-    }
     setState(() {
       _isLoading = true;
     });
@@ -236,11 +235,9 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
   }
 
   Future<void> _update() async {
+    if (!_formKey.currentState!.validate()) return;
     FcsShipment fcsShipment = _getPayload();
-    bool valid = await _validate(fcsShipment);
+
-    if (!valid) {
-      return;
-    }
     setState(() {
       _isLoading = true;
     });

lib/pages/signin/pinlogin_page.dart

@@ -16,8 +16,9 @@ class PinLoginPage extends StatefulWidget {
 
 class _PinLoginPageState extends State<PinLoginPage> {
   bool _isLoading = false;
-  late String pin;
+  String pin = "";
   //late User _user;
+  final _formKey = GlobalKey<FormState>();
   TextEditingController _fcsIdCtl = new TextEditingController();
 
   @override
@@ -34,6 +35,13 @@ class _PinLoginPageState extends State<PinLoginPage> {
     final fcsIdBox = TextFormField(
       controller: _fcsIdCtl,
       autofocus: true,
+      autovalidateMode: AutovalidateMode.onUserInteraction,
+      validator: (value) {
+        if (value == null || value.isEmpty) {
+          return 'Please enter FCS ID';
+        }
+        return null;
+      },
       style: TextStyle(
           fontSize: 15, color: Colors.black87, fontWeight: FontWeight.w500),
       cursorColor: primaryColor,
@@ -47,6 +55,7 @@ class _PinLoginPageState extends State<PinLoginPage> {
             borderSide: BorderSide(color: primaryColor, width: 1.0)),
         disabledBorder: UnderlineInputBorder(
             borderSide: BorderSide(color: primaryColor, width: 1.0)),
+        errorStyle: TextStyle(color: dangerColor),
       ),
     );
 
@@ -60,6 +69,46 @@ class _PinLoginPageState extends State<PinLoginPage> {
         fit: BoxFit.fitHeight,
       ),
     );
+    final pinInputBox = FormField(
+        validator: (value) {
+          if (pin == "") {
+            return "Please enter PIN";
+          }
+          if (pin.length < 6) {
+            return "PIN must be 6 digit";
+          }
+          return null;
+        },
+        autovalidateMode: AutovalidateMode.onUserInteraction,
+        builder: (state) {
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              PinInputTextField(
+                cursor: Cursor(
+                    color: primaryColor, enabled: true, width: 2, height: 23),
+                pinLength: 6,
+                decoration: BoxLooseDecoration(
+                    strokeColorBuilder: PinListenColorBuilder(
+                        primaryColor, Colors.grey.shade400),
+                    errorTextStyle: TextStyle(color: dangerColor)),
+                textInputAction: TextInputAction.done,
+                autoFocus: false,
+                onChanged: _pinChange,
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 8),
+                child: pin == "" || pin.length < 6
+                    ? SizedBox(
+                        height: 20,
+                        child: Text(state.errorText ?? "",
+                            style: TextStyle(color: dangerColor, fontSize: 12)),
+                      )
+                    : const SizedBox(height: 20),
+              )
+            ],
+          );
+        });
 
     final loginBtn = Padding(
       padding: EdgeInsets.only(top: 30),
@@ -74,9 +123,10 @@ class _PinLoginPageState extends State<PinLoginPage> {
           // appBar: LocalAppBar(
           //   backgroundColor: primaryColor,
 
-            
           // ),
-          body: ListView(
+          body: Form(
+        key: _formKey,
+        child: ListView(
           padding: EdgeInsets.only(top: 80, left: 15, right: 15, bottom: 20),
           children: [
             pinLoginLogo,
@@ -102,19 +152,10 @@ class _PinLoginPageState extends State<PinLoginPage> {
                   color: Colors.black54,
                   fontSize: 15,
                 )),
-              PinInputTextField(
+            pinInputBox,
-                cursor: Cursor(
-                    color: primaryColor, enabled: true, width: 2, height: 23),
-                pinLength: 6,
-                decoration: BoxLooseDecoration(
-                    strokeColorBuilder: PinListenColorBuilder(
-                        primaryColor, Colors.grey.shade400)),
-                textInputAction: TextInputAction.done,
-                autoFocus: false,
-                onChanged: _pinChange,
-              ),
             loginBtn,
           ],
+        ),
       )),
     );
   }
@@ -124,16 +165,20 @@ class _PinLoginPageState extends State<PinLoginPage> {
       this.pin = pin;
     });
   }
+
   _login() async {
-    if (pin == "") {
+    if (pin == "" && _formKey.currentState!.validate()) {
       showMsgDialog(context, "Error", "Invalid PIN");
       return;
     }
 
-    if (pin.length < 6) {
+    if (pin.length < 6 && _formKey.currentState!.validate()) {
       showMsgDialog(context, "Error", "PIN must be 6 digits");
       return;
     }
+    if (!_formKey.currentState!.validate()) {
+      return;
+    }
 
     setState(() {
       _isLoading = true;

lib/pages/staff/staff_pin_editor.dart

@@ -16,6 +16,7 @@ class StaffPinEditor extends StatefulWidget {
 }
 
 class _StaffPinEditorState extends State<StaffPinEditor> {
+  final _formKey = GlobalKey<FormState>();
   bool _isLoading = false;
   late User _staff;
   bool _enablePinLogin = false;
@@ -110,7 +111,9 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
               backgroundColor: Colors.white,
               labelColor: primaryColor,
               arrowColor: primaryColor),
-          body: Padding(
+          body: Form(
+            key: _formKey,
+            child: Padding(
               padding: const EdgeInsets.only(left: 15.0, right: 15),
               child: ListView(
                 children: <Widget>[
@@ -125,15 +128,86 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
                   const SizedBox(height: 20),
                   enablePinBox,
                   const SizedBox(height: 30),
+                  FormField(
+                    builder: (FormFieldState<bool> state) {
+                      return Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
                           newPinBox,
-                SizedBox(height: 30),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 8.0),
+                            child: _newPin == '' || _newPin.length < 6
+                                ? SizedBox(
+                                    height: 20,
+                                    child: Text(
+                                      state.errorText ?? '',
+                                      style: const TextStyle(
+                                          color: dangerColor, fontSize: 12),
+                                    ),
+                                  )
+                                : const SizedBox(height: 20),
+                          ),
+                        ],
+                      );
+                    },
+                    validator: (value) {
+                      if (_newPin == "") {
+                        return 'Enter new PIN';
+                      }
+
+                      if (_newPin.length < 6) {
+                        return 'New PIN must be 6 digits';
+                      }
+                      return null;
+                    },
+                  ),
+                  SizedBox(height: 10),
+                  FormField(
+                    builder: (FormFieldState<bool> state) {
+                      return Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
                           confirmPinBox,
-                SizedBox(height: 30),
+                          Padding(
+                              padding: const EdgeInsets.only(top: 8.0),
+                              child: _confirmPin == '' ||
+                                      _confirmPin.length < 6 ||
+                                      _confirmPin != _newPin
+                                  ? SizedBox(
+                                      height: 20,
+                                      child: Text(
+                                        state.errorText ?? '',
+                                        style: const TextStyle(
+                                            color: dangerColor, fontSize: 12),
+                                      ),
+                                    )
+                                  : const SizedBox(height: 20)),
+                        ],
+                      );
+                    },
+                    validator: (value) {
+                      if (_confirmPin == "") {
+                        return 'Enter confirm PIN';
+                      }
+
+                      if (_confirmPin.length < 6) {
+                        return 'Confirm PIN must be 6 digits';
+                      }
+
+                      if (_confirmPin != _newPin) {
+                        return "Those pins didn’t match. Try again.";
+                      }
+
+                      return null;
+                    },
+                  ),
+                  SizedBox(height: 20),
                   saveButton,
                   SizedBox(height: 30)
                 ],
               ),
             ),
+          ),
         ));
   }
 
@@ -150,30 +224,7 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
   }
 
   _save() async {
-    if (_newPin == "") {
+    if (!_formKey.currentState!.validate()) return;
-      showMsgDialog(context, "Error", "Invalid new PIN");
-      return;
-    }
-
-    if (_newPin.length < 6) {
-      showMsgDialog(context, "Error", "New PIN must be 6 digits");
-      return;
-    }
-
-    if (_confirmPin == "") {
-      showMsgDialog(context, "Error", "Invalid confirm PIN");
-      return;
-    }
-
-    if (_confirmPin.length < 6) {
-      showMsgDialog(context, "Error", "Confirm PIN must be 6 digits");
-      return;
-    }
-
-    if (_confirmPin != _newPin) {
-      showMsgDialog(context, "Error", "Those pins didn’t match. Try again.");
-      return;
-    }
 
     setState(() {
       _isLoading = true;

lib/pages/widgets/input_date.dart

@@ -84,6 +84,7 @@ class InputDate extends StatelessWidget {
             hintStyle: TextStyle(
               height: 1.5,
             ),
+            errorStyle: const TextStyle(color: dangerColor, fontSize: 12),
             labelText: labelTextKey == null
                 ? null
                 : AppTranslations.of(context)!.text(labelTextKey!),
@@ -108,6 +109,22 @@ class InputDate extends StatelessWidget {
                   )
                 : UnderlineInputBorder(
                     borderSide: BorderSide(color: primaryColor, width: 1.0)),
+            errorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
+            focusedErrorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
           ),
           validator: validator),
     );

lib/pages/widgets/input_text.dart

@@ -57,6 +57,7 @@ class InputText extends StatelessWidget {
             constraints: constraints,
             contentPadding: contentPadding,
             // hintText: '',
+            errorStyle: const TextStyle(color: dangerColor, fontSize: 12),
             hintStyle: TextStyle(
               height: 1.5,
             ),
@@ -96,6 +97,22 @@ class InputText extends StatelessWidget {
                 : UnderlineInputBorder(
                     borderSide: BorderSide(
                         color: borderColor ?? primaryColor, width: 1.0)),
+            errorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
+            focusedErrorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
           ),
           validator: validator),
     );