fix: create option with different color

Author: appflowy

frontend/app_flowy/lib/startup/deps_resolver.dart

@@ -17,6 +17,7 @@ import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
 import 'package:app_flowy/workspace/presentation/home/menu/menu.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder-data-model/app.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder-data-model/view.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show EditFieldContext;
 import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/number_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-user-data-model/user_profile.pb.dart';
@@ -201,8 +202,8 @@ void _resolveGridDeps(GetIt getIt) {
     ),
   );
 
-  getIt.registerFactoryParam<FieldSwitcherBloc, SwitchFieldContext, void>(
-    (context, _) => FieldSwitcherBloc(context),
+  getIt.registerFactoryParam<FieldEditorPannelBloc, EditFieldContext, void>(
+    (context, _) => FieldEditorPannelBloc(context),
   );
 
   getIt.registerFactoryParam<DateTypeOptionBloc, DateTypeOption, void>(

frontend/app_flowy/lib/workspace/application/grid/field/field_editor_bloc.dart

@@ -6,6 +6,7 @@ import 'package:freezed_annotation/freezed_annotation.dart';
 import 'dart:async';
 import 'field_service.dart';
 import 'package:dartz/dartz.dart';
+import 'package:protobuf/protobuf.dart';
 
 part 'field_editor_bloc.freezed.dart';
 
@@ -25,10 +26,13 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
             await _getEditFieldContext(emit);
           },
           updateName: (_UpdateName value) {
-            emit(state.copyWith(fieldName: value.name));
+            final newContext = _updateEditContext(name: value.name);
+            emit(state.copyWith(editFieldContext: newContext));
           },
-          switchField: (_SwitchField value) {
-            emit(state.copyWith(field: Some(value.field), typeOptionData: value.typeOptionData));
+          updateField: (_UpdateField value) {
+            final newContext = _updateEditContext(field: value.field, typeOptionData: value.typeOptionData);
+
+            emit(state.copyWith(editFieldContext: newContext));
           },
           done: (_Done value) async {
             await _saveField(emit);
@@ -43,14 +47,49 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
     return super.close();
   }
 
+  Option<EditFieldContext> _updateEditContext({
+    String? name,
+    Field? field,
+    List<int>? typeOptionData,
+  }) {
+    return state.editFieldContext.fold(
+      () => none(),
+      (context) {
+        context.freeze();
+        final newContext = context.rebuild((newContext) {
+          newContext.gridField.rebuild((newField) {
+            if (name != null) {
+              newField.name = name;
+            }
+
+            newContext.gridField = newField;
+          });
+
+          if (field != null) {
+            newContext.gridField = field;
+          }
+
+          if (typeOptionData != null) {
+            newContext.typeOptionData = typeOptionData;
+          }
+        });
+        service.insertField(
+          field: newContext.gridField,
+          typeOptionData: newContext.typeOptionData,
+        );
+
+        return Some(newContext);
+      },
+    );
+  }
+
   Future<void> _saveField(Emitter<FieldEditorState> emit) async {
-    await state.field.fold(
+    await state.editFieldContext.fold(
       () async => null,
-      (field) async {
-        field.name = state.fieldName;
+      (context) async {
         final result = await service.insertField(
-          field: field,
-          typeOptionData: state.typeOptionData,
+          field: context.gridField,
+          typeOptionData: context.typeOptionData,
         );
         result.fold((l) => null, (r) => null);
       },
@@ -60,11 +99,9 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
   Future<void> _getEditFieldContext(Emitter<FieldEditorState> emit) async {
     final result = await _loader.load();
     result.fold(
-      (editContext) {
+      (context) {
         emit(state.copyWith(
-          field: Some(editContext.gridField),
-          typeOptionData: editContext.typeOptionData,
-          fieldName: editContext.gridField.name,
+          editFieldContext: Some(context),
         ));
       },
       (err) => Log.error(err),
@@ -76,25 +113,21 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
 class FieldEditorEvent with _$FieldEditorEvent {
   const factory FieldEditorEvent.initial() = _InitialField;
   const factory FieldEditorEvent.updateName(String name) = _UpdateName;
-  const factory FieldEditorEvent.switchField(Field field, Uint8List typeOptionData) = _SwitchField;
+  const factory FieldEditorEvent.updateField(Field field, Uint8List typeOptionData) = _UpdateField;
   const factory FieldEditorEvent.done() = _Done;
 }
 
 @freezed
 class FieldEditorState with _$FieldEditorState {
   const factory FieldEditorState({
-    required String fieldName,
     required String gridId,
     required String errorText,
-    required Option<Field> field,
-    required List<int> typeOptionData,
+    required Option<EditFieldContext> editFieldContext,
   }) = _FieldEditorState;
 
   factory FieldEditorState.initial(String gridId) => FieldEditorState(
         gridId: gridId,
-        fieldName: '',
-        field: none(),
+        editFieldContext: none(),
         errorText: '',
-        typeOptionData: List<int>.empty(),
       );
 }

frontend/app_flowy/lib/workspace/application/grid/field/field_editor_pannel_bloc.dart

@@ -0,0 +1,53 @@
+import 'dart:typed_data';
+import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'dart:async';
+
+part 'field_editor_pannel_bloc.freezed.dart';
+
+class FieldEditorPannelBloc extends Bloc<FieldEditorPannelEvent, FieldEditorPannelState> {
+  FieldEditorPannelBloc(EditFieldContext editContext) : super(FieldEditorPannelState.initial(editContext)) {
+    on<FieldEditorPannelEvent>(
+      (event, emit) async {
+        await event.map(
+          toFieldType: (_ToFieldType value) async {
+            emit(state.copyWith(
+              field: value.field,
+              typeOptionData: Uint8List.fromList(value.typeOptionData),
+            ));
+          },
+          didUpdateTypeOptionData: (_DidUpdateTypeOptionData value) {
+            emit(state.copyWith(typeOptionData: value.typeOptionData));
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    return super.close();
+  }
+}
+
+@freezed
+class FieldEditorPannelEvent with _$FieldEditorPannelEvent {
+  const factory FieldEditorPannelEvent.toFieldType(Field field, List<int> typeOptionData) = _ToFieldType;
+  const factory FieldEditorPannelEvent.didUpdateTypeOptionData(Uint8List typeOptionData) = _DidUpdateTypeOptionData;
+}
+
+@freezed
+class FieldEditorPannelState with _$FieldEditorPannelState {
+  const factory FieldEditorPannelState({
+    required String gridId,
+    required Field field,
+    required Uint8List typeOptionData,
+  }) = _FieldEditorPannelState;
+
+  factory FieldEditorPannelState.initial(EditFieldContext context) => FieldEditorPannelState(
+        gridId: context.gridId,
+        field: context.gridField,
+        typeOptionData: Uint8List.fromList(context.typeOptionData),
+      );
+}

frontend/app_flowy/lib/workspace/application/grid/field/field_switch_bloc.dart

@@ -8,7 +8,7 @@ export 'grid_header_bloc.dart';
 export 'field/field_service.dart';
 export 'field/field_action_sheet_bloc.dart';
 export 'field/field_editor_bloc.dart';
-export 'field/field_switch_bloc.dart';
+export 'field/field_editor_pannel_bloc.dart';
 
 // Field Type Option
 export 'field/type_option/date_bloc.dart';

frontend/app_flowy/lib/workspace/application/grid/prelude.dart

@@ -1,18 +1,15 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/field/field_editor_bloc.dart';
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
-import 'package:app_flowy/workspace/application/grid/field/field_switch_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flowy_sdk/log.dart';
-import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show Field;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'field_name_input.dart';
-import 'field_switcher.dart';
+import 'field_editor_pannel.dart';
 
 class FieldEditor extends FlowyOverlayDelegate {
   final String gridId;
@@ -30,7 +27,6 @@ class FieldEditor extends FlowyOverlayDelegate {
     BuildContext context, {
     AnchorDirection anchorDirection = AnchorDirection.bottomWithLeftAligned,
   }) {
-    Log.trace("Show $identifier()");
     FlowyOverlay.of(context).remove(identifier());
     FlowyOverlay.of(context).insertWithAnchor(
       widget: OverlayContainer(
@@ -69,47 +65,48 @@ class _FieldEditorWidget extends StatelessWidget {
       value: editorBloc,
       child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
         builder: (context, state) {
-          return state.field.fold(
+          return state.editFieldContext.fold(
             () => const SizedBox(),
-            (field) => ListView(
+            (editFieldContext) => ListView(
               shrinkWrap: true,
               children: [
                 FlowyText.medium(LocaleKeys.grid_field_editProperty.tr(), fontSize: 12),
                 const VSpace(10),
                 const _FieldNameTextField(),
                 const VSpace(10),
-                _renderSwitchButton(context, field, state),
+                FieldEditorPannel(
+                  editFieldContext: editFieldContext,
+                  onSwitchToField: (fieldId, fieldType) {
+                    return fieldContextLoader.switchToField(fieldId, fieldType);
+                  },
+                  onUpdated: (field, typeOptionData) {
+                    context.read<FieldEditorBloc>().add(FieldEditorEvent.updateField(field, typeOptionData));
+                  },
+                ),
               ],
             ),
           );
         },
       ),
     );
   }
-
-  Widget _renderSwitchButton(BuildContext context, Field field, FieldEditorState state) {
-    return FieldSwitcher(
-      switchContext: SwitchFieldContext(state.gridId, field, state.typeOptionData),
-      onSwitchToField: (fieldId, fieldType) {
-        return fieldContextLoader.switchToField(fieldId, fieldType);
-      },
-      onUpdated: (field, typeOptionData) {
-        context.read<FieldEditorBloc>().add(FieldEditorEvent.switchField(field, typeOptionData));
-      },
-    );
-  }
 }
 
 class _FieldNameTextField extends StatelessWidget {
   const _FieldNameTextField({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<FieldEditorBloc, FieldEditorState>(
-      buildWhen: (previous, current) => previous.fieldName != current.fieldName,
-      builder: (context, state) {
+    return BlocSelector<FieldEditorBloc, FieldEditorState, String>(
+      selector: (state) {
+        return state.editFieldContext.fold(
+          () => "",
+          (editFieldContext) => editFieldContext.gridField.name,
+        );
+      },
+      builder: (context, name) {
         return FieldNameTextField(
-          name: state.fieldName,
+          name: name,
           errorText: context.read<FieldEditorBloc>().state.errorText,
           onNameChanged: (newName) {
             context.read<FieldEditorBloc>().add(FieldEditorEvent.updateName(newName));