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

54
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2"> <babeledit_project version="1.2" be_version="2.6.1">
<!-- <!--
BabelEdit project file BabelEdit project file
@@ -1346,6 +1346,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>search</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>unknown</name> <name>unknown</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -5769,6 +5790,37 @@
</folder_node> </folder_node>
</children> </children>
</folder_node> </folder_node>
<folder_node>
<name>parts</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>order</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>
</folder_node>
<folder_node> <folder_node>
<name>profile</name> <name>profile</name>
<children> <children>

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 <CardTemplate
loading={loading} loading={loading}
title={t("jobs.labels.cards.documents")} title={t("jobs.labels.cards.documents")}
extraLink={`/manage/jobs/${data.id}#documents`}> extraLink={`/manage/jobs/${data.id}#documents`}
{data.documents.count > 0 ? ( >
{data.documents.length > 0 ? (
<Carousel autoplay> <Carousel autoplay>
{data.documents.map(item => ( {data.documents.map(item => (
<div key={item.id}> <img key={item.id} src={item.thumb_url} alt={item.name} />
<img src={item.thumb_url} alt={item.name} />
</div>
))} ))}
</Carousel> </Carousel>
) : ( ) : (

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

@@ -1,11 +1,12 @@
.ant-carousel .slick-slide { .ant-carousel .slick-slide {
text-align: center; text-align: center;
height: 160px; height: 50px;
line-height: 160px; width: 50px;
background: #364d79; line-height: 50px;
overflow: hidden; background: #364d79;
} overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff; .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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
//import EditableCell from "./job-lines-cell.component"; //import EditableCell from "./job-lines-cell.component";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container"; import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
export default function JobLinesComponent({ export default function JobLinesComponent({
jobLines, jobLines,
form, setSearchText,
handleSubmit, selectedLines,
setSearchText setSelectedLines,
partsOrderModalVisible
}) { }) {
const [state, setState] = useState({ const [state, setState] = useState({
sortedInfo: {} sortedInfo: {}
}); });
const { t } = useTranslation(); const { t } = useTranslation();
const [partsModalVisible, setPartsModalVisible] = partsOrderModalVisible;
const columns = [ const columns = [
{ {
title: t("joblines.fields.unq_seq"), title: t("joblines.fields.unq_seq"),
@@ -130,6 +131,16 @@ export default function JobLinesComponent({
/> />
</span> </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 }); setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
}; };
// const handleChange = event => {
// const { value } = event.target;
// setState({ ...state, filterinfo: { text: [value] } });
// };
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 12 }, xs: { span: 12 },
@@ -153,25 +160,45 @@ export default function JobLinesComponent({
}; };
return ( return (
<Table <div>
title={() => { <PartsOrderModalContainer
return ( partsOrderModalVisible={partsOrderModalVisible}
<Input.Search linesToOrder={selectedLines}
placeholder="Search..." />
onChange={e => {
e.preventDefault(); <Table
setSearchText(e.target.value); title={() => {
}} return (
/> <div>
); <Input.Search
}} placeholder={t("general.labels.search")}
{...formItemLayout} onChange={e => {
size="small" e.preventDefault();
pagination={{ position: "bottom", defaultPageSize: 50 }} setSearchText(e.target.value);
columns={columns.map(item => ({ ...item }))} }}
rowKey="id" />
dataSource={jobLines} <Button
onChange={handleTableChange} 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 { useQuery } from "@apollo/react-hooks";
import { notification } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries"; import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import JobLinesComponent from "./job-lines.component"; import JobLinesComponent from "./job-lines.component";
//export default Form.create({ name: "JobsDetailJobLines" })( //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, { const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
variables: { id: jobId }, variables: { id: jobId },
fetchPolicy: "network-only" fetchPolicy: "network-only"
}); });
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const { t } = useTranslation(); const [selectedLines, setSelectedLines] = useState([]);
const partsOrderModalVisible = useState(false);
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());
// });
}
});
};
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
@@ -78,9 +52,10 @@ export default function JobLinesContainer({ jobId, form }) {
: data.joblines : data.joblines
: null : null
} }
handleSubmit={handleSubmit}
form={form}
setSearchText={setSearchText} 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>
);
}

6
client/src/translations/en_us/common.json
View File

@@ -109,6 +109,7 @@
"na": "N/A", "na": "N/A",
"out": "Out", "out": "Out",
"save": "Save", "save": "Save",
"search": "Search...",
"unknown": "Unknown" "unknown": "Unknown"
}, },
"languages": { "languages": {
@@ -369,6 +370,11 @@
"save": "Owner saved successfully." "save": "Owner saved successfully."
} }
}, },
"parts": {
"actions": {
"order": "Order Parts"
}
},
"profile": { "profile": {
"errors": { "errors": {
"state": "Error reading page state. Please refresh." "state": "Error reading page state. Please refresh."

6
client/src/translations/es/common.json
View File

@@ -109,6 +109,7 @@
"na": "N / A", "na": "N / A",
"out": "Afuera", "out": "Afuera",
"save": "Salvar", "save": "Salvar",
"search": "Buscar...",
"unknown": "Desconocido" "unknown": "Desconocido"
}, },
"languages": { "languages": {
@@ -369,6 +370,11 @@
"save": "Propietario guardado con éxito." "save": "Propietario guardado con éxito."
} }
}, },
"parts": {
"actions": {
"order": "Pedido de piezas"
}
},
"profile": { "profile": {
"errors": { "errors": {
"state": "Error al leer el estado de la página. Porfavor refresca." "state": "Error al leer el estado de la página. Porfavor refresca."

6
client/src/translations/fr/common.json
View File

@@ -109,6 +109,7 @@
"na": "N / A", "na": "N / A",
"out": "En dehors", "out": "En dehors",
"save": "sauvegarder", "save": "sauvegarder",
"search": "Chercher...",
"unknown": "Inconnu" "unknown": "Inconnu"
}, },
"languages": { "languages": {
@@ -369,6 +370,11 @@
"save": "Le propriétaire a bien enregistré." "save": "Le propriétaire a bien enregistré."
} }
}, },
"parts": {
"actions": {
"order": "Commander des pièces"
}
},
"profile": { "profile": {
"errors": { "errors": {
"state": "Erreur lors de la lecture de l'état de la page. Rafraichissez, s'il vous plait." "state": "Erreur lors de la lecture de l'état de la page. Rafraichissez, s'il vous plait."