68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import { Checkbox, Col, DatePicker, Modal, Row, TimePicker, Input } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
|
|
|
|
export default function ScheduleJobModalComponent({
|
|
appData,
|
|
setAppData,
|
|
formData,
|
|
setFormData,
|
|
...props
|
|
}) {
|
|
const { t } = useTranslation();
|
|
//TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
|
|
return (
|
|
<Modal
|
|
{...props}
|
|
width={"80%"}
|
|
maskClosable={false}
|
|
destroyOnClose={true}
|
|
okButtonProps={{ disabled: appData.start ? false : true }}
|
|
>
|
|
<Row>
|
|
<Col span={14}>
|
|
<Row>
|
|
Manual Job Selection Scheduled Time
|
|
<Input
|
|
placeholder={t("appointments.fields.title")}
|
|
onChange={e => {
|
|
setAppData({ ...appData, title: e.target.value });
|
|
}}
|
|
/>
|
|
<DatePicker
|
|
value={appData.start}
|
|
onChange={e => {
|
|
setAppData({ ...appData, start: e });
|
|
}}
|
|
/>
|
|
<TimePicker
|
|
value={appData.start}
|
|
format={"HH:mm"}
|
|
minuteStep={15}
|
|
onChange={e => {
|
|
setAppData({ ...appData, start: e });
|
|
}}
|
|
/>
|
|
</Row>
|
|
|
|
{
|
|
//TODO Build out notifications.
|
|
}
|
|
<Checkbox
|
|
defaultChecked={formData.notifyCustomer}
|
|
onChange={e =>
|
|
setFormData({ ...formData, notifyCustomer: e.target.checked })
|
|
}
|
|
>
|
|
{t("jobs.labels.appointmentconfirmation")}
|
|
</Checkbox>
|
|
</Col>
|
|
<Col span={10}>
|
|
<ScheduleDayViewContainer day={appData.start} />
|
|
</Col>
|
|
</Row>
|
|
</Modal>
|
|
);
|
|
}
|