Minor improvements

lib/features/core/components/attachment_file_card.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:popup_menu/popup_menu.dart';
+
+import '../../../nocodb_sdk/models.dart';
+
+class AttachmentFileCard extends HookConsumerWidget {
+  final NcAttachedFile _file;
+  final PopupMenu? popupMenu;
+  const AttachmentFileCard(
+    this._file, {
+    this.popupMenu,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final anchor = popupMenu != null ? GlobalKey() : null;
+    final child = Padding(
+      padding: const EdgeInsets.all(8),
+      child: Column(
+        children: [
+          const SizedBox(
+            width: 64,
+            height: 64,
+            child: Icon(Icons.description_outlined, size: 48),
+          ),
+          Container(
+            padding: const EdgeInsets.all(8),
+            child: Text(
+              _file.title,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ],
+      ),
+    );
+
+    return Card(
+      key: anchor,
+      elevation: 4,
+      child: anchor == null
+          ? child
+          : InkWell(
+              onTap: () => popupMenu?.show(widgetKey: anchor),
+              child: child,
+            ),
+    );
+  }
+}

lib/features/core/components/attachment_image_card.dart

@@ -0,0 +1,45 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:popup_menu/popup_menu.dart';
+
+import '../../../nocodb_sdk/client.dart';
+import '../../../nocodb_sdk/models.dart';
+
+class AttachmentImageCard extends HookConsumerWidget {
+  final NcAttachedFile _file;
+  final PopupMenu? popupMenu;
+  const AttachmentImageCard(
+    this._file, {
+    this.popupMenu,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final anchor = popupMenu != null ? GlobalKey() : null;
+    final child = SizedBox(
+      width: 80,
+      height: 80,
+      child: CachedNetworkImage(
+        imageUrl: _file.signedUrl(api.uri),
+        placeholder: (context, url) => const Padding(
+          padding: EdgeInsets.all(24),
+          child: CircularProgressIndicator(),
+        ),
+        errorWidget: (context, url, error) => const Icon(Icons.error),
+      ),
+    );
+
+    return Card(
+      key: anchor,
+      elevation: 4,
+      child: anchor == null
+          ? child
+          : InkWell(
+              onTap: () => popupMenu?.show(widgetKey: anchor),
+              child: child,
+            ),
+    );
+  }
+}

lib/features/core/components/editors/attachment.dart

@@ -1,4 +1,3 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -7,7 +6,8 @@ import '../../../../nocodb_sdk/models.dart';
 import '../../../../nocodb_sdk/symbols.dart';
 import '../../pages/attachment_editor.dart';
 import '../../providers/providers.dart';
-import '/nocodb_sdk/client.dart';
+import '../attachment_file_card.dart';
+import '../attachment_image_card.dart';
 import '/nocodb_sdk/models.dart' as model;
 
 class AttachmentEditor extends HookConsumerWidget {
@@ -21,75 +21,41 @@ class AttachmentEditor extends HookConsumerWidget {
     required this.onUpdate,
   });
 
-  Widget buildImageCard(
-    NcAttachedFile file,
-    GlobalKey key,
-  ) {
-    return Card(
-      elevation: 2,
-      child: InkWell(
-        key: key,
-        child: SizedBox(
-          width: 80,
-          height: 80,
-          child: CachedNetworkImage(
-            imageUrl: file.signedUrl(api.uri),
-            placeholder: (context, url) => const Padding(
-              padding: EdgeInsets.all(24),
-              child: CircularProgressIndicator(),
-            ),
-            errorWidget: (context, url, error) => const Icon(Icons.error),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget buildFileCard(
-    NcAttachedFile file,
-    GlobalKey key,
-  ) {
-    return Card(
-      key: key,
-      elevation: 4,
-      child: InkWell(
-        child: Padding(
-          padding: const EdgeInsets.all(8),
-          child: Column(
-            children: [
-              const SizedBox(
-                width: 72,
-                height: 72,
-                child: Icon(Icons.description_outlined, size: 48),
-              ),
-              Container(
-                padding: const EdgeInsets.all(8),
-                child: Text(
-                  file.title,
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
+  Widget buildEmpty({text = '-'}) {
+    return Container(
+      height: 80,
     );
   }
 
-  List<Widget> buildChildren(
-    List<model.NcAttachedFile> files,
-  ) {
-    return files.map<Widget>((file) {
-      final key = GlobalKey();
-      return file.isImage
-          ? buildImageCard(file, key)
-          : buildFileCard(file, key);
-    }).toList();
-  }
-
-  // TODO: Show files on the list and open AttachmentEditorPage when further actions are required.
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    if (rowId == null) {
+      return InkWell(
+        onTap: () {
+          showDialog(
+            context: context,
+            builder: (context) {
+              return AlertDialog(
+                title: const Text('Record is not yet created.'),
+                content: const Text(
+                  'Once record is created, you can attach files.',
+                ),
+                actions: [
+                  TextButton(
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                    child: const Text('OK'),
+                  ),
+                ],
+              );
+            },
+          );
+        },
+        child: buildEmpty(),
+      );
+    }
+
     // TODO: Organize initialization.
     // NOTE: The initialization process needs to be the same for both AttachmentEditor and AttachmentEditorPage.
     // If they differ, file synchronization will be lost when navigating between the two components.
@@ -116,16 +82,8 @@ class AttachmentEditor extends HookConsumerWidget {
         )
         .toList() as List<NcAttachedFile>;
 
-    final children = buildChildren(files);
-
     return GestureDetector(
       onTap: () {
-        if (rowId == null) {
-          // TODO: Show message to explain the reason why AttachmentEditorPage does not open.
-          // AttachmentEditorPage only supports updates and does not support saving new records,
-          // so it will not open if the line has not been saved yet.
-          return;
-        }
         Navigator.push(
           context,
           MaterialPageRoute(
@@ -136,13 +94,19 @@ class AttachmentEditor extends HookConsumerWidget {
         );
       },
       child: ConstrainedBox(
-        constraints:
-            const BoxConstraints(maxHeight: 500), // TODO: Adjust maxHeight.
+        constraints: const BoxConstraints(
+          minHeight: 80,
+          maxHeight: 500, // TODO: Adjust maxHeight.
+        ),
         child: GridView.count(
           shrinkWrap: true,
           crossAxisCount: 3,
           padding: const EdgeInsets.all(8),
-          children: children,
+          children: files.map<Widget>((file) {
+            return file.isImage
+                ? AttachmentImageCard(file)
+                : AttachmentFileCard(file);
+          }).toList(),
         ),
       ),
     );