chore: config checklist board UI

Author: appflowy

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

@@ -1,10 +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 StatelessWidget {
-  const BoardChecklistCell({Key? key}) : super(key: key);
+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 Container();
+    return BlocProvider.value(
+      value: _cellBloc,
+      child: const ChecklistProgressBar(),
+    );
   }
 }

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

@@ -61,6 +61,7 @@ class BoardCellBuilder {
         );
       case FieldType.Checklist:
         return BoardChecklistCell(
+          cellControllerBuilder: cellControllerBuilder,
           key: key,
         );
       case FieldType.Number:

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

@@ -4,6 +4,7 @@ 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';
 
@@ -27,8 +28,7 @@ class ChecklistCellBloc extends Bloc<ChecklistCellEvent, ChecklistCellState> {
             emit(state.copyWith(
               allOptions: data.options,
               selectedOptions: data.selectOptions,
-              percent: data.selectOptions.length.toDouble() /
-                  data.options.length.toDouble(),
+              percent: percentFromSelectOptionCellData(data),
             ));
           },
         );

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

@@ -26,11 +26,12 @@ class ChecklistCellEditorBloc
         await event.when(
           initial: () async {
             _startListening();
+            _loadOptions();
           },
           didReceiveOptions: (data) {
             emit(state.copyWith(
               allOptions: _makeChecklistSelectOptions(data, state.predicate),
-              percent: _percentFromSelectOptionCellData(data),
+              percent: percentFromSelectOptionCellData(data),
             ));
           },
           newOption: (optionName) {
@@ -143,18 +144,21 @@ class ChecklistCellEditorState with _$ChecklistCellEditorState {
     return ChecklistCellEditorState(
       allOptions: _makeChecklistSelectOptions(data, ''),
       createOption: none(),
-      percent: _percentFromSelectOptionCellData(data),
+      percent: percentFromSelectOptionCellData(data),
       predicate: '',
     );
   }
 }
 
-double _percentFromSelectOptionCellData(SelectOptionCellDataPB? data) {
+double percentFromSelectOptionCellData(SelectOptionCellDataPB? data) {
   if (data == null) return 0;
 
-  final a = data.selectOptions.length.toDouble();
   final b = data.options.length.toDouble();
+  if (b == 0) {
+    return 0;
+  }
 
+  final a = data.selectOptions.length.toDouble();
   if (a > b) return 1.0;
 
   return a / b;

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checklist_cell/checklist_prograss_bar.dart

@@ -42,7 +42,7 @@ class _SliverChecklistPrograssBarDelegate
     extends SliverPersistentHeaderDelegate {
   _SliverChecklistPrograssBarDelegate();
 
-  double fixHeight = 60;
+  double fixHeight = 54;
 
   @override
   Widget build(
@@ -68,11 +68,10 @@ class _SliverChecklistPrograssBarDelegate
                       .add(ChecklistCellEditorEvent.newOption(text));
                 },
               ),
-              if (state.percent != 0)
-                Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 8.0),
-                  child: ChecklistPrograssBar(percent: state.percent),
-                ),
+              Padding(
+                padding: const EdgeInsets.only(top: 10.0),
+                child: ChecklistPrograssBar(percent: state.percent),
+              ),
             ],
           ),
         );
@@ -88,6 +87,6 @@ class _SliverChecklistPrograssBarDelegate
 
   @override
   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
-    return false;
+    return true;
   }
 }