From 92703d536df311041476d61a42784f7d20230634 Mon Sep 17 00:00:00 2001 From: Freek van de Ven Date: Mon, 15 Jul 2024 16:12:33 +0200 Subject: [PATCH] feat: add combined template time/break section --- .../src/ui/models/view_template_daydata.dart | 52 ++++++++++++++ .../ui/screens/template_day_modification.dart | 69 +++---------------- .../src/ui/widgets/template_time_break.dart | 42 +++++++++++ 3 files changed, 103 insertions(+), 60 deletions(-) create mode 100644 packages/flutter_availability/lib/src/ui/models/view_template_daydata.dart create mode 100644 packages/flutter_availability/lib/src/ui/widgets/template_time_break.dart diff --git a/packages/flutter_availability/lib/src/ui/models/view_template_daydata.dart b/packages/flutter_availability/lib/src/ui/models/view_template_daydata.dart new file mode 100644 index 0000000..f59a142 --- /dev/null +++ b/packages/flutter_availability/lib/src/ui/models/view_template_daydata.dart @@ -0,0 +1,52 @@ +import "package:flutter/material.dart"; +import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart"; + +/// The data for creating or editing a day template +class ViewDayTemplateData { + /// Constructor + const ViewDayTemplateData({ + this.startTime, + this.endTime, + this.breaks = const [], + }); + + /// Create a new instance from a [DayTemplateData] + factory ViewDayTemplateData.fromDayTemplateData(DayTemplateData data) => + ViewDayTemplateData( + startTime: TimeOfDay.fromDateTime(data.startTime), + endTime: TimeOfDay.fromDateTime(data.endTime), + breaks: data.breaks, + ); + + /// The start time to apply on a new availability + final TimeOfDay? startTime; + + /// The start time to apply on a new availability + final TimeOfDay? endTime; + + /// A list of breaks to apply to every new availability + final List breaks; + + /// Whether the data is valid for saving + bool get isValid => startTime != null && endTime != null; + + /// Create a copy with new values + ViewDayTemplateData copyWith({ + TimeOfDay? startTime, + TimeOfDay? endTime, + List? breaks, + }) => + ViewDayTemplateData( + startTime: startTime ?? this.startTime, + endTime: endTime ?? this.endTime, + breaks: breaks ?? this.breaks, + ); + + /// Convert to [DayTemplateData] + DayTemplateData toDayTemplateData() => DayTemplateData( + startTime: + DateTime(0, 0, 0, startTime?.hour ?? 0, startTime?.minute ?? 0), + endTime: DateTime(0, 0, 0, endTime?.hour ?? 0, endTime?.minute ?? 0), + breaks: breaks, + ); +} diff --git a/packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart b/packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart index efc70ff..4573c9d 100644 --- a/packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart +++ b/packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart @@ -1,8 +1,8 @@ import "package:flutter/material.dart"; +import "package:flutter_availability/src/ui/models/view_template_daydata.dart"; import "package:flutter_availability/src/ui/widgets/color_selection.dart"; -import "package:flutter_availability/src/ui/widgets/pause_selection.dart"; import "package:flutter_availability/src/ui/widgets/template_name_input.dart"; -import "package:flutter_availability/src/ui/widgets/template_time_selection.dart"; +import "package:flutter_availability/src/ui/widgets/template_time_break.dart"; import "package:flutter_availability/src/util/scope.dart"; import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart"; @@ -102,54 +102,6 @@ class _DayTemplateModificationScreenState }, ); - var timeSection = TemplateTimeSelection( - key: ValueKey(_template.templateData), - // TODO(Joey): Extract this - startTime: TimeOfDay.fromDateTime( - (_template.templateData as DayTemplateData).startTime, - ), - // TODO(Joey): Extract this - endTime: TimeOfDay.fromDateTime( - (_template.templateData as DayTemplateData).endTime, - ), - // TODO(Joey): Extract this - onStartChanged: (start) { - var startTime = (_template.templateData as DayTemplateData).startTime; - var updatedStartTime = DateTime( - startTime.year, - startTime.month, - startTime.day, - start.hour, - start.minute, - ); - setState(() { - _template = _template.copyWith( - templateData: (_template.templateData as DayTemplateData).copyWith( - startTime: updatedStartTime, - ), - ); - }); - }, - // TODO(Joey): Extract this - onEndChanged: (end) { - var endTime = (_template.templateData as DayTemplateData).endTime; - var updatedEndTime = DateTime( - endTime.year, - endTime.month, - endTime.day, - end.hour, - end.minute, - ); - setState(() { - _template = _template.copyWith( - templateData: (_template.templateData as DayTemplateData).copyWith( - endTime: updatedEndTime, - ), - ); - }); - }, - ); - var colorSection = TemplateColorSelection( selectedColor: _selectedColor, // TODO(Joey): Extract this @@ -161,15 +113,14 @@ class _DayTemplateModificationScreenState }, ); - var pauseSection = PauseSelection( - breaks: (_template.templateData as DayTemplateData).breaks, - editingTemplate: true, - // TODO(Joey): Extrac this - onBreaksChanged: (breaks) { + var availabilitySection = TemplateTimeAndBreakSection( + dayData: ViewDayTemplateData.fromDayTemplateData( + _template.templateData as DayTemplateData, + ), + onDayDataChanged: (data) { setState(() { _template = _template.copyWith( - templateData: (_template.templateData as DayTemplateData) - .copyWith(breaks: breaks), + templateData: data.toDayTemplateData(), ); }); }, @@ -186,11 +137,9 @@ class _DayTemplateModificationScreenState const SizedBox(height: 24), templateTitleSection, const SizedBox(height: 24), - timeSection, + availabilitySection, const SizedBox(height: 24), colorSection, - const SizedBox(height: 24), - pauseSection, const SizedBox(height: 32), ], ), diff --git a/packages/flutter_availability/lib/src/ui/widgets/template_time_break.dart b/packages/flutter_availability/lib/src/ui/widgets/template_time_break.dart new file mode 100644 index 0000000..8680768 --- /dev/null +++ b/packages/flutter_availability/lib/src/ui/widgets/template_time_break.dart @@ -0,0 +1,42 @@ +import "package:flutter/material.dart"; +import "package:flutter_availability/src/ui/models/view_template_daydata.dart"; +import "package:flutter_availability/src/ui/widgets/pause_selection.dart"; +import "package:flutter_availability/src/ui/widgets/template_time_selection.dart"; + +/// Section for selecting the time and breaks for a single day +class TemplateTimeAndBreakSection extends StatelessWidget { + /// + const TemplateTimeAndBreakSection({ + required this.onDayDataChanged, + this.dayData = const ViewDayTemplateData(), + super.key, + }); + + /// The day data to display and edit + final ViewDayTemplateData dayData; + + /// Callback for when the day data changes + final void Function(ViewDayTemplateData data) onDayDataChanged; + + @override + Widget build(BuildContext context) => Column( + children: [ + TemplateTimeSelection( + key: ValueKey([dayData.startTime, dayData.endTime]), + startTime: dayData.startTime, + endTime: dayData.endTime, + onStartChanged: (start) => + onDayDataChanged(dayData.copyWith(startTime: start)), + onEndChanged: (end) => + onDayDataChanged(dayData.copyWith(endTime: end)), + ), + const SizedBox(height: 24), + PauseSelection( + editingTemplate: true, + breaks: dayData.breaks, + onBreaksChanged: (pauses) => + onDayDataChanged(dayData.copyWith(breaks: pauses)), + ), + ], + ); +}