Compare commits

..

3 Commits

Author SHA1 Message Date
21f8b2962c 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
2025-07-10 15:05:09 +03:00
645a07287e Refactor date selection: add SelectDateFromSidebarCalendar event and update state management for improved clarity 2025-07-10 14:15:57 +03:00
e55e793081 Implement-Calendar-ui (#342)
<!--
  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 Calendar ui

## 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
2025-07-10 12:13:40 +03:00
5 changed files with 91 additions and 31 deletions

View File

@ -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 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
import 'date_selection_state.dart'; import 'date_selection_state.dart';
class DateSelectionBloc extends Bloc<DateSelectionEvent, DateSelectionState> { class DateSelectionBloc extends Bloc<DateSelectionEvent, DateSelectionState> {
DateSelectionBloc() : super(DateSelectionState.initial()) { DateSelectionBloc() : super(DateSelectionState.initial()) {
on<SelectDate>((event, emit) { on<SelectDate>((event, emit) {
final newWeekStart = _getStartOfWeek(event.selectedDate); final newWeekStart = _getStartOfWeek(event.selectedDate);
emit(DateSelectionState( emit(state.copyWith(
selectedDate: event.selectedDate, selectedDate: event.selectedDate,
weekStart: newWeekStart, weekStart: newWeekStart,
)); ));
@ -14,19 +15,21 @@ class DateSelectionBloc extends Bloc<DateSelectionEvent, DateSelectionState> {
on<NextWeek>((event, emit) { on<NextWeek>((event, emit) {
final newWeekStart = state.weekStart.add(const Duration(days: 7)); 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, weekStart: newWeekStart,
)); ));
}); });
on<PreviousWeek>((event, emit) { 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,
)); ));
}); });
} }

View File

@ -10,4 +10,9 @@ class SelectDate extends DateSelectionEvent {
class NextWeek extends DateSelectionEvent {} class NextWeek extends DateSelectionEvent {}
class PreviousWeek extends DateSelectionEvent {} class PreviousWeek extends DateSelectionEvent {}
class SelectDateFromSidebarCalendar extends DateSelectionEvent {
final DateTime selectedDate;
SelectDateFromSidebarCalendar(this.selectedDate);
}

View File

@ -1,21 +1,34 @@
class DateSelectionState { class DateSelectionState {
final DateTime selectedDate; final DateTime selectedDate;
final DateTime weekStart; final DateTime weekStart;
final DateTime? selectedDateFromSideBarCalender;
const DateSelectionState({ DateSelectionState({
required this.selectedDate, required this.selectedDate,
required this.weekStart, required this.weekStart,
this.selectedDateFromSideBarCalender,
}); });
factory DateSelectionState.initial() { factory DateSelectionState.initial() {
final now = DateTime.now(); final now = DateTime.now();
final weekStart = now.subtract(Duration(days: now.weekday - 1));
return DateSelectionState( return DateSelectionState(
selectedDate: now, 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,
);
} }
} }

View File

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

View File

@ -9,6 +9,7 @@ class WeeklyCalendarPage extends StatelessWidget {
final EventController eventController; final EventController eventController;
final String? startTime; final String? startTime;
final String? endTime; final String? endTime;
final DateTime? selectedDateFromSideBarCalender;
const WeeklyCalendarPage({ const WeeklyCalendarPage({
super.key, super.key,
@ -17,32 +18,55 @@ class WeeklyCalendarPage extends StatelessWidget {
required this.eventController, required this.eventController,
this.startTime, this.startTime,
this.endTime, this.endTime,
this.selectedDateFromSideBarCalender,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final startHour = _parseHour(startTime, defaultValue: 0); final startHour = _parseHour(startTime, defaultValue: 0);
final endHour = _parseHour(endTime, defaultValue: 24); final endHour = _parseHour(endTime, defaultValue: 24);
if (endTime == null || endTime!.isEmpty) { if (endTime == null || endTime!.isEmpty) {
return const Center( 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 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( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final double calendarWidth = constraints.maxWidth; final double calendarWidth = constraints.maxWidth;
const double timeLineWidth = 80;
const int totalDays = 7;
final double dayColumnWidth = final double dayColumnWidth =
(calendarWidth - timeLineWidth) / totalDays - 0.1; (calendarWidth - timeLineWidth) / totalDays - 0.1;
final selectedDayIndex =
weekDays.indexWhere((d) => isSameDay(d, selectedDate));
return Padding( return Padding(
padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25), padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25),
child: Stack( child: Stack(
@ -64,13 +88,8 @@ class WeeklyCalendarPage extends StatelessWidget {
height: 0, height: 0,
), ),
weekDayBuilder: (date) { weekDayBuilder: (date) {
final weekDays = _getWeekDays(weekStart);
final selectedDayIndex =
weekDays.indexWhere((d) => isSameDay(d, selectedDate));
final index = weekDays.indexWhere((d) => isSameDay(d, date)); final index = weekDays.indexWhere((d) => isSameDay(d, date));
final isSelectedDay = index == selectedDayIndex; final isSelectedDay = index == selectedDayIndex;
final isToday = isSameDay(date, DateTime.now());
return Column( return Column(
children: [ children: [
Text( Text(
@ -138,10 +157,7 @@ class WeeklyCalendarPage extends StatelessWidget {
weekPageHeaderBuilder: (start, end) => Container(), weekPageHeaderBuilder: (start, end) => Container(),
weekTitleHeight: 60, weekTitleHeight: 60,
weekNumberBuilder: (firstDayOfWeek) => Padding( weekNumberBuilder: (firstDayOfWeek) => Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(right: 15, bottom: 10),
right: 15,
bottom: 10,
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.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( Positioned(
right: 0, right: 0,
top: 50, top: 50,