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

In Progress work for Jobs Form.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-12 15:43:03 -08:00
parent bca375251e
commit d0244e0767
16 changed files with 553 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/alert/alert.component.jsx
View File

@@ -2,6 +2,6 @@ import { Alert } from "antd";
import React from "react";
export default function AlertComponent({ props }) {
export default function AlertComponent(props) {
return <Alert {...props} />;
}

35
client/src/components/header/header.component.jsx
View File

@@ -3,50 +3,17 @@ import { Link } from "react-router-dom";
import { Menu, Icon } from "antd";
import "./header.styles.scss";
import SignOut from "../sign-out/sign-out.component";
import { useQuery } from "react-apollo";
import {
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
import { useApolloClient } from "@apollo/react-hooks";
import GlobalSearch from "../global-search/global-search.component";
export default ({ landingHeader, signedIn }) => {
export default ({ landingHeader, navItems, selectedNavItem }) => {
const apolloClient = useApolloClient();
const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
let hookNavItems;
if (landingHeader) {
hookNavItems = useQuery(GET_LANDING_NAV_ITEMS, {
fetchPolicy: "network-only"
});
} else {
hookNavItems = useQuery(GET_NAV_ITEMS, {
fetchPolicy: "network-only"
});
}
const handleClick = e => {
apolloClient.writeData({ data: { selectedNavItem: e.key } });
};
if (hookNavItems.loading || hookSelectedNavItem.loading)
return <LoadingSpinner />;
if (hookNavItems.error)
return <AlertComponent message={hookNavItems.error.message} />;
if (hookSelectedNavItem.error)
return console.log(
"Unable to load Selected Navigation Item.",
hookSelectedNavItem.error
);
const { selectedNavItem } = hookSelectedNavItem.data;
const navItems = JSON.parse(hookNavItems.data.masterdata_by_pk.value);
return (
<Menu
theme="dark"

47
client/src/components/header/header.container.jsx Normal file
View File

@@ -0,0 +1,47 @@
import React from "react";
import "./header.styles.scss";
import { useQuery } from "react-apollo";
import {
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import HeaderComponent from "./header.component";
export default ({ landingHeader, signedIn }) => {
const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
let hookNavItems;
if (landingHeader) {
hookNavItems = useQuery(GET_LANDING_NAV_ITEMS, {
fetchPolicy: "network-only"
});
} else {
hookNavItems = useQuery(GET_NAV_ITEMS, {
fetchPolicy: "network-only"
});
}
if (hookNavItems.loading || hookSelectedNavItem.loading)
return <LoadingSpinner />;
if (hookNavItems.error)
return <AlertComponent message={hookNavItems.error.message} />;
if (hookSelectedNavItem.error)
return console.log(
"Unable to load Selected Navigation Item.",
hookSelectedNavItem.error
);
const { selectedNavItem } = hookSelectedNavItem.data;
const navItems = JSON.parse(hookNavItems.data.masterdata_by_pk.value);
return (
<HeaderComponent
landingHeader={landingHeader}
navItems={navItems}
selectedNavItem={selectedNavItem}
/>
);
};

12
client/src/components/job-list/job-list.component.jsx
View File

@@ -1,12 +0,0 @@
import React from "react";
export default ({ jobs }) => (
<div>
<span>Job List</span>
<div>
{jobs.map(job => (
<p key={job.est_number}>{job.est_number}</p>
))}
</div>
</div>
);

30
client/src/components/job-list/job-list.container.jsx
View File

@@ -1,30 +0,0 @@
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Alert } from "antd";
import Spin from '../loading-spinner/loading-spinner.component'
import JobList from "./job-list.component";
const GET_JOBS = gql`
query get_jobs {
jobs {
est_number
}
}
`;
const JobListContainer = () => (
<Query query={GET_JOBS}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
console.log("JobListContainer Data:", data);
return <JobList jobs={data.jobs} />;
}}
</Query>
);
export default JobListContainer;

49
client/src/components/job-tombstone/job-tombstone.component.jsx Normal file
View File

@@ -0,0 +1,49 @@
import React, { useState } from "react";
import AlertComponent from "../alert/alert.component";
import { Form, Icon, Input, Row, Col } from "antd";
function JobTombstone({ job, ...otherProps }) {
const [jobContext, setJobContext] = useState(job);
if (!job) {
return (
<AlertComponent
message="This job does not exist or you do not have access to it."
type="error"
/>
);
}
const handleSubmit = e => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
};
const handleChange = event => {
const { name, value } = event.target;
setJobContext({ ...jobContext, [name]: value });
console.log("jobContext", jobContext);
};
console.log("#DEBUG", job);
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.Item>
</Row>
</Col>
</Form>
);
}
export default Form.create({ name: "JobTombstone" })(JobTombstone);

95
client/src/components/jobs-list/jobs-list.component.jsx Normal file
View File

@@ -0,0 +1,95 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Table, Divider, Icon } from "antd";
import { alphaSort } from "../../utils/sorters";
export default function JobsPage({ loading, jobs }) {
const [sortedInfo, setSortedInfo] = useState({});
const columns = [
{
title: "RO #",
dataIndex: "ro_number",
key: "ro_number",
sorter: (a, b) => alphaSort(a, b),
sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
ellipsis: true,
render: (text, record) => (
<span>
<Link to={`/manage/jobs/${record.id}`}>{record.ro_number}</Link>
</span>
)
},
{
title: "Est. #",
dataIndex: "est_number",
key: "est_number"
},
{
title: "Status",
dataIndex: "status",
key: "status",
sorter: (a, b) => alphaSort(a, b),
sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
ellipsis: true
},
{
title: "Customer",
dataIndex: "customer",
key: "customer",
render: (text, record) => {
return record.owner ? (
<div>
{record.owner.first_name} {record.owner.last_name}
</div>
) : (
"No Customer"
);
}
},
{
title: "Vehicle",
dataIndex: "vehicle",
key: "vehicle",
render: (text, record) => {
return record.vehicle ? (
<div>
{record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
{record.vehicle.v_model_desc}
</div>
) : (
"No Vehicle"
);
}
},
{
title: "Action",
key: "action",
render: (text, record) => (
<span>
Action 一 {record.ro_number}
<Divider type="vertical" />
<Divider type="vertical" />
More actions <Icon type="down" />
</span>
)
}
];
const handleChange = (pagination, filters, sorter) => {
setSortedInfo(sorter);
};
return (
<div>
<Table
loading={loading}
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={jobs}
onChange={handleChange}
/>
</div>
);
}

45
client/src/components/with-inline-edit/with-inline-edit.component.jsx Normal file
View File

@@ -0,0 +1,45 @@
import React, { useState } from "react";
export default WithInlineEdit = WrappedComponent => props => {
const [editing, setEditing] = useState(false);
const [modified, setModified] = useState(false);
const [originalValue, setOriginalValue] = useState(null);
const toggleEdit = () => {
setEditing(!editing);
if (editing) {
this.input.focus();
}
};
return editing ? (
<Form.Item style={{ margin: 0 }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `${title} is required.`
}
],
initialValue: record[dataIndex]
})(
<Input
ref={node => (this.input = node)}
onPressEnter={this.save}
onBlur={this.save}
/>
)}
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={{ paddingRight: 24 }}
onClick={toggleEdit}
>
{children}
</div>
);
};
export default WithInlineEdit;