chore: config switch group field UI

Author: appflowy

frontend/app_flowy/lib/plugins/grid/application/setting/group_bloc.dart

@@ -0,0 +1,87 @@
+import 'package:app_flowy/plugins/grid/application/field/field_service.dart';
+import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'dart:async';
+
+import '../field/field_cache.dart';
+
+part 'group_bloc.freezed.dart';
+
+class GridGroupBloc extends Bloc<GridGroupEvent, GridGroupState> {
+  final GridFieldCache _fieldCache;
+  Function(List<FieldPB>)? _onFieldsFn;
+
+  GridGroupBloc({required String gridId, required GridFieldCache fieldCache})
+      : _fieldCache = fieldCache,
+        super(GridGroupState.initial(gridId, fieldCache.fields)) {
+    on<GridGroupEvent>(
+      (event, emit) async {
+        await event.map(
+          initial: (_Initial value) {
+            _startListening();
+          },
+          setFieldVisibility: (_SetFieldVisibility value) async {
+            final fieldService =
+                FieldService(gridId: gridId, fieldId: value.fieldId);
+            final result =
+                await fieldService.updateField(visibility: value.visibility);
+            result.fold(
+              (l) => null,
+              (err) => Log.error(err),
+            );
+          },
+          didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) {
+            emit(state.copyWith(fields: value.fields));
+          },
+          moveField: (_MoveField value) {
+            //
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    if (_onFieldsFn != null) {
+      _fieldCache.removeListener(onFieldsListener: _onFieldsFn!);
+      _onFieldsFn = null;
+    }
+    return super.close();
+  }
+
+  void _startListening() {
+    _onFieldsFn = (fields) => add(GridGroupEvent.didReceiveFieldUpdate(fields));
+    _fieldCache.addListener(
+      onFields: _onFieldsFn,
+      listenWhen: () => !isClosed,
+    );
+  }
+}
+
+@freezed
+class GridGroupEvent with _$GridGroupEvent {
+  const factory GridGroupEvent.initial() = _Initial;
+  const factory GridGroupEvent.setFieldVisibility(
+      String fieldId, bool visibility) = _SetFieldVisibility;
+  const factory GridGroupEvent.didReceiveFieldUpdate(List<FieldPB> fields) =
+      _DidReceiveFieldUpdate;
+  const factory GridGroupEvent.moveField(int fromIndex, int toIndex) =
+      _MoveField;
+}
+
+@freezed
+class GridGroupState with _$GridGroupState {
+  const factory GridGroupState({
+    required String gridId,
+    required List<FieldPB> fields,
+  }) = _GridGroupState;
+
+  factory GridGroupState.initial(String gridId, List<FieldPB> fields) =>
+      GridGroupState(
+        gridId: gridId,
+        fields: fields,
+      );
+}

frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart

@@ -1,12 +1,22 @@
 import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
+<<<<<<< HEAD
+=======
+import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
+>>>>>>> 0e1004785 (chore: config switch group field UI)
 import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+<<<<<<< HEAD
+=======
+import 'package:flowy_infra_ui/widget/spacing.dart';
+>>>>>>> 0e1004785 (chore: config switch group field UI)
 import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:app_flowy/plugins/grid/application/setting/group_bloc.dart';
+
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class GridGroupList extends StatelessWidget {
   final String viewId;
@@ -19,7 +29,31 @@ class GridGroupList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container();
+    return BlocProvider(
+      create: (context) => GridGroupBloc(gridId: viewId, fieldCache: fieldCache)
+        ..add(const GridGroupEvent.initial()),
+      child: BlocBuilder<GridGroupBloc, GridGroupState>(
+        builder: (context, state) {
+          final cells = state.fields.map((field) {
+            return _GridGroupCell(
+              field: field,
+              key: ValueKey(field.id),
+            );
+          }).toList();
+
+          return ListView.separated(
+            shrinkWrap: true,
+            itemCount: cells.length,
+            itemBuilder: (BuildContext context, int index) {
+              return cells[index];
+            },
+            separatorBuilder: (BuildContext context, int index) {
+              return VSpace(GridSize.typeOptionSeparatorHeight);
+            },
+          );
+        },
+      ),
+    );
   }
 
   void show(BuildContext context) {}

frontend/rust-lib/flowy-grid/src/entities/setting_entities.rs

@@ -25,7 +25,7 @@ pub struct GridSettingPB {
     pub filter_configuration_by_field_id: HashMap<String, RepeatedGridConfigurationFilterPB>,
 
     #[pb(index = 4)]
-    pub group_configuration_by_field_id: HashMap<String, RepeatedGridGroupConfigurationPB>,
+    pub group_configurations: RepeatedGridGroupConfigurationPB,
 }
 
 #[derive(Eq, PartialEq, ProtoBuf, Debug, Default, Clone)]

frontend/rust-lib/flowy-grid/src/services/grid_view_editor.rs

@@ -464,7 +464,7 @@ impl GroupConfigurationWriter for GroupConfigurationWriterImpl {
 
 pub fn make_grid_setting(view_pad: &GridViewRevisionPad, field_revs: &[Arc<FieldRevision>]) -> GridSettingPB {
     let current_layout_type: GridLayout = view_pad.layout.clone().into();
-    let filters_by_field_id = view_pad
+    let filter_configuration_by_field_id = view_pad
         .get_all_filters(field_revs)
         .map(|filters_by_field_id| {
             filters_by_field_id
@@ -473,21 +473,21 @@ pub fn make_grid_setting(view_pad: &GridViewRevisionPad, field_revs: &[Arc<Field
                 .collect::<HashMap<String, RepeatedGridConfigurationFilterPB>>()
         })
         .unwrap_or_default();
-    let groups_by_field_id = view_pad
+    let group_configurations = view_pad
         .get_groups_by_field_revs(field_revs)
         .map(|groups_by_field_id| {
             groups_by_field_id
                 .into_iter()
-                .map(|(k, v)| (k, v.into()))
-                .collect::<HashMap<String, RepeatedGridGroupConfigurationPB>>()
+                .map(|(_, v)| v.into())
+                .collect::<RepeatedGridGroupConfigurationPB>()
         })
         .unwrap_or_default();
 
     GridSettingPB {
         layouts: GridLayoutPB::all(),
         current_layout_type,
-        filter_configuration_by_field_id: filters_by_field_id,
-        group_configuration_by_field_id: groups_by_field_id,
+        filter_configuration_by_field_id,
+        group_configurations,
     }
 }