Refactor date selection: add SelectDateFromSidebarCalendar event and … (#344)

…update state management for improved clarity

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->


## Description

<!--- Describe your changes in detail -->
implement highlighted selected day

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [x] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore

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<DateSelectionEvent, DateSelectionState> {
   DateSelectionBloc() : super(DateSelectionState.initial()) {
     on<SelectDate>((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<DateSelectionEvent, DateSelectionState> {
 
     on<NextWeek>((event, emit) {
       final newWeekStart = state.weekStart.add(const Duration(days: 7));
-      final inNewWeek = state.selectedDate
+      emit(state.copyWith(
-              .isAfter(newWeekStart.subtract(const Duration(days: 1))) &&
-          state.selectedDate
-              .isBefore(newWeekStart.add(const Duration(days: 7)));
-      emit(DateSelectionState(
-        selectedDate: state.selectedDate,
         weekStart: newWeekStart,
       ));
     });
+
     on<PreviousWeek>((event, emit) {
-      emit(DateSelectionState(
+      final newWeekStart = state.weekStart.subtract(const Duration(days: 7));
-        selectedDate: state.selectedDate!.subtract(const Duration(days: 7)),
+      emit(state.copyWith(
-        weekStart: state.weekStart.subtract(const Duration(days: 7)),
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<SelectDateFromSidebarCalendar>((event, emit) {
+      emit(state.copyWith(
+        selectedDateFromSideBarCalender: event.selectedDate,
       ));
     });
   }

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 {}
+class PreviousWeek extends DateSelectionEvent {}
+
+class SelectDateFromSidebarCalendar extends DateSelectionEvent {
+  final DateTime selectedDate;
+  SelectDateFromSidebarCalendar(this.selectedDate);
+}

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) {
+  DateSelectionState copyWith({
-    return date.subtract(Duration(days: date.weekday - 1));
+    DateTime? selectedDate,
+    DateTime? weekStart,
+    DateTime? selectedDateFromSideBarCalender,
+  }) {
+    return DateSelectionState(
+      selectedDate: selectedDate ?? this.selectedDate,
+      weekStart: weekStart ?? this.weekStart,
+      selectedDateFromSideBarCalender: selectedDateFromSideBarCalender ?? this.selectedDateFromSideBarCalender,
+    );
   }
 }

lib/pages/access_management/booking_system/presentation/view/booking_page.dart

@@ -120,6 +120,9 @@ class _BookingPageState extends State<BookingPage> {
                               context
                                   .read<DateSelectionBloc>()
                                   .add(SelectDate(newDate));
+                              context
+                                  .read<DateSelectionBloc>()
+                                  .add(SelectDateFromSidebarCalendar(newDate));
                             },
                           );
                         },
@@ -227,6 +230,10 @@ class _BookingPageState extends State<BookingPage> {
                                 weekStart: dateState.weekStart,
                                 selectedDate: dateState.selectedDate,
                                 eventController: _eventController,
+                                selectedDateFromSideBarCalender: context
+                                    .watch<DateSelectionBloc>()
+                                    .state
+                                    .selectedDateFromSideBarCalender,
                               );
                             },
                           );

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(
+        child: Column(
-          'Please select a bookable space to view the calendar.',
+          mainAxisAlignment: MainAxisAlignment.center,
-          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
+          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(
+                  padding: const EdgeInsets.only(right: 15, bottom: 10),
-                    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,