Feat: support single select option filter (#1494)

* feat: support select option filter

* chore: select option filter ui

* chore: support edit single select filter

* chore: add flutter tests

Co-authored-by: nathan <[email protected]>

Author: appflowy

frontend/app_flowy/assets/translations/en.json

@@ -191,6 +191,18 @@
         "is": "is"
       }
     },
+    "singleSelectOptionFilter": {
+      "is": "Is",
+      "isNot": "Is not",
+      "isEmpty": "Is empty",
+      "isNotEmpty": "Is not empty"
+    },
+    "multiSelectOptionFilter": {
+      "contains": "Contains",
+      "doesNotContain": "Does not contain",
+      "isEmpty": "Is empty",
+      "isNotEmpty": "Is not empty"
+    },
     "field": {
       "hide": "Hide",
       "insertLeft": "Insert Left",

frontend/app_flowy/lib/plugins/grid/application/field/field_controller.dart

@@ -531,7 +531,7 @@ class FieldInfo {
       case FieldType.Checkbox:
       // case FieldType.MultiSelect:
       case FieldType.RichText:
-        // case FieldType.SingleSelect:
+      case FieldType.SingleSelect:
         return true;
       default:
         return false;

frontend/app_flowy/lib/plugins/grid/application/filter/filter_create_bloc.dart

@@ -99,9 +99,10 @@ class GridCreateFilterBloc
           timestamp: timestamp,
         );
       case FieldType.MultiSelect:
-        return _ffiService.insertSingleSelectFilter(
+        return _ffiService.insertSelectOptionFilter(
           fieldId: fieldId,
           condition: SelectOptionCondition.OptionIs,
+          fieldType: FieldType.MultiSelect,
         );
       case FieldType.Number:
         return _ffiService.insertNumberFilter(
@@ -116,9 +117,10 @@ class GridCreateFilterBloc
           content: '',
         );
       case FieldType.SingleSelect:
-        return _ffiService.insertSingleSelectFilter(
+        return _ffiService.insertSelectOptionFilter(
           fieldId: fieldId,
           condition: SelectOptionCondition.OptionIs,
+          fieldType: FieldType.SingleSelect,
         );
       case FieldType.URL:
         return _ffiService.insertURLFilter(

frontend/app_flowy/lib/plugins/grid/application/filter/filter_service.dart

@@ -126,28 +126,11 @@ class FilterFFIService {
     );
   }
 
-  Future<Either<Unit, FlowyError>> insertSingleSelectFilter({
+  Future<Either<Unit, FlowyError>> insertSelectOptionFilter({
     required String fieldId,
-    String? filterId,
+    required FieldType fieldType,
     required SelectOptionCondition condition,
-    List<String> optionIds = const [],
-  }) {
-    final filter = SelectOptionFilterPB()
-      ..condition = condition
-      ..optionIds.addAll(optionIds);
-
-    return insertFilter(
-      fieldId: fieldId,
-      filterId: filterId,
-      fieldType: FieldType.SingleSelect,
-      data: filter.writeToBuffer(),
-    );
-  }
-
-  Future<Either<Unit, FlowyError>> insertMultiSelectFilter({
-    required String fieldId,
     String? filterId,
-    required SelectOptionCondition condition,
     List<String> optionIds = const [],
   }) {
     final filter = SelectOptionFilterPB()
@@ -157,7 +140,7 @@ class FilterFFIService {
     return insertFilter(
       fieldId: fieldId,
       filterId: filterId,
-      fieldType: FieldType.MultiSelect,
+      fieldType: fieldType,
       data: filter.writeToBuffer(),
     );
   }
@@ -168,8 +151,6 @@ class FilterFFIService {
     required FieldType fieldType,
     required List<int> data,
   }) {
-    TextFilterCondition.DoesNotContain.value;
-
     var insertFilterPayload = AlterFilterPayloadPB.create()
       ..fieldId = fieldId
       ..fieldType = fieldType

frontend/app_flowy/lib/plugins/grid/application/filter/select_option_filter_bloc.dart

@@ -0,0 +1,148 @@
+import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/filter/filter_info.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/header/type_option/builder.dart';
+import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/select_option_filter.pbserver.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/util.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'dart:async';
+import 'filter_listener.dart';
+import 'filter_service.dart';
+
+part 'select_option_filter_bloc.freezed.dart';
+
+class SelectOptionFilterEditorBloc
+    extends Bloc<SelectOptionFilterEditorEvent, SelectOptionFilterEditorState> {
+  final FilterInfo filterInfo;
+  final FilterFFIService _ffiService;
+  final FilterListener _listener;
+  final SingleSelectTypeOptionContext typeOptionContext;
+
+  SelectOptionFilterEditorBloc({required this.filterInfo})
+      : _ffiService = FilterFFIService(viewId: filterInfo.viewId),
+        _listener = FilterListener(
+          viewId: filterInfo.viewId,
+          filterId: filterInfo.filter.id,
+        ),
+        typeOptionContext = makeSingleSelectTypeOptionContext(
+          gridId: filterInfo.viewId,
+          fieldPB: filterInfo.field.field,
+        ),
+        super(SelectOptionFilterEditorState.initial(filterInfo)) {
+    on<SelectOptionFilterEditorEvent>(
+      (event, emit) async {
+        event.when(
+          initial: () async {
+            _startListening();
+            _loadOptions();
+          },
+          updateCondition: (SelectOptionCondition condition) {
+            _ffiService.insertSelectOptionFilter(
+              filterId: filterInfo.filter.id,
+              fieldId: filterInfo.field.id,
+              condition: condition,
+              optionIds: state.filter.optionIds,
+              fieldType: state.filterInfo.field.fieldType,
+            );
+          },
+          updateContent: (List<String> optionIds) {
+            _ffiService.insertSelectOptionFilter(
+              filterId: filterInfo.filter.id,
+              fieldId: filterInfo.field.id,
+              condition: state.filter.condition,
+              optionIds: optionIds,
+              fieldType: state.filterInfo.field.fieldType,
+            );
+          },
+          delete: () {
+            _ffiService.deleteFilter(
+              fieldId: filterInfo.field.id,
+              filterId: filterInfo.filter.id,
+              fieldType: filterInfo.field.fieldType,
+            );
+          },
+          didReceiveFilter: (FilterPB filter) {
+            final filterInfo = state.filterInfo.copyWith(filter: filter);
+            final selectOptionFilter = filterInfo.selectOptionFilter()!;
+            emit(state.copyWith(
+              filterInfo: filterInfo,
+              filter: selectOptionFilter,
+            ));
+          },
+          updateFilterDescription: (String desc) {
+            emit(state.copyWith(filterDesc: desc));
+          },
+        );
+      },
+    );
+  }
+
+  void _startListening() {
+    _listener.start(
+      onDeleted: () {
+        if (!isClosed) add(const SelectOptionFilterEditorEvent.delete());
+      },
+      onUpdated: (filter) {
+        if (!isClosed) {
+          add(SelectOptionFilterEditorEvent.didReceiveFilter(filter));
+        }
+      },
+    );
+  }
+
+  void _loadOptions() {
+    typeOptionContext.loadTypeOptionData(
+      onCompleted: (value) {
+        if (!isClosed) {
+          String filterDesc = '';
+          for (final option in value.options) {
+            if (state.filter.optionIds.contains(option.id)) {
+              filterDesc += "${option.name} ";
+            }
+          }
+          add(SelectOptionFilterEditorEvent.updateFilterDescription(
+              filterDesc));
+        }
+      },
+      onError: (error) => Log.error(error),
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    await _listener.stop();
+    return super.close();
+  }
+}
+
+@freezed
+class SelectOptionFilterEditorEvent with _$SelectOptionFilterEditorEvent {
+  const factory SelectOptionFilterEditorEvent.initial() = _Initial;
+  const factory SelectOptionFilterEditorEvent.didReceiveFilter(
+      FilterPB filter) = _DidReceiveFilter;
+  const factory SelectOptionFilterEditorEvent.updateCondition(
+      SelectOptionCondition condition) = _UpdateCondition;
+  const factory SelectOptionFilterEditorEvent.updateContent(
+      List<String> optionIds) = _UpdateContent;
+  const factory SelectOptionFilterEditorEvent.updateFilterDescription(
+      String desc) = _UpdateDesc;
+  const factory SelectOptionFilterEditorEvent.delete() = _Delete;
+}
+
+@freezed
+class SelectOptionFilterEditorState with _$SelectOptionFilterEditorState {
+  const factory SelectOptionFilterEditorState({
+    required FilterInfo filterInfo,
+    required SelectOptionFilterPB filter,
+    required String filterDesc,
+  }) = _GridFilterState;
+
+  factory SelectOptionFilterEditorState.initial(FilterInfo filterInfo) {
+    return SelectOptionFilterEditorState(
+      filterInfo: filterInfo,
+      filter: filterInfo.selectOptionFilter()!,
+      filterDesc: '',
+    );
+  }
+}