feat: enable reordering properties from settings

frontend/appflowy_flutter/lib/plugins/database_view/application/setting/property_bloc.dart

@@ -27,20 +27,32 @@ class DatabasePropertyBloc
             _startListening();
           },
           setFieldVisibility: (_SetFieldVisibility value) async {
-            final fieldBackendSvc =
-                FieldBackendService(viewId: viewId, fieldId: value.fieldId);
-            final result =
-                await fieldBackendSvc.updateField(visibility: value.visibility);
-            result.fold(
-              (l) => null,
-              (err) => Log.error(err),
+            final fieldBackendSvc = FieldBackendService(
+              viewId: viewId,
+              fieldId: value.fieldId,
             );
+
+            final result = await fieldBackendSvc.updateField(
+              visibility: value.visibility,
+            );
+
+            result.fold((l) => null, (err) => Log.error(err));
           },
           didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) {
             emit(state.copyWith(fieldContexts: value.fields));
           },
-          moveField: (_MoveField value) {
-            //
+          moveField: (_MoveField value) async {
+            final fieldBackendService = FieldBackendService(
+              viewId: viewId,
+              fieldId: value.fieldId,
+            );
+
+            final result = await fieldBackendService.moveField(
+              value.fromIndex,
+              value.toIndex,
+            );
+
+            result.fold((l) => null, (r) => Log.error(r));
           },
         );
       },
@@ -76,8 +88,11 @@ class DatabasePropertyEvent with _$DatabasePropertyEvent {
   const factory DatabasePropertyEvent.didReceiveFieldUpdate(
     List<FieldInfo> fields,
   ) = _DidReceiveFieldUpdate;
-  const factory DatabasePropertyEvent.moveField(int fromIndex, int toIndex) =
-      _MoveField;
+  const factory DatabasePropertyEvent.moveField({
+    required String fieldId,
+    required int fromIndex,
+    required int toIndex,
+  }) = _MoveField;
 }
 
 @freezed

frontend/appflowy_flutter/lib/plugins/database_view/widgets/field/grid_property.dart

@@ -9,6 +9,7 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:reorderables/reorderables.dart';
 import 'package:styled_widget/styled_widget.dart';
 
 import '../../grid/presentation/layout/sizes.dart';
@@ -17,24 +18,19 @@ import '../../grid/presentation/widgets/header/field_editor.dart';
 class DatabasePropertyList extends StatefulWidget {
   final String viewId;
   final FieldController fieldController;
+
   const DatabasePropertyList({
+    super.key,
     required this.viewId,
     required this.fieldController,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<StatefulWidget> createState() => _DatabasePropertyListState();
 }
 
 class _DatabasePropertyListState extends State<DatabasePropertyList> {
-  late PopoverMutex _popoverMutex;
-
-  @override
-  void initState() {
-    _popoverMutex = PopoverMutex();
-    super.initState();
-  }
+  final PopoverMutex _popoverMutex = PopoverMutex();
 
   @override
   Widget build(BuildContext context) {
@@ -47,21 +43,29 @@ class _DatabasePropertyListState extends State<DatabasePropertyList> {
         builder: (context, state) {
           final cells = state.fieldContexts.map((field) {
             return _GridPropertyCell(
-              popoverMutex: _popoverMutex,
+              key: ValueKey(field.id),
               viewId: widget.viewId,
               fieldInfo: field,
-              key: ValueKey(field.id),
+              popoverMutex: _popoverMutex,
             );
           }).toList();
 
-          return ListView.separated(
-            controller: ScrollController(),
-            shrinkWrap: true,
-            itemCount: cells.length,
-            itemBuilder: (BuildContext context, int index) => cells[index],
-            separatorBuilder: (BuildContext context, int index) =>
-                VSpace(GridSize.typeOptionSeparatorHeight),
+          return ReorderableColumn(
+            needsLongPressDraggable: false,
+            buildDraggableFeedback: (context, constraints, child) =>
+                ConstrainedBox(
+              constraints: constraints,
+              child: Material(color: Colors.transparent, child: child),
+            ),
+            onReorder: (from, to) => context.read<DatabasePropertyBloc>().add(
+                  DatabasePropertyEvent.moveField(
+                    fieldId: cells[from].fieldInfo.id,
+                    fromIndex: from,
+                    toIndex: to,
+                  ),
+                ),
             padding: const EdgeInsets.symmetric(vertical: 6.0),
+            children: cells,
           );
         },
       ),
@@ -75,24 +79,18 @@ class _GridPropertyCell extends StatefulWidget {
   final PopoverMutex popoverMutex;
 
   const _GridPropertyCell({
-    required this.viewId,
+    super.key,
     required this.fieldInfo,
+    required this.viewId,
     required this.popoverMutex,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<_GridPropertyCell> createState() => _GridPropertyCellState();
 }
 
 class _GridPropertyCellState extends State<_GridPropertyCell> {
-  late PopoverController _popoverController;
-
-  @override
-  void initState() {
-    _popoverController = PopoverController();
-    super.initState();
-  }
+  final PopoverController _popoverController = PopoverController();
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_button.dart

@@ -28,13 +28,7 @@ class SettingButton extends StatefulWidget {
 }
 
 class _SettingButtonState extends State<SettingButton> {
-  late PopoverController _popoverController;
-
-  @override
-  void initState() {
-    _popoverController = PopoverController();
-    super.initState();
-  }
+  final PopoverController _popoverController = PopoverController();
 
   @override
   Widget build(BuildContext context) {
@@ -108,9 +102,18 @@ class _DatabaseSettingListPopoverState
             },
           );
         case DatabaseSettingAction.showProperties:
-          return DatabasePropertyList(
-            viewId: widget.databaseController.viewId,
-            fieldController: widget.databaseController.fieldController,
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              DatabasePropertyList(
+                viewId: widget.databaseController.viewId,
+                fieldController: widget.databaseController.fieldController,
+              ),
+              FlowyText.regular(
+                LocaleKeys.grid_settings_reorderPropertiesTooltip.tr(),
+              ),
+              const VSpace(8),
+            ],
           );
         case DatabaseSettingAction.showCalendarLayout:
           return CalendarLayoutSetting(
@@ -165,7 +168,7 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
   String title() {
     switch (this) {
       case DatabaseSettingAction.showProperties:
-        return LocaleKeys.grid_settings_Properties.tr();
+        return LocaleKeys.grid_settings_properties.tr();
       case DatabaseSettingAction.showLayout:
         return LocaleKeys.grid_settings_databaseLayout.tr();
       case DatabaseSettingAction.showGroup:

frontend/resources/translations/en.json

@@ -285,7 +285,8 @@
       "filter": "Filter",
       "sort": "Sort",
       "sortBy": "Sort by",
-      "Properties": "Properties",
+      "properties": "Properties",
+      "reorderPropertiesTooltip": "Drag to reorder properties",
       "group": "Group",
       "addFilter": "Add Filter",
       "deleteFilter": "Delete filter",