chore: reorder fields

frontend/app_flowy/lib/workspace/application/grid/setting/property_bloc.dart

@@ -1,5 +1,6 @@
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
 import 'package:app_flowy/workspace/application/grid/field/grid_listenr.dart';
+import 'package:app_flowy/workspace/application/grid/grid_service.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -11,10 +12,12 @@ part 'property_bloc.freezed.dart';
 class GridPropertyBloc extends Bloc<GridPropertyEvent, GridPropertyState> {
   final FieldService _service;
   final GridFieldsListener _fieldListener;
+  final GridFieldCache _fieldCache;
 
   GridPropertyBloc({required String gridId, required List<Field> fields})
       : _service = FieldService(gridId: gridId),
         _fieldListener = GridFieldsListener(gridId: gridId),
+        _fieldCache = GridFieldCache(),
         super(GridPropertyState.initial(gridId, fields)) {
     on<GridPropertyEvent>(
       (event, emit) async {
@@ -43,14 +46,16 @@ class GridPropertyBloc extends Bloc<GridPropertyEvent, GridPropertyState> {
   @override
   Future<void> close() async {
     await _fieldListener.stop();
+    _fieldCache.dispose();
     return super.close();
   }
 
   void _startListening() {
     _fieldListener.updateFieldsNotifier.addPublishListener((result) {
       result.fold(
-        (fields) {
-          // add(GridPropertyEvent.didReceiveFieldUpdate(fields));
+        (changeset) {
+          _fieldCache.applyChangeset(changeset);
+          add(GridPropertyEvent.didReceiveFieldUpdate(_fieldCache.clonedFields));
         },
         (err) => Log.error(err),
       );

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart

@@ -5,10 +5,11 @@ 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';
+import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' hide Row;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-
+import 'package:reorderables/reorderables.dart';
 import 'field_editor.dart';
 import 'field_cell.dart';
 
@@ -62,7 +63,7 @@ class SliverHeaderDelegateImplementation extends SliverPersistentHeaderDelegate
   }
 }
 
-class _GridHeader extends StatelessWidget {
+class _GridHeader extends StatefulWidget {
   final String gridId;
   final List<Field> fields;
 
@@ -72,26 +73,34 @@ class _GridHeader extends StatelessWidget {
     required this.fields,
   }) : super(key: key);
 
+  @override
+  State<_GridHeader> createState() => _GridHeaderState();
+}
+
+class _GridHeaderState extends State<_GridHeader> {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<GridHeaderBloc, GridHeaderState>(
+      buildWhen: (previous, current) => previous.fields != current.fields,
       builder: (context, state) {
         final cells = state.fields
             .where((field) => field.visibility)
-            .map((field) => GridFieldCellContext(gridId: gridId, field: field))
+            .map((field) => GridFieldCellContext(gridId: widget.gridId, field: field))
             .map((ctx) => GridFieldCell(ctx, key: ValueKey(ctx.field.id)))
             .toList();
 
         return Container(
           color: theme.surface,
-          child: Row(
+          child: ReorderableRow(
             crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              const _CellLeading(),
-              ...cells,
-              _CellTrailing(gridId: gridId),
-            ],
+            scrollController: ScrollController(),
+            header: const _CellLeading(),
+            footer: _CellTrailing(gridId: widget.gridId),
+            onReorder: (int oldIndex, int newIndex) {
+              Log.info("from $oldIndex to $newIndex");
+            },
+            children: cells,
           ),
         );
       },

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart

@@ -10,6 +10,7 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show Field;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -45,16 +46,19 @@ class GridPropertyList extends StatelessWidget with FlowyOverlayDelegate {
           getIt<GridPropertyBloc>(param1: gridId, param2: fields)..add(const GridPropertyEvent.initial()),
       child: BlocBuilder<GridPropertyBloc, GridPropertyState>(
         builder: (context, state) {
-          final children = state.fields.map((field) {
+          final cells = state.fields.map((field) {
             return _GridPropertyCell(gridId: gridId, field: field, key: ValueKey(field.id));
           }).toList();
 
-          return ReorderableListView(
+          return ListView.separated(
             shrinkWrap: true,
-            onReorder: (int oldIndex, int newIndex) {
-              context.read<GridPropertyBloc>().add(GridPropertyEvent.moveField(oldIndex, newIndex));
+            itemCount: cells.length,
+            itemBuilder: (BuildContext context, int index) {
+              return cells[index];
+            },
+            separatorBuilder: (BuildContext context, int index) {
+              return VSpace(GridSize.typeOptionSeparatorHeight);
             },
-            children: children,
           );
         },
       ),