fix: show count of files on card per column (#6323)

* fix: show count of files on card per column

* fix: analyzer

frontend/appflowy_flutter/lib/mobile/presentation/database/card/mobile_card_content.dart

@@ -1,17 +1,11 @@
 import 'package:flutter/material.dart';
 
-import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy/plugins/database/widgets/card/card_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_style_maps/mobile_board_card_cell_style.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileCardContent extends StatelessWidget {
@@ -30,8 +24,6 @@ class MobileCardContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final attachmentCount = rowMeta.attachmentCount.toInt();
-
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -46,39 +38,12 @@ class MobileCardContent extends StatelessWidget {
           child: Column(
             children: [
               ...cells.map(
-                (cellMeta) {
+                (cellMeta) => cellBuilder.build(
-                  return cellBuilder.build(
+                  cellContext: cellMeta.cellContext(),
-                    cellContext: cellMeta.cellContext(),
+                  styleMap: mobileBoardCardCellStyleMap(context),
-                    styleMap: mobileBoardCardCellStyleMap(context),
+                  hasNotes: !rowMeta.isDocumentEmpty,
-                    hasNotes: !rowMeta.isDocumentEmpty,
-                  );
-                },
-              ),
-              if (attachmentCount > 0) ...[
-                const VSpace(4),
-                Padding(
-                  padding: const EdgeInsets.only(left: 8),
-                  child: Row(
-                    children: [
-                      const FlowySvg(
-                        FlowySvgs.media_s,
-                        size: Size.square(12),
-                      ),
-                      const HSpace(6),
-                      Flexible(
-                        child: FlowyText.regular(
-                          LocaleKeys.grid_media_attachmentsHint
-                              .tr(args: ['$attachmentCount']),
-                          fontSize: 12,
-                          color:
-                              AFThemeExtension.of(context).secondaryTextColor,
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                      ),
-                    ],
-                  ),
                 ),
-              ],
+              ),
             ],
           ),
         ),

frontend/appflowy_flutter/lib/plugins/database/widgets/card/card.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database/application/row/row_cache.dart';
@@ -12,8 +11,6 @@ import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:collection/collection.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -217,7 +214,6 @@ class _CardContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final attachmentCount = rowMeta.attachmentCount.toInt();
     final child = Column(
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -229,34 +225,7 @@ class _CardContent extends StatelessWidget {
         Padding(
           padding: styleConfiguration.cardPadding,
           child: Column(
-            children: [
+            children: _makeCells(context, rowMeta, cells),
-              ..._makeCells(context, rowMeta, cells),
-              if (attachmentCount > 0) ...[
-                const VSpace(2),
-                Padding(
-                  padding: const EdgeInsets.only(left: 8),
-                  child: Row(
-                    children: [
-                      const FlowySvg(
-                        FlowySvgs.media_s,
-                        size: Size.square(12),
-                      ),
-                      const HSpace(4),
-                      Flexible(
-                        child: FlowyText.regular(
-                          LocaleKeys.grid_media_attachmentsHint
-                              .tr(args: ['$attachmentCount']),
-                          fontSize: 11,
-                          color:
-                              AFThemeExtension.of(context).secondaryTextColor,
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            ],
           ),
         ),
       ],

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/card_cell_skeleton/media_card_cell.dart

@@ -1,8 +1,17 @@
 import 'package:flutter/widgets.dart';
 
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/database/application/cell/bloc/media_cell_bloc.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/card_cell.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MediaCardCellStyle extends CardCellStyle {
   const MediaCardCellStyle({
@@ -13,9 +22,6 @@ class MediaCardCellStyle extends CardCellStyle {
   final TextStyle textStyle;
 }
 
-// This is a placeholder for the MediaCardCell, it is not implemented
-// as we use the [RowMetaPB.attachmentCount] to display cumulative attachments
-// on a Card.
 class MediaCardCell extends CardCell<MediaCardCellStyle> {
   const MediaCardCell({
     super.key,
@@ -34,6 +40,42 @@ class MediaCardCell extends CardCell<MediaCardCellStyle> {
 class _MediaCellState extends State<MediaCardCell> {
   @override
   Widget build(BuildContext context) {
-    return const SizedBox.shrink();
+    return BlocProvider<MediaCellBloc>(
+      create: (_) => MediaCellBloc(
+        cellController: makeCellController(
+          widget.databaseController,
+          widget.cellContext,
+        ).as(),
+      )..add(const MediaCellEvent.initial()),
+      child: BlocBuilder<MediaCellBloc, MediaCellState>(
+        builder: (context, state) {
+          if (state.files.isEmpty) {
+            return const SizedBox.shrink();
+          }
+
+          return Padding(
+            padding: const EdgeInsets.only(left: 4),
+            child: Row(
+              children: [
+                const FlowySvg(
+                  FlowySvgs.media_s,
+                  size: Size.square(12),
+                ),
+                const HSpace(6),
+                Flexible(
+                  child: FlowyText.regular(
+                    LocaleKeys.grid_media_attachmentsHint
+                        .tr(args: ['${state.files.length}']),
+                    fontSize: 12,
+                    color: AFThemeExtension.of(context).secondaryTextColor,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
   }
 }