From 7889ee61aedf6f173c0c038b267af7ec8fa7980f Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Wed, 18 Mar 2020 21:50:04 -0700 Subject: [PATCH] WIP for manual job creation --- .../jobs-create-owner-info.component.jsx | 16 +++ .../jobs-create-owner-info.container.jsx | 22 ++++ ...obs-create-owner-info.search.component.jsx | 117 ++++++++++++++++++ .../jobs-create-vehicle-info.container.jsx | 6 +- .../jobs-create/jobs-create.component.jsx | 18 +-- .../jobs-create/jobs-create.container.jsx | 4 +- 6 files changed, 170 insertions(+), 13 deletions(-) create mode 100644 client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx create mode 100644 client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx create mode 100644 client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx new file mode 100644 index 000000000..22d03304a --- /dev/null +++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Row, Col, Typography } from "antd"; +export default function JobsCreateOwnerInfoComponent({ loading, owners }) { + return ( +
+ + XX + + + + + + +
+ ); +} diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx new file mode 100644 index 000000000..1c5fa75ff --- /dev/null +++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx @@ -0,0 +1,22 @@ +import React, { useContext } from "react"; +import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component"; +import JobCreateContext from "../../pages/jobs-create/jobs-create.context"; +import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries"; +import { useQuery } from "react-apollo"; +import AlertComponent from "../alert/alert.component"; + +export default function JobsCreateOwnerContainer() { + const [state] = useContext(JobCreateContext); + const { loading, error, data } = useQuery(QUERY_SEARCH_OWNER_BY_IDX, { + variables: { search: `%${state.owner.search}%` }, + skip: !state.vehicle.search + }); + + if (error) return ; + return ( + + ); +} diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx new file mode 100644 index 000000000..7ef0d19bb --- /dev/null +++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx @@ -0,0 +1,117 @@ +import React, { useContext, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Table, Input } from "antd"; +import { Link } from "react-router-dom"; +import { alphaSort } from "../../utils/sorters"; +import JobCreateContext from "../../pages/jobs-create/jobs-create.context"; + +export default function JobsCreateOwnerInfoSearchComponent({ + loading, + owners +}) { + const [state, setState] = useContext(JobCreateContext); + const [tableState, setTableState] = useState({ + sortedInfo: {}, + filteredInfo: { text: "" } + }); + + const { t } = useTranslation(); + + const columns = [ + { + title: t("vehicles.fields.v_vin"), + dataIndex: "v_vin", + key: "v_vin", + sorter: (a, b) => alphaSort(a.v_vin, b.v_vin), + sortOrder: + tableState.sortedInfo.columnKey === "v_vin" && + tableState.sortedInfo.order, + render: (text, record) => ( + {record.v_vin} + ) + }, + { + title: t("vehicles.fields.description"), + dataIndex: "description", + key: "description", + render: (text, record) => { + return ( + {`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`} + ); + } + }, + { + title: t("vehicles.fields.plate_no"), + dataIndex: "plate", + key: "plate", + render: (text, record) => { + return {`${record.plate_st} | ${record.plate_no}`}; + } + } + ]; + + const handleTableChange = (pagination, filters, sorter) => { + setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter }); + }; + //TODO Implement searching & pagination + + return ( + { + return ( + { + setState({ + ...state, + vehicle: { ...state.vehicle, search: value } + }); + }} + enterButton + /> + ); + }} + size='small' + pagination={{ position: "top" }} + columns={columns.map(item => ({ ...item }))} + rowKey='id' + dataSource={vehicles} + onChange={handleTableChange} + rowSelection={{ + onSelect: props => { + setState({ + ...state, + vehicle: { ...state.vehicle, new: false, selectedid: props.id } + }); + }, + type: "radio", + selectedRowKeys: [state.vehicle.selectedid] + }} + onRow={(record, rowIndex) => { + return { + onClick: event => { + if (record) { + if (record.id) { + setState({ + ...state, + vehicle: { + ...state.vehicle, + new: false, + selectedid: record.id + } + }); + console.log("Should be clearing fields."); + return; + } + } + setState({ + ...state, + vehicle: { ...state.vehicle, selectedid: null } + }); + } + }; + }} + /> + ); +} diff --git a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx index 084f4f73b..1a5e05427 100644 --- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx +++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx @@ -1,15 +1,17 @@ import React, { useContext } from "react"; import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component"; import JobCreateContext from "../../pages/jobs-create/jobs-create.context"; - +import AlertComponent from "../alert/alert.component"; import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries"; import { useQuery } from "react-apollo"; + export default function JobsCreateVehicleInfoContainer({ form }) { - const [state, setState] = useContext(JobCreateContext); + const [state] = useContext(JobCreateContext); const { loading, error, data } = useQuery(SEARCH_VEHICLE_BY_VIN, { variables: { vin: `%${state.vehicle.search}%` }, skip: !state.vehicle.search }); + if (error) return ; return ( + content: }, { title: t("jobs.labels.create.ownerinfo"), - content: "Second-content" + content: }, { title: t("jobs.labels.create.jobinfo"), @@ -50,23 +51,22 @@ export default function JobsCreateComponent({ form }) { ))} -
+
{pageIndex > 0 && ( )} {pageIndex < steps.length - 1 && ( - )} {pageIndex === steps.length - 1 && ( )} diff --git a/client/src/pages/jobs-create/jobs-create.container.jsx b/client/src/pages/jobs-create/jobs-create.container.jsx index 323a03c96..b745431e7 100644 --- a/client/src/pages/jobs-create/jobs-create.container.jsx +++ b/client/src/pages/jobs-create/jobs-create.container.jsx @@ -7,11 +7,11 @@ export default function JobsCreateContainer() { const contextState = useState({ vehicle: { new: false, search: "", selectedid: null }, - owner: { new: false }, + owner: { new: false, search: "", selectedid: null }, job: null }); - const [state, setState] = contextState; + const [state] = contextState; const handleFinish = values => { console.log("Form Values", values);