feat: enable hide the grid property in row detail page (#2656)

frontend/appflowy_flutter/lib/plugins/database_view/grid/application/row/row_detail_bloc.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'dart:async';
@@ -29,11 +30,16 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
             emit(state.copyWith(gridCells: cells));
           },
           deleteField: (fieldId) {
-            final fieldService = FieldBackendService(
-              viewId: dataController.viewId,
-              fieldId: fieldId,
+            _fieldBackendService(fieldId).deleteField();
+          },
+          hideField: (fieldId) async {
+            final result = await _fieldBackendService(fieldId).updateField(
+              visibility: false,
+            );
+            result.fold(
+              (l) {},
+              (err) => Log.error(err),
             );
-            fieldService.deleteField();
           },
           deleteRow: (rowId) async {
             await rowService.deleteRow(rowId);
@@ -64,12 +70,20 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
       },
     );
   }
+
+  FieldBackendService _fieldBackendService(String fieldId) {
+    return FieldBackendService(
+      viewId: dataController.viewId,
+      fieldId: fieldId,
+    );
+  }
 }
 
 @freezed
 class RowDetailEvent with _$RowDetailEvent {
   const factory RowDetailEvent.initial() = _Initial;
   const factory RowDetailEvent.deleteField(String fieldId) = _DeleteField;
+  const factory RowDetailEvent.hideField(String fieldId) = _HideField;
   const factory RowDetailEvent.deleteRow(String rowId) = _DeleteRow;
   const factory RowDetailEvent.duplicateRow(String rowId, String? groupId) =
       _DuplicateRow;

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/grid_page.dart

@@ -108,8 +108,8 @@ class _FlowyGridState extends State<FlowyGrid> {
 
   @override
   void initState() {
-    super.initState();
     headerScrollController = _scrollController.linkHorizontalController();
+    super.initState();
   }
 
   @override

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart

@@ -19,6 +19,7 @@ class FieldEditor extends StatefulWidget {
   final String fieldName;
   final bool isGroupingField;
   final Function(String)? onDeleted;
+  final Function(String)? onHidden;
   final IFieldTypeOptionLoader typeOptionLoader;
 
   const FieldEditor({
@@ -27,6 +28,7 @@ class FieldEditor extends StatefulWidget {
     required this.typeOptionLoader,
     this.isGroupingField = false,
     this.onDeleted,
+    this.onHidden,
     Key? key,
   }) : super(key: key);
 
@@ -55,6 +57,7 @@ class _FieldEditorState extends State<FieldEditor> {
       _FieldNameTextField(popoverMutex: popoverMutex),
       const VSpace(10),
       if (widget.onDeleted != null) _addDeleteFieldButton(),
+      if (widget.onHidden != null) _addHideFieldButton(),
       _FieldTypeOptionCell(popoverMutex: popoverMutex),
     ];
     return BlocProvider(
@@ -91,6 +94,25 @@ class _FieldEditorState extends State<FieldEditor> {
       },
     );
   }
+
+  Widget _addHideFieldButton() {
+    return BlocBuilder<FieldEditorBloc, FieldEditorState>(
+      builder: (context, state) {
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12.0),
+          child: _HideFieldButton(
+            popoverMutex: popoverMutex,
+            onHidden: () {
+              state.field.fold(
+                () => Log.error('Can not hidden the field'),
+                (field) => widget.onHidden?.call(field.id),
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
 }
 
 class _FieldTypeOptionCell extends StatelessWidget {
@@ -221,3 +243,34 @@ class _DeleteFieldButton extends StatelessWidget {
     );
   }
 }
+
+class _HideFieldButton extends StatelessWidget {
+  final PopoverMutex popoverMutex;
+  final VoidCallback? onHidden;
+
+  const _HideFieldButton({
+    required this.popoverMutex,
+    required this.onHidden,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<FieldEditorBloc, FieldEditorState>(
+      buildWhen: (previous, current) => previous != current,
+      builder: (context, state) {
+        Widget button = FlowyButton(
+          text: FlowyText.medium(
+            LocaleKeys.grid_field_hide.tr(),
+          ),
+          onTap: () => onHidden?.call(),
+          onHover: (_) => popoverMutex.close(),
+        );
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 4.0),
+          child: SizedBox(height: GridSize.popoverItemHeight, child: button),
+        );
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart

@@ -229,7 +229,6 @@ class _CreatePropertyButtonState extends State<_CreatePropertyButton> {
           typeOptionLoader: NewFieldTypeOptionLoader(viewId: widget.viewId),
           onDeleted: (fieldId) {
             popoverController.close();
-
             NavigatorAlertDialog(
               title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
               confirm: () {
@@ -314,6 +313,10 @@ class _PropertyCellState extends State<_PropertyCell> {
         viewId: widget.cellId.viewId,
         field: widget.cellId.fieldInfo.field,
       ),
+      onHidden: (fieldId) {
+        popover.close();
+        context.read<RowDetailBloc>().add(RowDetailEvent.hideField(fieldId));
+      },
       onDeleted: (fieldId) {
         popover.close();
 

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart

@@ -87,7 +87,6 @@ enum ImportType {
       case ImportType.historyDocument:
         return ['afdoc'];
       case ImportType.historyDatabase:
-        // FIXME: @nathan.
         return ['afdb'];
       case ImportType.markdownOrText:
         return ['md', 'txt'];