fix: select option cell pannel refresh

frontend/app_flowy/lib/workspace/application/grid/field/type_option/edit_select_option_bloc.dart

@@ -4,11 +4,11 @@ import 'package:freezed_annotation/freezed_annotation.dart';
 import 'dart:async';
 import 'package:protobuf/protobuf.dart';
 import 'package:dartz/dartz.dart';
-part 'cell_option_pannel_bloc.freezed.dart';
+part 'edit_select_option_bloc.freezed.dart';
 
-class CellOptionPannelBloc extends Bloc<CellOptionPannelEvent, CellOptionPannelState> {
+class EditSelectOptionBloc extends Bloc<EditSelectOptionEvent, EditSelectOptionState> {
-  CellOptionPannelBloc({required SelectOption option}) : super(CellOptionPannelState.initial(option)) {
+  EditSelectOptionBloc({required SelectOption option}) : super(EditSelectOptionState.initial(option)) {
-    on<CellOptionPannelEvent>(
+    on<EditSelectOptionEvent>(
       (event, emit) async {
         event.map(
           updateName: (_UpdateName value) {
@@ -46,20 +46,20 @@ class CellOptionPannelBloc extends Bloc<CellOptionPannelEvent, CellOptionPannelS
 }
 
 @freezed
-class CellOptionPannelEvent with _$CellOptionPannelEvent {
+class EditSelectOptionEvent with _$EditSelectOptionEvent {
-  const factory CellOptionPannelEvent.updateName(String name) = _UpdateName;
+  const factory EditSelectOptionEvent.updateName(String name) = _UpdateName;
-  const factory CellOptionPannelEvent.updateColor(SelectOptionColor color) = _UpdateColor;
+  const factory EditSelectOptionEvent.updateColor(SelectOptionColor color) = _UpdateColor;
-  const factory CellOptionPannelEvent.delete() = _Delete;
+  const factory EditSelectOptionEvent.delete() = _Delete;
 }
 
 @freezed
-class CellOptionPannelState with _$CellOptionPannelState {
+class EditSelectOptionState with _$EditSelectOptionState {
-  const factory CellOptionPannelState({
+  const factory EditSelectOptionState({
     required SelectOption option,
     required Option<bool> deleted,
-  }) = _EditOptionState;
+  }) = _EditSelectOptionState;
 
-  factory CellOptionPannelState.initial(SelectOption option) => CellOptionPannelState(
+  factory EditSelectOptionState.initial(SelectOption option) => EditSelectOptionState(
         option: option,
         deleted: none(),
       );

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart

@@ -37,7 +37,7 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
           return SizedBox.expand(
             child: InkWell(
               onTap: () {
-                SelectOptionEditor.show(context, state.cellData, state.options, state.selectedOptions);
+                SelectOptionCellEditor.show(context, state.cellData, state.options, state.selectedOptions);
               },
               child: Row(children: children),
             ),
@@ -86,7 +86,7 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
           return SizedBox.expand(
             child: InkWell(
               onTap: () {
-                SelectOptionEditor.show(context, state.cellData, state.options, state.selectedOptions);
+                SelectOptionCellEditor.show(context, state.cellData, state.options, state.selectedOptions);
               },
               child: Row(children: children),
             ),

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart

@@ -3,7 +3,7 @@ import 'dart:collection';
 import 'package:app_flowy/workspace/application/grid/cell_bloc/selection_editor_bloc.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
-import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/cell_option_pannel.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/widget.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
@@ -18,19 +18,18 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-import 'package:styled_widget/styled_widget.dart';
 import 'package:textfield_tags/textfield_tags.dart';
 
 import 'extension.dart';
 
 const double _editorPannelWidth = 300;
 
-class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
+class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
   final CellData cellData;
   final List<SelectOption> options;
   final List<SelectOption> selectedOptions;
 
-  const SelectOptionEditor({
+  const SelectOptionCellEditor({
     required this.cellData,
     required this.options,
     required this.selectedOptions,
@@ -38,7 +37,7 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
   }) : super(key: key);
 
   static String identifier() {
-    return (SelectOptionEditor).toString();
+    return (SelectOptionCellEditor).toString();
   }
 
   @override
@@ -73,8 +72,8 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
     List<SelectOption> options,
     List<SelectOption> selectedOptions,
   ) {
-    SelectOptionEditor.hide(context);
+    SelectOptionCellEditor.remove(context);
-    final editor = SelectOptionEditor(
+    final editor = SelectOptionCellEditor(
       cellData: cellData,
       options: options,
       selectedOptions: selectedOptions,
@@ -86,14 +85,14 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
         child: SizedBox(width: _editorPannelWidth, child: editor),
         constraints: BoxConstraints.loose(const Size(_editorPannelWidth, 300)),
       ),
-      identifier: SelectOptionEditor.identifier(),
+      identifier: SelectOptionCellEditor.identifier(),
       anchorContext: context,
       anchorDirection: AnchorDirection.bottomWithCenterAligned,
       delegate: editor,
     );
   }
 
-  static void hide(BuildContext context) {
+  static void remove(BuildContext context) {
     FlowyOverlay.of(context).remove(identifier());
   }
 
@@ -208,7 +207,7 @@ class _SelectOptionCell extends StatelessWidget {
             if (onHover) {
               children.add(FlowyIconButton(
                 width: 30,
-                onPressed: () => _showEditOptionPannel(context),
+                onPressed: () => _showEditPannel(context),
                 iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
                 icon: svgWidget("editor/details", color: theme.iconColor),
               ));
@@ -224,8 +223,8 @@ class _SelectOptionCell extends StatelessWidget {
     );
   }
 
-  void _showEditOptionPannel(BuildContext context) {
+  void _showEditPannel(BuildContext context) {
-    final pannel = CellSelectOptionPannel(
+    final pannel = EditSelectOptionPannel(
       option: option,
       onDeleted: () {
         context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.deleteOption(option));
@@ -233,9 +232,9 @@ class _SelectOptionCell extends StatelessWidget {
       onUpdated: (updatedOption) {
         context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.updateOption(updatedOption));
       },
-      // key: ValueKey(option.id),
+      key: ValueKey(option.id), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
     );
-    final overlayIdentifier = pannel.toString();
+    final overlayIdentifier = (EditSelectOptionPannel).toString();
 
     FlowyOverlay.of(context).remove(overlayIdentifier);
     FlowyOverlay.of(context).insertWithAnchor(

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell_action_sheet.dart

@@ -51,8 +51,8 @@ class GridFieldCellActionSheet extends StatelessWidget with FlowyOverlayDelegate
     );
   }
 
-  String identifier() {
+  static String identifier() {
-    return toString();
+    return (GridFieldCellActionSheet).toString();
   }
 
   @override

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_editor.dart

@@ -41,8 +41,8 @@ class FieldEditor extends FlowyOverlayDelegate {
     );
   }
 
-  String identifier() {
+  static String identifier() {
-    return toString();
+    return (FieldEditor).toString();
   }
 
   @override

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart

@@ -114,7 +114,7 @@ class DateFormatList extends StatelessWidget {
           dateFormat: format,
           onSelected: (format) {
             onSelected(format);
-            FlowyOverlay.of(context).remove(identifier());
+            FlowyOverlay.of(context).remove(DateFormatList.identifier());
           },
           isSelected: selectedFormat == format);
     }).toList();
@@ -135,8 +135,8 @@ class DateFormatList extends StatelessWidget {
     );
   }
 
-  String identifier() {
+  static String identifier() {
-    return toString();
+    return (DateFormatList).toString();
   }
 }
 
@@ -205,7 +205,7 @@ class TimeFormatList extends StatelessWidget {
           timeFormat: format,
           onSelected: (format) {
             onSelected(format);
-            FlowyOverlay.of(context).remove(identifier());
+            FlowyOverlay.of(context).remove(TimeFormatList.identifier());
           });
     }).toList();
 
@@ -225,8 +225,8 @@ class TimeFormatList extends StatelessWidget {
     );
   }
 
-  String identifier() {
+  static String identifier() {
-    return toString();
+    return (TimeFormatList).toString();
   }
 }
 

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart

@@ -1,4 +1,4 @@
-import 'package:app_flowy/workspace/application/grid/field/type_option/cell_option_pannel_bloc.dart';
+import 'package:app_flowy/workspace/application/grid/field/type_option/edit_select_option_bloc.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/widget.dart';
@@ -14,11 +14,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 
-class CellSelectOptionPannel extends StatelessWidget {
+class EditSelectOptionPannel extends StatelessWidget {
   final SelectOption option;
   final VoidCallback onDeleted;
   final Function(SelectOption) onUpdated;
-  const CellSelectOptionPannel({
+  const EditSelectOptionPannel({
     required this.option,
     required this.onDeleted,
     required this.onUpdated,
@@ -28,23 +28,23 @@ class CellSelectOptionPannel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => CellOptionPannelBloc(option: option),
+      create: (context) => EditSelectOptionBloc(option: option),
       child: MultiBlocListener(
         listeners: [
-          BlocListener<CellOptionPannelBloc, CellOptionPannelState>(
+          BlocListener<EditSelectOptionBloc, EditSelectOptionState>(
             listenWhen: (p, c) => p.deleted != c.deleted,
             listener: (context, state) {
               state.deleted.fold(() => null, (_) => onDeleted());
             },
           ),
-          BlocListener<CellOptionPannelBloc, CellOptionPannelState>(
+          BlocListener<EditSelectOptionBloc, EditSelectOptionState>(
             listenWhen: (p, c) => p.option != c.option,
             listener: (context, state) {
               onUpdated(state.option);
             },
           ),
         ],
-        child: BlocBuilder<CellOptionPannelBloc, CellOptionPannelState>(
+        child: BlocBuilder<EditSelectOptionBloc, EditSelectOptionState>(
           builder: (context, state) {
             List<Widget> slivers = [
               SliverToBoxAdapter(child: _OptionNameTextField(state.option.name)),
@@ -82,7 +82,7 @@ class _DeleteTag extends StatelessWidget {
         hoverColor: theme.hover,
         leftIcon: svgWidget("grid/delete", color: theme.iconColor),
         onTap: () {
-          context.read<CellOptionPannelBloc>().add(const CellOptionPannelEvent.delete());
+          context.read<EditSelectOptionBloc>().add(const EditSelectOptionEvent.delete());
         },
       ),
     );
@@ -100,7 +100,7 @@ class _OptionNameTextField extends StatelessWidget {
       onCanceled: () {},
       onDone: (optionName) {
         if (name != optionName) {
-          context.read<CellOptionPannelBloc>().add(CellOptionPannelEvent.updateName(optionName));
+          context.read<EditSelectOptionBloc>().add(EditSelectOptionEvent.updateName(optionName));
         }
       },
     );
@@ -180,7 +180,7 @@ class _SelectOptionColorCell extends StatelessWidget {
         leftIcon: colorIcon,
         rightIcon: checkmark,
         onTap: () {
-          context.read<CellOptionPannelBloc>().add(CellOptionPannelEvent.updateColor(color));
+          context.read<EditSelectOptionBloc>().add(EditSelectOptionEvent.updateColor(color));
         },
       ),
     );

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/field_option_pannel.dart

@@ -12,7 +12,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 
-import 'cell_option_pannel.dart';
+import 'edit_option_pannel.dart';
 import 'widget.dart';
 
 class FieldSelectOptionPannel extends StatelessWidget {
@@ -155,7 +155,7 @@ class _OptionList extends StatelessWidget {
     return _OptionCell(
       option: option,
       onEdited: (option) {
-        final pannel = CellSelectOptionPannel(
+        final pannel = EditSelectOptionPannel(
           option: option,
           onDeleted: () {
             delegate.hideOverlay(context);
@@ -165,6 +165,7 @@ class _OptionList extends StatelessWidget {
             delegate.hideOverlay(context);
             context.read<FieldOptionPannelBloc>().add(FieldOptionPannelEvent.updateOption(updatedOption));
           },
+          key: ValueKey(option.id),
         );
         delegate.showOverlay(context, pannel);
       },

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/number.dart

@@ -81,7 +81,7 @@ class NumberFormatList extends StatelessWidget {
           format: format,
           onSelected: (format) {
             onSelected(format);
-            FlowyOverlay.of(context).remove(identifier());
+            FlowyOverlay.of(context).remove(NumberFormatList.identifier());
           });
     }).toList();
 
@@ -101,8 +101,8 @@ class NumberFormatList extends StatelessWidget {
     );
   }
 
-  String identifier() {
+  static String identifier() {
-    return toString();
+    return (NumberFormatList).toString();
   }
 }