126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
import { useMutation } from "@apollo/client";
|
|
import { Button, Card, Form, notification, Popover, Space } from "antd";
|
|
import moment from "moment";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
import { INSERT_VACATION } from "../../graphql/employees.queries";
|
|
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
|
|
|
export default function ShopEmployeeAddVacation({ employee }) {
|
|
const { t } = useTranslation();
|
|
const [insertVacation] = useMutation(INSERT_VACATION);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [visibility, setVisibility] = useState(false);
|
|
|
|
const handleFinish = async (values) => {
|
|
logImEXEvent("employee_add_vacation");
|
|
|
|
setLoading(true);
|
|
let result;
|
|
|
|
result = await insertVacation({
|
|
variables: { vacation: { ...values, employeeid: employee.id } },
|
|
update(cache, { data }) {
|
|
cache.modify({
|
|
id: cache.identify({ id: employee.id, __typename: "employees" }),
|
|
fields: {
|
|
employee_vacations(ex) {
|
|
return [data.insert_employee_vacation_one, ...ex];
|
|
},
|
|
},
|
|
});
|
|
},
|
|
});
|
|
|
|
if (!!result.errors) {
|
|
notification["error"]({
|
|
message: t("employees.errors.adding", {
|
|
message: JSON.stringify(result.errors),
|
|
}),
|
|
});
|
|
} else {
|
|
notification["success"]({
|
|
message: t("employees.successes.vacationadded"),
|
|
});
|
|
}
|
|
form.resetFields();
|
|
setLoading(false);
|
|
setVisibility(false);
|
|
};
|
|
|
|
const overlay = (
|
|
<Card>
|
|
<Form form={form} layout="vertical" onFinish={handleFinish}>
|
|
<Form.Item
|
|
label={t("employees.fields.vacation.start")}
|
|
name="start"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<FormDatePicker />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("employees.fields.vacation.end")}
|
|
name="end"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
//message: t("general.validation.required"),
|
|
},
|
|
({ getFieldValue }) => ({
|
|
async validator(rule, value) {
|
|
if (value) {
|
|
const { start } = form.getFieldsValue();
|
|
if (moment(start).isAfter(moment(value))) {
|
|
return Promise.reject(
|
|
t("employees.labels.endmustbeafterstart")
|
|
);
|
|
} else {
|
|
return Promise.resolve();
|
|
}
|
|
} else {
|
|
return Promise.resolve();
|
|
}
|
|
},
|
|
}),
|
|
]}
|
|
>
|
|
<FormDatePicker />
|
|
</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>
|
|
</Card>
|
|
);
|
|
|
|
const handleClick = (e) => {
|
|
setVisibility(true);
|
|
};
|
|
|
|
return (
|
|
<Popover content={overlay} open={visibility}>
|
|
<Button
|
|
loading={loading}
|
|
disabled={!employee?.active}
|
|
onClick={handleClick}
|
|
>
|
|
{t("employees.actions.addvacation")}
|
|
</Button>
|
|
</Popover>
|
|
);
|
|
}
|