130 lines
4.2 KiB
JavaScript
130 lines
4.2 KiB
JavaScript
import { useMutation, useQuery } from "@apollo/react-hooks";
|
|
import { Form, notification } from "antd";
|
|
import moment from "moment";
|
|
import React, { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { useParams } from "react-router-dom";
|
|
import AlertComponent from "../../components/alert/alert.component";
|
|
import CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
|
|
import {
|
|
QUERY_CONTRACT_BY_PK,
|
|
UPDATE_CONTRACT,
|
|
} from "../../graphql/cccontracts.queries";
|
|
import {
|
|
setBreadcrumbs,
|
|
addRecentItem,
|
|
} from "../../redux/application/application.actions";
|
|
import ContractDetailPageComponent from "./contract-detail.page.component";
|
|
import { CreateRecentItem } from "../../utils/create-recent-item";
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
|
addRecentItem: (item) => dispatch(addRecentItem(item)),
|
|
});
|
|
|
|
export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
|
|
const { t } = useTranslation();
|
|
const [updateContract] = useMutation(UPDATE_CONTRACT);
|
|
const [form] = Form.useForm();
|
|
const { contractId } = useParams();
|
|
|
|
const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, {
|
|
variables: { id: contractId },
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.title = loading
|
|
? t("titles.app")
|
|
: error
|
|
? t("titles.app")
|
|
: t("titles.contracts-detail", {
|
|
id: (data && data.cccontracts_by_pk.agreementnumber) || "",
|
|
});
|
|
|
|
setBreadcrumbs([
|
|
{ link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
|
|
{
|
|
link: "/manage/courtesycars/contracts",
|
|
label: t("titles.bc.contracts"),
|
|
},
|
|
{
|
|
link: "/manage/courtesycars/contracts/new",
|
|
label: t("titles.bc.contracts-detail", {
|
|
number: (data && data.cccontracts_by_pk.agreementnumber) || "",
|
|
}),
|
|
},
|
|
]);
|
|
|
|
if (data)
|
|
addRecentItem(
|
|
CreateRecentItem(
|
|
contractId,
|
|
"contract",
|
|
data.cccontracts_by_pk.agreementnumber,
|
|
`/manage/courtesycars/contracts/${contractId}`
|
|
)
|
|
);
|
|
}, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
|
|
|
|
const handleFinish = (values) => {
|
|
updateContract({
|
|
variables: { cccontract: { ...values }, contractId: contractId },
|
|
})
|
|
.then((response) => {
|
|
notification["success"]({ message: t("contracts.successes.saved") });
|
|
})
|
|
.catch((error) =>
|
|
notification["error"]({
|
|
message: t("contracts.errors.saving", { error: error }),
|
|
})
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (data) form.resetFields();
|
|
}, [data, form]);
|
|
|
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
|
return (
|
|
<div>
|
|
<CourtesyCarReturnModalContainer />
|
|
<Form
|
|
form={form}
|
|
autoComplete="no"
|
|
onFinish={handleFinish}
|
|
initialValues={
|
|
data
|
|
? {
|
|
...data.cccontracts_by_pk,
|
|
start: data.cccontracts_by_pk.start
|
|
? moment(data.cccontracts_by_pk.start)
|
|
: null,
|
|
scheduledreturn: data.cccontracts_by_pk.scheduledreturn
|
|
? moment(data.cccontracts_by_pk.scheduledreturn)
|
|
: null,
|
|
actualreturn: data.cccontracts_by_pk.actualreturn
|
|
? moment(data.cccontracts_by_pk.actualreturn)
|
|
: null,
|
|
driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
|
|
? moment(data.cccontracts_by_pk.driver_dlexpiry)
|
|
: null,
|
|
driver_dob: data.cccontracts_by_pk.driver_dob
|
|
? moment(data.cccontracts_by_pk.driver_dob)
|
|
: null,
|
|
}
|
|
: {}
|
|
}
|
|
>
|
|
<ContractDetailPageComponent
|
|
contract={data ? data.cccontracts_by_pk : null}
|
|
job={data ? data.cccontracts_by_pk.job : null}
|
|
courtesyCar={data ? data.cccontracts_by_pk.courtesycar : null}
|
|
refetch={refetch}
|
|
/>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(null, mapDispatchToProps)(ContractDetailPageContainer);
|