120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
import { useMutation } from "@apollo/client";
|
|
import { Button, Card, Form, Input, Popover, Space } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
import {
|
|
INSERT_APPOINTMENT,
|
|
UPDATE_APPOINTMENT,
|
|
} from "../../graphql/appointments.queries";
|
|
import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
|
|
|
|
export default function ScheduleManualEvent({ event }) {
|
|
const { t } = useTranslation();
|
|
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
|
|
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
|
|
const [loading, setLoading] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [visibility, setVisibility] = useState(false);
|
|
// const [callQuery, { loading: entryLoading, data: entryData }] = useLazyQuery(
|
|
// QUERY_SCOREBOARD_ENTRY
|
|
// );
|
|
|
|
useEffect(() => {
|
|
if (visibility && event) {
|
|
form.setFieldsValue({ event });
|
|
}
|
|
}, [visibility, form, event]);
|
|
|
|
useEffect(() => {
|
|
// if (entryData && entryData.scoreboard && entryData.scoreboard[0]) {
|
|
// console.log("Setting FOrm");
|
|
// // form.setFieldsValue(entryData.scoreboard[0]);
|
|
// }
|
|
}, [form]);
|
|
|
|
const handleFinish = async (values) => {
|
|
logImEXEvent("job_close_add_to_scoreboard");
|
|
|
|
setLoading(true);
|
|
try {
|
|
if (event && event.id) {
|
|
updateAppointment();
|
|
} else {
|
|
insertAppointment();
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setLoading(false);
|
|
setVisibility(false);
|
|
}
|
|
};
|
|
|
|
const overlay = (
|
|
<Card>
|
|
<div>
|
|
<Form form={form} layout="vertical" onFinish={handleFinish}>
|
|
<Form.Item
|
|
label={t("schedule.fields.note")}
|
|
name="note"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("schedule.fields.start")}
|
|
name="start"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDateTimePickerComponent />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("schedule.fields.end")}
|
|
name="end"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDateTimePickerComponent />
|
|
</Form.Item>
|
|
|
|
<Space wrap>
|
|
<Button type="primary" htmlType="submit">
|
|
{t("general.actions.save")}
|
|
</Button>
|
|
<Button onClick={() => setVisibility(false)}>
|
|
{t("general.actions.cancel")}
|
|
</Button>
|
|
</Space>
|
|
</Form>
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
const handleClick = (e) => {
|
|
setVisibility(true);
|
|
};
|
|
|
|
return (
|
|
<Popover content={overlay} visible={visibility}>
|
|
<Button loading={loading} onClick={handleClick}>
|
|
{t("schedule.labels.manualevent")}
|
|
</Button>
|
|
</Popover>
|
|
);
|
|
}
|