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

Transfer.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-12 19:28:26 -08:00
parent d0244e0767
commit 9d74cc19c9
3 changed files with 13 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import AlertComponent from "../alert/alert.component";
import { Form, Icon, Input, Row, Col } from "antd";
import { Form, Input, Row, Col, Button } from "antd";
function JobTombstone({ job, ...otherProps }) {
const [jobContext, setJobContext] = useState(job);
@@ -16,7 +16,8 @@ function JobTombstone({ job, ...otherProps }) {
const handleSubmit = e => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
otherProps.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
@@ -41,6 +42,11 @@ function JobTombstone({ job, ...otherProps }) {
})(<Input name="ro_number" onChange={handleChange} />)}
</Form.Item>
</Row>
<Form.Item>
<Button type="primary" htmlType="submit">
Save
</Button>
</Form.Item>
</Col>
</Form>
);

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

@@ -6,12 +6,8 @@ import JobTombstone from "../../components/job-tombstone/job-tombstone.component
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Breadcrumb } from "antd";
import Test from "./test";
export default function JobsDetailPage({
match: { routes, params, children }
}) {
const { jobId } = params;
function JobsDetailPage({ match }) {
const { jobId } = match.params;
const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
@@ -19,11 +15,12 @@ export default function JobsDetailPage({
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type="error" />;
console.log('routes', routes)
console.log("routes", match);
return (
<div>
<Breadcrumb routes={routes} params={params} />
<Breadcrumb />
<JobTombstone job={data.jobs_by_pk} />
</div>
);
}
export default JobsDetailPage;

219
client/src/pages/jobs-detail/test.jsx
View File

@@ -1,219 +0,0 @@
import React from "react";
import { Table, Input, Button, Popconfirm, Form } from "antd";
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
state = {
editing: false
};
toggleEdit = () => {
const editing = !this.state.editing;
this.setState({ editing }, () => {
if (editing) {
this.input.focus();
}
});
};
save = e => {
const { record, handleSave } = this.props;
this.form.validateFields((error, values) => {
if (error && error[e.currentTarget.id]) {
return;
}
this.toggleEdit();
handleSave({ ...record, ...values });
});
};
renderCell = form => {
this.form = form;
const { children, dataIndex, record, title } = this.props;
const { editing } = this.state;
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={this.toggleEdit}
>
{children}
</div>
);
};
render() {
const {
editable,
dataIndex,
title,
record,
index,
handleSave,
children,
...restProps
} = this.props;
return (
<td {...restProps}>
{editable ? (
<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
) : (
children
)}
</td>
);
}
}
export default class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
title: "name",
dataIndex: "name",
width: "30%",
editable: true
},
{
title: "age",
dataIndex: "age"
},
{
title: "address",
dataIndex: "address"
},
{
title: "operation",
dataIndex: "operation",
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<Popconfirm
title="Sure to delete?"
onConfirm={() => this.handleDelete(record.key)}
>
<a>Delete</a>
</Popconfirm>
) : null
}
];
this.state = {
dataSource: [
{
key: "0",
name: "Edward King 0",
age: "32",
address: "London, Park Lane no. 0"
},
{
key: "1",
name: "Edward King 1",
age: "32",
address: "London, Park Lane no. 1"
}
],
count: 2
};
}
handleDelete = key => {
const dataSource = [...this.state.dataSource];
this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
};
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1
});
};
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row
});
this.setState({ dataSource: newData });
};
render() {
const { dataSource } = this.state;
const components = {
body: {
row: EditableFormRow,
cell: EditableCell
}
};
const columns = this.columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: this.handleSave
})
};
});
return (
<div>
<Button
onClick={this.handleAdd}
type="primary"
style={{ marginBottom: 16 }}
>
Add a row
</Button>
<Table
components={components}
rowClassName={() => "editable-row"}
bordered
dataSource={dataSource}
columns={columns}
/>
</div>
);
}
}