Feat: support new column type, Checklist.

Feat/support checklist type

Author: appflowy

frontend/app_flowy/assets/translations/en.json

@@ -222,6 +222,7 @@
       "singleSelectFieldName": "Select",
       "multiSelectFieldName": "Multiselect",
       "urlFieldName": "URL",
+      "checklistFieldName": "Checklist",
       "numberFormat": " Number format",
       "dateFormat": " Date format",
       "includeTime": " Include time",
@@ -264,6 +265,9 @@
       "panelTitle": "Select an option or create one",
       "searchOption": "Search for an option"
     },
+    "checklist": {
+      "panelTitle": "Search an option or create one"
+    },
     "menuName": "Grid"
   },
   "document": {

frontend/app_flowy/lib/plugins/board/application/group.dart

@@ -10,11 +10,3 @@ class BoardGroupService {
     groupField = field;
   }
 }
-
-abstract class CanBeGroupField {
-  String get groupContent;
-}
-
-// class SingleSelectGroup extends CanBeGroupField {
-//   final SingleSelectTypeOptionContext typeOptionContext;
-// }

frontend/app_flowy/lib/plugins/board/presentation/board_page.dart

@@ -358,6 +358,8 @@ Widget? _buildHeaderIcon(GroupData customData) {
       break;
     case FieldType.URL:
       break;
+    case FieldType.Checklist:
+      break;
   }
 
   if (widget != null) {

frontend/app_flowy/lib/plugins/board/presentation/card/board_checklist_cell.dart

@@ -0,0 +1,35 @@
+import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
+import 'package:app_flowy/plugins/grid/application/cell/checklist_cell_bloc.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_cell.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class BoardChecklistCell extends StatefulWidget {
+  final GridCellControllerBuilder cellControllerBuilder;
+  const BoardChecklistCell({required this.cellControllerBuilder, Key? key})
+      : super(key: key);
+
+  @override
+  State<BoardChecklistCell> createState() => _BoardChecklistCellState();
+}
+
+class _BoardChecklistCellState extends State<BoardChecklistCell> {
+  late ChecklistCellBloc _cellBloc;
+
+  @override
+  void initState() {
+    final cellController =
+        widget.cellControllerBuilder.build() as GridChecklistCellController;
+    _cellBloc = ChecklistCellBloc(cellController: cellController);
+    _cellBloc.add(const ChecklistCellEvent.initial());
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider.value(
+      value: _cellBloc,
+      child: const ChecklistProgressBar(),
+    );
+  }
+}

frontend/app_flowy/lib/plugins/board/presentation/card/card_cell_builder.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 
 import 'board_cell.dart';
 import 'board_checkbox_cell.dart';
+import 'board_checklist_cell.dart';
 import 'board_date_cell.dart';
 import 'board_number_cell.dart';
 import 'board_select_option_cell.dart';
@@ -58,6 +59,11 @@ class BoardCellBuilder {
           editableNotifier: cellNotifier,
           key: key,
         );
+      case FieldType.Checklist:
+        return BoardChecklistCell(
+          cellControllerBuilder: cellControllerBuilder,
+          key: key,
+        );
       case FieldType.Number:
         return BoardNumberCell(
           groupId: groupId,

frontend/app_flowy/lib/plugins/grid/application/cell/cell_service/cell_controller.dart

@@ -5,6 +5,8 @@ typedef GridCheckboxCellController = IGridCellController<String, String>;
 typedef GridNumberCellController = IGridCellController<String, String>;
 typedef GridSelectOptionCellController
     = IGridCellController<SelectOptionCellDataPB, String>;
+typedef GridChecklistCellController
+    = IGridCellController<SelectOptionCellDataPB, String>;
 typedef GridDateCellController
     = IGridCellController<DateCellDataPB, CalendarData>;
 typedef GridURLCellController = IGridCellController<URLCellDataPB, String>;
@@ -81,6 +83,7 @@ class GridCellControllerBuilder {
         );
       case FieldType.MultiSelect:
       case FieldType.SingleSelect:
+      case FieldType.Checklist:
         final cellDataLoader = GridCellDataLoader(
           cellId: _cellId,
           parser: SelectOptionCellDataParser(),

frontend/app_flowy/lib/plugins/grid/application/cell/checklist_cell_bloc.dart

@@ -0,0 +1,97 @@
+import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'dart:async';
+import 'cell_service/cell_service.dart';
+import 'checklist_cell_editor_bloc.dart';
+import 'select_option_service.dart';
+part 'checklist_cell_bloc.freezed.dart';
+
+class ChecklistCellBloc extends Bloc<ChecklistCellEvent, ChecklistCellState> {
+  final GridChecklistCellController cellController;
+  final SelectOptionFFIService _selectOptionService;
+  void Function()? _onCellChangedFn;
+  ChecklistCellBloc({
+    required this.cellController,
+  })  : _selectOptionService =
+            SelectOptionFFIService(cellId: cellController.cellId),
+        super(ChecklistCellState.initial(cellController)) {
+    on<ChecklistCellEvent>(
+      (event, emit) async {
+        await event.when(
+          initial: () async {
+            _startListening();
+            _loadOptions();
+          },
+          didReceiveOptions: (data) {
+            emit(state.copyWith(
+              allOptions: data.options,
+              selectedOptions: data.selectOptions,
+              percent: percentFromSelectOptionCellData(data),
+            ));
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    if (_onCellChangedFn != null) {
+      cellController.removeListener(_onCellChangedFn!);
+      _onCellChangedFn = null;
+    }
+    await cellController.dispose();
+    return super.close();
+  }
+
+  void _startListening() {
+    _onCellChangedFn = cellController.startListening(
+      onCellFieldChanged: () {
+        _loadOptions();
+      },
+      onCellChanged: (data) {
+        if (!isClosed && data != null) {
+          add(ChecklistCellEvent.didReceiveOptions(data));
+        }
+      },
+    );
+  }
+
+  void _loadOptions() {
+    _selectOptionService.getOptionContext().then((result) {
+      if (isClosed) return;
+
+      return result.fold(
+        (data) => add(ChecklistCellEvent.didReceiveOptions(data)),
+        (err) => Log.error(err),
+      );
+    });
+  }
+}
+
+@freezed
+class ChecklistCellEvent with _$ChecklistCellEvent {
+  const factory ChecklistCellEvent.initial() = _InitialCell;
+  const factory ChecklistCellEvent.didReceiveOptions(
+      SelectOptionCellDataPB data) = _DidReceiveCellUpdate;
+}
+
+@freezed
+class ChecklistCellState with _$ChecklistCellState {
+  const factory ChecklistCellState({
+    required List<SelectOptionPB> allOptions,
+    required List<SelectOptionPB> selectedOptions,
+    required double percent,
+  }) = _ChecklistCellState;
+
+  factory ChecklistCellState.initial(
+      GridChecklistCellController cellController) {
+    return const ChecklistCellState(
+      allOptions: [],
+      selectedOptions: [],
+      percent: 0,
+    );
+  }
+}