admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jobslines schema. Added phone number formatting.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-16 17:41:07 -08:00
parent 337048f0e9
commit 03d99a27c3
42 changed files with 1076 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/App/App.container.jsx
View File

@@ -49,14 +49,14 @@ class AppContainer extends Component {
// split based on operation type
({ query }) => {
const definition = getMainDefinition(query);
console.log(
"##Intercepted GQL Transaction : " +
definition.operation +
"|" +
definition.name.value +
"##",
query
);
// console.log(
// "##Intercepted GQL Transaction : " +
// definition.operation +
// "|" +
// definition.name.value +
// "##",
// query
// );
return (
definition.kind === "OperationDefinition" &&
definition.operation === "subscription"

21
client/src/App/App.js
View File

@@ -23,23 +23,24 @@ export default () => {
useEffect(() => {
//Run the auth code only on the first render.
const unsubscribeFromAuth = auth.onIdTokenChanged(async user => {
const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
if (user) {
let token;
token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (!hasuraClaim) {
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + user.uid + "/refreshTime");
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + user.uid + "/refreshTime");
metadataRef.on("value", async params => {
console.log("params", params);
// Force refresh to pick up the latest custom claims changes.
token = await user.getIdToken(true);
});
metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes.
token = await user.getIdToken(true);
});
}
apolloClient.writeData({
data: {

14
client/src/components/form-items-formatted/phone-form-item.component.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React, { forwardRef } from "react";
import NumberFormat from "react-number-format";
function FormItemPhone(props, ref) {
return (
<NumberFormat
{...props}
type="tel"
format="###-###-####"
/>
);
}
export default forwardRef(FormItemPhone);

53
client/src/components/job-lines/job-lines.component.jsx Normal file
View File

@@ -0,0 +1,53 @@
import React, { useState } from "react";
import { Table } from "antd";
import { alphaSort } from "../../utils/sorters";
export default function JobLinesComponent({ loading, joblines }) {
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" }
});
const columns = [
{
title: "Line #",
dataIndex: "line_ind",
key: "line_ind",
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
ellipsis: true
},
{
title: "Description",
dataIndex: "line_desc",
key: "line_desc",
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
ellipsis: true
}
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const handleChange = event => {
const { value } = event.target;
setState({ ...state, filterinfo: { text: [value] } });
};
console.log('joblines', joblines)
return (
<Table
loading={loading}
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={joblines}
onChange={handleTableChange}
/>
);
}

19
client/src/components/job-lines/job-lines.container.component.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from "react";
import JobLinesComponent from "./job-lines.component";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../../components/alert/alert.component";
import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
export default function JobLinesContainer({ match }) {
const { jobId } = match.params;
const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<JobLinesComponent loading={loading} joblines={data ? data.joblines : null} />
);
}

129
client/src/components/job-tombstone/job-tombstone.component.jsx
View File

@@ -1,8 +1,30 @@
import React, { useState } from "react";
import AlertComponent from "../alert/alert.component";
import { Form, Input, Row, Col, Button } from "antd";
import {
Form,
Input,
Row,
Col,
Button,
Typography,
PageHeader,
Descriptions,
Tag
} from "antd";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { useMutation } from "@apollo/react-hooks";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 }
}
};
function JobTombstone({ job, ...otherProps }) {
const [jobContext, setJobContext] = useState(job);
@@ -22,8 +44,6 @@ function JobTombstone({ job, ...otherProps }) {
otherProps.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
mutationUpdateJob({
variables: { jobId: jobContext.id, job: values }
}).then(r => console.log("result", r));
@@ -32,27 +52,102 @@ function JobTombstone({ job, ...otherProps }) {
};
const handleChange = event => {
const { name, value } = event.target;
const { name, value } = event.target ? event.target : event;
setJobContext({ ...jobContext, [name]: value });
};
const { getFieldDecorator } = otherProps.form;
return (
<Form onSubmit={handleSubmit}>
<Col span={22} offset={1}>
<Row>
<Form.Item label="RO #">
{getFieldDecorator("ro_number", {
initialValue: jobContext.ro_number
})(<Input name="ro_number" onChange={handleChange} />)}
<Form onSubmit={handleSubmit} {...formItemLayout}>
<PageHeader
style={{
border: "1px solid rgb(235, 237, 240)"
}}
title={"RO " + jobContext.ro_number ?? "0"}
subTitle={
jobContext.owner
? jobContext.owner?.first_name ??
+" " + jobContext.owner?.first_name
: "No owner"
}
tags={<Tag color="blue">{jobContext?.status}</Tag>}
extra={[
<Form.Item key="1">
<Button type="primary" htmlType="submit">
Save
</Button>
</Form.Item>
</Row>
<Form.Item>
<Button type="primary" htmlType="submit">
Save
</Button>
]}
>
<Descriptions size="small" column={3}>
<Descriptions.Item label="Claim Total">
$ {jobContext.claim_total?.toFixed(2)}
</Descriptions.Item>
<Descriptions.Item label="Deductible">
$ {jobContext.deductible?.toFixed(2)}
</Descriptions.Item>
</Descriptions>
</PageHeader>
<Row>
<Typography.Title level={4}>Information</Typography.Title>
<Form.Item label="RO #">
{getFieldDecorator("ro_number", {
initialValue: jobContext.ro_number
})(<Input name="ro_number" readOnly onChange={handleChange} />)}
</Form.Item>
</Col>
<Form.Item label="Estimate #">
{getFieldDecorator("est_number", {
initialValue: jobContext.est_number
})(<Input name="est_number" readOnly onChange={handleChange} />)}
</Form.Item>
</Row>
<Row>
<Typography.Title level={4}>Insurance Information</Typography.Title>
<Form.Item label="Insurance Company">
{getFieldDecorator("est_co_nm", {
initialValue: jobContext.est_co_nm
})(<Input name="est_co_nm" onChange={handleChange} />)}
</Form.Item>
<Col span={8}>
<Form.Item label="Estimator Last Name">
{getFieldDecorator("est_ct_ln", {
initialValue: jobContext.est_ct_ln
})(<Input name="est_ct_ln" onChange={handleChange} />)}
</Form.Item>
<Form.Item label="Estimator First Name">
{getFieldDecorator("est_ct_fn", {
initialValue: jobContext.est_ct_fn
})(<Input name="est_ct_fn" onChange={handleChange} />)}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="Estimator Phone #">
{getFieldDecorator("est_ph1", {
initialValue: jobContext.est_ph1
})(
<FormItemPhone
customInput={Input}
name="est_ph1"
onValueChange={handleChange}
/>
)}
</Form.Item>
<Form.Item label="Estimator Email">
{getFieldDecorator("est_ea", {
initialValue: jobContext.est_ea,
rules: [
{
type: "email",
message: "This is not a valid email address."
}
]
})(<Input name="est_ea" onChange={handleChange} />)}
</Form.Item>
</Col>
</Row>
</Form>
);
}

8
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -6,7 +6,7 @@ import { alphaSort } from "../../utils/sorters";
export default function JobsPage({ loading, jobs }) {
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: null
filteredInfo: { text: "" }
});
const columns = [
@@ -14,8 +14,8 @@ export default function JobsPage({ loading, jobs }) {
title: "RO #",
dataIndex: "ro_number",
key: "ro_number",
onFilter: (value, record) => record.ro_number.includes(value),
filteredValue: state.filteredInfo.text || null,
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
@@ -88,7 +88,7 @@ export default function JobsPage({ loading, jobs }) {
};
const handleChange = event => {
const { name, value } = event.target;
const { value } = event.target;
setState({ ...state, filterinfo: { text: [value] } });
};

11
client/src/graphql/jobs-lines.queries.js Normal file
View File

@@ -0,0 +1,11 @@
import { gql } from "apollo-boost";
export const GET_JOB_LINES_BY_PK = gql`
query GET_JOB_LINES_BY_PK($id: uuid!) {
joblines(where: { jobid: { _eq: $id } }) {
id
line_ind
line_desc
}
}
`;

32
client/src/graphql/jobs.queries.js
View File

@@ -62,29 +62,11 @@ export const GET_JOB_BY_PK = gql`
last_name
phone
}
rate_atp
rate_la1
rate_la2
rate_la3
rate_la4
rate_lab
rate_lad
rate_lae
rate_laf
rate_lag
rate_lam
rate_lar
rate_las
rate_lau
rate_ma2s
rate_ma2t
rate_mabl
rate_ma3s
rate_macs
rate_mahw
rate_mapa
rate_mash
rate_matd
est_co_nm
est_ph1
est_ea
est_ct_fn
est_ct_ln
regie_number
ro_number
scheduled_completion
@@ -92,6 +74,8 @@ export const GET_JOB_BY_PK = gql`
scheduled_delivery
status
updated_at
claim_total
deductible
vehicle {
plate_no
v_vin
@@ -109,6 +93,8 @@ export const UPDATE_JOB = gql`
update_jobs(where: { id: { _eq: $jobId } }, _set: $job) {
returning {
id
est_ph1
est_ea
}
}
}

5
client/src/graphql/resolvers.js
View File

@@ -1,8 +1,5 @@
import { gql } from "apollo-boost";
import {
GET_CURRENT_USER,
GET_WHITE_BOARD_LEFT_SIDER_VISIBLE
} from "./local.queries";
import { GET_CURRENT_USER } from "./local.queries";
export const typeDefs = gql`
extend type Mutation {

44
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -4,7 +4,8 @@ import SpinComponent from "../../components/loading-spinner/loading-spinner.comp
import AlertComponent from "../../components/alert/alert.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Breadcrumb } from "antd";
import { Tabs, Icon, Row } from "antd";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
function JobsDetailPage({ match }) {
const { jobId } = match.params;
@@ -17,7 +18,46 @@ function JobsDetailPage({ match }) {
return (
<div>
<JobTombstone job={data.jobs_by_pk} />
<Row>
<JobTombstone job={data.jobs_by_pk} />
</Row>
<Row>
<Tabs defaultActiveKey="lines">
<Tabs.TabPane
tab={
<span>
<Icon type="bars" />
Lines
</span>
}
key="lines"
>
<JobLinesContainer match={match} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon type="dollar" />
Rates
</span>
}
key="rates"
>
Estimate Rates
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon type="tool1" />
Parts
</span>
}
key="parts"
>
Estimate Parts
</Tabs.TabPane>
</Tabs>
</Row>
</div>
);
}

13
client/src/pages/manage/manage.page.jsx
View File

@@ -8,7 +8,7 @@ import JobsDetailPage from "../jobs-detail/jobs-detail.page";
import HeaderContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component";
import { Layout, BackTop } from "antd";
import { Layout, BackTop, Col } from "antd";
const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application.
@@ -20,10 +20,15 @@ export default function Manage({ match }) {
</Header>
<Content>
<Route exact path={`${match.path}`} component={WhiteBoardPage} />
<Col span={22} offset={1}>
<Route exact path={`${match.path}`} component={WhiteBoardPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Route
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage}
/>
</Col>
</Content>
<Footer>