feat: Add recurring order form components including date picker, event name input, header, position card, section header, success view, and main view logic
- Implemented RecurringOrderDatePicker for selecting start and end dates. - Created RecurringOrderEventNameInput for entering the order name. - Developed RecurringOrderHeader for displaying the title and subtitle with a back button. - Added RecurringOrderPositionCard for editing individual positions in the order. - Introduced RecurringOrderSectionHeader for section titles with optional action buttons. - Built RecurringOrderSuccessView to show a success message after order creation. - Integrated all components into RecurringOrderView to manage the overall order creation flow.
This commit is contained in:
Achintha Isuru
@@ -0,0 +1,30 @@
|
|||||||
|
// UI Models
|
||||||
|
export 'src/presentation/widgets/order_ui_models.dart';
|
||||||
|
|
||||||
|
// One Time Order Widgets
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_date_picker.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_event_name_input.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_header.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_location_input.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_position_card.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_section_header.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_success_view.dart';
|
||||||
|
export 'src/presentation/widgets/one_time_order/one_time_order_view.dart';
|
||||||
|
|
||||||
|
// Permanent Order Widgets
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_date_picker.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_event_name_input.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_header.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_position_card.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_section_header.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_success_view.dart';
|
||||||
|
export 'src/presentation/widgets/permanent_order/permanent_order_view.dart';
|
||||||
|
|
||||||
|
// Recurring Order Widgets
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_date_picker.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_event_name_input.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_header.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_position_card.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_section_header.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_success_view.dart';
|
||||||
|
export 'src/presentation/widgets/recurring_order/recurring_order_view.dart';
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
/// A date picker field for the one-time order form.
|
||||||
|
/// Matches the prototype input field style.
|
||||||
|
class OneTimeOrderDatePicker extends StatefulWidget {
|
||||||
|
/// Creates a [OneTimeOrderDatePicker].
|
||||||
|
const OneTimeOrderDatePicker({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The label text to display above the field.
|
||||||
|
final String label;
|
||||||
|
|
||||||
|
/// The currently selected date.
|
||||||
|
final DateTime value;
|
||||||
|
|
||||||
|
/// Callback when a new date is selected.
|
||||||
|
final ValueChanged<DateTime> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<OneTimeOrderDatePicker> createState() => _OneTimeOrderDatePickerState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _OneTimeOrderDatePickerState extends State<OneTimeOrderDatePicker> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(
|
||||||
|
text: DateFormat('yyyy-MM-dd').format(widget.value),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(OneTimeOrderDatePicker oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != oldWidget.value) {
|
||||||
|
_controller.text = DateFormat('yyyy-MM-dd').format(widget.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
readOnly: true,
|
||||||
|
prefixIcon: UiIcons.calendar,
|
||||||
|
onTap: () async {
|
||||||
|
final DateTime? picked = await showDatePicker(
|
||||||
|
context: context,
|
||||||
|
initialDate: widget.value,
|
||||||
|
firstDate: DateTime.now(),
|
||||||
|
lastDate: DateTime.now().add(const Duration(days: 365)),
|
||||||
|
);
|
||||||
|
if (picked != null) {
|
||||||
|
widget.onChanged(picked);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A text input for the order name in the one-time order form.
|
||||||
|
class OneTimeOrderEventNameInput extends StatefulWidget {
|
||||||
|
const OneTimeOrderEventNameInput({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String label;
|
||||||
|
final String value;
|
||||||
|
final ValueChanged<String> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<OneTimeOrderEventNameInput> createState() =>
|
||||||
|
_OneTimeOrderEventNameInputState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _OneTimeOrderEventNameInputState
|
||||||
|
extends State<OneTimeOrderEventNameInput> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(text: widget.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(OneTimeOrderEventNameInput oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != _controller.text) {
|
||||||
|
_controller.text = widget.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
onChanged: widget.onChanged,
|
||||||
|
hintText: 'Order name',
|
||||||
|
prefixIcon: UiIcons.briefcase,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for the one-time order flow with a colored background.
|
||||||
|
class OneTimeOrderHeader extends StatelessWidget {
|
||||||
|
/// Creates a [OneTimeOrderHeader].
|
||||||
|
const OneTimeOrderHeader({
|
||||||
|
required this.title,
|
||||||
|
required this.subtitle,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the page.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The subtitle or description.
|
||||||
|
final String subtitle;
|
||||||
|
|
||||||
|
/// Callback when the back button is pressed.
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
top: MediaQuery.of(context).padding.top + UiConstants.space5,
|
||||||
|
bottom: UiConstants.space5,
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
),
|
||||||
|
color: UiColors.primary,
|
||||||
|
child: Row(
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onBack,
|
||||||
|
child: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.2),
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
UiIcons.chevronLeft,
|
||||||
|
color: UiColors.white,
|
||||||
|
size: 24,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space3),
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline3m.copyWith(color: UiColors.white),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
subtitle,
|
||||||
|
style: UiTypography.footnote2r.copyWith(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A location input field for the one-time order form.
|
||||||
|
/// Matches the prototype input field style.
|
||||||
|
class OneTimeOrderLocationInput extends StatefulWidget {
|
||||||
|
/// Creates a [OneTimeOrderLocationInput].
|
||||||
|
const OneTimeOrderLocationInput({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The label text to display above the field.
|
||||||
|
final String label;
|
||||||
|
|
||||||
|
/// The current location value.
|
||||||
|
final String value;
|
||||||
|
|
||||||
|
/// Callback when the location value changes.
|
||||||
|
final ValueChanged<String> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<OneTimeOrderLocationInput> createState() =>
|
||||||
|
_OneTimeOrderLocationInputState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _OneTimeOrderLocationInputState extends State<OneTimeOrderLocationInput> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(text: widget.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(OneTimeOrderLocationInput oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != _controller.text) {
|
||||||
|
_controller.text = widget.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
onChanged: widget.onChanged,
|
||||||
|
hintText: 'Enter address',
|
||||||
|
prefixIcon: UiIcons.mapPin,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,322 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
|
||||||
|
/// A card widget for editing a specific position in a one-time order.
|
||||||
|
class OneTimeOrderPositionCard extends StatelessWidget {
|
||||||
|
const OneTimeOrderPositionCard({
|
||||||
|
required this.index,
|
||||||
|
required this.position,
|
||||||
|
required this.isRemovable,
|
||||||
|
required this.onUpdated,
|
||||||
|
required this.onRemoved,
|
||||||
|
required this.positionLabel,
|
||||||
|
required this.roleLabel,
|
||||||
|
required this.workersLabel,
|
||||||
|
required this.startLabel,
|
||||||
|
required this.endLabel,
|
||||||
|
required this.lunchLabel,
|
||||||
|
required this.roles,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final int index;
|
||||||
|
final OrderPositionUiModel position;
|
||||||
|
final bool isRemovable;
|
||||||
|
final ValueChanged<OrderPositionUiModel> onUpdated;
|
||||||
|
final VoidCallback onRemoved;
|
||||||
|
final String positionLabel;
|
||||||
|
final String roleLabel;
|
||||||
|
final String workersLabel;
|
||||||
|
final String startLabel;
|
||||||
|
final String endLabel;
|
||||||
|
final String lunchLabel;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space4),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
'$positionLabel #${index + 1}',
|
||||||
|
style: UiTypography.footnote1m.textSecondary,
|
||||||
|
),
|
||||||
|
if (isRemovable)
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onRemoved,
|
||||||
|
child: Text(
|
||||||
|
t.client_create_order.one_time.remove,
|
||||||
|
style: UiTypography.footnote1m.copyWith(
|
||||||
|
color: UiColors.destructive,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Role (Dropdown)
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
hint: Text(
|
||||||
|
roleLabel,
|
||||||
|
style: UiTypography.body2r.textPlaceholder,
|
||||||
|
),
|
||||||
|
value: position.role.isEmpty ? null : position.role,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(role: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: _buildRoleItems(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Start/End/Workers Row
|
||||||
|
Row(
|
||||||
|
children: <Widget>[
|
||||||
|
// Start Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: startLabel,
|
||||||
|
value: position.startTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(startTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// End Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: endLabel,
|
||||||
|
value: position.endTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(endTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// Workers Count
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
workersLabel,
|
||||||
|
style: UiTypography.footnote2r.textSecondary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.bgSecondary,
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
if (position.count > 1) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count - 1),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.minus, size: 12),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'${position.count}',
|
||||||
|
style: UiTypography.body2b.textPrimary,
|
||||||
|
),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count + 1),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.add, size: 12),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Lunch Break
|
||||||
|
Text(lunchLabel, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: position.lunchBreak,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(lunchBreak: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: <String>[
|
||||||
|
'NO_BREAK',
|
||||||
|
'MIN_10',
|
||||||
|
'MIN_15',
|
||||||
|
'MIN_30',
|
||||||
|
'MIN_45',
|
||||||
|
'MIN_60',
|
||||||
|
].map((String value) {
|
||||||
|
final String label = switch (value) {
|
||||||
|
'NO_BREAK' => 'No Break',
|
||||||
|
'MIN_10' => '10 min (Paid)',
|
||||||
|
'MIN_15' => '15 min (Paid)',
|
||||||
|
'MIN_30' => '30 min (Unpaid)',
|
||||||
|
'MIN_45' => '45 min (Unpaid)',
|
||||||
|
'MIN_60' => '60 min (Unpaid)',
|
||||||
|
_ => value,
|
||||||
|
};
|
||||||
|
return DropdownMenuItem<String>(
|
||||||
|
value: value,
|
||||||
|
child: Text(
|
||||||
|
label,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildTimeInput({
|
||||||
|
required BuildContext context,
|
||||||
|
required String label,
|
||||||
|
required String value,
|
||||||
|
required VoidCallback onTap,
|
||||||
|
}) {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(label, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: Container(
|
||||||
|
height: 40,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
value.isEmpty ? '--:--' : value,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
const Icon(
|
||||||
|
UiIcons.clock,
|
||||||
|
size: 14,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
List<DropdownMenuItem<String>> _buildRoleItems() {
|
||||||
|
final List<DropdownMenuItem<String>> items = roles
|
||||||
|
.map(
|
||||||
|
(OrderRoleUiModel role) => DropdownMenuItem<String>(
|
||||||
|
value: role.id,
|
||||||
|
child: Text(
|
||||||
|
'${role.name} - \$${role.costPerHour.toStringAsFixed(0)}',
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
final bool hasSelected =
|
||||||
|
roles.any((OrderRoleUiModel role) => role.id == position.role);
|
||||||
|
if (position.role.isNotEmpty && !hasSelected) {
|
||||||
|
items.add(
|
||||||
|
DropdownMenuItem<String>(
|
||||||
|
value: position.role,
|
||||||
|
child: Text(
|
||||||
|
position.role,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for sections in the one-time order form.
|
||||||
|
class OneTimeOrderSectionHeader extends StatelessWidget {
|
||||||
|
/// Creates a [OneTimeOrderSectionHeader].
|
||||||
|
const OneTimeOrderSectionHeader({
|
||||||
|
required this.title,
|
||||||
|
this.actionLabel,
|
||||||
|
this.onAction,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title text for the section.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// Optional label for an action button on the right.
|
||||||
|
final String? actionLabel;
|
||||||
|
|
||||||
|
/// Callback when the action button is tapped.
|
||||||
|
final VoidCallback? onAction;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(title, style: UiTypography.headline4m.textPrimary),
|
||||||
|
if (actionLabel != null && onAction != null)
|
||||||
|
TextButton(
|
||||||
|
onPressed: onAction,
|
||||||
|
style: TextButton.styleFrom(
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
minimumSize: Size.zero,
|
||||||
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(UiIcons.add, size: 16, color: UiColors.primary),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
actionLabel!,
|
||||||
|
style: UiTypography.body2m.primary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A view to display when a one-time order has been successfully created.
|
||||||
|
/// Matches the prototype success view layout with a gradient background and centered card.
|
||||||
|
class OneTimeOrderSuccessView extends StatelessWidget {
|
||||||
|
/// Creates a [OneTimeOrderSuccessView].
|
||||||
|
const OneTimeOrderSuccessView({
|
||||||
|
required this.title,
|
||||||
|
required this.message,
|
||||||
|
required this.buttonLabel,
|
||||||
|
required this.onDone,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the success message.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The body of the success message.
|
||||||
|
final String message;
|
||||||
|
|
||||||
|
/// Label for the completion button.
|
||||||
|
final String buttonLabel;
|
||||||
|
|
||||||
|
/// Callback when the completion button is tapped.
|
||||||
|
final VoidCallback onDone;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
colors: <Color>[UiColors.primary, UiColors.buttonPrimaryHover],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: Container(
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: UiConstants.space10),
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space8),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg * 1.5,
|
||||||
|
boxShadow: <BoxShadow>[
|
||||||
|
BoxShadow(
|
||||||
|
color: UiColors.black.withValues(alpha: 0.2),
|
||||||
|
blurRadius: 20,
|
||||||
|
offset: const Offset(0, UiConstants.space2 + 2),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
width: UiConstants.space16,
|
||||||
|
height: UiConstants.space16,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.accent,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
|
||||||
|
|
||||||
|
child: const Center(
|
||||||
|
child: Icon(
|
||||||
|
UiIcons.check,
|
||||||
|
color: UiColors.black,
|
||||||
|
size: UiConstants.space8,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline2m.textPrimary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
Text(
|
||||||
|
message,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: UiTypography.body2r.textSecondary.copyWith(
|
||||||
|
height: 1.5,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space8),
|
||||||
|
SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: buttonLabel,
|
||||||
|
onPressed: onDone,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,388 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:krow_domain/krow_domain.dart';
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
import 'one_time_order_date_picker.dart';
|
||||||
|
import 'one_time_order_event_name_input.dart';
|
||||||
|
import 'one_time_order_header.dart';
|
||||||
|
import 'one_time_order_position_card.dart';
|
||||||
|
import 'one_time_order_section_header.dart';
|
||||||
|
import 'one_time_order_success_view.dart';
|
||||||
|
|
||||||
|
/// The main content of the One-Time Order page as a dumb widget.
|
||||||
|
class OneTimeOrderView extends StatelessWidget {
|
||||||
|
const OneTimeOrderView({
|
||||||
|
required this.status,
|
||||||
|
required this.errorMessage,
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.date,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.isValid,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onDateChanged,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
required this.onSubmit,
|
||||||
|
required this.onDone,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final OrderFormStatus status;
|
||||||
|
final String? errorMessage;
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime date;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
final bool isValid;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onDateChanged;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
final VoidCallback onSubmit;
|
||||||
|
final VoidCallback onDone;
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn labels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
// React to error messages
|
||||||
|
if (status == OrderFormStatus.failure && errorMessage != null) {
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
UiSnackbar.show(
|
||||||
|
context,
|
||||||
|
message: translateErrorKey(errorMessage!),
|
||||||
|
type: UiSnackbarType.error,
|
||||||
|
margin: const EdgeInsets.only(bottom: 140, left: 16, right: 16),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status == OrderFormStatus.success) {
|
||||||
|
return OneTimeOrderSuccessView(
|
||||||
|
title: labels.success_title,
|
||||||
|
message: labels.success_message,
|
||||||
|
buttonLabel: labels.back_to_orders,
|
||||||
|
onDone: onDone,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vendors.isEmpty && status != OrderFormStatus.loading) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
OneTimeOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(
|
||||||
|
UiIcons.search,
|
||||||
|
size: 64,
|
||||||
|
color: UiColors.iconInactive,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
Text(
|
||||||
|
'No Vendors Available',
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
'There are no staffing vendors associated with your account.',
|
||||||
|
style: UiTypography.body2r.textSecondary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
OneTimeOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Stack(
|
||||||
|
children: <Widget>[
|
||||||
|
_OneTimeOrderForm(
|
||||||
|
eventName: eventName,
|
||||||
|
selectedVendor: selectedVendor,
|
||||||
|
vendors: vendors,
|
||||||
|
date: date,
|
||||||
|
selectedHub: selectedHub,
|
||||||
|
hubs: hubs,
|
||||||
|
positions: positions,
|
||||||
|
roles: roles,
|
||||||
|
onEventNameChanged: onEventNameChanged,
|
||||||
|
onVendorChanged: onVendorChanged,
|
||||||
|
onDateChanged: onDateChanged,
|
||||||
|
onHubChanged: onHubChanged,
|
||||||
|
onPositionAdded: onPositionAdded,
|
||||||
|
onPositionUpdated: onPositionUpdated,
|
||||||
|
onPositionRemoved: onPositionRemoved,
|
||||||
|
),
|
||||||
|
if (status == OrderFormStatus.loading)
|
||||||
|
const Center(child: CircularProgressIndicator()),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
_BottomActionButton(
|
||||||
|
label: status == OrderFormStatus.loading
|
||||||
|
? labels.creating
|
||||||
|
: labels.create_order,
|
||||||
|
isLoading: status == OrderFormStatus.loading,
|
||||||
|
onPressed: isValid ? onSubmit : null,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _OneTimeOrderForm extends StatelessWidget {
|
||||||
|
const _OneTimeOrderForm({
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.date,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onDateChanged,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime date;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onDateChanged;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn labels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
return ListView(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space5),
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
labels.create_your_order,
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
OneTimeOrderEventNameInput(
|
||||||
|
label: 'ORDER NAME',
|
||||||
|
value: eventName,
|
||||||
|
onChanged: onEventNameChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Vendor Selection
|
||||||
|
Text('SELECT VENDOR', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<Vendor>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedVendor,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (Vendor? vendor) {
|
||||||
|
if (vendor != null) {
|
||||||
|
onVendorChanged(vendor);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: vendors.map((Vendor vendor) {
|
||||||
|
return DropdownMenuItem<Vendor>(
|
||||||
|
value: vendor,
|
||||||
|
child: Text(
|
||||||
|
vendor.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
OneTimeOrderDatePicker(
|
||||||
|
label: labels.date_label,
|
||||||
|
value: date,
|
||||||
|
onChanged: onDateChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
Text('HUB', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<OrderHubUiModel>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedHub,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (OrderHubUiModel? hub) {
|
||||||
|
if (hub != null) {
|
||||||
|
onHubChanged(hub);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: hubs.map((OrderHubUiModel hub) {
|
||||||
|
return DropdownMenuItem<OrderHubUiModel>(
|
||||||
|
value: hub,
|
||||||
|
child: Text(
|
||||||
|
hub.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
|
||||||
|
OneTimeOrderSectionHeader(
|
||||||
|
title: labels.positions_title,
|
||||||
|
actionLabel: labels.add_position,
|
||||||
|
onAction: onPositionAdded,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Positions List
|
||||||
|
...positions.asMap().entries.map((
|
||||||
|
MapEntry<int, OrderPositionUiModel> entry,
|
||||||
|
) {
|
||||||
|
final int index = entry.key;
|
||||||
|
final OrderPositionUiModel position = entry.value;
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: UiConstants.space3),
|
||||||
|
child: OneTimeOrderPositionCard(
|
||||||
|
index: index,
|
||||||
|
position: position,
|
||||||
|
isRemovable: positions.length > 1,
|
||||||
|
positionLabel: labels.positions_title,
|
||||||
|
roleLabel: labels.select_role,
|
||||||
|
workersLabel: labels.workers_label,
|
||||||
|
startLabel: labels.start_label,
|
||||||
|
endLabel: labels.end_label,
|
||||||
|
lunchLabel: labels.lunch_break_label,
|
||||||
|
roles: roles,
|
||||||
|
onUpdated: (OrderPositionUiModel updated) {
|
||||||
|
onPositionUpdated(index, updated);
|
||||||
|
},
|
||||||
|
onRemoved: () {
|
||||||
|
onPositionRemoved(index);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BottomActionButton extends StatelessWidget {
|
||||||
|
const _BottomActionButton({
|
||||||
|
required this.label,
|
||||||
|
required this.onPressed,
|
||||||
|
this.isLoading = false,
|
||||||
|
});
|
||||||
|
final String label;
|
||||||
|
final VoidCallback? onPressed;
|
||||||
|
final bool isLoading;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
top: UiConstants.space5,
|
||||||
|
bottom: MediaQuery.of(context).padding.bottom + UiConstants.space5,
|
||||||
|
),
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
border: Border(top: BorderSide(color: UiColors.border)),
|
||||||
|
),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: label,
|
||||||
|
onPressed: isLoading ? null : onPressed,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import 'package:equatable/equatable.dart';
|
||||||
|
|
||||||
|
enum OrderFormStatus { initial, loading, success, failure }
|
||||||
|
|
||||||
|
class OrderHubUiModel extends Equatable {
|
||||||
|
const OrderHubUiModel({
|
||||||
|
required this.id,
|
||||||
|
required this.name,
|
||||||
|
required this.address,
|
||||||
|
this.placeId,
|
||||||
|
this.latitude,
|
||||||
|
this.longitude,
|
||||||
|
this.city,
|
||||||
|
this.state,
|
||||||
|
this.street,
|
||||||
|
this.country,
|
||||||
|
this.zipCode,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String id;
|
||||||
|
final String name;
|
||||||
|
final String address;
|
||||||
|
final String? placeId;
|
||||||
|
final double? latitude;
|
||||||
|
final double? longitude;
|
||||||
|
final String? city;
|
||||||
|
final String? state;
|
||||||
|
final String? street;
|
||||||
|
final String? country;
|
||||||
|
final String? zipCode;
|
||||||
|
|
||||||
|
@override
|
||||||
|
List<Object?> get props => <Object?>[
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
address,
|
||||||
|
placeId,
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
city,
|
||||||
|
state,
|
||||||
|
street,
|
||||||
|
country,
|
||||||
|
zipCode,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
class OrderRoleUiModel extends Equatable {
|
||||||
|
const OrderRoleUiModel({
|
||||||
|
required this.id,
|
||||||
|
required this.name,
|
||||||
|
required this.costPerHour,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String id;
|
||||||
|
final String name;
|
||||||
|
final double costPerHour;
|
||||||
|
|
||||||
|
@override
|
||||||
|
List<Object?> get props => <Object?>[id, name, costPerHour];
|
||||||
|
}
|
||||||
|
|
||||||
|
class OrderPositionUiModel extends Equatable {
|
||||||
|
const OrderPositionUiModel({
|
||||||
|
required this.role,
|
||||||
|
required this.count,
|
||||||
|
required this.startTime,
|
||||||
|
required this.endTime,
|
||||||
|
this.lunchBreak = 'NO_BREAK',
|
||||||
|
});
|
||||||
|
|
||||||
|
final String role;
|
||||||
|
final int count;
|
||||||
|
final String startTime;
|
||||||
|
final String endTime;
|
||||||
|
final String lunchBreak;
|
||||||
|
|
||||||
|
OrderPositionUiModel copyWith({
|
||||||
|
String? role,
|
||||||
|
int? count,
|
||||||
|
String? startTime,
|
||||||
|
String? endTime,
|
||||||
|
String? lunchBreak,
|
||||||
|
}) {
|
||||||
|
return OrderPositionUiModel(
|
||||||
|
role: role ?? this.role,
|
||||||
|
count: count ?? this.count,
|
||||||
|
startTime: startTime ?? this.startTime,
|
||||||
|
endTime: endTime ?? this.endTime,
|
||||||
|
lunchBreak: lunchBreak ?? this.lunchBreak,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
List<Object?> get props => <Object?>[role, count, startTime, endTime, lunchBreak];
|
||||||
|
}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
/// A date picker field for the permanent order form.
|
||||||
|
class PermanentOrderDatePicker extends StatefulWidget {
|
||||||
|
/// Creates a [PermanentOrderDatePicker].
|
||||||
|
const PermanentOrderDatePicker({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The label text to display above the field.
|
||||||
|
final String label;
|
||||||
|
|
||||||
|
/// The currently selected date.
|
||||||
|
final DateTime value;
|
||||||
|
|
||||||
|
/// Callback when a new date is selected.
|
||||||
|
final ValueChanged<DateTime> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<PermanentOrderDatePicker> createState() =>
|
||||||
|
_PermanentOrderDatePickerState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PermanentOrderDatePickerState extends State<PermanentOrderDatePicker> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(
|
||||||
|
text: DateFormat('yyyy-MM-dd').format(widget.value),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(PermanentOrderDatePicker oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != oldWidget.value) {
|
||||||
|
_controller.text = DateFormat('yyyy-MM-dd').format(widget.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
readOnly: true,
|
||||||
|
prefixIcon: UiIcons.calendar,
|
||||||
|
onTap: () async {
|
||||||
|
final DateTime? picked = await showDatePicker(
|
||||||
|
context: context,
|
||||||
|
initialDate: widget.value,
|
||||||
|
firstDate: DateTime.now(),
|
||||||
|
lastDate: DateTime.now().add(const Duration(days: 365)),
|
||||||
|
);
|
||||||
|
if (picked != null) {
|
||||||
|
widget.onChanged(picked);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A text input for the order name in the permanent order form.
|
||||||
|
class PermanentOrderEventNameInput extends StatefulWidget {
|
||||||
|
const PermanentOrderEventNameInput({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String label;
|
||||||
|
final String value;
|
||||||
|
final ValueChanged<String> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<PermanentOrderEventNameInput> createState() =>
|
||||||
|
_PermanentOrderEventNameInputState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PermanentOrderEventNameInputState
|
||||||
|
extends State<PermanentOrderEventNameInput> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(text: widget.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(PermanentOrderEventNameInput oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != _controller.text) {
|
||||||
|
_controller.text = widget.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
onChanged: widget.onChanged,
|
||||||
|
hintText: 'Order name',
|
||||||
|
prefixIcon: UiIcons.briefcase,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for the permanent order flow with a colored background.
|
||||||
|
class PermanentOrderHeader extends StatelessWidget {
|
||||||
|
/// Creates a [PermanentOrderHeader].
|
||||||
|
const PermanentOrderHeader({
|
||||||
|
required this.title,
|
||||||
|
required this.subtitle,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the page.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The subtitle or description.
|
||||||
|
final String subtitle;
|
||||||
|
|
||||||
|
/// Callback when the back button is pressed.
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
top: MediaQuery.of(context).padding.top + UiConstants.space5,
|
||||||
|
bottom: UiConstants.space5,
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
),
|
||||||
|
color: UiColors.primary,
|
||||||
|
child: Row(
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onBack,
|
||||||
|
child: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.2),
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
UiIcons.chevronLeft,
|
||||||
|
color: UiColors.white,
|
||||||
|
size: 24,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space3),
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline3m.copyWith(color: UiColors.white),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
subtitle,
|
||||||
|
style: UiTypography.footnote2r.copyWith(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,321 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
|
||||||
|
/// A card widget for editing a specific position in a permanent order.
|
||||||
|
class PermanentOrderPositionCard extends StatelessWidget {
|
||||||
|
const PermanentOrderPositionCard({
|
||||||
|
required this.index,
|
||||||
|
required this.position,
|
||||||
|
required this.isRemovable,
|
||||||
|
required this.onUpdated,
|
||||||
|
required this.onRemoved,
|
||||||
|
required this.positionLabel,
|
||||||
|
required this.roleLabel,
|
||||||
|
required this.workersLabel,
|
||||||
|
required this.startLabel,
|
||||||
|
required this.endLabel,
|
||||||
|
required this.lunchLabel,
|
||||||
|
required this.roles,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final int index;
|
||||||
|
final OrderPositionUiModel position;
|
||||||
|
final bool isRemovable;
|
||||||
|
final ValueChanged<OrderPositionUiModel> onUpdated;
|
||||||
|
final VoidCallback onRemoved;
|
||||||
|
final String positionLabel;
|
||||||
|
final String roleLabel;
|
||||||
|
final String workersLabel;
|
||||||
|
final String startLabel;
|
||||||
|
final String endLabel;
|
||||||
|
final String lunchLabel;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space4),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
'$positionLabel #${index + 1}',
|
||||||
|
style: UiTypography.footnote1m.textSecondary,
|
||||||
|
),
|
||||||
|
if (isRemovable)
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onRemoved,
|
||||||
|
child: Text(
|
||||||
|
t.client_create_order.one_time.remove,
|
||||||
|
style: UiTypography.footnote1m.copyWith(
|
||||||
|
color: UiColors.destructive,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Role (Dropdown)
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
hint: Text(
|
||||||
|
roleLabel,
|
||||||
|
style: UiTypography.body2r.textPlaceholder,
|
||||||
|
),
|
||||||
|
value: position.role.isEmpty ? null : position.role,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(role: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: _buildRoleItems(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Start/End/Workers Row
|
||||||
|
Row(
|
||||||
|
children: <Widget>[
|
||||||
|
// Start Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: startLabel,
|
||||||
|
value: position.startTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(startTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// End Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: endLabel,
|
||||||
|
value: position.endTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(endTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// Workers Count
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
workersLabel,
|
||||||
|
style: UiTypography.footnote2r.textSecondary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.bgSecondary,
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
if (position.count > 1) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count - 1),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.minus, size: 12),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'${position.count}',
|
||||||
|
style: UiTypography.body2b.textPrimary,
|
||||||
|
),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count + 1),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.add, size: 12),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Lunch Break
|
||||||
|
Text(lunchLabel, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: position.lunchBreak,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(lunchBreak: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: <String>[
|
||||||
|
'NO_BREAK',
|
||||||
|
'MIN_10',
|
||||||
|
'MIN_15',
|
||||||
|
'MIN_30',
|
||||||
|
'MIN_45',
|
||||||
|
'MIN_60',
|
||||||
|
].map((String value) {
|
||||||
|
final String label = switch (value) {
|
||||||
|
'NO_BREAK' => 'No Break',
|
||||||
|
'MIN_10' => '10 min (Paid)',
|
||||||
|
'MIN_15' => '15 min (Paid)',
|
||||||
|
'MIN_30' => '30 min (Unpaid)',
|
||||||
|
'MIN_45' => '45 min (Unpaid)',
|
||||||
|
'MIN_60' => '60 min (Unpaid)',
|
||||||
|
_ => value,
|
||||||
|
};
|
||||||
|
return DropdownMenuItem<String>(
|
||||||
|
value: value,
|
||||||
|
child: Text(
|
||||||
|
label,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildTimeInput({
|
||||||
|
required BuildContext context,
|
||||||
|
required String label,
|
||||||
|
required String value,
|
||||||
|
required VoidCallback onTap,
|
||||||
|
}) {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(label, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: Container(
|
||||||
|
height: 40,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
value.isEmpty ? '--:--' : value,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
const Icon(
|
||||||
|
UiIcons.clock,
|
||||||
|
size: 14,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
List<DropdownMenuItem<String>> _buildRoleItems() {
|
||||||
|
final List<DropdownMenuItem<String>> items = roles
|
||||||
|
.map(
|
||||||
|
(OrderRoleUiModel role) => DropdownMenuItem<String>(
|
||||||
|
value: role.id,
|
||||||
|
child: Text(
|
||||||
|
'${role.name} - \$${role.costPerHour.toStringAsFixed(0)}',
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
final bool hasSelected = roles.any((OrderRoleUiModel role) => role.id == position.role);
|
||||||
|
if (position.role.isNotEmpty && !hasSelected) {
|
||||||
|
items.add(
|
||||||
|
DropdownMenuItem<String>(
|
||||||
|
value: position.role,
|
||||||
|
child: Text(
|
||||||
|
position.role,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for sections in the permanent order form.
|
||||||
|
class PermanentOrderSectionHeader extends StatelessWidget {
|
||||||
|
/// Creates a [PermanentOrderSectionHeader].
|
||||||
|
const PermanentOrderSectionHeader({
|
||||||
|
required this.title,
|
||||||
|
this.actionLabel,
|
||||||
|
this.onAction,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title text for the section.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// Optional label for an action button on the right.
|
||||||
|
final String? actionLabel;
|
||||||
|
|
||||||
|
/// Callback when the action button is tapped.
|
||||||
|
final VoidCallback? onAction;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(title, style: UiTypography.headline4m.textPrimary),
|
||||||
|
if (actionLabel != null && onAction != null)
|
||||||
|
TextButton(
|
||||||
|
onPressed: onAction,
|
||||||
|
style: TextButton.styleFrom(
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
minimumSize: Size.zero,
|
||||||
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(UiIcons.add, size: 16, color: UiColors.primary),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
actionLabel!,
|
||||||
|
style: UiTypography.body2m.primary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A view to display when a permanent order has been successfully created.
|
||||||
|
class PermanentOrderSuccessView extends StatelessWidget {
|
||||||
|
/// Creates a [PermanentOrderSuccessView].
|
||||||
|
const PermanentOrderSuccessView({
|
||||||
|
required this.title,
|
||||||
|
required this.message,
|
||||||
|
required this.buttonLabel,
|
||||||
|
required this.onDone,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the success message.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The body of the success message.
|
||||||
|
final String message;
|
||||||
|
|
||||||
|
/// Label for the completion button.
|
||||||
|
final String buttonLabel;
|
||||||
|
|
||||||
|
/// Callback when the completion button is tapped.
|
||||||
|
final VoidCallback onDone;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
colors: <Color>[UiColors.primary, UiColors.buttonPrimaryHover],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: Container(
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: UiConstants.space10),
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space8),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg * 1.5,
|
||||||
|
boxShadow: <BoxShadow>[
|
||||||
|
BoxShadow(
|
||||||
|
color: UiColors.black.withValues(alpha: 0.2),
|
||||||
|
blurRadius: 20,
|
||||||
|
offset: const Offset(0, UiConstants.space2 + 2),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
width: UiConstants.space16,
|
||||||
|
height: UiConstants.space16,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.accent,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: const Center(
|
||||||
|
child: Icon(
|
||||||
|
UiIcons.check,
|
||||||
|
color: UiColors.black,
|
||||||
|
size: UiConstants.space8,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline2m.textPrimary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
Text(
|
||||||
|
message,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: UiTypography.body2r.textSecondary.copyWith(
|
||||||
|
height: 1.5,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space8),
|
||||||
|
SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: buttonLabel,
|
||||||
|
onPressed: onDone,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,466 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:krow_domain/krow_domain.dart' show Vendor;
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
import 'permanent_order_date_picker.dart';
|
||||||
|
import 'permanent_order_event_name_input.dart';
|
||||||
|
import 'permanent_order_header.dart';
|
||||||
|
import 'permanent_order_position_card.dart';
|
||||||
|
import 'permanent_order_section_header.dart';
|
||||||
|
import 'permanent_order_success_view.dart';
|
||||||
|
|
||||||
|
/// The main content of the Permanent Order page.
|
||||||
|
class PermanentOrderView extends StatelessWidget {
|
||||||
|
const PermanentOrderView({
|
||||||
|
required this.status,
|
||||||
|
required this.errorMessage,
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.startDate,
|
||||||
|
required this.permanentDays,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.isValid,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onStartDateChanged,
|
||||||
|
required this.onDayToggled,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
required this.onSubmit,
|
||||||
|
required this.onDone,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final OrderFormStatus status;
|
||||||
|
final String? errorMessage;
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime startDate;
|
||||||
|
final List<String> permanentDays;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
final bool isValid;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onStartDateChanged;
|
||||||
|
final ValueChanged<int> onDayToggled;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
final VoidCallback onSubmit;
|
||||||
|
final VoidCallback onDone;
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderPermanentEn labels =
|
||||||
|
t.client_create_order.permanent;
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn oneTimeLabels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
if (status == OrderFormStatus.failure && errorMessage != null) {
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
UiSnackbar.show(
|
||||||
|
context,
|
||||||
|
message: translateErrorKey(errorMessage!),
|
||||||
|
type: UiSnackbarType.error,
|
||||||
|
margin: const EdgeInsets.only(bottom: 140, left: 16, right: 16),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status == OrderFormStatus.success) {
|
||||||
|
return PermanentOrderSuccessView(
|
||||||
|
title: labels.title,
|
||||||
|
message: labels.subtitle,
|
||||||
|
buttonLabel: oneTimeLabels.back_to_orders,
|
||||||
|
onDone: onDone,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vendors.isEmpty && status != OrderFormStatus.loading) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
PermanentOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(
|
||||||
|
UiIcons.search,
|
||||||
|
size: 64,
|
||||||
|
color: UiColors.iconInactive,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
Text(
|
||||||
|
'No Vendors Available',
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
'There are no staffing vendors associated with your account.',
|
||||||
|
style: UiTypography.body2r.textSecondary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
PermanentOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Stack(
|
||||||
|
children: <Widget>[
|
||||||
|
_PermanentOrderForm(
|
||||||
|
eventName: eventName,
|
||||||
|
selectedVendor: selectedVendor,
|
||||||
|
vendors: vendors,
|
||||||
|
startDate: startDate,
|
||||||
|
permanentDays: permanentDays,
|
||||||
|
selectedHub: selectedHub,
|
||||||
|
hubs: hubs,
|
||||||
|
positions: positions,
|
||||||
|
roles: roles,
|
||||||
|
onEventNameChanged: onEventNameChanged,
|
||||||
|
onVendorChanged: onVendorChanged,
|
||||||
|
onStartDateChanged: onStartDateChanged,
|
||||||
|
onDayToggled: onDayToggled,
|
||||||
|
onHubChanged: onHubChanged,
|
||||||
|
onPositionAdded: onPositionAdded,
|
||||||
|
onPositionUpdated: onPositionUpdated,
|
||||||
|
onPositionRemoved: onPositionRemoved,
|
||||||
|
),
|
||||||
|
if (status == OrderFormStatus.loading)
|
||||||
|
const Center(child: CircularProgressIndicator()),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
_BottomActionButton(
|
||||||
|
label: status == OrderFormStatus.loading
|
||||||
|
? oneTimeLabels.creating
|
||||||
|
: oneTimeLabels.create_order,
|
||||||
|
isLoading: status == OrderFormStatus.loading,
|
||||||
|
onPressed: isValid ? onSubmit : null,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PermanentOrderForm extends StatelessWidget {
|
||||||
|
const _PermanentOrderForm({
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.startDate,
|
||||||
|
required this.permanentDays,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onStartDateChanged,
|
||||||
|
required this.onDayToggled,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime startDate;
|
||||||
|
final List<String> permanentDays;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onStartDateChanged;
|
||||||
|
final ValueChanged<int> onDayToggled;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderPermanentEn labels =
|
||||||
|
t.client_create_order.permanent;
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn oneTimeLabels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
return ListView(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space5),
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
labels.title,
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
PermanentOrderEventNameInput(
|
||||||
|
label: 'ORDER NAME',
|
||||||
|
value: eventName,
|
||||||
|
onChanged: onEventNameChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Vendor Selection
|
||||||
|
Text('SELECT VENDOR', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<Vendor>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedVendor,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (Vendor? vendor) {
|
||||||
|
if (vendor != null) {
|
||||||
|
onVendorChanged(vendor);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: vendors.map((Vendor vendor) {
|
||||||
|
return DropdownMenuItem<Vendor>(
|
||||||
|
value: vendor,
|
||||||
|
child: Text(
|
||||||
|
vendor.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
PermanentOrderDatePicker(
|
||||||
|
label: 'Start Date',
|
||||||
|
value: startDate,
|
||||||
|
onChanged: onStartDateChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
Text('Permanent Days', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
_PermanentDaysSelector(
|
||||||
|
selectedDays: permanentDays,
|
||||||
|
onToggle: onDayToggled,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
Text('HUB', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<OrderHubUiModel>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedHub,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (OrderHubUiModel? hub) {
|
||||||
|
if (hub != null) {
|
||||||
|
onHubChanged(hub);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: hubs.map((OrderHubUiModel hub) {
|
||||||
|
return DropdownMenuItem<OrderHubUiModel>(
|
||||||
|
value: hub,
|
||||||
|
child: Text(
|
||||||
|
hub.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
|
||||||
|
PermanentOrderSectionHeader(
|
||||||
|
title: oneTimeLabels.positions_title,
|
||||||
|
actionLabel: oneTimeLabels.add_position,
|
||||||
|
onAction: onPositionAdded,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Positions List
|
||||||
|
...positions.asMap().entries.map((
|
||||||
|
MapEntry<int, OrderPositionUiModel> entry,
|
||||||
|
) {
|
||||||
|
final int index = entry.key;
|
||||||
|
final OrderPositionUiModel position = entry.value;
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: UiConstants.space3),
|
||||||
|
child: PermanentOrderPositionCard(
|
||||||
|
index: index,
|
||||||
|
position: position,
|
||||||
|
isRemovable: positions.length > 1,
|
||||||
|
positionLabel: oneTimeLabels.positions_title,
|
||||||
|
roleLabel: oneTimeLabels.select_role,
|
||||||
|
workersLabel: oneTimeLabels.workers_label,
|
||||||
|
startLabel: oneTimeLabels.start_label,
|
||||||
|
endLabel: oneTimeLabels.end_label,
|
||||||
|
lunchLabel: oneTimeLabels.lunch_break_label,
|
||||||
|
roles: roles,
|
||||||
|
onUpdated: (OrderPositionUiModel updated) {
|
||||||
|
onPositionUpdated(index, updated);
|
||||||
|
},
|
||||||
|
onRemoved: () {
|
||||||
|
onPositionRemoved(index);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PermanentDaysSelector extends StatelessWidget {
|
||||||
|
const _PermanentDaysSelector({
|
||||||
|
required this.selectedDays,
|
||||||
|
required this.onToggle,
|
||||||
|
});
|
||||||
|
|
||||||
|
final List<String> selectedDays;
|
||||||
|
final ValueChanged<int> onToggle;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
const List<String> labelsShort = <String>[
|
||||||
|
'S',
|
||||||
|
'M',
|
||||||
|
'T',
|
||||||
|
'W',
|
||||||
|
'T',
|
||||||
|
'F',
|
||||||
|
'S',
|
||||||
|
];
|
||||||
|
const List<String> labelsLong = <String>[
|
||||||
|
'SUN',
|
||||||
|
'MON',
|
||||||
|
'TUE',
|
||||||
|
'WED',
|
||||||
|
'THU',
|
||||||
|
'FRI',
|
||||||
|
'SAT',
|
||||||
|
];
|
||||||
|
return Wrap(
|
||||||
|
spacing: UiConstants.space2,
|
||||||
|
children: List<Widget>.generate(labelsShort.length, (int index) {
|
||||||
|
final bool isSelected = selectedDays.contains(labelsLong[index]);
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () => onToggle(index),
|
||||||
|
child: Container(
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: isSelected ? UiColors.primary : UiColors.white,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: Text(
|
||||||
|
labelsShort[index],
|
||||||
|
style: UiTypography.body2m.copyWith(
|
||||||
|
color: isSelected ? UiColors.white : UiColors.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BottomActionButton extends StatelessWidget {
|
||||||
|
const _BottomActionButton({
|
||||||
|
required this.label,
|
||||||
|
required this.onPressed,
|
||||||
|
this.isLoading = false,
|
||||||
|
});
|
||||||
|
final String label;
|
||||||
|
final VoidCallback? onPressed;
|
||||||
|
final bool isLoading;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
top: UiConstants.space5,
|
||||||
|
bottom: MediaQuery.of(context).padding.bottom + UiConstants.space5,
|
||||||
|
),
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
border: Border(top: BorderSide(color: UiColors.border)),
|
||||||
|
),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: label,
|
||||||
|
onPressed: isLoading ? null : onPressed,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
/// A date picker field for the recurring order form.
|
||||||
|
class RecurringOrderDatePicker extends StatefulWidget {
|
||||||
|
/// Creates a [RecurringOrderDatePicker].
|
||||||
|
const RecurringOrderDatePicker({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The label text to display above the field.
|
||||||
|
final String label;
|
||||||
|
|
||||||
|
/// The currently selected date.
|
||||||
|
final DateTime value;
|
||||||
|
|
||||||
|
/// Callback when a new date is selected.
|
||||||
|
final ValueChanged<DateTime> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<RecurringOrderDatePicker> createState() =>
|
||||||
|
_RecurringOrderDatePickerState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _RecurringOrderDatePickerState extends State<RecurringOrderDatePicker> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(
|
||||||
|
text: DateFormat('yyyy-MM-dd').format(widget.value),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(RecurringOrderDatePicker oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != oldWidget.value) {
|
||||||
|
_controller.text = DateFormat('yyyy-MM-dd').format(widget.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
readOnly: true,
|
||||||
|
prefixIcon: UiIcons.calendar,
|
||||||
|
onTap: () async {
|
||||||
|
final DateTime? picked = await showDatePicker(
|
||||||
|
context: context,
|
||||||
|
initialDate: widget.value,
|
||||||
|
firstDate: DateTime.now(),
|
||||||
|
lastDate: DateTime.now().add(const Duration(days: 365)),
|
||||||
|
);
|
||||||
|
if (picked != null) {
|
||||||
|
widget.onChanged(picked);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A text input for the order name in the recurring order form.
|
||||||
|
class RecurringOrderEventNameInput extends StatefulWidget {
|
||||||
|
const RecurringOrderEventNameInput({
|
||||||
|
required this.label,
|
||||||
|
required this.value,
|
||||||
|
required this.onChanged,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String label;
|
||||||
|
final String value;
|
||||||
|
final ValueChanged<String> onChanged;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<RecurringOrderEventNameInput> createState() =>
|
||||||
|
_RecurringOrderEventNameInputState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _RecurringOrderEventNameInputState
|
||||||
|
extends State<RecurringOrderEventNameInput> {
|
||||||
|
late final TextEditingController _controller;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = TextEditingController(text: widget.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(RecurringOrderEventNameInput oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (widget.value != _controller.text) {
|
||||||
|
_controller.text = widget.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return UiTextField(
|
||||||
|
label: widget.label,
|
||||||
|
controller: _controller,
|
||||||
|
onChanged: widget.onChanged,
|
||||||
|
hintText: 'Order name',
|
||||||
|
prefixIcon: UiIcons.briefcase,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for the recurring order flow with a colored background.
|
||||||
|
class RecurringOrderHeader extends StatelessWidget {
|
||||||
|
/// Creates a [RecurringOrderHeader].
|
||||||
|
const RecurringOrderHeader({
|
||||||
|
required this.title,
|
||||||
|
required this.subtitle,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the page.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The subtitle or description.
|
||||||
|
final String subtitle;
|
||||||
|
|
||||||
|
/// Callback when the back button is pressed.
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
top: MediaQuery.of(context).padding.top + UiConstants.space5,
|
||||||
|
bottom: UiConstants.space5,
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
),
|
||||||
|
color: UiColors.primary,
|
||||||
|
child: Row(
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onBack,
|
||||||
|
child: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.2),
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
UiIcons.chevronLeft,
|
||||||
|
color: UiColors.white,
|
||||||
|
size: 24,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space3),
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline3m.copyWith(color: UiColors.white),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
subtitle,
|
||||||
|
style: UiTypography.footnote2r.copyWith(
|
||||||
|
color: UiColors.white.withValues(alpha: 0.8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,321 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
|
||||||
|
/// A card widget for editing a specific position in a recurring order.
|
||||||
|
class RecurringOrderPositionCard extends StatelessWidget {
|
||||||
|
const RecurringOrderPositionCard({
|
||||||
|
required this.index,
|
||||||
|
required this.position,
|
||||||
|
required this.isRemovable,
|
||||||
|
required this.onUpdated,
|
||||||
|
required this.onRemoved,
|
||||||
|
required this.positionLabel,
|
||||||
|
required this.roleLabel,
|
||||||
|
required this.workersLabel,
|
||||||
|
required this.startLabel,
|
||||||
|
required this.endLabel,
|
||||||
|
required this.lunchLabel,
|
||||||
|
required this.roles,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final int index;
|
||||||
|
final OrderPositionUiModel position;
|
||||||
|
final bool isRemovable;
|
||||||
|
final ValueChanged<OrderPositionUiModel> onUpdated;
|
||||||
|
final VoidCallback onRemoved;
|
||||||
|
final String positionLabel;
|
||||||
|
final String roleLabel;
|
||||||
|
final String workersLabel;
|
||||||
|
final String startLabel;
|
||||||
|
final String endLabel;
|
||||||
|
final String lunchLabel;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space4),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
'$positionLabel #${index + 1}',
|
||||||
|
style: UiTypography.footnote1m.textSecondary,
|
||||||
|
),
|
||||||
|
if (isRemovable)
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onRemoved,
|
||||||
|
child: Text(
|
||||||
|
t.client_create_order.one_time.remove,
|
||||||
|
style: UiTypography.footnote1m.copyWith(
|
||||||
|
color: UiColors.destructive,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Role (Dropdown)
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
hint: Text(
|
||||||
|
roleLabel,
|
||||||
|
style: UiTypography.body2r.textPlaceholder,
|
||||||
|
),
|
||||||
|
value: position.role.isEmpty ? null : position.role,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(role: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: _buildRoleItems(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Start/End/Workers Row
|
||||||
|
Row(
|
||||||
|
children: <Widget>[
|
||||||
|
// Start Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: startLabel,
|
||||||
|
value: position.startTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(startTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// End Time
|
||||||
|
Expanded(
|
||||||
|
child: _buildTimeInput(
|
||||||
|
context: context,
|
||||||
|
label: endLabel,
|
||||||
|
value: position.endTime,
|
||||||
|
onTap: () async {
|
||||||
|
final TimeOfDay? picked = await showTimePicker(
|
||||||
|
context: context,
|
||||||
|
initialTime: TimeOfDay.now(),
|
||||||
|
);
|
||||||
|
if (picked != null && context.mounted) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(endTime: picked.format(context)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
// Workers Count
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
workersLabel,
|
||||||
|
style: UiTypography.footnote2r.textSecondary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.bgSecondary,
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: <Widget>[
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
if (position.count > 1) {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count - 1),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.minus, size: 12),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'${position.count}',
|
||||||
|
style: UiTypography.body2b.textPrimary,
|
||||||
|
),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
onUpdated(
|
||||||
|
position.copyWith(count: position.count + 1),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: const Icon(UiIcons.add, size: 12),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Lunch Break
|
||||||
|
Text(lunchLabel, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 44,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<String>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: position.lunchBreak,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (String? val) {
|
||||||
|
if (val != null) {
|
||||||
|
onUpdated(position.copyWith(lunchBreak: val));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: <String>[
|
||||||
|
'NO_BREAK',
|
||||||
|
'MIN_10',
|
||||||
|
'MIN_15',
|
||||||
|
'MIN_30',
|
||||||
|
'MIN_45',
|
||||||
|
'MIN_60',
|
||||||
|
].map((String value) {
|
||||||
|
final String label = switch (value) {
|
||||||
|
'NO_BREAK' => 'No Break',
|
||||||
|
'MIN_10' => '10 min (Paid)',
|
||||||
|
'MIN_15' => '15 min (Paid)',
|
||||||
|
'MIN_30' => '30 min (Unpaid)',
|
||||||
|
'MIN_45' => '45 min (Unpaid)',
|
||||||
|
'MIN_60' => '60 min (Unpaid)',
|
||||||
|
_ => value,
|
||||||
|
};
|
||||||
|
return DropdownMenuItem<String>(
|
||||||
|
value: value,
|
||||||
|
child: Text(
|
||||||
|
label,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildTimeInput({
|
||||||
|
required BuildContext context,
|
||||||
|
required String label,
|
||||||
|
required String value,
|
||||||
|
required VoidCallback onTap,
|
||||||
|
}) {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(label, style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space1),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: Container(
|
||||||
|
height: 40,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: UiConstants.radiusSm,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
value.isEmpty ? '--:--' : value,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
const Icon(
|
||||||
|
UiIcons.clock,
|
||||||
|
size: 14,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
List<DropdownMenuItem<String>> _buildRoleItems() {
|
||||||
|
final List<DropdownMenuItem<String>> items = roles
|
||||||
|
.map(
|
||||||
|
(OrderRoleUiModel role) => DropdownMenuItem<String>(
|
||||||
|
value: role.id,
|
||||||
|
child: Text(
|
||||||
|
'${role.name} - \$${role.costPerHour.toStringAsFixed(0)}',
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
final bool hasSelected = roles.any((OrderRoleUiModel role) => role.id == position.role);
|
||||||
|
if (position.role.isNotEmpty && !hasSelected) {
|
||||||
|
items.add(
|
||||||
|
DropdownMenuItem<String>(
|
||||||
|
value: position.role,
|
||||||
|
child: Text(
|
||||||
|
position.role,
|
||||||
|
style: UiTypography.body2r.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A header widget for sections in the recurring order form.
|
||||||
|
class RecurringOrderSectionHeader extends StatelessWidget {
|
||||||
|
/// Creates a [RecurringOrderSectionHeader].
|
||||||
|
const RecurringOrderSectionHeader({
|
||||||
|
required this.title,
|
||||||
|
this.actionLabel,
|
||||||
|
this.onAction,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title text for the section.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// Optional label for an action button on the right.
|
||||||
|
final String? actionLabel;
|
||||||
|
|
||||||
|
/// Callback when the action button is tapped.
|
||||||
|
final VoidCallback? onAction;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(title, style: UiTypography.headline4m.textPrimary),
|
||||||
|
if (actionLabel != null && onAction != null)
|
||||||
|
TextButton(
|
||||||
|
onPressed: onAction,
|
||||||
|
style: TextButton.styleFrom(
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
minimumSize: Size.zero,
|
||||||
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(UiIcons.add, size: 16, color: UiColors.primary),
|
||||||
|
const SizedBox(width: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
actionLabel!,
|
||||||
|
style: UiTypography.body2m.primary,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// A view to display when a recurring order has been successfully created.
|
||||||
|
class RecurringOrderSuccessView extends StatelessWidget {
|
||||||
|
/// Creates a [RecurringOrderSuccessView].
|
||||||
|
const RecurringOrderSuccessView({
|
||||||
|
required this.title,
|
||||||
|
required this.message,
|
||||||
|
required this.buttonLabel,
|
||||||
|
required this.onDone,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// The title of the success message.
|
||||||
|
final String title;
|
||||||
|
|
||||||
|
/// The body of the success message.
|
||||||
|
final String message;
|
||||||
|
|
||||||
|
/// Label for the completion button.
|
||||||
|
final String buttonLabel;
|
||||||
|
|
||||||
|
/// Callback when the completion button is tapped.
|
||||||
|
final VoidCallback onDone;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
colors: <Color>[UiColors.primary, UiColors.buttonPrimaryHover],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: Container(
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: UiConstants.space10),
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space8),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusLg * 1.5,
|
||||||
|
boxShadow: <BoxShadow>[
|
||||||
|
BoxShadow(
|
||||||
|
color: UiColors.black.withValues(alpha: 0.2),
|
||||||
|
blurRadius: 20,
|
||||||
|
offset: const Offset(0, UiConstants.space2 + 2),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
width: UiConstants.space16,
|
||||||
|
height: UiConstants.space16,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.accent,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: const Center(
|
||||||
|
child: Icon(
|
||||||
|
UiIcons.check,
|
||||||
|
color: UiColors.black,
|
||||||
|
size: UiConstants.space8,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: UiTypography.headline2m.textPrimary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
Text(
|
||||||
|
message,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: UiTypography.body2r.textSecondary.copyWith(
|
||||||
|
height: 1.5,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space8),
|
||||||
|
SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: buttonLabel,
|
||||||
|
onPressed: onDone,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,486 @@
|
|||||||
|
import 'package:core_localization/core_localization.dart';
|
||||||
|
import 'package:krow_domain/krow_domain.dart' show Vendor;
|
||||||
|
import 'package:design_system/design_system.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../order_ui_models.dart';
|
||||||
|
import 'recurring_order_date_picker.dart';
|
||||||
|
import 'recurring_order_event_name_input.dart';
|
||||||
|
import 'recurring_order_header.dart';
|
||||||
|
import 'recurring_order_position_card.dart';
|
||||||
|
import 'recurring_order_section_header.dart';
|
||||||
|
import 'recurring_order_success_view.dart';
|
||||||
|
|
||||||
|
/// The main content of the Recurring Order page.
|
||||||
|
class RecurringOrderView extends StatelessWidget {
|
||||||
|
const RecurringOrderView({
|
||||||
|
required this.status,
|
||||||
|
required this.errorMessage,
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.startDate,
|
||||||
|
required this.endDate,
|
||||||
|
required this.recurringDays,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.isValid,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onStartDateChanged,
|
||||||
|
required this.onEndDateChanged,
|
||||||
|
required this.onDayToggled,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
required this.onSubmit,
|
||||||
|
required this.onDone,
|
||||||
|
required this.onBack,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
final OrderFormStatus status;
|
||||||
|
final String? errorMessage;
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime startDate;
|
||||||
|
final DateTime endDate;
|
||||||
|
final List<String> recurringDays;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
final bool isValid;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onStartDateChanged;
|
||||||
|
final ValueChanged<DateTime> onEndDateChanged;
|
||||||
|
final ValueChanged<int> onDayToggled;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
final VoidCallback onSubmit;
|
||||||
|
final VoidCallback onDone;
|
||||||
|
final VoidCallback onBack;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderRecurringEn labels =
|
||||||
|
t.client_create_order.recurring;
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn oneTimeLabels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
if (status == OrderFormStatus.failure && errorMessage != null) {
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
final String message = errorMessage == 'placeholder'
|
||||||
|
? labels.placeholder
|
||||||
|
: translateErrorKey(errorMessage!);
|
||||||
|
UiSnackbar.show(
|
||||||
|
context,
|
||||||
|
message: message,
|
||||||
|
type: UiSnackbarType.error,
|
||||||
|
margin: const EdgeInsets.only(bottom: 140, left: 16, right: 16),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status == OrderFormStatus.success) {
|
||||||
|
return RecurringOrderSuccessView(
|
||||||
|
title: labels.title,
|
||||||
|
message: labels.subtitle,
|
||||||
|
buttonLabel: oneTimeLabels.back_to_orders,
|
||||||
|
onDone: onDone,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vendors.isEmpty && status != OrderFormStatus.loading) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
RecurringOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
const Icon(
|
||||||
|
UiIcons.search,
|
||||||
|
size: 64,
|
||||||
|
color: UiColors.iconInactive,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
Text(
|
||||||
|
'No Vendors Available',
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Text(
|
||||||
|
'There are no staffing vendors associated with your account.',
|
||||||
|
style: UiTypography.body2r.textSecondary,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
RecurringOrderHeader(
|
||||||
|
title: labels.title,
|
||||||
|
subtitle: labels.subtitle,
|
||||||
|
onBack: onBack,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Stack(
|
||||||
|
children: <Widget>[
|
||||||
|
_RecurringOrderForm(
|
||||||
|
eventName: eventName,
|
||||||
|
selectedVendor: selectedVendor,
|
||||||
|
vendors: vendors,
|
||||||
|
startDate: startDate,
|
||||||
|
endDate: endDate,
|
||||||
|
recurringDays: recurringDays,
|
||||||
|
selectedHub: selectedHub,
|
||||||
|
hubs: hubs,
|
||||||
|
positions: positions,
|
||||||
|
roles: roles,
|
||||||
|
onEventNameChanged: onEventNameChanged,
|
||||||
|
onVendorChanged: onVendorChanged,
|
||||||
|
onStartDateChanged: onStartDateChanged,
|
||||||
|
onEndDateChanged: onEndDateChanged,
|
||||||
|
onDayToggled: onDayToggled,
|
||||||
|
onHubChanged: onHubChanged,
|
||||||
|
onPositionAdded: onPositionAdded,
|
||||||
|
onPositionUpdated: onPositionUpdated,
|
||||||
|
onPositionRemoved: onPositionRemoved,
|
||||||
|
),
|
||||||
|
if (status == OrderFormStatus.loading)
|
||||||
|
const Center(child: CircularProgressIndicator()),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
_BottomActionButton(
|
||||||
|
label: status == OrderFormStatus.loading
|
||||||
|
? oneTimeLabels.creating
|
||||||
|
: oneTimeLabels.create_order,
|
||||||
|
isLoading: status == OrderFormStatus.loading,
|
||||||
|
onPressed: isValid ? onSubmit : null,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _RecurringOrderForm extends StatelessWidget {
|
||||||
|
const _RecurringOrderForm({
|
||||||
|
required this.eventName,
|
||||||
|
required this.selectedVendor,
|
||||||
|
required this.vendors,
|
||||||
|
required this.startDate,
|
||||||
|
required this.endDate,
|
||||||
|
required this.recurringDays,
|
||||||
|
required this.selectedHub,
|
||||||
|
required this.hubs,
|
||||||
|
required this.positions,
|
||||||
|
required this.roles,
|
||||||
|
required this.onEventNameChanged,
|
||||||
|
required this.onVendorChanged,
|
||||||
|
required this.onStartDateChanged,
|
||||||
|
required this.onEndDateChanged,
|
||||||
|
required this.onDayToggled,
|
||||||
|
required this.onHubChanged,
|
||||||
|
required this.onPositionAdded,
|
||||||
|
required this.onPositionUpdated,
|
||||||
|
required this.onPositionRemoved,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String eventName;
|
||||||
|
final Vendor? selectedVendor;
|
||||||
|
final List<Vendor> vendors;
|
||||||
|
final DateTime startDate;
|
||||||
|
final DateTime endDate;
|
||||||
|
final List<String> recurringDays;
|
||||||
|
final OrderHubUiModel? selectedHub;
|
||||||
|
final List<OrderHubUiModel> hubs;
|
||||||
|
final List<OrderPositionUiModel> positions;
|
||||||
|
final List<OrderRoleUiModel> roles;
|
||||||
|
|
||||||
|
final ValueChanged<String> onEventNameChanged;
|
||||||
|
final ValueChanged<Vendor> onVendorChanged;
|
||||||
|
final ValueChanged<DateTime> onStartDateChanged;
|
||||||
|
final ValueChanged<DateTime> onEndDateChanged;
|
||||||
|
final ValueChanged<int> onDayToggled;
|
||||||
|
final ValueChanged<OrderHubUiModel> onHubChanged;
|
||||||
|
final VoidCallback onPositionAdded;
|
||||||
|
final void Function(int index, OrderPositionUiModel position) onPositionUpdated;
|
||||||
|
final void Function(int index) onPositionRemoved;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final TranslationsClientCreateOrderRecurringEn labels =
|
||||||
|
t.client_create_order.recurring;
|
||||||
|
final TranslationsClientCreateOrderOneTimeEn oneTimeLabels =
|
||||||
|
t.client_create_order.one_time;
|
||||||
|
|
||||||
|
return ListView(
|
||||||
|
padding: const EdgeInsets.all(UiConstants.space5),
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
labels.title,
|
||||||
|
style: UiTypography.headline3m.textPrimary,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
RecurringOrderEventNameInput(
|
||||||
|
label: 'ORDER NAME',
|
||||||
|
value: eventName,
|
||||||
|
onChanged: onEventNameChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
// Vendor Selection
|
||||||
|
Text('SELECT VENDOR', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<Vendor>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedVendor,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (Vendor? vendor) {
|
||||||
|
if (vendor != null) {
|
||||||
|
onVendorChanged(vendor);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: vendors.map((Vendor vendor) {
|
||||||
|
return DropdownMenuItem<Vendor>(
|
||||||
|
value: vendor,
|
||||||
|
child: Text(
|
||||||
|
vendor.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
RecurringOrderDatePicker(
|
||||||
|
label: 'Start Date',
|
||||||
|
value: startDate,
|
||||||
|
onChanged: onStartDateChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
RecurringOrderDatePicker(
|
||||||
|
label: 'End Date',
|
||||||
|
value: endDate,
|
||||||
|
onChanged: onEndDateChanged,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
Text('Recurring Days', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
_RecurringDaysSelector(
|
||||||
|
selectedDays: recurringDays,
|
||||||
|
onToggle: onDayToggled,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space4),
|
||||||
|
|
||||||
|
Text('HUB', style: UiTypography.footnote2r.textSecondary),
|
||||||
|
const SizedBox(height: UiConstants.space2),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space3),
|
||||||
|
height: 48,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
borderRadius: UiConstants.radiusMd,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: DropdownButton<OrderHubUiModel>(
|
||||||
|
isExpanded: true,
|
||||||
|
value: selectedHub,
|
||||||
|
icon: const Icon(
|
||||||
|
UiIcons.chevronDown,
|
||||||
|
size: 18,
|
||||||
|
color: UiColors.iconSecondary,
|
||||||
|
),
|
||||||
|
onChanged: (OrderHubUiModel? hub) {
|
||||||
|
if (hub != null) {
|
||||||
|
onHubChanged(hub);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: hubs.map((OrderHubUiModel hub) {
|
||||||
|
return DropdownMenuItem<OrderHubUiModel>(
|
||||||
|
value: hub,
|
||||||
|
child: Text(
|
||||||
|
hub.name,
|
||||||
|
style: UiTypography.body2m.textPrimary,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space6),
|
||||||
|
|
||||||
|
RecurringOrderSectionHeader(
|
||||||
|
title: oneTimeLabels.positions_title,
|
||||||
|
actionLabel: oneTimeLabels.add_position,
|
||||||
|
onAction: onPositionAdded,
|
||||||
|
),
|
||||||
|
const SizedBox(height: UiConstants.space3),
|
||||||
|
|
||||||
|
// Positions List
|
||||||
|
...positions.asMap().entries.map((
|
||||||
|
MapEntry<int, OrderPositionUiModel> entry,
|
||||||
|
) {
|
||||||
|
final int index = entry.key;
|
||||||
|
final OrderPositionUiModel position = entry.value;
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: UiConstants.space3),
|
||||||
|
child: RecurringOrderPositionCard(
|
||||||
|
index: index,
|
||||||
|
position: position,
|
||||||
|
isRemovable: positions.length > 1,
|
||||||
|
positionLabel: oneTimeLabels.positions_title,
|
||||||
|
roleLabel: oneTimeLabels.select_role,
|
||||||
|
workersLabel: oneTimeLabels.workers_label,
|
||||||
|
startLabel: oneTimeLabels.start_label,
|
||||||
|
endLabel: oneTimeLabels.end_label,
|
||||||
|
lunchLabel: oneTimeLabels.lunch_break_label,
|
||||||
|
roles: roles,
|
||||||
|
onUpdated: (OrderPositionUiModel updated) {
|
||||||
|
onPositionUpdated(index, updated);
|
||||||
|
},
|
||||||
|
onRemoved: () {
|
||||||
|
onPositionRemoved(index);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _RecurringDaysSelector extends StatelessWidget {
|
||||||
|
const _RecurringDaysSelector({
|
||||||
|
required this.selectedDays,
|
||||||
|
required this.onToggle,
|
||||||
|
});
|
||||||
|
|
||||||
|
final List<String> selectedDays;
|
||||||
|
final ValueChanged<int> onToggle;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
const List<String> labelsShort = <String>[
|
||||||
|
'S',
|
||||||
|
'M',
|
||||||
|
'T',
|
||||||
|
'W',
|
||||||
|
'T',
|
||||||
|
'F',
|
||||||
|
'S',
|
||||||
|
];
|
||||||
|
const List<String> labelsLong = <String>[
|
||||||
|
'SUN',
|
||||||
|
'MON',
|
||||||
|
'TUE',
|
||||||
|
'WED',
|
||||||
|
'THU',
|
||||||
|
'FRI',
|
||||||
|
'SAT',
|
||||||
|
];
|
||||||
|
return Wrap(
|
||||||
|
spacing: UiConstants.space2,
|
||||||
|
children: List<Widget>.generate(labelsShort.length, (int index) {
|
||||||
|
final bool isSelected = selectedDays.contains(labelsLong[index]);
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () => onToggle(index),
|
||||||
|
child: Container(
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: isSelected ? UiColors.primary : UiColors.white,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
border: Border.all(color: UiColors.border),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: Text(
|
||||||
|
labelsShort[index],
|
||||||
|
style: UiTypography.body2m.copyWith(
|
||||||
|
color: isSelected ? UiColors.white : UiColors.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BottomActionButton extends StatelessWidget {
|
||||||
|
const _BottomActionButton({
|
||||||
|
required this.label,
|
||||||
|
required this.onPressed,
|
||||||
|
this.isLoading = false,
|
||||||
|
});
|
||||||
|
final String label;
|
||||||
|
final VoidCallback? onPressed;
|
||||||
|
final bool isLoading;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
left: UiConstants.space5,
|
||||||
|
right: UiConstants.space5,
|
||||||
|
top: UiConstants.space5,
|
||||||
|
bottom: MediaQuery.of(context).padding.bottom + UiConstants.space5,
|
||||||
|
),
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: UiColors.white,
|
||||||
|
border: Border(top: BorderSide(color: UiColors.border)),
|
||||||
|
),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: UiButton.primary(
|
||||||
|
text: label,
|
||||||
|
onPressed: isLoading ? null : onPressed,
|
||||||
|
size: UiButtonSize.large,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user