chore: enable timestamp field on mobile (#4506)

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_grid.dart

@@ -19,6 +19,8 @@ const _supportedFieldTypes = [
   FieldType.DateTime,
   FieldType.Checkbox,
   FieldType.Checklist,
+  FieldType.LastEditedTime,
+  FieldType.CreatedTime,
 ];
 
 class FieldOptions extends StatelessWidget {
@@ -35,29 +37,28 @@ class FieldOptions extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return SingleChildScrollView(
-      children: [
+      controller: scrollController,
-        _FieldHeader(mode: mode),
+      child: Column(
-        const VSpace(12.0),
+        mainAxisSize: MainAxisSize.min,
-        Expanded(
+        children: [
-          child: SingleChildScrollView(
+          _FieldHeader(mode: mode),
-            controller: scrollController,
+          const VSpace(12.0),
-            child: _GridView(
+          _GridView(
-              crossAxisCount: 3,
+            crossAxisCount: 3,
-              mainAxisSpacing: 28,
+            mainAxisSpacing: 4,
-              itemWidth: 82,
+            itemSize: const Size(82, 140),
-              children: _supportedFieldTypes
+            children: _supportedFieldTypes
-                  .map(
+                .map(
-                    (e) => _Field(
+                  (e) => _Field(
-                      type: e,
+                    type: e,
-                      onTap: () => onSelectFieldType(e),
+                    onTap: () => onSelectFieldType(e),
-                    ),
+                  ),
-                  )
+                )
-                  .toList(),
+                .toList(),
-            ),
           ),
-        ),
+        ],
-      ],
+      ),
     );
   }
 }
@@ -119,6 +120,9 @@ class _Field extends StatelessWidget {
           FlowyText(
             type.i18n,
             fontSize: 15.0,
+            textAlign: TextAlign.center,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
           ),
         ],
       ),
@@ -131,13 +135,13 @@ class _GridView extends StatelessWidget {
     required this.children,
     required this.crossAxisCount,
     required this.mainAxisSpacing,
-    required this.itemWidth,
+    required this.itemSize,
   });
 
   final List<Widget> children;
   final int crossAxisCount;
   final double mainAxisSpacing;
-  final double itemWidth;
+  final Size itemSize;
 
   @override
   Widget build(BuildContext context) {
@@ -148,9 +152,15 @@ class _GridView extends StatelessWidget {
             padding: EdgeInsets.only(bottom: mainAxisSpacing),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceAround,
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 for (var j = 0; j < crossAxisCount; j++)
-                  i + j < children.length ? children[i + j] : HSpace(itemWidth),
+                  i + j < children.length
+                      ? ConstrainedBox(
+                          constraints: BoxConstraints.tight(itemSize),
+                          child: children[i + j],
+                        )
+                      : SizedBox.fromSize(size: itemSize),
               ],
             ),
           ),

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart

