From 645a07287efac6d24061737ee237970d60b8b55c Mon Sep 17 00:00:00 2001 From: mohammad Date: Thu, 10 Jul 2025 14:15:57 +0300 Subject: [PATCH] Refactor date selection: add SelectDateFromSidebarCalendar event and update state management for improved clarity --- .../date_selection/date_selection_bloc.dart | 23 ++++--- .../date_selection/date_selection_event.dart | 7 +- .../date_selection/date_selection_state.dart | 21 ++++-- .../presentation/view/booking_page.dart | 7 ++ .../view/widgets/weekly_calendar_page.dart | 64 ++++++++++++++----- 5 files changed, 91 insertions(+), 31 deletions(-) diff --git a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart index d6687087..8592433f 100644 --- a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart +++ b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart @@ -2,11 +2,12 @@ import 'package:bloc/bloc.dart'; import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart'; import 'date_selection_state.dart'; + class DateSelectionBloc extends Bloc { DateSelectionBloc() : super(DateSelectionState.initial()) { on((event, emit) { final newWeekStart = _getStartOfWeek(event.selectedDate); - emit(DateSelectionState( + emit(state.copyWith( selectedDate: event.selectedDate, weekStart: newWeekStart, )); @@ -14,19 +15,21 @@ class DateSelectionBloc extends Bloc { on((event, emit) { final newWeekStart = state.weekStart.add(const Duration(days: 7)); - final inNewWeek = state.selectedDate - .isAfter(newWeekStart.subtract(const Duration(days: 1))) && - state.selectedDate - .isBefore(newWeekStart.add(const Duration(days: 7))); - emit(DateSelectionState( - selectedDate: state.selectedDate, + emit(state.copyWith( weekStart: newWeekStart, )); }); + on((event, emit) { - emit(DateSelectionState( - selectedDate: state.selectedDate!.subtract(const Duration(days: 7)), - weekStart: state.weekStart.subtract(const Duration(days: 7)), + final newWeekStart = state.weekStart.subtract(const Duration(days: 7)); + emit(state.copyWith( + weekStart: newWeekStart, + )); + }); + + on((event, emit) { + emit(state.copyWith( + selectedDateFromSideBarCalender: event.selectedDate, )); }); } diff --git a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart index 8ed0a8a0..058c0db5 100644 --- a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart +++ b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart @@ -10,4 +10,9 @@ class SelectDate extends DateSelectionEvent { class NextWeek extends DateSelectionEvent {} -class PreviousWeek extends DateSelectionEvent {} \ No newline at end of file +class PreviousWeek extends DateSelectionEvent {} + +class SelectDateFromSidebarCalendar extends DateSelectionEvent { + final DateTime selectedDate; + SelectDateFromSidebarCalendar(this.selectedDate); +} \ No newline at end of file diff --git a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart index 3b35ce25..8c839c72 100644 --- a/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart +++ b/lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart @@ -1,21 +1,34 @@ + class DateSelectionState { final DateTime selectedDate; final DateTime weekStart; + final DateTime? selectedDateFromSideBarCalender; - const DateSelectionState({ + DateSelectionState({ required this.selectedDate, required this.weekStart, + this.selectedDateFromSideBarCalender, }); factory DateSelectionState.initial() { final now = DateTime.now(); + final weekStart = now.subtract(Duration(days: now.weekday - 1)); return DateSelectionState( selectedDate: now, - weekStart: _getStartOfWeek(now), + weekStart: weekStart, + selectedDateFromSideBarCalender: null, ); } - static DateTime _getStartOfWeek(DateTime date) { - return date.subtract(Duration(days: date.weekday - 1)); + DateSelectionState copyWith({ + DateTime? selectedDate, + DateTime? weekStart, + DateTime? selectedDateFromSideBarCalender, + }) { + return DateSelectionState( + selectedDate: selectedDate ?? this.selectedDate, + weekStart: weekStart ?? this.weekStart, + selectedDateFromSideBarCalender: selectedDateFromSideBarCalender ?? this.selectedDateFromSideBarCalender, + ); } } diff --git a/lib/pages/access_management/booking_system/presentation/view/booking_page.dart b/lib/pages/access_management/booking_system/presentation/view/booking_page.dart index c1c81ef4..357cac41 100644 --- a/lib/pages/access_management/booking_system/presentation/view/booking_page.dart +++ b/lib/pages/access_management/booking_system/presentation/view/booking_page.dart @@ -120,6 +120,9 @@ class _BookingPageState extends State { context .read() .add(SelectDate(newDate)); + context + .read() + .add(SelectDateFromSidebarCalendar(newDate)); }, ); }, @@ -227,6 +230,10 @@ class _BookingPageState extends State { weekStart: dateState.weekStart, selectedDate: dateState.selectedDate, eventController: _eventController, + selectedDateFromSideBarCalender: context + .watch() + .state + .selectedDateFromSideBarCalender, ); }, ); diff --git a/lib/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart b/lib/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart index 8a6d898f..5c38e2fc 100644 --- a/lib/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart +++ b/lib/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart @@ -9,6 +9,7 @@ class WeeklyCalendarPage extends StatelessWidget { final EventController eventController; final String? startTime; final String? endTime; + final DateTime? selectedDateFromSideBarCalender; const WeeklyCalendarPage({ super.key, @@ -17,32 +18,55 @@ class WeeklyCalendarPage extends StatelessWidget { required this.eventController, this.startTime, this.endTime, + this.selectedDateFromSideBarCalender, }); @override Widget build(BuildContext context) { final startHour = _parseHour(startTime, defaultValue: 0); final endHour = _parseHour(endTime, defaultValue: 24); + if (endTime == null || endTime!.isEmpty) { return const Center( - child: Text( - 'Please select a bookable space to view the calendar.', - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.calendar_today, + color: ColorsManager.lightGrayColor, + size: 80, + ), + SizedBox(height: 20), + Text( + 'Please select a bookable space to view the calendar.', + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: ColorsManager.lightGrayColor), + ), + ], ), ); } final weekDays = _getWeekDays(weekStart); + final selectedDayIndex = + weekDays.indexWhere((d) => isSameDay(d, selectedDate)); + final selectedSidebarIndex = selectedDateFromSideBarCalender == null + ? -1 + : weekDays + .indexWhere((d) => isSameDay(d, selectedDateFromSideBarCalender!)); + + const double timeLineWidth = 80; + const int totalDays = 7; + return LayoutBuilder( builder: (context, constraints) { final double calendarWidth = constraints.maxWidth; - const double timeLineWidth = 80; - const int totalDays = 7; final double dayColumnWidth = (calendarWidth - timeLineWidth) / totalDays - 0.1; - final selectedDayIndex = - weekDays.indexWhere((d) => isSameDay(d, selectedDate)); + return Padding( padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25), child: Stack( @@ -64,13 +88,8 @@ class WeeklyCalendarPage extends StatelessWidget { height: 0, ), weekDayBuilder: (date) { - final weekDays = _getWeekDays(weekStart); - final selectedDayIndex = - weekDays.indexWhere((d) => isSameDay(d, selectedDate)); final index = weekDays.indexWhere((d) => isSameDay(d, date)); final isSelectedDay = index == selectedDayIndex; - final isToday = isSameDay(date, DateTime.now()); - return Column( children: [ Text( @@ -138,10 +157,7 @@ class WeeklyCalendarPage extends StatelessWidget { weekPageHeaderBuilder: (start, end) => Container(), weekTitleHeight: 60, weekNumberBuilder: (firstDayOfWeek) => Padding( - padding: const EdgeInsets.only( - right: 15, - bottom: 10, - ), + padding: const EdgeInsets.only(right: 15, bottom: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end, @@ -219,6 +235,22 @@ class WeeklyCalendarPage extends StatelessWidget { ), ), ), + if (selectedSidebarIndex >= 0 && + selectedSidebarIndex != selectedDayIndex) + Positioned( + left: (timeLineWidth + 3) + + (dayColumnWidth - 8) * (selectedSidebarIndex - 0.01), + top: 0, + bottom: 0, + width: dayColumnWidth, + child: IgnorePointer( + child: Container( + margin: const EdgeInsets.symmetric( + vertical: 0, horizontal: 4), + color: Colors.orange.withOpacity(0.14), + ), + ), + ), Positioned( right: 0, top: 50,