fix: some issues with the end date (#3495)

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cal_bloc.dart

@@ -40,6 +40,8 @@ class DateCellCalendarBloc
           didReceiveCellUpdate: (DateCellDataPB? cellData) {
             final (dateTime, endDateTime, time, endTime, includeTime, isRange) =
                 _dateDataFromCellData(cellData);
+            final endDay =
+                isRange == state.isRange && isRange ? endDateTime : null;
             emit(
               state.copyWith(
                 dateTime: dateTime,
@@ -49,7 +51,7 @@ class DateCellCalendarBloc
                 includeTime: includeTime,
                 isRange: isRange,
                 startDay: isRange ? dateTime : null,
-                endDay: isRange ? endDateTime : null,
+                endDay: endDay,
               ),
             );
           },
@@ -78,7 +80,16 @@ class DateCellCalendarBloc
             await _updateDateData(time: time);
           },
           selectDateRange: (DateTime? start, DateTime? end) async {
-            if (end == null) {
+            if (end == null && state.startDay != null && state.endDay == null) {
+              final (newStart, newEnd) = state.startDay!.isBefore(start!)
+                  ? (state.startDay!, start)
+                  : (start, state.startDay!);
+              emit(state.copyWith(startDay: null, endDay: null));
+              await _updateDateData(
+                date: newStart.toLocal().date,
+                endDate: newEnd.toLocal().date,
+              );
+            } else if (end == null) {
               emit(state.copyWith(startDay: start, endDay: null));
             } else {
               await _updateDateData(
@@ -313,15 +324,22 @@ class DateCellCalendarEvent with _$DateCellCalendarEvent {
 @freezed
 class DateCellCalendarState with _$DateCellCalendarState {
   const factory DateCellCalendarState({
+    // the date field's type option
     required DateTypeOptionPB dateTypeOptionPB,
+
+    // used when selecting a date range
     required DateTime? startDay,
     required DateTime? endDay,
+
+    // cell data from the backend
     required DateTime? dateTime,
     required DateTime? endDateTime,
     required String? time,
     required String? endTime,
     required bool includeTime,
     required bool isRange,
+
+    // error and hint text
     required String? parseTimeError,
     required String? parseEndTimeError,
     required String timeHintText,
@@ -365,7 +383,7 @@ String _timeHintText(DateTypeOptionPB typeOption) {
   DateCellDataPB? cellData,
 ) {
   // a null DateCellDataPB may be returned, indicating that all the fields are
-  // at their default values: empty strings and false booleans
+  // their default values: empty strings and false booleans
   if (cellData == null) {
     return (null, null, null, null, false, false);
   }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart

@@ -106,30 +106,13 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
         cellData: widget.cellContext.getCellData(),
         cellController: widget.cellContext,
       )..add(const DateCellCalendarEvent.initial()),
-      child: BlocBuilder<DateCellCalendarBloc, DateCellCalendarState>(
-        builder: (context, state) {
-          final List<Widget> children = [
-            AnimatedSwitcher(
-              duration: const Duration(milliseconds: 300),
-              child: state.includeTime
-                  ? _TimeTextField(
-                      isEndTime: false,
-                      timeStr: state.time,
-                      popoverMutex: popoverMutex,
-                    )
-                  : const SizedBox.shrink(),
-            ),
-            if (state.includeTime && state.isRange) const VSpace(8.0),
-            AnimatedSwitcher(
-              duration: const Duration(milliseconds: 300),
-              child: state.includeTime && state.isRange
-                  ? _TimeTextField(
-                      isEndTime: true,
-                      timeStr: state.endTime,
-                      popoverMutex: popoverMutex,
-                    )
-                  : const SizedBox.shrink(),
-            ),
+      child: Padding(
+        padding: const EdgeInsets.only(top: 18.0, bottom: 12.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            StartTextField(popoverMutex: popoverMutex),
+            EndTextField(popoverMutex: popoverMutex),
             const DatePicker(),
             const TypeOptionSeparator(spacing: 12.0),
             const EndTimeButton(),
@@ -139,16 +122,8 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
             DateTypeOptionButton(popoverMutex: popoverMutex),
             const VSpace(4.0),
             const ClearDateButton(),
-          ];
-
-          return ListView.builder(
-            shrinkWrap: true,
-            controller: ScrollController(),
-            itemCount: children.length,
-            itemBuilder: (BuildContext context, int index) => children[index],
-            padding: const EdgeInsets.only(top: 18.0, bottom: 12.0),
-          );
-        },
+          ],
+        ),
       ),
     );
   }
@@ -160,6 +135,55 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
   }
 }
 
+class StartTextField extends StatelessWidget {
+  final PopoverMutex popoverMutex;
+  const StartTextField({super.key, required this.popoverMutex});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<DateCellCalendarBloc, DateCellCalendarState>(
+      builder: (context, state) {
+        return AnimatedSwitcher(
+          duration: const Duration(milliseconds: 300),
+          child: state.includeTime
+              ? _TimeTextField(
+                  isEndTime: false,
+                  timeStr: state.time,
+                  popoverMutex: popoverMutex,
+                )
+              : const SizedBox.shrink(),
+        );
+      },
+    );
+  }
+}
+
+class EndTextField extends StatelessWidget {
+  final PopoverMutex popoverMutex;
+  const EndTextField({super.key, required this.popoverMutex});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<DateCellCalendarBloc, DateCellCalendarState>(
+      builder: (context, state) {
+        return AnimatedSwitcher(
+          duration: const Duration(milliseconds: 300),
+          child: state.includeTime && state.isRange
+              ? Padding(
+                  padding: const EdgeInsets.only(top: 8.0),
+                  child: _TimeTextField(
+                    isEndTime: true,
+                    timeStr: state.endTime,
+                    popoverMutex: popoverMutex,
+                  ),
+                )
+              : const SizedBox.shrink(),
+        );
+      },
+    );
+  }
+}
+
 class DatePicker extends StatefulWidget {
   const DatePicker({super.key});
 
@@ -177,7 +201,7 @@ class _DatePickerState extends State<DatePicker> {
       builder: (context, state) {
         final textStyle = Theme.of(context).textTheme.bodyMedium!;
         final boxDecoration = BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
+          color: Theme.of(context).cardColor,
           shape: BoxShape.circle,
         );
         return Padding(