Add new mih text form field to Mzansi Profile

Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart

@@ -3,13 +3,14 @@ import 'dart:convert';
 import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_file_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_user_apis.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_file_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_button.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_form.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_alert.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_circle_avatar.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_success_message.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -39,6 +40,7 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
   late bool businessUser;
   late String oldProPicName;
   late String env;
+  final _formKey = GlobalKey<FormState>();
 
   void notUniqueAlert() {
     showDialog(
@@ -65,10 +67,9 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
 
   Future<void> submitForm() async {
     // print("============\nsubmiit form\n=================");
-    if (isFieldsFilled()) {
     if (widget.arguments.signedInUser.username != usernameController.text) {
-        bool isUsernameUnique = await MihUserApis.isUsernameUnique(
+      bool isUsernameUnique =
-            usernameController.text, context);
+          await MihUserApis.isUsernameUnique(usernameController.text, context);
       print("isUsernameUnique: $isUsernameUnique");
       if (isUsernameUnique == false) {
         notUniqueAlert();
@@ -79,24 +80,6 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
       await uploadSelectedFile(proPic);
     }
     await updateUserApiCall();
-    } else {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    }
-  }
-
-  bool isFieldsFilled() {
-    if (fnameController.text.isEmpty ||
-        lnameController.text.isEmpty ||
-        usernameController.text.isEmpty) {
-      return false;
-    } else {
-      return true;
-    }
   }
 
   bool isBusinessUser() {
@@ -263,14 +246,18 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
     return MihSingleChildScroll(
       child: Column(
         children: [
-          //displayProPic(),
+          MihForm(
-          MihCircleAvatar(
+            formKey: _formKey,
+            formFields: [
+              Center(
+                child: MihCircleAvatar(
                   imageFile: propicPreview,
                   width: 150,
                   editable: true,
                   fileNameController: proPicController,
                   userSelectedfile: proPic,
-            frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  frameColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   backgroundColor:
                       MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   onChange: (selectedImage) {
@@ -279,75 +266,63 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                     });
                   },
                 ),
-          // MIHProfilePicture(
+              ),
-          //   profilePictureFile: widget.arguments.propicFile,
-          //   proPicController: proPicController,
-          //   proPic: proPic,
-          //   width: 155,
-          //   radius: 70,
-          //   drawerMode: false,
-          //   editable: true,
-          //   frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          //   onChange: (newProPic) {
-          //     setState(() {
-          //       proPic = newProPic;
-          //     });
-          //   },
-          // ),
               const SizedBox(height: 25.0),
               Visibility(
-            visible: false,
+                visible: true,
-            child: MIHFileField(
+                child: MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: proPicController,
-              hintText: "Profile Picture",
+                  multiLineInput: false,
-              editable: false,
+                  requiredText: true,
-              required: false,
+                  readOnly: true,
-              onPressed: () async {
+                  hintText: "Selected File Name",
-                FilePickerResult? result = await FilePicker.platform.pickFiles(
+                ),
-                  type: FileType.custom,
+              ),
-                  allowedExtensions: ['jpg', 'png'],
+              const SizedBox(height: 10.0),
-                  withData: true,
+              MihTextFormField(
-                );
+                fillColor:
-                if (result == null) return;
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                final selectedFile = result.files.first;
+                inputColor:
-                setState(() {
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                  proPic = selectedFile;
+                controller: usernameController,
-                  propicPreview = MemoryImage(proPic!.bytes!);
+                multiLineInput: false,
-                });
+                requiredText: true,
-
+                hintText: "Username",
-                setState(() {
+                validator: (value) {
-                  proPicController.text = selectedFile.name;
+                  return MihValidationServices().validateUsername(value);
-                });
                 },
               ),
-          ),
-          // const SizedBox(height: 10.0),
-          // MIHTextField(
-          //   controller: proPicController,
-          //   hintText: "Pro Pic",
-          //   editable: true,
-          //   required: true,
-          // ),
               const SizedBox(height: 10.0),
-          MIHTextField(
+              MihTextFormField(
-            controller: usernameController,
+                fillColor:
-            hintText: "Username",
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            editable: true,
+                inputColor:
-            required: true,
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
                 controller: fnameController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "First Name",
-            editable: true,
+                validator: (value) {
-            required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10.0),
-          MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: lnameController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "Last Name",
-            editable: true,
+                validator: (value) {
-            required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10.0),
               Row(
@@ -375,9 +350,13 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                 ],
               ),
               const SizedBox(height: 30.0),
-          MihButton(
+              Center(
+                child: MihButton(
                   onPressed: () {
+                    //Add validation here
+                    if (_formKey.currentState!.validate()) {
                       submitForm();
+                    }
                   },
                   buttonColor:
                       MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -385,12 +364,16 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                   child: Text(
                     "Update",
                     style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
                 ),
+              ),
+            ],
+          ),
         ],
       ),
     );