IO-899 Contract FInd Modal
This commit is contained in:
Patrick Fic
@@ -0,0 +1,37 @@
|
||||
import { Form, Input } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
|
||||
|
||||
export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form.Item name="fleet" label={t("courtesycars.fields.fleetnumber")}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="time"
|
||||
label={t("contracts.labels.time")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<FormDateTimePicker />
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useLazyQuery } from "@apollo/client";
|
||||
import { Button, Form, Modal, Table } from "antd";
|
||||
import React, { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { FIND_CONTRACT } from "../../graphql/cccontracts.queries";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectContractFinder } from "../../redux/modals/modals.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
||||
import ContractsFindModalComponent from "./contracts-find-modal.component";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
contractFinderModal: selectContractFinder,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("contractFinder")),
|
||||
});
|
||||
|
||||
export function ContractsFindModalContainer({
|
||||
contractFinderModal,
|
||||
toggleModalVisible,
|
||||
|
||||
bodyshop,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { visible } = contractFinderModal;
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// const [updateJobLines] = useMutation(UPDATE_JOB_LINE);
|
||||
const [callSearch, { loading, error, data }] = useLazyQuery(FIND_CONTRACT);
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("contract_finder_search");
|
||||
|
||||
//Execute contract find
|
||||
|
||||
callSearch({
|
||||
variables: {
|
||||
fleet:
|
||||
(values.fleet && values.fleet !== "" && values.fleet) || undefined,
|
||||
time: values.time,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [visible, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
width="70%"
|
||||
title={t("labels.labels.findermodal")}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
onOk={() => toggleModalVisible()}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
autoComplete="no"
|
||||
onFinish={handleFinish}
|
||||
>
|
||||
<ContractsFindModalComponent form={form} />
|
||||
<Button onClick={() => form.submit()} type="primary" loading={loading}>
|
||||
{t("general.labels.search")}
|
||||
</Button>
|
||||
{error && (
|
||||
<AlertComponent type="error" message={JSON.stringify(error)} />
|
||||
)}
|
||||
<Table
|
||||
loading={loading}
|
||||
columns={[
|
||||
{
|
||||
title: t("contracts.fields.agreementnumber"),
|
||||
dataIndex: "agreementnumber",
|
||||
key: "agreementnumber",
|
||||
|
||||
render: (text, record) => (
|
||||
<Link to={`/manage/courtesycars/contracts/${record.id}`}>
|
||||
{record.agreementnumber || ""}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.ro_number"),
|
||||
dataIndex: "job.ro_number",
|
||||
key: "job.ro_number",
|
||||
render: (text, record) => (
|
||||
<Link to={`/manage/jobs/${record.job.id}`}>
|
||||
{record.job.ro_number || ""}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("contracts.fields.driver"),
|
||||
dataIndex: "driver_ln",
|
||||
key: "driver_ln",
|
||||
render: (text, record) =>
|
||||
`${record.driver_fn || ""} ${record.driver_ln || ""}`,
|
||||
},
|
||||
{
|
||||
title: t("contracts.labels.vehicle"),
|
||||
dataIndex: "vehicle",
|
||||
key: "vehicle",
|
||||
render: (text, record) => (
|
||||
<Link to={`/manage/courtesycars/${record.courtesycar.id}`}>{`${
|
||||
record.courtesycar.year
|
||||
} ${record.courtesycar.make} ${record.courtesycar.model} ${
|
||||
record.courtesycar.plate
|
||||
? `(${record.courtesycar.plate})`
|
||||
: ""
|
||||
}`}</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("contracts.fields.status"),
|
||||
dataIndex: "status",
|
||||
render: (text, record) => t(record.status),
|
||||
},
|
||||
{
|
||||
title: t("contracts.fields.start"),
|
||||
dataIndex: "start",
|
||||
key: "start",
|
||||
render: (text, record) => (
|
||||
<DateTimeFormatter>{record.start}</DateTimeFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("contracts.fields.scheduledreturn"),
|
||||
dataIndex: "scheduledreturn",
|
||||
key: "scheduledreturn",
|
||||
render: (text, record) => (
|
||||
<DateTimeFormatter>{record.scheduledreturn}</DateTimeFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("contracts.fields.actualreturn"),
|
||||
dataIndex: "actualreturn",
|
||||
key: "actualreturn",
|
||||
render: (text, record) => (
|
||||
<DateTimeFormatter>{record.actualreturn}</DateTimeFormatter>
|
||||
),
|
||||
},
|
||||
]}
|
||||
rowKey="id"
|
||||
dataSource={data && data.cccontracts}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ContractsFindModalContainer);
|
||||
@@ -6,8 +6,28 @@ import { useTranslation } from "react-i18next";
|
||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
|
||||
export default function ContractsList({ loading, contracts, refetch, total }) {
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
setContractFinderContext: (context) =>
|
||||
dispatch(setModalContext({ context: context, modal: "contractFinder" })),
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ContractsList);
|
||||
|
||||
export function ContractsList({
|
||||
loading,
|
||||
contracts,
|
||||
refetch,
|
||||
total,
|
||||
setContractFinderContext,
|
||||
}) {
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" },
|
||||
@@ -140,6 +160,9 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button onClick={() => setContractFinderContext()}>
|
||||
{t("contracts.actions.find")}
|
||||
</Button>
|
||||
<Button onClick={() => refetch()}>
|
||||
<SyncOutlined />
|
||||
</Button>
|
||||
@@ -153,6 +176,7 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<ContractsFindModalContainer />
|
||||
<Table
|
||||
loading={loading}
|
||||
scroll={{
|
||||
|
||||
Reference in New Issue
Block a user