295 lines
9.8 KiB
JavaScript
295 lines
9.8 KiB
JavaScript
import { Col, Form, Input, Row, Select, Switch } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
|
|
import dayjs from "../../utils/day";
|
|
import { connect } from "react-redux";
|
|
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
|
|
import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
|
|
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
currentUser: selectCurrentUser
|
|
});
|
|
|
|
const mapDispatchToProps = () => ({});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(TaskUpsertModalComponent);
|
|
|
|
export function TaskUpsertModalComponent({
|
|
form,
|
|
bodyshop,
|
|
currentUser,
|
|
selectedJobId,
|
|
setSelectedJobId,
|
|
selectedJobDetails,
|
|
existingTask,
|
|
loading,
|
|
error
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const datePickerPresets = [
|
|
{ label: t("tasks.date_presets.today"), value: dayjs().add(1, "hour") },
|
|
{ label: t("tasks.date_presets.tomorrow"), value: dayjs().add(1, "day").startOf("day") },
|
|
{ label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week").startOf("day") },
|
|
{ label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks").startOf("day") },
|
|
{ label: t("tasks.date_presets.three_weeks"), value: dayjs().add(3, "weeks").startOf("day") },
|
|
{ label: t("tasks.date_presets.one_month"), value: dayjs().add(1, "month").startOf("day") },
|
|
{ label: t("tasks.date_presets.three_months"), value: dayjs().add(3, "month").startOf("day") }
|
|
];
|
|
|
|
const generatePresets = (job) => {
|
|
if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
|
|
const relativePresets = [];
|
|
|
|
if (selectedJobDetails?.scheduled_completion) {
|
|
const scheduledCompletion = dayjs(selectedJobDetails.scheduled_completion);
|
|
|
|
if (scheduledCompletion.isAfter(dayjs())) {
|
|
relativePresets.push(
|
|
{
|
|
label: `${t("tasks.date_presets.completion")} -1 ${t("tasks.date_presets.day")}`,
|
|
value: scheduledCompletion.subtract(1, "day").startOf("day")
|
|
},
|
|
{
|
|
label: `${t("tasks.date_presets.completion")} -2 ${t("tasks.date_presets.days")}`,
|
|
value: scheduledCompletion.subtract(2, "day").startOf("day")
|
|
},
|
|
{
|
|
label: `${t("tasks.date_presets.completion")} -3 ${t("tasks.date_presets.days")}`,
|
|
value: scheduledCompletion.subtract(3, "day").startOf("day")
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
if (selectedJobDetails?.scheduled_delivery) {
|
|
const scheduledDelivery = dayjs(selectedJobDetails.scheduled_delivery);
|
|
if (scheduledDelivery.isAfter(dayjs())) {
|
|
relativePresets.push(
|
|
{
|
|
label: `${t("tasks.date_presets.delivery")} -1 ${t("tasks.date_presets.day")}`,
|
|
value: scheduledDelivery.subtract(1, "day").startOf("day")
|
|
},
|
|
{
|
|
label: `${t("tasks.date_presets.delivery")} -2 ${t("tasks.date_presets.days")}`,
|
|
value: scheduledDelivery.subtract(2, "day").startOf("day")
|
|
},
|
|
{
|
|
label: `${t("tasks.date_presets.delivery")} -3 ${t("tasks.date_presets.days")}`,
|
|
value: scheduledDelivery.subtract(3, "day").startOf("day")
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
return [...relativePresets, ...datePickerPresets];
|
|
};
|
|
|
|
const clearRelations = () => {
|
|
form.setFieldsValue({
|
|
billid: null,
|
|
partsorderid: null,
|
|
joblineid: null
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Change the selected job id
|
|
* @param jobId
|
|
*/
|
|
const changeJobId = (jobId) => {
|
|
setSelectedJobId(jobId || null);
|
|
// Reset the form fields when selectedJobId changes
|
|
clearRelations();
|
|
};
|
|
|
|
if (loading || error) return <LoadingSkeleton active />;
|
|
|
|
return (
|
|
<>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={16}>
|
|
<Form.Item
|
|
label={t("tasks.fields.title")}
|
|
name="title"
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<Input placeholder={t("tasks.fields.title")} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={4}>
|
|
<Form.Item label={t("tasks.fields.priority")} name="priority" initialValue={2}>
|
|
<Select
|
|
options={[
|
|
{ value: 3, label: t("tasks.fields.priorities.low") },
|
|
{ value: 2, label: t("tasks.fields.priorities.medium") },
|
|
{ value: 1, label: t("tasks.fields.priorities.high") }
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={4}>
|
|
<Form.Item
|
|
label={t("tasks.fields.completed")}
|
|
name="completed"
|
|
valuePropName="checked"
|
|
initialValue={false}
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<Switch />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
name="jobid"
|
|
initialValue={selectedJobId}
|
|
label={t("tasks.fields.jobid")}
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<JobSearchSelectComponent
|
|
placeholder={t("tasks.placeholders.jobid")}
|
|
onSelect={changeJobId}
|
|
onClear={changeJobId}
|
|
autoFocus={false}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={8}>
|
|
<Form.Item label={t("tasks.fields.joblineid")} name="joblineid">
|
|
<Select
|
|
allowClear
|
|
placeholder={t("tasks.placeholders.joblineid")}
|
|
disabled={!selectedJobDetails || !selectedJobId}
|
|
options={selectedJobDetails?.joblines?.map((jobline) => ({
|
|
key: jobline.id,
|
|
value: jobline.id,
|
|
label: jobline.line_desc
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Form.Item label={t("tasks.fields.partsorderid")} name="partsorderid">
|
|
<Select
|
|
allowClear
|
|
placeholder={t("tasks.placeholders.partsorderid")}
|
|
disabled={!selectedJobDetails || !selectedJobId}
|
|
options={selectedJobDetails?.parts_orders?.map((partsOrder) => ({
|
|
key: partsOrder.id,
|
|
value: partsOrder.id,
|
|
label: `${partsOrder.order_number} - ${partsOrder.vendor.name}`
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Form.Item label={t("tasks.fields.billid")} name="billid">
|
|
<Select
|
|
allowClear
|
|
placeholder={t("tasks.placeholders.billid")}
|
|
disabled={!selectedJobDetails || !selectedJobId}
|
|
options={selectedJobDetails?.bills?.map((bill) => ({
|
|
key: bill.id,
|
|
value: bill.id,
|
|
label: `${bill.invoice_number} - ${bill.vendor.name}`
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={8}>
|
|
<Form.Item
|
|
label={t("tasks.fields.assigned_to")}
|
|
name="assigned_to"
|
|
initialValue={
|
|
bodyshop.employees.find((employee) => employee?.user_email === currentUser.email && employee.active)?.id
|
|
}
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<Select
|
|
placeholder={t("tasks.placeholders.assigned_to")}
|
|
options={bodyshop.employees
|
|
.filter((x) => x.active && x.user_email)
|
|
.map((employee) => ({
|
|
key: employee.id,
|
|
value: employee.id,
|
|
label: `${employee.first_name} ${employee.last_name}`
|
|
}))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Form.Item label={t("tasks.fields.due_date")} name="due_date">
|
|
<DateTimePicker
|
|
isDateOnly
|
|
onlyFuture
|
|
format="MM/DD/YYYY"
|
|
presets={generatePresets(selectedJobDetails)}
|
|
rules={[
|
|
{
|
|
validator: (_, value) => {
|
|
if (!value || existingTask?.due_date === value || dayjs(value).isAfter(dayjs())) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(new Error(t("tasks.validation.due_at_error_message")));
|
|
}
|
|
}
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Form.Item
|
|
label={t("tasks.fields.remind_at")}
|
|
name="remind_at"
|
|
rules={[
|
|
{
|
|
validator: (_, value) => {
|
|
if (!value || existingTask?.remind_at === value || dayjs(value).isAfter(dayjs().add(15, "minute"))) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(new Error(t("tasks.validation.remind_at_error_message")));
|
|
}
|
|
}
|
|
]}
|
|
>
|
|
<DateTimePicker onlyFuture presets={generatePresets(selectedJobDetails)} />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={24}>
|
|
<Form.Item label={t("tasks.fields.description")} name="description">
|
|
<Input.TextArea rows={8} placeholder={t("tasks.fields.description")} />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
}
|