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

Added basic parts ordering window on job lines.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-13 12:28:50 -08:00
parent 5b873146b8
commit 70259eb0d4
11 changed files with 171 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
View File

@@ -18,13 +18,12 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.documents")}
extraLink={`/manage/jobs/${data.id}#documents`}>
{data.documents.count > 0 ? (
extraLink={`/manage/jobs/${data.id}#documents`}
>
{data.documents.length > 0 ? (
<Carousel autoplay>
{data.documents.map(item => (
<div key={item.id}>
<img src={item.thumb_url} alt={item.name} />
</div>
<img key={item.id} src={item.thumb_url} alt={item.name} />
))}
</Carousel>
) : (

21
client/src/components/job-detail-cards/job-detail-cards.documents.styles.scss
View File

@@ -1,11 +1,12 @@
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
text-align: center;
height: 50px;
width: 50px;
line-height: 50px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #ccddaa;
}

52
client/src/components/job-detail-lines/job-lines-cell.component.jsx
View File

@@ -1,52 +0,0 @@
import React from "react";
import { Form, Input, InputNumber } from "antd";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
export default class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === "number") {
return <InputNumber />;
}
return <Input />;
};
renderCell = ({ getFieldDecorator }) => {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
} = this.props;
return (
<td {...restProps}>
{editing ? (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `Please Input ${title}!`
}
],
initialValue: record[dataIndex]
})(this.getInput())}
</Form.Item>
) : (
children
)}
</td>
);
};
render() {
return (
<JobDetailFormContext.Consumer>
{this.renderCell}
</JobDetailFormContext.Consumer>
);
}
}

87
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -1,23 +1,24 @@
import { Input, Table } from "antd";
import { Input, Table, Button } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
//import EditableCell from "./job-lines-cell.component";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
export default function JobLinesComponent({
jobLines,
form,
handleSubmit,
setSearchText
setSearchText,
selectedLines,
setSelectedLines,
partsOrderModalVisible
}) {
const [state, setState] = useState({
sortedInfo: {}
});
const { t } = useTranslation();
const [partsModalVisible, setPartsModalVisible] = partsOrderModalVisible;
const columns = [
{
title: t("joblines.fields.unq_seq"),
@@ -130,6 +131,16 @@ export default function JobLinesComponent({
/>
</span>
)
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<span>
<Button>{t("general.actions.edit")}</Button>
</span>
)
}
];
@@ -137,10 +148,6 @@ export default function JobLinesComponent({
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
// const handleChange = event => {
// const { value } = event.target;
// setState({ ...state, filterinfo: { text: [value] } });
// };
const formItemLayout = {
labelCol: {
xs: { span: 12 },
@@ -153,25 +160,45 @@ export default function JobLinesComponent({
};
return (
<Table
title={() => {
return (
<Input.Search
placeholder="Search..."
onChange={e => {
e.preventDefault();
setSearchText(e.target.value);
}}
/>
);
}}
{...formItemLayout}
size="small"
pagination={{ position: "bottom", defaultPageSize: 50 }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={jobLines}
onChange={handleTableChange}
/>
<div>
<PartsOrderModalContainer
partsOrderModalVisible={partsOrderModalVisible}
linesToOrder={selectedLines}
/>
<Table
title={() => {
return (
<div>
<Input.Search
placeholder={t("general.labels.search")}
onChange={e => {
e.preventDefault();
setSearchText(e.target.value);
}}
/>
<Button
disabled={selectedLines.length > 0 ? false : true}
onClick={() => setPartsModalVisible(true)}
>
{t("parts.actions.order")}
</Button>
</div>
);
}}
{...formItemLayout}
size="small"
pagination={{ position: "bottom", defaultPageSize: 50 }}
rowSelection={{
// selectedRowKeys: selectedLines,
onSelect: (record, selected, selectedRows, nativeEvent) =>
setSelectedLines(selectedRows)
}}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={jobLines}
onChange={handleTableChange}
/>
</div>
);
}

39
client/src/components/job-detail-lines/job-lines.container.jsx
View File

@@ -1,47 +1,21 @@
import { useQuery } from "@apollo/react-hooks";
import { notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
import AlertComponent from "../alert/alert.component";
import JobLinesComponent from "./job-lines.component";
//export default Form.create({ name: "JobsDetailJobLines" })(
export default function JobLinesContainer({ jobId, form }) {
export default function JobLinesContainer({ jobId }) {
const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
const [searchText, setSearchText] = useState("");
const { t } = useTranslation();
const handleSubmit = e => {
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (err) {
notification["error"]({
message: t("jobs.errors.validationtitle"),
description: t("jobs.errors.validation")
});
}
if (!err) {
console.log("Save the est lines!", values);
// mutationUpdateJob({
// variables: { jobId: data.jobs_by_pk.id, job: values }
// }).then(r => {
// notification["success"]({
// message: t("jobs.successes.savetitle")
// });
// //TODO: Better way to reset the field decorators?
// refetch().then(r => form.resetFields());
// });
}
});
};
const [selectedLines, setSelectedLines] = useState([]);
const partsOrderModalVisible = useState(false);
if (error) return <AlertComponent message={error.message} type="error" />;
return (
@@ -78,9 +52,10 @@ export default function JobLinesContainer({ jobId, form }) {
: data.joblines
: null
}
handleSubmit={handleSubmit}
form={form}
setSearchText={setSearchText}
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
partsOrderModalVisible={partsOrderModalVisible}
/>
);
}

5
client/src/components/parts-order-modal/parts-order-modal.component.jsx Normal file
View File

@@ -0,0 +1,5 @@
import React from "react";
export default function PartsOrderModalComponent() {
return <div>Component</div>;
}

16
client/src/components/parts-order-modal/parts-order-modal.container.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import { Modal } from "antd";
import PartsOrderModalComponent from "./parts-order-modal.component";
export default function PartsOrderModalContainer({
partsOrderModalVisible,
linesToOrder
}) {
console.log("partsord", partsOrderModalVisible);
const [modalVisible, setModalVisible] = partsOrderModalVisible;
return (
<Modal visible={modalVisible} onCancel={() => setModalVisible(false)}>
{JSON.stringify(linesToOrder)}
<PartsOrderModalComponent />
</Modal>
);
}