chore: filter for select options

Author: appflowy

frontend/app_flowy/lib/workspace/application/grid/cell/selection_editor_bloc.dart

@@ -25,7 +25,8 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
           },
           didReceiveOptions: (_DidReceiveOptions value) {
             emit(state.copyWith(
-              options: value.options,
+              allOptions: value.options,
+              options: _makeOptions(state.filter, value.options),
               selectedOptions: value.selectedOptions,
             ));
           },
@@ -41,6 +42,9 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
           selectOption: (_SelectOption value) {
             _onSelectOption(value.optionId);
           },
+          filterOption: (_SelectOptionFilter value) {
+            _filterOption(value.optionName, emit);
+          },
         );
       },
     );
@@ -86,6 +90,16 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
     }
   }
 
+  void _filterOption(String optionName, Emitter<SelectOptionEditorState> emit) {
+    emit(state.copyWith(filter: optionName, options: _makeOptions(optionName, state.allOptions)));
+  }
+
+  List<SelectOption> _makeOptions(String filter, List<SelectOption> allOptions) {
+    final List<SelectOption> options = List.from(allOptions);
+    options.retainWhere((option) => option.name.contains(filter));
+    return options;
+  }
+
   void _startListening() {
     _onCellChangedFn = cellContext.startListening(
       onCellChanged: ((selectOptionContext) {
@@ -109,20 +123,25 @@ class SelectOptionEditorEvent with _$SelectOptionEditorEvent {
   const factory SelectOptionEditorEvent.selectOption(String optionId) = _SelectOption;
   const factory SelectOptionEditorEvent.updateOption(SelectOption option) = _UpdateOption;
   const factory SelectOptionEditorEvent.deleteOption(SelectOption option) = _DeleteOption;
+  const factory SelectOptionEditorEvent.filterOption(String optionName) = _SelectOptionFilter;
 }
 
 @freezed
 class SelectOptionEditorState with _$SelectOptionEditorState {
   const factory SelectOptionEditorState({
     required List<SelectOption> options,
+    required List<SelectOption> allOptions,
     required List<SelectOption> selectedOptions,
+    required String filter,
   }) = _SelectOptionEditorState;
 
   factory SelectOptionEditorState.initial(GridSelectOptionCellContext context) {
     final data = context.getCellData();
     return SelectOptionEditorState(
       options: data?.options ?? [],
+      allOptions: data?.options ?? [],
       selectedOptions: data?.selectOptions ?? [],
+      filter: "",
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart

@@ -9,8 +9,8 @@ class GridSize {
   static double get leadingHeaderPadding => 50 * scale;
   static double get trailHeaderPadding => 140 * scale;
   static double get headerContainerPadding => 0 * scale;
-  static double get cellHPadding => 8 * scale;
-  static double get cellVPadding => 8 * scale;
+  static double get cellHPadding => 10 * scale;
+  static double get cellVPadding => 10 * scale;
   static double get typeOptionItemHeight => 32 * scale;
   static double get typeOptionSeparatorHeight => 6 * scale;
 

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

@@ -144,6 +144,9 @@ class _TextField extends StatelessWidget {
             selectedOptionMap: optionMap,
             distanceToText: _editorPannelWidth * 0.7,
             tagController: _tagController,
+            newText: (text) {
+              context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.filterOption(text));
+            },
             onNewTag: (tagName) {
               context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.newOption(tagName));
             },

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

@@ -21,13 +21,15 @@ class SelectOptionTextField extends StatelessWidget {
   final double distanceToText;
 
   final Function(String) onNewTag;
+  final Function(String) newText;
 
   SelectOptionTextField({
     required this.options,
     required this.selectedOptionMap,
     required this.distanceToText,
     required this.tagController,
     required this.onNewTag,
+    required this.newText,
     TextEditingController? controller,
     FocusNode? focusNode,
     Key? key,
@@ -51,7 +53,12 @@ class SelectOptionTextField extends StatelessWidget {
             autofocus: true,
             controller: editController,
             focusNode: focusNode,
-            onChanged: onChanged,
+            onChanged: (text) {
+              if (onChanged != null) {
+                onChanged(text);
+              }
+              newText(text);
+            },
             onSubmitted: (text) {
               if (onSubmitted != null) {
                 onSubmitted(text);