feat(cat-voices): Date & Time input widget

.config/dictionaries/project.dic

@@ -22,6 +22,7 @@ auditability
 Autolayout
 autorecalculates
 autoresizing
+autovalidate
 backendpython
 bech
 bimap

catalyst_voices/.gitignore

@@ -1,5 +1,6 @@
 ### Dart ###
 # See https://www.dartlang.org/guides/libraries/private-files
+devtools_options.yaml
 
 
 # Generated files from code generation tools

catalyst_voices/apps/voices/lib/common/ext/time_of_day_ext.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+extension TimeOfDayExt on TimeOfDay {
+  String get formatted {
+    final hour = this.hour.toString().padLeft(2, '0');
+    final minute = this.minute.toString().padLeft(2, '0');
+
+    return '$hour:$minute';
+  }
+}

catalyst_voices/apps/voices/lib/widgets/pickers/voices_calendar_picker.dart

@@ -0,0 +1,93 @@
+import 'package:catalyst_voices/widgets/buttons/voices_text_button.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class VoicesCalendarDatePicker extends StatefulWidget {
+  final ValueChanged<DateTime> onDateSelected;
+  final VoidCallback cancelEvent;
+  final DateTime initialDate;
+  final DateTime firstDate;
+  final DateTime lastDate;
+
+  factory VoicesCalendarDatePicker({
+    Key? key,
+    required ValueChanged<DateTime> onDateSelected,
+    required VoidCallback cancelEvent,
+    DateTime? initialDate,
+    DateTime? firstDate,
+    DateTime? lastDate,
+  }) {
+    final now = DateTime.now();
+    return VoicesCalendarDatePicker._(
+      key: key,
+      onDateSelected: onDateSelected,
+      initialDate: initialDate ?? now,
+      firstDate: firstDate ?? now,
+      lastDate: lastDate ?? DateTime(now.year + 1, now.month, now.day),
+      cancelEvent: cancelEvent,
+    );
+  }
+
+  const VoicesCalendarDatePicker._({
+    super.key,
+    required this.onDateSelected,
+    required this.initialDate,
+    required this.firstDate,
+    required this.lastDate,
+    required this.cancelEvent,
+  });
+
+  @override
+  State<VoicesCalendarDatePicker> createState() =>
+      _VoicesCalendarDatePickerState();
+}
+
+class _VoicesCalendarDatePickerState extends State<VoicesCalendarDatePicker> {
+  DateTime selectedDate = DateTime.now();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 450,
+      child: Material(
+        clipBehavior: Clip.hardEdge,
+        color: Colors.transparent,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: Theme.of(context).colors.elevationsOnSurfaceNeutralLv1Grey,
+            borderRadius: BorderRadius.circular(20),
+          ),
+          child: Column(
+            children: [
+              CalendarDatePicker(
+                initialDate: widget.initialDate,
+                firstDate: widget.firstDate,
+                lastDate: widget.lastDate,
+                onDateChanged: (val) {
+                  selectedDate = val;
+                },
+              ),
+              Padding(
+                padding: const EdgeInsets.all(8),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    VoicesTextButton(
+                      onTap: widget.cancelEvent,
+                      child: Text(context.l10n.cancelButtonText),
+                    ),
+                    VoicesTextButton(
+                      onTap: () => widget.onDateSelected(selectedDate),
+                      child: Text(context.l10n.ok.toUpperCase()),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/apps/voices/lib/widgets/pickers/voices_time_picker.dart

@@ -0,0 +1,141 @@
+import 'package:catalyst_voices/common/ext/time_of_day_ext.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:flutter/material.dart';
+
+class VoicesTimePicker extends StatefulWidget {
+  final ValueChanged<TimeOfDay> onTap;
+  final TimeOfDay? selectedTime;
+  final String? timeZone;
+
+  const VoicesTimePicker({
+    super.key,
+    required this.onTap,
+    this.selectedTime,
+    this.timeZone,
+  });
+
+  @override
+  State<VoicesTimePicker> createState() => _VoicesTimePickerState();
+}
+
+class _VoicesTimePickerState extends State<VoicesTimePicker> {
+  late final ScrollController _scrollController;
+  late final List<TimeOfDay> _timeList;
+
+  final double itemExtent = 40;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _timeList = _generateTimeList();
+    _scrollController = ScrollController();
+
+    final initialSelection = widget.selectedTime;
+    if (initialSelection != null) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _scrollToTime(initialSelection);
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      type: MaterialType.transparency,
+      clipBehavior: Clip.hardEdge,
+      child: Container(
+        height: 350,
+        width: 150,
+        decoration: BoxDecoration(
+          color: Theme.of(context).colors.elevationsOnSurfaceNeutralLv1Grey,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        child: ListView.builder(
+          controller: _scrollController,
+          itemExtent: itemExtent,
+          itemCount: _timeList.length,
+          itemBuilder: (context, index) {
+            final timeOfDay = _timeList[index];
+
+            return _TimeText(
+              key: ValueKey(timeOfDay.formatted),
+              value: timeOfDay,
+              onTap: widget.onTap,
+              isSelected: timeOfDay == widget.selectedTime,
+              timeZone: widget.timeZone,
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  void _scrollToTime(TimeOfDay value) {
+    final index = _timeList.indexWhere((e) => e == widget.selectedTime);
+
+    if (index != -1) {
+      _scrollController.jumpTo(index * itemExtent);
+    }
+  }
+
+  List<TimeOfDay> _generateTimeList() {
+    return [
+      for (var hour = 0; hour < 24; hour++)
+        for (final minute in [0, 30]) TimeOfDay(hour: hour, minute: minute),
+    ];
+  }
+}
+
+class _TimeText extends StatelessWidget {
+  final ValueChanged<TimeOfDay> onTap;
+  final TimeOfDay value;
+  final bool isSelected;
+  final String? timeZone;
+
+  const _TimeText({
+    super.key,
+    required this.value,
+    required this.onTap,
+    this.isSelected = false,
+    this.timeZone,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final timeZone = this.timeZone;
+
+    return Material(
+      clipBehavior: Clip.hardEdge,
+      type: MaterialType.transparency,
+      child: InkWell(
+        onTap: () => onTap(value),
+        child: ColoredBox(
+          color: !isSelected
+              ? Colors.transparent
+              : Theme.of(context).colors.onSurfaceNeutral08!,
+          child: Padding(
+            key: key,
+            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  value.formatted,
+                  style: Theme.of(context).textTheme.bodyLarge,
+                ),
+                if (isSelected && timeZone != null) Text(timeZone),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}