Added find owner modal and basic searching logic.
This commit is contained in:
Patrick Fic
@@ -1,8 +1,8 @@
|
||||
import { Input, Table, Button, Icon, notification, Modal } from "antd";
|
||||
import { Button, Icon, Input, notification, Table } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.container";
|
||||
export default function JobsAvailableComponent({
|
||||
loading,
|
||||
@@ -10,9 +10,12 @@ export default function JobsAvailableComponent({
|
||||
refetch,
|
||||
deleteJob,
|
||||
deleteAllNewJobs,
|
||||
insertNewJob,
|
||||
setJobId,
|
||||
estDataLazyLoad
|
||||
estDataLazyLoad,
|
||||
onModalOk,
|
||||
onModalCancel,
|
||||
modalVisible,
|
||||
setModalVisible,
|
||||
selectedOwner, setSelectedOwner
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [loadEstData, estData] = estDataLazyLoad;
|
||||
@@ -22,7 +25,7 @@ export default function JobsAvailableComponent({
|
||||
filteredInfo: { text: "" }
|
||||
});
|
||||
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
@@ -121,8 +124,6 @@ export default function JobsAvailableComponent({
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log("record.id", record.id);
|
||||
|
||||
loadEstData({ variables: { id: record.id } });
|
||||
setModalVisible(true);
|
||||
}}
|
||||
@@ -136,8 +137,6 @@ export default function JobsAvailableComponent({
|
||||
}
|
||||
];
|
||||
|
||||
console.log("estData", estData);
|
||||
|
||||
const owner =
|
||||
estData.data &&
|
||||
estData.data.available_jobs_by_pk &&
|
||||
@@ -146,27 +145,18 @@ export default function JobsAvailableComponent({
|
||||
estData.data.available_jobs_by_pk.est_data.owner.data
|
||||
? estData.data.available_jobs_by_pk.est_data.owner.data
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<OwnerFindModalContainer
|
||||
loading={estData.loading}
|
||||
error={estData.error}
|
||||
owner={owner}
|
||||
selectedOwner={selectedOwner}
|
||||
setSelectedOwner={setSelectedOwner}
|
||||
visible={modalVisible}
|
||||
onOk={() => {
|
||||
setModalVisible(false);
|
||||
// insertNewJob({
|
||||
// variables: {
|
||||
// job: record.est_data
|
||||
// }
|
||||
// }).then(r => {
|
||||
// notification["success"]({
|
||||
// message: t("jobs.successes.created")
|
||||
// });
|
||||
// refetch();
|
||||
// });
|
||||
}}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
onOk={onModalOk}
|
||||
onCancel={onModalCancel}
|
||||
/>
|
||||
|
||||
<Table
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useMutation, useQuery } from "react-apollo";
|
||||
import {
|
||||
DELETE_ALL_AVAILABLE_NEW_JOBS,
|
||||
@@ -13,9 +13,28 @@ export default function JobsAvailableContainer({ deleteJob, estDataLazyLoad }) {
|
||||
fetchPolicy: "network-only"
|
||||
});
|
||||
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [selectedOwner, setSelectedOwner] = useState(null);
|
||||
const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_NEW_JOBS);
|
||||
const [insertNewJob] = useMutation(INSERT_NEW_JOB);
|
||||
|
||||
const onModalOk = () => {
|
||||
setModalVisible(false);
|
||||
console.log("selectedOwner", selectedOwner);
|
||||
// insertNewJob({
|
||||
// variables: {
|
||||
// job: record.est_data
|
||||
// }
|
||||
// }).then(r => {
|
||||
// notification["success"]({
|
||||
// message: t("jobs.successes.created")
|
||||
// });
|
||||
// refetch();
|
||||
// });
|
||||
};
|
||||
|
||||
const onModalCancel = () => setModalVisible(false);
|
||||
|
||||
if (error) return <AlertComponent type="error" message={error.message} />;
|
||||
return (
|
||||
<JobsAvailableComponent
|
||||
@@ -26,6 +45,12 @@ export default function JobsAvailableContainer({ deleteJob, estDataLazyLoad }) {
|
||||
deleteAllNewJobs={deleteAllNewJobs}
|
||||
insertNewJob={insertNewJob}
|
||||
estDataLazyLoad={estDataLazyLoad}
|
||||
onModalCancel={onModalCancel}
|
||||
onModalOk={onModalOk}
|
||||
modalVisible={modalVisible}
|
||||
setModalVisible={setModalVisible}
|
||||
selectedOwner={selectedOwner}
|
||||
setSelectedOwner={setSelectedOwner}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,124 @@
|
||||
import { Table, Checkbox, Divider } from "antd";
|
||||
import React from "react";
|
||||
export default function OwnerFindModalComponent() {
|
||||
return <div>Modal Componnentasdasd</div>;
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PhoneFormatter from "../../utils/PhoneFormatter";
|
||||
|
||||
export default function OwnerFindModalComponent({
|
||||
selectedOwner,
|
||||
setSelectedOwner,
|
||||
ownersListLoading,
|
||||
ownersList
|
||||
}) {
|
||||
//setSelectedOwner is used to set the record id of the owner to use for adding the job.
|
||||
const { t } = useTranslation();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("owners.fields.ownr_ln"),
|
||||
dataIndex: "ownr_ln",
|
||||
key: "ownr_ln"
|
||||
//width: "8%",
|
||||
// onFilter: (value, record) => record.ro_number.includes(value),
|
||||
// // filteredValue: state.filteredInfo.text || null,
|
||||
// sorter: (a, b) => alphaSort(a, b),
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_fn"),
|
||||
dataIndex: "ownr_fn",
|
||||
key: "ownr_fn"
|
||||
// ellipsis: true,
|
||||
// sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
// //width: "25%",
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_addr1"),
|
||||
dataIndex: "ownr_addr1",
|
||||
key: "ownr_addr1"
|
||||
// sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
|
||||
//ellipsis: true
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_city"),
|
||||
dataIndex: "ownr_city",
|
||||
key: "ownr_city"
|
||||
// sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
|
||||
//width: "12%",
|
||||
//ellipsis: true
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ea"),
|
||||
dataIndex: "ownr_ea",
|
||||
key: "ownr_ea"
|
||||
// sorter: (a, b) => a.clm_amt - b.clm_amt,
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
|
||||
//width: "12%",
|
||||
//ellipsis: true
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph1"),
|
||||
dataIndex: "ownr_ph1",
|
||||
key: "ownr_ph1",
|
||||
render: (text, record) => (
|
||||
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
|
||||
)
|
||||
// sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
|
||||
// sortOrder:
|
||||
// state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
|
||||
//width: "12%",
|
||||
//ellipsis: true
|
||||
}
|
||||
];
|
||||
|
||||
const handleOnRowClick = record => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
setSelectedOwner(record.id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
setSelectedOwner(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
title={() => t("owners.labels.existing_owners")}
|
||||
size="small"
|
||||
pagination={{ position: "bottom" }}
|
||||
columns={columns.map(item => ({ ...item }))}
|
||||
rowKey="id"
|
||||
loading={ownersListLoading}
|
||||
dataSource={ownersList}
|
||||
//onChange={handleTableChange}
|
||||
rowSelection={{ selectedRowKeys: [selectedOwner] }}
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: event => {
|
||||
handleOnRowClick(record);
|
||||
}, // click row
|
||||
onDoubleClick: event => {}, // double click row
|
||||
onContextMenu: event => {}, // right button click row
|
||||
onMouseEnter: event => {}, // mouse enter row
|
||||
onMouseLeave: event => {} // mouse leave row
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Divider />
|
||||
<Checkbox
|
||||
checked={selectedOwner ? false : true}
|
||||
onClick={() => setSelectedOwner(null)}
|
||||
>
|
||||
Create a new Owner record for this job.
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,53 @@
|
||||
import React from "react";
|
||||
import { Modal } from "antd";
|
||||
import OwnerFindModalComponent from "./owner-find-modal.component";
|
||||
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
||||
import React from "react";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import { json } from "body-parser";
|
||||
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
||||
import OwnerFindModalComponent from "./owner-find-modal.component";
|
||||
import { useQuery } from "react-apollo";
|
||||
import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function OwnerFindModalContainer({
|
||||
loading,
|
||||
error,
|
||||
owner,
|
||||
selectedOwner,
|
||||
setSelectedOwner,
|
||||
...modalProps
|
||||
}) {
|
||||
//use owner object to run query and find what possible owners there are.
|
||||
const { t } = useTranslation();
|
||||
|
||||
const ownersList = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
|
||||
variables: {
|
||||
search: owner
|
||||
? `${owner.ownr_fn} ${owner.ownr_ln} ${owner.ownr_addr1} ${owner.ownr_city} ${owner.ownr_zip} ${owner.ownr_ea} ${owner.ownr_ph1} ${owner.ownr_ph2}`
|
||||
: null
|
||||
},
|
||||
skip: !owner,
|
||||
fetchPolicy: "network-only"
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal {...modalProps}>
|
||||
<Modal
|
||||
title={t("owners.labels.existing_owners")}
|
||||
width={"80%"}
|
||||
{...modalProps}
|
||||
>
|
||||
{loading ? <LoadingSpinner /> : null}
|
||||
{error ? <AlertComponent message={error.message} type="error" /> : null}
|
||||
{owner ? <OwnerFindModalComponent /> : null}
|
||||
{owner ? JSON.stringify(owner) : null}
|
||||
{owner ? (
|
||||
<OwnerFindModalComponent
|
||||
selectedOwner={selectedOwner}
|
||||
setSelectedOwner={setSelectedOwner}
|
||||
ownersListLoading={ownersList.loading}
|
||||
ownersList={
|
||||
ownersList.data && ownersList.data.search_owners
|
||||
? ownersList.data.search_owners
|
||||
: null
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user