mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-11 07:38:05 +00:00
Compare commits
3 Commits
Implement-
...
dev
Author | SHA1 | Date | |
---|---|---|---|
21f8b2962c | |||
645a07287e | |||
e55e793081 |
@ -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,
|
||||||
));
|
));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
}
|
@ -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,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
@ -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,
|
||||||
|
Reference in New Issue
Block a user