Skip to content

Commit

Permalink
refactor: add responsive form and submit button on user-editor-screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@cevheri
cevheri committed Dec 29, 2024
1 parent e26fbf3 commit d7f48e9
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 51 deletions.
7 changes: 5 additions & 2 deletions lib/presentation/screen/components/responsive_form_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<String, dynamic> initialValue;

const ResponsiveFormBuilder({
super.key,
Expand All @@ -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 <String, dynamic>{},
});

@override
Widget build(BuildContext context) {
return FormBuilder(
key: formKey,
initialValue: initialValue,
autovalidateMode: autovalidateMode ? AutovalidateMode.onUserInteraction : AutovalidateMode.disabled,
onChanged: onChanged,
child: SingleChildScrollView(
Expand Down
96 changes: 47 additions & 49 deletions lib/presentation/screen/user/editor/user_editor_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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),
),
Expand Down Expand Up @@ -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<UserBloc>().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<UserBloc>().state.data?.id;
Expand All @@ -220,24 +224,18 @@ class UserEditorWidget extends StatelessWidget {
}
}

_buildFormFields(BuildContext context, UserState state) {
List<Widget> _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),
];
}

Expand Down

0 comments on commit d7f48e9

Please sign in to comment.