@@ -33,8 +33,9 @@ class FieldOptionValues {
   FieldOptionValues({
     required this.type,
     required this.name,
-    this.dateFormate,
+    this.dateFormat,
     this.timeFormat,
+    this.includeTime,
     this.numberFormat,
     this.selectOption = const [],
   });
@@ -48,12 +49,26 @@ class FieldOptionValues {
       numberFormat: fieldType == FieldType.Number
           ? NumberTypeOptionPB.fromBuffer(buffer).format
           : null,
-      dateFormate: fieldType == FieldType.DateTime
+      dateFormat: switch (fieldType) {
-          ? DateTypeOptionPB.fromBuffer(buffer).dateFormat
+        FieldType.DateTime => DateTypeOptionPB.fromBuffer(buffer).dateFormat,
-          : null,
+        FieldType.LastEditedTime ||
-      timeFormat: fieldType == FieldType.DateTime
+        FieldType.CreatedTime =>
-          ? DateTypeOptionPB.fromBuffer(buffer).timeFormat
+          TimestampTypeOptionPB.fromBuffer(buffer).dateFormat,
-          : null,
+        _ => null
+      },
+      timeFormat: switch (fieldType) {
+        FieldType.DateTime => DateTypeOptionPB.fromBuffer(buffer).timeFormat,
+        FieldType.LastEditedTime ||
+        FieldType.CreatedTime =>
+          TimestampTypeOptionPB.fromBuffer(buffer).timeFormat,
+        _ => null
+      },
+      includeTime: switch (fieldType) {
+        FieldType.LastEditedTime ||
+        FieldType.CreatedTime =>
+          TimestampTypeOptionPB.fromBuffer(buffer).includeTime,
+        _ => null
+      },
       selectOption: switch (fieldType) {
         FieldType.SingleSelect =>
           SingleSelectTypeOptionPB.fromBuffer(buffer).options,
@@ -67,11 +82,17 @@ class FieldOptionValues {
   FieldType type;
   String name;
 
-  // FieldType.Date
+  // FieldType.DateTime
-  DateFormatPB? dateFormate;
+  // FieldType.LastEditedTime
+  // FieldType.CreatedTime
+  DateFormatPB? dateFormat;
   TimeFormatPB? timeFormat;
 
-  // FieldType.Num
+  // FieldType.LastEditedTime
+  // FieldType.CreatedTime
+  bool? includeTime;
+
+  // FieldType.Number
   NumberFormatPB? numberFormat;
 
   // FieldType.Select
@@ -103,7 +124,7 @@ class FieldOptionValues {
         ).writeToBuffer();
       case FieldType.DateTime:
         return DateTypeOptionPB(
-          dateFormat: dateFormate,
+          dateFormat: dateFormat,
           timeFormat: timeFormat,
         ).writeToBuffer();
       case FieldType.SingleSelect:
@@ -116,6 +137,13 @@ class FieldOptionValues {
         ).writeToBuffer();
       case FieldType.Checklist:
         return ChecklistTypeOptionPB().writeToBuffer();
+      case FieldType.LastEditedTime:
+      case FieldType.CreatedTime:
+        return TimestampTypeOptionPB(
+          dateFormat: dateFormat,
+          timeFormat: timeFormat,
+          includeTime: includeTime,
+        ).writeToBuffer();
       default:
         throw UnimplementedError();
     }
@@ -237,9 +265,9 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
       case FieldType.DateTime:
         return [
           _DateOption(
-            selectedFormat: values.dateFormate ?? DateFormatPB.Local,
+            selectedFormat: values.dateFormat ?? DateFormatPB.Local,
             onSelected: (format) => _updateOptionValues(
-              dateFormate: format,
+              dateFormat: format,
             ),
           ),
           const _Divider(),
@@ -250,6 +278,30 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
             ),
           ),
         ];
+      case FieldType.LastEditedTime:
+      case FieldType.CreatedTime:
+        return [
+          _DateOption(
+            selectedFormat: values.dateFormat ?? DateFormatPB.Local,
+            onSelected: (format) => _updateOptionValues(
+              dateFormat: format,
+            ),
+          ),
+          const _Divider(),
+          _TimeOption(
+            selectedFormat: values.timeFormat ?? TimeFormatPB.TwelveHour,
+            onSelected: (format) => _updateOptionValues(
+              timeFormat: format,
+            ),
+          ),
+          const _Divider(),
+          _IncludeTimeOption(
+            includeTime: values.includeTime ?? true,
+            onToggle: (includeTime) => _updateOptionValues(
+              includeTime: includeTime,
+            ),
+          ),
+        ];
       case FieldType.SingleSelect:
       case FieldType.MultiSelect:
         return [
@@ -321,8 +373,9 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
   void _updateOptionValues({
     FieldType? type,
     String? name,
-    DateFormatPB? dateFormate,
+    DateFormatPB? dateFormat,
     TimeFormatPB? timeFormat,
+    bool? includeTime,
     NumberFormatPB? numberFormat,
     List<SelectOptionPB>? selectOption,
   }) {
@@ -332,12 +385,15 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
     if (name != null) {
       values.name = name;
     }
-    if (dateFormate != null) {
+    if (dateFormat != null) {
-      values.dateFormate = dateFormate;
+      values.dateFormat = dateFormat;
     }
     if (timeFormat != null) {
       values.timeFormat = timeFormat;
     }
+    if (includeTime != null) {
+      values.includeTime = includeTime;
+    }
     if (numberFormat != null) {
       values.numberFormat = numberFormat;
     }
@@ -525,6 +581,37 @@ class _TimeOptionState extends State<_TimeOption> {
   }
 }
 
+class _IncludeTimeOption extends StatefulWidget {
+  const _IncludeTimeOption({
+    required this.includeTime,
+    required this.onToggle,
+  });
+
+  final bool includeTime;
+  final void Function(bool includeTime) onToggle;
+
+  @override
+  State<_IncludeTimeOption> createState() => _IncludeTimeOptionState();
+}
+
+class _IncludeTimeOptionState extends State<_IncludeTimeOption> {
+  late bool includeTime = widget.includeTime;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyOptionTile.toggle(
+      text: LocaleKeys.grid_field_includeTime.tr(),
+      isSelected: includeTime,
+      onValueChanged: (value) {
+        widget.onToggle(value);
+        setState(() {
+          includeTime = value;
+        });
+      },
+    );
+  }
+}
+
 class _NumberOption extends StatelessWidget {
   const _NumberOption({
     required this.selectedFormat,

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_timestamp_cell.dart

@@ -13,14 +13,13 @@ class MobileGridTimestampCellSkin extends IEditableTimestampCellSkin {
     TimestampCellBloc bloc,
     TimestampCellState state,
   ) {
-    return Align(
+    return Container(
       alignment: Alignment.centerLeft,
-      child: Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
-        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+      child: FlowyText(
-        child: FlowyText(
+        state.dateStr,
-          state.dateStr,
+        fontSize: 15,
-          fontSize: 15,
+        overflow: TextOverflow.ellipsis,
-        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/util/field_type_extension.dart

@@ -30,6 +30,8 @@ extension FieldTypeExtension on FieldType {
         FieldType.Checkbox => FlowySvgs.field_option_checkbox_xl,
         FieldType.Checklist => FlowySvgs.field_option_checklist_xl,
         FieldType.URL => FlowySvgs.field_option_url_xl,
+        FieldType.LastEditedTime => FlowySvgs.field_option_date_xl,
+        FieldType.CreatedTime => FlowySvgs.field_option_date_xl,
         _ => throw UnimplementedError(),
       };
 
@@ -42,6 +44,8 @@ extension FieldTypeExtension on FieldType {
         FieldType.Checkbox => FlowySvgs.field_option_checkbox_s,
         FieldType.URL => FlowySvgs.field_option_url_s,
         FieldType.Checklist => FlowySvgs.checklist_s,
+        FieldType.LastEditedTime => FlowySvgs.field_option_date_s,
+        FieldType.CreatedTime => FlowySvgs.field_option_date_s,
         _ => throw UnimplementedError(),
       };
 }

frontend/resources/translations/en.json

@@ -544,8 +544,8 @@
       "textFieldName": "Text",
       "checkboxFieldName": "Checkbox",
       "dateFieldName": "Date",
-      "updatedAtFieldName": "Last modified time",
+      "updatedAtFieldName": "Last modified",
-      "createdAtFieldName": "Created time",
+      "createdAtFieldName": "Created at",
       "numberFieldName": "Numbers",
       "singleSelectFieldName": "Select",
       "multiSelectFieldName": "Multiselect",
@@ -1231,4 +1231,4 @@
     "addField": "Add field",
     "userIcon": "User icon"
   }
-}
+}