511 lines
22 KiB
Dart
511 lines
22 KiB
Dart
// Flutter imports:
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_redux/flutter_redux.dart';
|
|
|
|
// Project imports:
|
|
import 'package:invoiceninja_flutter/constants.dart';
|
|
import 'package:invoiceninja_flutter/data/models/models.dart';
|
|
import 'package:invoiceninja_flutter/main_app.dart';
|
|
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
|
|
import 'package:invoiceninja_flutter/redux/client/client_selectors.dart';
|
|
import 'package:invoiceninja_flutter/redux/task/task_selectors.dart';
|
|
import 'package:invoiceninja_flutter/redux/task_status/task_status_selectors.dart';
|
|
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/entity_dropdown.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/form_card.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/custom_field.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/date_picker.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/decorated_form_field.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/duration_picker.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/dynamic_selector.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/project_picker.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/time_picker.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/forms/user_picker.dart';
|
|
import 'package:invoiceninja_flutter/ui/app/scrollable_listview.dart';
|
|
import 'package:invoiceninja_flutter/ui/invoice/edit/invoice_edit_items_desktop.dart';
|
|
import 'package:invoiceninja_flutter/ui/task/edit/task_edit_details_vm.dart';
|
|
import 'package:invoiceninja_flutter/utils/colors.dart';
|
|
import 'package:invoiceninja_flutter/utils/completers.dart';
|
|
import 'package:invoiceninja_flutter/utils/formatting.dart';
|
|
import 'package:invoiceninja_flutter/utils/localization.dart';
|
|
|
|
class TaskEditDesktop extends StatefulWidget {
|
|
const TaskEditDesktop({
|
|
Key key,
|
|
@required this.viewModel,
|
|
}) : super(key: key);
|
|
|
|
final TaskEditDetailsVM viewModel;
|
|
|
|
@override
|
|
_TaskEditDesktopState createState() => _TaskEditDesktopState();
|
|
}
|
|
|
|
class _TaskEditDesktopState extends State<TaskEditDesktop> {
|
|
final _numberController = TextEditingController();
|
|
final _rateController = TextEditingController();
|
|
final _descriptionController = TextEditingController();
|
|
final _custom1Controller = TextEditingController();
|
|
final _custom2Controller = TextEditingController();
|
|
final _custom3Controller = TextEditingController();
|
|
final _custom4Controller = TextEditingController();
|
|
|
|
final _debouncer = Debouncer();
|
|
List<TextEditingController> _controllers = [];
|
|
|
|
int _updatedAt = 0;
|
|
int _startDateUpdatedAt = 0;
|
|
int _startTimeUpdatedAt = 0;
|
|
int _endDateUpdatedAt = 0;
|
|
int _endTimeUpdatedAt = 0;
|
|
int _durationUpdateAt = 0;
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
_controllers = [
|
|
_numberController,
|
|
_rateController,
|
|
_descriptionController,
|
|
_custom1Controller,
|
|
_custom2Controller,
|
|
_custom3Controller,
|
|
_custom4Controller,
|
|
];
|
|
|
|
_controllers.forEach((controller) => controller.removeListener(_onChanged));
|
|
|
|
final task = widget.viewModel.task;
|
|
_numberController.text = task.number;
|
|
_rateController.text = formatNumber(task.rate, context,
|
|
formatNumberType: FormatNumberType.inputMoney);
|
|
_descriptionController.text = task.description;
|
|
_custom1Controller.text = task.customValue1;
|
|
_custom2Controller.text = task.customValue2;
|
|
_custom3Controller.text = task.customValue3;
|
|
_custom4Controller.text = task.customValue4;
|
|
|
|
_controllers.forEach((controller) => controller.addListener(_onChanged));
|
|
_updatedAt = DateTime.now().millisecondsSinceEpoch;
|
|
|
|
super.didChangeDependencies();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controllers.forEach((controller) {
|
|
controller.removeListener(_onChanged);
|
|
controller.dispose();
|
|
});
|
|
|
|
super.dispose();
|
|
}
|
|
|
|
void _onChanged() {
|
|
final task = widget.viewModel.task.rebuild((b) => b
|
|
..number = _numberController.text.trim()
|
|
..rate = parseDouble(_rateController.text.trim())
|
|
..description = _descriptionController.text.trim()
|
|
..customValue1 = _custom1Controller.text.trim()
|
|
..customValue2 = _custom2Controller.text.trim()
|
|
..customValue3 = _custom3Controller.text.trim()
|
|
..customValue4 = _custom4Controller.text.trim());
|
|
if (task != widget.viewModel.task) {
|
|
_debouncer.run(() {
|
|
widget.viewModel.onChanged(task);
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final store = StoreProvider.of<AppState>(navigatorKey.currentContext);
|
|
final viewModel = widget.viewModel;
|
|
final localization = AppLocalization.of(context);
|
|
final task = viewModel.task;
|
|
final state = viewModel.state;
|
|
|
|
final company = state.company;
|
|
final settings = company.settings;
|
|
final client = state.clientState.get(task.clientId);
|
|
final showEndDate = company.showTaskEndDate;
|
|
final taskTimes = task.getTaskTimes(sort: false);
|
|
|
|
if (!taskTimes.any((taskTime) => taskTime.isEmpty)) {
|
|
taskTimes.add(TaskTime().rebuild((b) => b..startDate = null));
|
|
}
|
|
|
|
final overlapping = task.getInvalidTimeIndices;
|
|
final rateLabel = localization.rate +
|
|
' • ' +
|
|
formatNumber(
|
|
taskRateSelector(
|
|
company: company,
|
|
task: TaskEntity(),
|
|
client: client,
|
|
group: state.groupState.get(client.groupId),
|
|
project: state.projectState.get(task.projectId),
|
|
),
|
|
context,
|
|
currencyId: (client.currencyId ?? '').isNotEmpty
|
|
? client.currencyId
|
|
: company.currencyId);
|
|
|
|
final tableHeaderColor = state.prefState
|
|
.customColors[PrefState.THEME_INVOICE_HEADER_BACKGROUND_COLOR] ??
|
|
'';
|
|
|
|
return ScrollableListView(
|
|
primary: true,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: FormCard(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
padding: const EdgeInsets.only(
|
|
top: kMobileDialogPadding,
|
|
right: kMobileDialogPadding / 2,
|
|
bottom: kMobileDialogPadding,
|
|
left: kMobileDialogPadding),
|
|
children: [
|
|
if (!task.isInvoiced) ...[
|
|
EntityDropdown(
|
|
autofocus: true,
|
|
entityType: EntityType.client,
|
|
labelText: localization.client,
|
|
entityId: task.clientId,
|
|
entityList: memoizedDropdownClientList(
|
|
state.clientState.map,
|
|
state.clientState.list,
|
|
state.userState.map,
|
|
state.staticState),
|
|
onSelected: (client) {
|
|
viewModel.onChanged(task.rebuild((b) => b
|
|
..clientId = client?.id ?? ''
|
|
..projectId = ''));
|
|
},
|
|
onAddPressed: (completer) {
|
|
viewModel.onAddClientPressed(context, completer);
|
|
},
|
|
),
|
|
ProjectPicker(
|
|
key: Key('__project_${task.clientId}__'),
|
|
projectId: task.projectId,
|
|
clientId: task.clientId,
|
|
onChanged: (selectedId) {
|
|
final project =
|
|
store.state.projectState.get(selectedId);
|
|
viewModel.onChanged(task.rebuild((b) => b
|
|
..projectId = project?.id
|
|
..clientId = (project?.clientId ?? '').isNotEmpty
|
|
? project.clientId
|
|
: task.clientId));
|
|
},
|
|
onAddPressed: (completer) {
|
|
viewModel.onAddProjectPressed(context, completer);
|
|
},
|
|
),
|
|
],
|
|
UserPicker(
|
|
userId: task.assignedUserId,
|
|
onChanged: (userId) => viewModel.onChanged(
|
|
task.rebuild((b) => b..assignedUserId = userId)),
|
|
),
|
|
CustomField(
|
|
controller: _custom1Controller,
|
|
field: CustomFieldType.task1,
|
|
value: task.customValue1,
|
|
),
|
|
CustomField(
|
|
controller: _custom3Controller,
|
|
field: CustomFieldType.task3,
|
|
value: task.customValue3,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: FormCard(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
padding: const EdgeInsets.only(
|
|
top: kMobileDialogPadding,
|
|
right: kMobileDialogPadding / 2,
|
|
bottom: kMobileDialogPadding,
|
|
left: kMobileDialogPadding / 2),
|
|
children: [
|
|
DecoratedFormField(
|
|
controller: _numberController,
|
|
label: localization.taskNumber,
|
|
keyboardType: TextInputType.text,
|
|
),
|
|
DecoratedFormField(
|
|
key: ValueKey('__rate__'),
|
|
controller: _rateController,
|
|
label: rateLabel,
|
|
keyboardType: TextInputType.numberWithOptions(
|
|
decimal: true, signed: true),
|
|
autocorrect: false,
|
|
),
|
|
DynamicSelector(
|
|
key: ValueKey('__task_status_${task.statusId}__'),
|
|
allowClearing: false,
|
|
entityType: EntityType.taskStatus,
|
|
labelText: localization.status,
|
|
entityId: task.statusId,
|
|
entityIds: memoizedDropdownTaskStatusList(
|
|
state.taskStatusState.map,
|
|
state.taskStatusState.list,
|
|
state.staticState,
|
|
state.userState.map),
|
|
onChanged: (selectedId) {
|
|
final taskStatus = state.taskStatusState.map[selectedId];
|
|
viewModel.onChanged(task.rebuild((b) => b
|
|
..statusId = taskStatus?.id ?? ''
|
|
..statusOrder = null));
|
|
},
|
|
),
|
|
CustomField(
|
|
controller: _custom2Controller,
|
|
field: CustomFieldType.task2,
|
|
value: task.customValue2,
|
|
),
|
|
CustomField(
|
|
controller: _custom4Controller,
|
|
field: CustomFieldType.task4,
|
|
value: task.customValue4,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: FormCard(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
padding: const EdgeInsets.only(
|
|
top: kMobileDialogPadding,
|
|
right: kMobileDialogPadding,
|
|
bottom: kMobileDialogPadding,
|
|
left: kMobileDialogPadding / 2),
|
|
children: [
|
|
DecoratedFormField(
|
|
maxLines: 6,
|
|
controller: _descriptionController,
|
|
keyboardType: TextInputType.multiline,
|
|
label: localization.description,
|
|
),
|
|
SizedBox(height: 4),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
FormCard(
|
|
key: ValueKey('__table_${_updatedAt}__'),
|
|
padding: const EdgeInsets.symmetric(horizontal: kMobileDialogPadding),
|
|
children: [
|
|
if (!settings.showTaskItemDescription)
|
|
Row(
|
|
children: [
|
|
Expanded(child: Text(localization.startDate)),
|
|
Expanded(child: Text(localization.startTime)),
|
|
if (showEndDate) Expanded(child: Text(localization.endDate)),
|
|
Expanded(child: Text(localization.endTime)),
|
|
Expanded(child: Text(localization.duration)),
|
|
SizedBox(width: 40),
|
|
],
|
|
),
|
|
...taskTimes.map((taskTime) {
|
|
final index = taskTimes.indexOf(taskTime);
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: kTableColumnGap),
|
|
child: DatePicker(
|
|
key: ValueKey(
|
|
'__${_startTimeUpdatedAt}_${_durationUpdateAt}_${index}__'),
|
|
labelText: settings.showTaskItemDescription
|
|
? localization.startDate
|
|
: null,
|
|
selectedDate: taskTimes[index].startDate ==
|
|
null
|
|
? null
|
|
: convertDateTimeToSqlDate(
|
|
taskTimes[index].startDate.toLocal()),
|
|
onSelected: (date, _) {
|
|
final taskTime = taskTimes[index]
|
|
.copyWithStartDate(date,
|
|
syncDates: !showEndDate);
|
|
viewModel.onUpdatedTaskTime(
|
|
taskTime, index);
|
|
setState(() {
|
|
_startDateUpdatedAt =
|
|
DateTime.now().millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: kTableColumnGap),
|
|
child: TimePicker(
|
|
key: ValueKey(
|
|
'__${_durationUpdateAt}_${index}__'),
|
|
labelText: settings.showTaskItemDescription
|
|
? localization.startTime
|
|
: null,
|
|
selectedDateTime: taskTimes[index].startDate,
|
|
onSelected: (timeOfDay) {
|
|
final taskTime = taskTimes[index]
|
|
.copyWithStartTime(timeOfDay);
|
|
viewModel.onUpdatedTaskTime(
|
|
taskTime, index);
|
|
setState(() {
|
|
_startTimeUpdatedAt =
|
|
DateTime.now().millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
if (showEndDate)
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: kTableColumnGap),
|
|
child: DatePicker(
|
|
key: ValueKey(
|
|
'__${_startDateUpdatedAt}_${_durationUpdateAt}_${_endTimeUpdatedAt}_${index}__'),
|
|
labelText: settings.showTaskItemDescription
|
|
? localization.endDate
|
|
: null,
|
|
selectedDate: taskTimes[index].endDate ==
|
|
null
|
|
? null
|
|
: convertDateTimeToSqlDate(
|
|
taskTimes[index].endDate.toLocal()),
|
|
onSelected: (date, _) {
|
|
final taskTime = taskTimes[index]
|
|
.copyWithEndDate(date);
|
|
viewModel.onUpdatedTaskTime(
|
|
taskTime, index);
|
|
setState(() {
|
|
_endDateUpdatedAt = DateTime.now()
|
|
.millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: kTableColumnGap),
|
|
child: TimePicker(
|
|
key: ValueKey(
|
|
'__${_endDateUpdatedAt}_${_durationUpdateAt}_${index}__'),
|
|
labelText: settings.showTaskItemDescription
|
|
? localization.endTime
|
|
: null,
|
|
selectedDateTime: taskTimes[index].endDate,
|
|
isEndTime: true,
|
|
onSelected: (timeOfDay) {
|
|
final taskTime = taskTimes[index]
|
|
.copyWithEndTime(timeOfDay);
|
|
viewModel.onUpdatedTaskTime(
|
|
taskTime, index);
|
|
setState(() {
|
|
_endTimeUpdatedAt =
|
|
DateTime.now().millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: kTableColumnGap),
|
|
child: DurationPicker(
|
|
key: ValueKey(
|
|
'__${_startTimeUpdatedAt}_${_endTimeUpdatedAt}_${_startDateUpdatedAt}_${_endDateUpdatedAt}_${index}__'),
|
|
labelText: settings.showTaskItemDescription
|
|
? localization.duration
|
|
: null,
|
|
onSelected: (Duration duration) {
|
|
final taskTime = taskTimes[index]
|
|
.copyWithDuration(duration);
|
|
viewModel.onUpdatedTaskTime(
|
|
taskTime, index);
|
|
setState(() {
|
|
_durationUpdateAt =
|
|
DateTime.now().millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
selectedDuration:
|
|
(taskTimes[index].startDate == null ||
|
|
taskTimes[index].endDate == null)
|
|
? null
|
|
: taskTimes[index].duration,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
if (settings.showTaskItemDescription)
|
|
Padding(
|
|
padding:
|
|
const EdgeInsets.only(bottom: 16, right: 16),
|
|
child: DecoratedFormField(
|
|
keyboardType: TextInputType.text,
|
|
label: localization.description,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 4),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.clear,
|
|
color: overlapping.contains(index) ? Colors.red : null,
|
|
),
|
|
tooltip: overlapping.contains(index)
|
|
? localization.invalidTime
|
|
: localization.remove,
|
|
onPressed: taskTimes[index].isEmpty
|
|
? null
|
|
: () {
|
|
viewModel.onRemoveTaskTime(index);
|
|
setState(() {
|
|
_updatedAt =
|
|
DateTime.now().millisecondsSinceEpoch;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}).toList(),
|
|
],
|
|
),
|
|
SizedBox(
|
|
height: kMobileDialogPadding,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|