From d7f48e951d3b0b052b74412903bb5ba315a1c039 Mon Sep 17 00:00:00 2001 From: cevheri Date: Mon, 30 Dec 2024 01:13:13 +0300 Subject: [PATCH] refactor: add responsive form and submit button on user-editor-screen --- .../components/responsive_form_widget.dart | 7 +- .../user/editor/user_editor_screen.dart | 96 +++++++++---------- 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/lib/presentation/screen/components/responsive_form_widget.dart b/lib/presentation/screen/components/responsive_form_widget.dart index 30a6070..017f36c 100644 --- a/lib/presentation/screen/components/responsive_form_widget.dart +++ b/lib/presentation/screen/components/responsive_form_widget.dart @@ -9,7 +9,8 @@ class ResponsiveFormBuilder extends StatelessWidget { final CrossAxisAlignment crossAxisAlignment; final bool autovalidateMode; final VoidCallback? onChanged; - final bool shrinkWrap; + final bool shrinkWrap; + final Map initialValue; const ResponsiveFormBuilder({ super.key, @@ -19,13 +20,15 @@ class ResponsiveFormBuilder extends StatelessWidget { this.crossAxisAlignment = CrossAxisAlignment.start, this.autovalidateMode = false, this.onChanged, - this.shrinkWrap = false, + this.shrinkWrap = false, + this.initialValue = const {}, }); @override Widget build(BuildContext context) { return FormBuilder( key: formKey, + initialValue: initialValue, autovalidateMode: autovalidateMode ? AutovalidateMode.onUserInteraction : AutovalidateMode.disabled, onChanged: onChanged, child: SingleChildScrollView( diff --git a/lib/presentation/screen/user/editor/user_editor_screen.dart b/lib/presentation/screen/user/editor/user_editor_screen.dart index a2020e4..5361f4e 100644 --- a/lib/presentation/screen/user/editor/user_editor_screen.dart +++ b/lib/presentation/screen/user/editor/user_editor_screen.dart @@ -4,6 +4,8 @@ import 'package:flutter_bloc_advance/data/models/user.dart'; import 'package:flutter_bloc_advance/generated/l10n.dart'; import 'package:flutter_bloc_advance/presentation/screen/components/authority_lov_widget.dart'; import 'package:flutter_bloc_advance/presentation/screen/components/editor_form_mode.dart'; +import 'package:flutter_bloc_advance/presentation/screen/components/responsive_form_widget.dart'; +import 'package:flutter_bloc_advance/presentation/screen/components/submit_button_widget.dart'; import 'package:flutter_bloc_advance/presentation/screen/components/user_form_fields.dart'; import 'package:flutter_bloc_advance/presentation/screen/user/bloc/user.dart'; import 'package:flutter_bloc_advance/routes/app_routes_constants.dart'; @@ -77,6 +79,7 @@ class UserEditorWidget extends StatelessWidget { return AppBar( title: Text(_getTitle(context)), leading: IconButton( + key: const Key('userEditorAppBarBackButtonKey'), icon: const Icon(Icons.arrow_back), onPressed: () async => _handlePopScope(false, null, context), ), @@ -146,58 +149,59 @@ class UserEditorWidget extends StatelessWidget { 'authorities': state.data?.authorities?.first ?? state.data?.authorities?.firstOrNull, }; debugPrint("checkpoint initial value: $initialValue"); - return SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(16.0), - child: Center( - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 700), - child: FormBuilder( - key: _formKey, - initialValue: initialValue, - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - ..._buildFormFields(context, state), - const SizedBox(height: 20), - if (mode == EditorFormMode.view) _backButtonField(context), - if (mode != EditorFormMode.view) _submitButtonField(context, state), - ], - ), - ), - ), - ), - ), + // return SingleChildScrollView( + // child: Padding( + // padding: const EdgeInsets.all(16.0), + // child: Center( + // child: ConstrainedBox( + // constraints: const BoxConstraints(maxWidth: 700), + // child: FormBuilder( + // key: _formKey, + // initialValue: initialValue, + // child: Column( + // crossAxisAlignment: CrossAxisAlignment.stretch, + // children: [ + // ..._buildFormFields(context, state), + // const SizedBox(height: 20), + // if (mode == EditorFormMode.view) _backButtonField(context), + // if (mode != EditorFormMode.view) _submitButtonField(context, state), + // ], + // ), + // ), + // ), + // ), + // ), + // ); + return ResponsiveFormBuilder( + formKey: _formKey, + initialValue: initialValue, + children: [ + ..._buildFormFields(context, state), + if (mode == EditorFormMode.view) _backButtonField(context), + if (mode != EditorFormMode.view) _submitButtonField(context, state), + ], ); } - _backButtonField(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 48, - child: ElevatedButton( + Widget _backButtonField(BuildContext context) { + return ResponsiveSubmitButton( + key: const Key('userEditorFormBackButtonKey'), + buttonText: S.of(context).back, onPressed: () { - context.go('/user'); + context.go(ApplicationRoutesConstants.userList); context.read().add(const UserViewCompleteEvent()); - }, - child: Text(S.of(context).back), - ), - ); + }); } - _submitButtonField(BuildContext context, UserState state) { - return SizedBox( - width: double.infinity, - height: 48, - child: ElevatedButton( - key: const Key('userEditorSubmitButtonKey'), - onPressed: () => _onSubmit(context), - child: Text(S.of(context).save), - ), + Widget _submitButtonField(BuildContext context, UserState state) { + return ResponsiveSubmitButton( + key: const Key('userEditorSubmitButtonKey'), + onPressed: () => state.status == UserStatus.loading ? null : _onSubmit(context, state), + isLoading: state.status == UserStatus.loading, ); } - void _onSubmit(BuildContext context) { + void _onSubmit(BuildContext context, UserState state) { if (_formKey.currentState?.saveAndValidate() ?? false) { final formData = _formKey.currentState!.value; final id = context.read().state.data?.id; @@ -220,24 +224,18 @@ class UserEditorWidget extends StatelessWidget { } } - _buildFormFields(BuildContext context, UserState state) { + List _buildFormFields(BuildContext context, UserState state) { return [ UserFormFields.usernameField(context, state.data?.login, enabled: mode == EditorFormMode.create), - const SizedBox(height: 16), UserFormFields.firstNameField(context, state.data?.firstName, enabled: mode != EditorFormMode.view), - const SizedBox(height: 16), UserFormFields.lastNameField(context, state.data?.lastName, enabled: mode != EditorFormMode.view), - const SizedBox(height: 16), UserFormFields.emailField(context, state.data?.email, enabled: mode != EditorFormMode.view), - const SizedBox(height: 16), UserFormFields.activatedField(context, state.data?.activated, enabled: mode != EditorFormMode.view), - const SizedBox(height: 16), //TODO when mode == EditorFormMode.view, select the user authorities // if (state.data?.authorities?.isNotEmpty ?? false) ...[ // const SizedBox(height: 16), // ], AuthorityDropdown(enabled: mode != EditorFormMode.view), - const SizedBox(height: 16), ]; }