feat: field editing bloc refactor and add mobile field editor (#3981)

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart

@@ -4,6 +4,7 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_action_widget.dart';
 import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
 import 'package:appflowy/plugins/database_view/application/row/row_banner_bloc.dart';
 import 'package:appflowy/plugins/database_view/application/row/row_controller.dart';
@@ -24,12 +25,16 @@ class MobileCardDetailScreen extends StatefulWidget {
   const MobileCardDetailScreen({
     super.key,
     required this.rowController,
+    required this.fieldController,
   });
 
   static const routeName = '/MobileCardDetailScreen';
   static const argRowController = 'rowController';
   static const argCellBuilder = 'cellBuilder';
+  static const argFieldController = 'fieldController';
+
   final RowController rowController;
+  final FieldController fieldController;
 
   @override
   State<MobileCardDetailScreen> createState() => _MobileCardDetailScreenState();
@@ -169,6 +174,7 @@ class _MobileCardDetailScreenState extends State<MobileCardDetailScreen> {
               MobileRowPropertyList(
                 cellBuilder: _cellBuilder,
                 viewId: widget.rowController.viewId,
+                fieldController: widget.fieldController,
               ),
               const Divider(),
               const VSpace(16),

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_create_row_field_screen.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -9,15 +10,18 @@ import 'package:go_router/go_router.dart';
 class MobileCreateRowFieldScreen extends StatefulWidget {
   static const routeName = '/MobileCreateRowFieldScreen';
   static const argViewId = 'viewId';
+  static const argFieldController = 'fieldController';
   static const argTypeOption = 'typeOption';
 
   const MobileCreateRowFieldScreen({
+    super.key,
     required this.viewId,
     required this.typeOption,
-    super.key,
+    required this.fieldController,
   });
 
   final String viewId;
+  final FieldController fieldController;
   final TypeOptionPB typeOption;
 
   @override
@@ -53,6 +57,8 @@ class _MobileCreateRowFieldScreenState
           viewId: widget.viewId,
           field: widget.typeOption.field_2,
         ),
+        fieldController: widget.fieldController,
+        field: widget.typeOption.field_2,
       ),
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_create_row_field_button.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/mobile_create_row_field_screen.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -8,9 +9,14 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 class MobileCreateRowFieldButton extends StatelessWidget {
-  const MobileCreateRowFieldButton({super.key, required this.viewId});
+  const MobileCreateRowFieldButton({
+    super.key,
+    required this.viewId,
+    required this.fieldController,
+  });
 
   final String viewId;
+  final FieldController fieldController;
 
   @override
   Widget build(BuildContext context) {
@@ -32,6 +38,7 @@ class MobileCreateRowFieldButton extends StatelessWidget {
               extra: {
                 MobileCreateRowFieldScreen.argViewId: viewId,
                 MobileCreateRowFieldScreen.argTypeOption: typeOption,
+                MobileCreateRowFieldScreen.argFieldController: fieldController,
               },
             );
           },

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_field_name_text_field.dart

@@ -38,7 +38,7 @@ class _MobileFieldNameTextFieldState extends State<MobileFieldNameTextField> {
       onChanged: (newName) {
         context
             .read<FieldEditorBloc>()
-            .add(FieldEditorEvent.updateName(newName));
+            .add(FieldEditorEvent.renameField(newName));
       },
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/mobile_create_row_field_button.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/card_property_edit_screen.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/accessory/cell_accessory.dart';
@@ -23,10 +24,12 @@ class MobileRowPropertyList extends StatelessWidget {
   const MobileRowPropertyList({
     super.key,
     required this.viewId,
+    required this.fieldController,
     required this.cellBuilder,
   });
 
   final String viewId;
+  final FieldController fieldController;
   final GridCellBuilder cellBuilder;
 
   @override
@@ -44,6 +47,7 @@ class MobileRowPropertyList extends StatelessWidget {
           itemBuilder: (context, index) => _PropertyCell(
             key: ValueKey('row_detail_${visibleCells[index].fieldId}'),
             cellContext: visibleCells[index],
+            fieldController: fieldController,
             cellBuilder: cellBuilder,
             index: index,
           ),
@@ -75,6 +79,7 @@ class MobileRowPropertyList extends StatelessWidget {
                 // add new field
                 MobileCreateRowFieldButton(
                   viewId: viewId,
+                  fieldController: fieldController,
                 ),
               ],
             ),
@@ -93,11 +98,13 @@ class _PropertyCell extends StatefulWidget {
   const _PropertyCell({
     super.key,
     required this.cellContext,
+    required this.fieldController,
     required this.cellBuilder,
     required this.index,
   });
 
   final DatabaseCellContext cellContext;
+  final FieldController fieldController;
   final GridCellBuilder cellBuilder;
   final int index;
 
@@ -142,6 +149,7 @@ class _PropertyCellState extends State<_PropertyCell> {
             CardPropertyEditScreen.routeName,
             extra: {
               CardPropertyEditScreen.argCellContext: widget.cellContext,
+              CardPropertyEditScreen.argFieldController: widget.fieldController,
               CardPropertyEditScreen.argRowDetailBloc:
                   context.read<RowDetailBloc>(),
             },

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/card_property_edit_screen.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart';
 import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -14,13 +15,16 @@ class CardPropertyEditScreen extends StatelessWidget {
   const CardPropertyEditScreen({
     super.key,
     required this.cellContext,
+    required this.fieldController,
   });
 
   static const routeName = '/CardPropertyEditScreen';
   static const argCellContext = 'cellContext';
+  static const argFieldController = 'fieldController';
   static const argRowDetailBloc = 'rowDetailBloc';
 
   final DatabaseCellContext cellContext;
+  final FieldController fieldController;
 
   @override
   Widget build(BuildContext context) {
@@ -57,7 +61,8 @@ class CardPropertyEditScreen extends StatelessWidget {
           viewId: cellContext.viewId,
           field: cellContext.fieldInfo.field,
         ),
-        fieldInfo: cellContext.fieldInfo,
+        fieldController: fieldController,
+        field: cellContext.fieldInfo.field,
       ),
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart

@@ -2,12 +2,11 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart';
-import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
-import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entities.pbenum.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
@@ -19,65 +18,63 @@ class MobileFieldEditor extends StatelessWidget {
     super.key,
     required this.viewId,
     required this.typeOptionLoader,
-    this.isGroupingField = false,
-    this.fieldInfo,
+    required this.field,
+    required this.fieldController,
   });
 
   final String viewId;
-  final bool isGroupingField;
+  final FieldController fieldController;
   final FieldTypeOptionLoader typeOptionLoader;
-  final FieldInfo? fieldInfo;
+  final FieldPB field;
 
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) {
         return FieldEditorBloc(
-          // group field is the field to be used to group cards in database view, it can not be deleted
-          isGroupField: isGroupingField,
+          viewId: viewId,
           loader: typeOptionLoader,
-          field: typeOptionLoader.field,
+          field: field,
+          fieldController: fieldController,
         )..add(const FieldEditorEvent.initial());
       },
       child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
         builder: (context, state) {
           // for field type edit option
-          final dataController = context.read<FieldEditorBloc>().dataController;
+          final dataController =
+              context.read<FieldEditorBloc>().typeOptionController;
 
           return Padding(
             padding: const EdgeInsets.all(16),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                // property name
+                // field name
                 // TODO(yijing): improve hint text
                 PropertyTitle(LocaleKeys.settings_user_name.tr()),
                 BlocSelector<FieldEditorBloc, FieldEditorState, String>(
-                  selector: (state) {
-                    return state.name;
-                  },
-                  builder: (context, propertyName) {
+                  selector: (state) => state.field.name,
+                  builder: (context, fieldName) {
                     return MobileFieldNameTextField(
-                      text: propertyName,
+                      text: fieldName,
                     );
                   },
                 ),
                 Row(
                   children: [
-                    PropertyTitle(LocaleKeys.grid_field_visibility.tr()),
-                    const Spacer(),
+                    Expanded(
+                      child:
+                          PropertyTitle(LocaleKeys.grid_field_visibility.tr()),
+                    ),
                     VisibilitySwitch(
-                      isFieldHidden:
-                          fieldInfo?.visibility == FieldVisibility.AlwaysHidden,
+                      isFieldHidden: state.field.visibility ==
+                          FieldVisibility.AlwaysHidden,
                       onChanged: () {
-                        state.field.fold(
-                          () => Log.error('Can not hidden the field'),
-                          (field) => context.read<RowDetailBloc>().add(
-                                RowDetailEvent.toggleFieldVisibility(
-                                  field.id,
-                                ),
+                        context.read<RowDetailBloc>().add(
+                              RowDetailEvent.toggleFieldVisibility(
+                                state.field.id,
                               ),
-                        );
+                            );
                       },
                     ),
                   ],