73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
|
|
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
|
|
|
|
export default function ScheduleJobModalComponent({
|
|
existingAppointments,
|
|
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}>
|
|
<Tabs defaultActiveKey="1">
|
|
<Tabs.TabPane tab="SMART Scheduling" key="auto">
|
|
Automatic Job Selection.
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="Manual Scheduling" key="manual">
|
|
<Row>
|
|
Manual Job Selection Scheduled Time
|
|
<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>
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
<ScheduleExistingAppointmentsList
|
|
existingAppointments={existingAppointments}
|
|
/>
|
|
{
|
|
//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>
|
|
);
|
|
}
|