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

UI Updates & Bill Entering

Browse Source
This commit is contained in:
Patrick Fic
2021-03-31 17:49:43 -07:00
parent 3c7ce84be2
commit 8b5ea08cae
31 changed files with 953 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
bodyshop_translations.babel
View File

@@ -19440,6 +19440,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>checklistdocuments</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>checklists</name> <name>checklists</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -28469,6 +28490,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>targets</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>weeklytarget</name> <name>weeklytarget</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

37
client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
View File

@@ -1,10 +1,10 @@
import { useMutation, useQuery } from "@apollo/client"; import { useMutation, useQuery } from "@apollo/client";
import { Button, Form, PageHeader, Popconfirm } from "antd"; import { Button, Drawer, Form, Grid, PageHeader, Popconfirm } from "antd";
import moment from "moment"; import moment from "moment";
import queryString from "query-string"; import queryString from "query-string";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom"; import { useLocation, useHistory } from "react-router-dom";
import { import {
INSERT_NEW_BILL_LINES, INSERT_NEW_BILL_LINES,
UPDATE_BILL_LINE, UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
export default function BillDetailEditcontainer() { export default function BillDetailEditcontainer() {
const search = queryString.parse(useLocation().search); const search = queryString.parse(useLocation().search);
const history = useHistory();
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES); const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
const [updateBillLine] = useMutation(UPDATE_BILL_LINE); const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const bpoints = {
xs: "100%",
sm: "100%",
md: "100%",
lg: "80%",
xl: "80%",
xxl: "70%",
};
const drawerPercentage = selectedBreakpoint
? bpoints[selectedBreakpoint[0]]
: "100%";
const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, { const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
variables: { billid: search.billid }, variables: { billid: search.billid },
skip: !!!search.billid, skip: !!!search.billid,
@@ -111,7 +128,17 @@ export default function BillDetailEditcontainer() {
const exported = data && data.bills_by_pk && data.bills_by_pk.exported; const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
return ( return (
<LoadingSkeleton loading={loading}> <Drawer
width={drawerPercentage}
onClose={() => {
delete search.billid;
history.push({ search: queryString.stringify(search) });
}}
visible={search.billid}
>
{loading && <LoadingSkeleton />}
{!loading && (
<>
<PageHeader <PageHeader
title={ title={
data && data &&
@@ -151,7 +178,9 @@ export default function BillDetailEditcontainer() {
billsCallback={refetch} billsCallback={refetch}
/> />
</Form> </Form>
</LoadingSkeleton> </>
)}
</Drawer>
); );
} }

31
client/src/components/bill-form/bill-form.component.jsx
View File

@@ -1,16 +1,16 @@
import { useApolloClient } from "@apollo/client";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
Select, Select,
Space, Space,
Statistic, Statistic,
Switch, Switch,
Typography,
Upload, Upload,
} from "antd"; } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useApolloClient } from "@apollo/client";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -159,7 +159,6 @@ export function BillFormComponent({
> >
<Input disabled={disabled || disableInvNumber} /> <Input disabled={disabled || disableInvNumber} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bills.fields.date")} label={t("bills.fields.date")}
name="date" name="date"
@@ -191,6 +190,17 @@ export function BillFormComponent({
> >
<CurrencyInput min={0} disabled={disabled} /> <CurrencyInput min={0} disabled={disabled} />
</Form.Item> </Form.Item>
<Form.Item label={t("bills.fields.allpartslocation")} name="location">
<Select style={{ width: "10rem" }} disabled={disabled} allowClear>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item <Form.Item
label={t("bills.fields.federal_tax_rate")} label={t("bills.fields.federal_tax_rate")}
name="federal_tax_rate" name="federal_tax_rate"
@@ -209,19 +219,8 @@ export function BillFormComponent({
> >
<CurrencyInput min={0} /> <CurrencyInput min={0} />
</Form.Item> </Form.Item>
<Form.Item label={t("bills.fields.allpartslocation")} name="location">
<Select style={{ width: "10rem" }} disabled={disabled} allowClear>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Typography.Title level={4}> <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
{t("bills.labels.bill_lines")}
</Typography.Title>
<BillFormLines <BillFormLines
lineData={lineData} lineData={lineData}
discount={discount} discount={discount}
@@ -264,7 +263,7 @@ export function BillFormComponent({
if (!!totals) if (!!totals)
return ( return (
<div> <div>
<Space> <Space split={<Divider type="vertical" />}>
<Statistic <Statistic
title={t("bills.labels.subtotal")} title={t("bills.labels.subtotal")}
value={totals.subtotal.toFormat()} value={totals.subtotal.toFormat()}

441
client/src/components/bill-form/bill-form.lines.component.jsx
View File

@@ -1,24 +1,22 @@
import { DeleteFilled, WarningOutlined } from "@ant-design/icons"; import { WarningOutlined } from "@ant-design/icons";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
InputNumber, InputNumber,
Select, Select,
Space, Space,
Switch, Switch,
Table,
} from "antd"; } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser //currentUser: selectCurrentUser
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -38,36 +36,32 @@ export function BillEnterModalLinesComponent({
const { t } = useTranslation(); const { t } = useTranslation();
const { setFieldsValue, getFieldsValue, getFieldValue } = form; const { setFieldsValue, getFieldsValue, getFieldValue } = form;
return ( const columns = [
<Form.List name="billlines"> {
{(fields, { add, remove, move }) => { title: t("billlines.fields.jobline"),
return ( dataIndex: "joblineid",
<div className="invoice-form-lines-wrapper"> editable: true,
{fields.map((field, index) => ( width: "10%",
<Form.Item required={false} key={field.key}> formItemProps: (field) => {
<div> return {
<div style={{ display: "flex", alignItems: "center" }}> key: `${field.index}joblinename`,
<LayoutFormRow style={{ flex: 1 }} grow> name: [field.name, "joblineid"],
<Form.Item rules: [
span={8}
label={t("billlines.fields.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
},
formInput: (record, index) => (
<BillLineSearchSelect <BillLineSearchSelect
disabled={disabled} disabled={disabled}
options={lineData} options={lineData}
onSelect={(value, opt) => { onSelect={(value, opt) => {
setFieldsValue({ setFieldsValue({
billlines: getFieldsValue([ billlines: getFieldsValue(["billlines"]).billlines.map(
"billlines", (item, idx) => {
]).billlines.map((item, idx) => {
if (idx === index) { if (idx === index) {
return { return {
...item, ...item,
@@ -75,195 +69,248 @@ export function BillEnterModalLinesComponent({
quantity: opt.part_qty || 1, quantity: opt.part_qty || 1,
actual_price: opt.cost, actual_price: opt.cost,
cost_center: opt.part_type cost_center: opt.part_type
? responsibilityCenters.defaults.costs[ ? responsibilityCenters.defaults.costs[opt.part_type] ||
opt.part_type null
] || null
: null, : null,
}; };
} }
return item; return item;
}), }
),
}); });
}} }}
/> />
</Form.Item> ),
},
<Form.Item {
label={t("billlines.fields.line_desc")} title: t("billlines.fields.line_desc"),
key={`${index}line_desc`} dataIndex: "line_desc",
name={[field.name, "line_desc"]} editable: true,
rules={[ formItemProps: (field) => {
return {
key: `${field.index}line_desc`,
name: [field.name, "line_desc"],
rules: [
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
<Input disabled={disabled} /> },
</Form.Item> formInput: (record, index) => <Input disabled={disabled} />,
<Form.Item },
label={t("billlines.fields.quantity")} {
key={`${index}quantity`} title: t("billlines.fields.quantity"),
name={[field.name, "quantity"]} dataIndex: "quantity",
rules={[ editable: true,
formItemProps: (field) => {
return {
key: `${field.index}quantity`,
name: [field.name, "quantity"],
rules: [
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
<InputNumber },
precision={0} formInput: (record, index) => (
min={0} <InputNumber precision={0} min={0} disabled={disabled} />
disabled={disabled} ),
/> },
</Form.Item> {
<Form.Item title: t("billlines.fields.actual_price"),
label={t("billlines.fields.actual_price")} dataIndex: "actual_price",
key={`${index}actual_price`} editable: true,
name={[field.name, "actual_price"]} formItemProps: (field) => {
rules={[ return {
key: `${field.index}actual_price`,
name: [field.name, "actual_price"],
rules: [
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
},
formInput: (record, index) => (
<CurrencyInput <CurrencyInput
min={0} min={0}
disabled={disabled} disabled={disabled}
onBlur={(e) => { onBlur={(e) => {
setFieldsValue({ setFieldsValue({
billlines: getFieldsValue( billlines: getFieldsValue("billlines").billlines.map(
"billlines" (item, idx) => {
).billlines.map((item, idx) => { console.log("Checking", index, idx);
if (idx === index) { if (idx === index) {
console.log(
"Found and setting.",
!!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) * (1 - discount) +
Number.EPSILON) *
100
) / 100
);
return { return {
...item, ...item,
actual_cost: !!item.actual_cost actual_cost: !!item.actual_cost
? item.actual_cost ? item.actual_cost
: Math.round( : Math.round(
(parseFloat(e.target.value) * (parseFloat(e.target.value) * (1 - discount) +
(1 - discount) +
Number.EPSILON) * Number.EPSILON) *
100 100
) / 100, ) / 100,
}; };
} }
return item; return item;
}), }
),
}); });
}} }}
/> />
</Form.Item> ),
<div> },
<Form.Item {
label={t("billlines.fields.actual_cost")} title: t("billlines.fields.actual_cost"),
key={`${index}actual_cost`} dataIndex: "actual_cost",
name={[field.name, "actual_cost"]} editable: true,
rules={[ formItemProps: (field) => {
return {
key: `${field.index}actual_cost`,
name: [field.name, "actual_cost"],
rules: [
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
},
formInput: (record, index) => (
<CurrencyInput min={0} disabled={disabled} /> <CurrencyInput min={0} disabled={disabled} />
</Form.Item> ),
additional: (record, index) => (
<Form.Item shouldUpdate> <Form.Item shouldUpdate>
{() => { {() => {
const line = getFieldsValue(["billlines"]) const line = getFieldsValue(["billlines"]).billlines[index];
.billlines[index];
if (!!!line) return null; if (!!!line) return null;
const lineDiscount = ( const lineDiscount = (
1 - 1 -
Math.round( Math.round((line.actual_cost / line.actual_price) * 100) / 100
(line.actual_cost / line.actual_price) * 100
) /
100
).toPrecision(2); ).toPrecision(2);
if (lineDiscount - discount === 0) return <div />; if (lineDiscount - discount === 0) return <div />;
return <WarningOutlined style={{ color: "red" }} />; return <WarningOutlined style={{ color: "red" }} />;
}} }}
</Form.Item> </Form.Item>
</div> ),
<Form.Item },
label={t("billlines.fields.cost_center")} {
key={`${index}cost_center`} title: t("billlines.fields.cost_center"),
name={[field.name, "cost_center"]} dataIndex: "cost_center",
rules={[ editable: true,
formItemProps: (field) => {
return {
key: `${field.index}cost_center`,
name: [field.name, "cost_center"],
rules: [
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ],
> };
},
formInput: (record, index) => (
<Select style={{ width: "150px" }} disabled={disabled}> <Select style={{ width: "150px" }} disabled={disabled}>
{responsibilityCenters.costs.map((item) => ( {responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}> <Select.Option key={item.name}>{item.name}</Select.Option>
{item.name}
</Select.Option>
))} ))}
</Select> </Select>
</Form.Item> ),
<Space flex> },
<Form.Item {
label={t("billlines.fields.federal_tax_applicable")} title: t("billlines.fields.federal_tax_applicable"),
key={`${index}fedtax`} dataIndex: "applicable_taxes.federal",
initialValue={true} editable: true,
valuePropName="checked" formItemProps: (field) => {
name={[field.name, "applicable_taxes", "federal"]} return {
> key: `${field.index}fedtax`,
<Switch disabled={disabled} /> valuePropName: "checked",
</Form.Item> initialValue: true,
<Form.Item name: [field.name, "applicable_taxes", "federal"],
label={t("billlines.fields.state_tax_applicable")} };
key={`${index}statetax`} },
valuePropName="checked" formInput: (record, index) => <Switch disabled={disabled} />,
name={[field.name, "applicable_taxes", "state"]} },
> {
<Switch disabled={disabled} /> title: t("billlines.fields.state_tax_applicable"),
</Form.Item> dataIndex: "applicable_taxes.state",
<Form.Item editable: true,
label={t("billlines.fields.local_tax_applicable")} formItemProps: (field) => {
key={`${index}localtax`} return {
valuePropName="checked" key: `${field.index}statetax`,
name={[field.name, "applicable_taxes", "local"]} valuePropName: "checked",
> name: [field.name, "applicable_taxes", "state"],
<Switch disabled={disabled} /> };
</Form.Item> },
</Space> formInput: (record, index) => <Switch disabled={disabled} />,
<Form.Item },
label={t("billlines.fields.location")} {
key={`${index}location`} title: t("billlines.fields.local_tax_applicable"),
name={[field.name, "location"]} dataIndex: "applicable_taxes.local",
> editable: true,
<Select style={{ width: "10rem" }} disabled={disabled}> formItemProps: (field) => {
return {
key: `${field.index}localtax`,
valuePropName: "checked",
name: [field.name, "applicable_taxes", "local"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.location"),
dataIndex: "location",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}location`,
name: [field.name, "location"],
};
},
formInput: (record, index) => (
<Select style={{ width: "150px" }} disabled={disabled}>
{bodyshop.md_parts_locations.map((loc, idx) => ( {bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}> <Select.Option key={idx} value={loc}>
{loc} {loc}
</Select.Option> </Select.Option>
))} ))}
</Select> </Select>
</Form.Item> ),
<Form.Item },
label={t("billlines.labels.deductedfromlbr")} {
key={`${index}deductedfromlbr`} title: t("billlines.labels.deductedfromlbr"),
valuePropName="checked" dataIndex: "deductedfromlbr",
name={[field.name, "deductedfromlbr"]} editable: true,
> formItemProps: (field) => {
<Switch disabled={disabled} /> return {
</Form.Item> valuePropName: "checked",
<Form.Item shouldUpdate> key: `${field.index}deductedfromlbr`,
name: [field.name, "deductedfromlbr"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
additional: (record, index) => (
<Form.Item shouldUpdate style={{ display: "inline-block" }}>
{() => { {() => {
if ( if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
getFieldValue([
"billlines",
field.name,
"deductedfromlbr",
])
)
return ( return (
<div> <div>
<Form.Item <Form.Item
@@ -275,11 +322,7 @@ export function BillEnterModalLinesComponent({
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]} ]}
name={[ name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
field.name,
"lbr_adjustment",
"mod_lbr_ty",
]}
> >
<Select allowClear> <Select allowClear>
<Select.Option value="LAA"> <Select.Option value="LAA">
@@ -328,10 +371,8 @@ export function BillEnterModalLinesComponent({
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("jobs.labels.adjustmentrate")} label={t("jobs.labels.adjustmentrate")}
name={[field.name, "lbr_adjustment", "rate"]} name={[record.name, "lbr_adjustment", "rate"]}
initialValue={ initialValue={bodyshop.default_adjustment_rate}
bodyshop.default_adjustment_rate
}
rules={[ rules={[
{ {
required: true, required: true,
@@ -346,23 +387,43 @@ export function BillEnterModalLinesComponent({
return <span />; return <span />;
}} }}
</Form.Item> </Form.Item>
</LayoutFormRow> ),
<FormListMoveArrows },
move={move} ];
index={index}
total={fields.length} const mergedColumns = columns.map((col) => {
/> if (!col.editable) return col;
<DeleteFilled return {
disabled={disabled} ...col,
onClick={() => { onCell: (record) => ({
remove(field.name); record,
formItemProps: col.formItemProps,
formInput: col.formInput,
additional: col.additional,
dataIndex: col.dataIndex,
title: col.title,
}),
};
});
return (
<Form.List name="billlines">
{(fields, { add, remove, move }) => {
return (
<>
<Table
components={{
body: {
cell: EditableCell,
},
}} }}
size="small"
bordered
dataSource={fields}
columns={mergedColumns}
scroll={{ x: true }}
rowClassName="editable-row"
/> />
</div>
<Divider />
</div>
</Form.Item>
))}
<Form.Item> <Form.Item>
<Button <Button
disabled={disabled} disabled={disabled}
@@ -374,7 +435,7 @@ export function BillEnterModalLinesComponent({
{t("billlines.actions.newline")} {t("billlines.actions.newline")}
</Button> </Button>
</Form.Item> </Form.Item>
</div> </>
); );
}} }}
</Form.List> </Form.List>
@@ -385,3 +446,39 @@ export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(BillEnterModalLinesComponent); )(BillEnterModalLinesComponent);
const EditableCell = ({
dataIndex,
title,
inputType,
record,
index,
children,
formInput,
formItemProps,
additional,
...restProps
}) => {
if (additional)
return (
<td {...restProps}>
<Space>
<Form.Item
name={dataIndex}
{...(formItemProps && formItemProps(record))}
>
{formInput && formInput(record, record.key)}
</Form.Item>
{additional && additional(record, record.key)}
</Space>
</td>
);
return (
<td {...restProps}>
<Form.Item name={dataIndex} {...(formItemProps && formItemProps(record))}>
{formInput && formInput(record, record.key)}
</Form.Item>
</td>
);
};

13
client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
View File

@@ -3,6 +3,7 @@ import { Form } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import { Prompt, useLocation } from "react-router-dom"; import { Prompt, useLocation } from "react-router-dom";
import "./form-fields-changed.styles.scss";
export default function FormsFieldChanged({ form }) { export default function FormsFieldChanged({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
form.resetFields(); form.resetFields();
}; };
const loc = useLocation(); const loc = useLocation();
if (!form.isFieldsTouched()) return <></>; //if (!form.isFieldsTouched()) return <></>;
return ( return (
<Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}> <Form.Item
className="form-fields-changed"
shouldUpdate
style={{ margin: 0, padding: 0, minHeight: "unset" }}
>
{() => { {() => {
if (form.isFieldsTouched()) if (form.isFieldsTouched())
return ( return (
<div> <span>
<Prompt <Prompt
when={true} when={true}
message={(location) => { message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
</div> </div>
} }
/> />
</div> </span>
); );
return <div style={{ display: "none" }}></div>; return <div style={{ display: "none" }}></div>;
}} }}

7
client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss Normal file
View File

@@ -0,0 +1,7 @@
.form-fields-changed {
.ant-form-item-control {
.ant-form-item-control-input {
min-height: unset !important;
}
}
}

5
client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
View File

@@ -1,4 +1,5 @@
import { DownOutlined, UpOutlined } from "@ant-design/icons"; import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { Space } from "antd";
import React from "react"; import React from "react";
export default function FormListMoveArrows({ move, index, total }) { export default function FormListMoveArrows({ move, index, total }) {
const upDisabled = index === 0; const upDisabled = index === 0;
@@ -13,9 +14,9 @@ export default function FormListMoveArrows({ move, index, total }) {
}; };
return ( return (
<div> <Space direction="vertical">
<UpOutlined disabled={upDisabled} onClick={handleUp} /> <UpOutlined disabled={upDisabled} onClick={handleUp} />
<DownOutlined disabled={downDisabled} onClick={handleDown} /> <DownOutlined disabled={downDisabled} onClick={handleDown} />
</div> </Space>
); );
} }

24
client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client"; import { useMutation } from "@apollo/client";
import { Button, Form, notification, Switch } from "antd"; import { Button, Card, Form, notification, Switch } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -112,6 +112,16 @@ export function JobChecklistForm({
}; };
return ( return (
<Card
title={t("checklist.labels.checklist")}
extra={
!readOnly && (
<Button loading={loading} onClick={() => form.submit()}>
{t("general.actions.submit")}
</Button>
)
}
>
<Form <Form
form={form} form={form}
onFinish={handleFinish} onFinish={handleFinish}
@@ -133,8 +143,6 @@ export function JobChecklistForm({
}, {}), }, {}),
}} }}
> >
{t("checklist.labels.checklist")}
<ConfigFormComponents componentList={formItems} readOnly={readOnly} /> <ConfigFormComponents componentList={formItems} readOnly={readOnly} />
{type === "intake" && ( {type === "intake" && (
@@ -145,7 +153,7 @@ export function JobChecklistForm({
label={t("checklist.labels.addtoproduction")} label={t("checklist.labels.addtoproduction")}
disabled={readOnly} disabled={readOnly}
> >
<Switch /> <Switch disabled={readOnly} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="scheduled_completion" name="scheduled_completion"
@@ -190,16 +198,12 @@ export function JobChecklistForm({
label={t("checklist.labels.removefromproduction")} label={t("checklist.labels.removefromproduction")}
disabled={readOnly} disabled={readOnly}
> >
<Switch defaultChecked={true} /> <Switch disabled={readOnly} defaultChecked={true} />
</Form.Item> </Form.Item>
</div> </div>
)} )}
{!readOnly && (
<Button loading={loading} htmlType="submit">
{t("general.actions.submit")}
</Button>
)}
</Form> </Form>
</Card>
); );
} }

10
client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { PrinterFilled } from "@ant-design/icons"; import { PrinterFilled } from "@ant-design/icons";
import { Button, List } from "antd"; import { Button, Card, List } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
@@ -44,10 +44,14 @@ export default function JobIntakeTemplateList({ templates }) {
}; };
return ( return (
<div> <Card
title={t("jobs.labels.checklistdocuments")}
extra={
<Button onClick={renderAllTemplates} loading={loading}> <Button onClick={renderAllTemplates} loading={loading}>
{t("checklist.actions.printall")} {t("checklist.actions.printall")}
</Button> </Button>
}
>
<List <List
itemLayout="horizontal" itemLayout="horizontal"
dataSource={templates} dataSource={templates}
@@ -72,6 +76,6 @@ export default function JobIntakeTemplateList({ templates }) {
</List.Item> </List.Item>
)} )}
/> />
</div> </Card>
); );
} }

6
client/src/components/job-checklist/job-checklist.component.jsx
View File

@@ -6,11 +6,11 @@ export default function JobIntakeComponent({ checklistConfig, type, job }) {
const { form, templates } = checklistConfig; const { form, templates } = checklistConfig;
return ( return (
<Row gutter={[48, 48]}> <Row gutter={[16, 16]}>
<Col span={6}> <Col sm={24} md={8}>
<JobChecklistTemplateList templates={templates} type={type} /> <JobChecklistTemplateList templates={templates} type={type} />
</Col> </Col>
<Col span={18}> <Col sm={24} md={16}>
<JobChecklistForm formItems={form} type={type} job={job} /> <JobChecklistForm formItems={form} type={type} job={job} />
</Col> </Col>
</Row> </Row>

15
client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
View File

@@ -1,5 +1,5 @@
import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons"; import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
import { Button, Popover, Select, Spin } from "antd"; import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -40,7 +40,8 @@ export function JobEmployeeAssignments({
}; };
const popContent = ( const popContent = (
<div> <Row gutter={[16, 16]}>
<Col span={24}>
<Select <Select
id="employeeSelector" id="employeeSelector"
showSearch showSearch
@@ -48,7 +49,8 @@ export function JobEmployeeAssignments({
optionFilterProp="children" optionFilterProp="children"
onChange={onChange} onChange={onChange}
filterOption={(input, option) => filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
0
} }
> >
{bodyshop.employees.map((emp) => ( {bodyshop.employees.map((emp) => (
@@ -57,6 +59,9 @@ export function JobEmployeeAssignments({
</Select.Option> </Select.Option>
))} ))}
</Select> </Select>
</Col>
<Col span={24}>
<Space wrap>
<Button <Button
type="primary" type="primary"
disabled={!assignment.employeeid || jobRO} disabled={!assignment.employeeid || jobRO}
@@ -68,7 +73,9 @@ export function JobEmployeeAssignments({
Assign Assign
</Button> </Button>
<Button onClick={() => setVisibility(false)}>Close</Button> <Button onClick={() => setVisibility(false)}>Close</Button>
</div> </Space>
</Col>
</Row>
); );
return ( return (

12
client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
View File

@@ -1,5 +1,13 @@
import { useMutation } from "@apollo/client"; import { useMutation } from "@apollo/client";
import { Button, Form, notification, Popover, Select, Switch } from "antd"; import {
Button,
Form,
notification,
Popover,
Select,
Space,
Switch,
} from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -100,12 +108,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
<Space wrap>
<Button type="danger" htmlType="submit"> <Button type="danger" htmlType="submit">
{t("jobs.actions.convert")} {t("jobs.actions.convert")}
</Button> </Button>
<Button onClick={() => setVisible(false)}> <Button onClick={() => setVisible(false)}>
{t("general.actions.close")} {t("general.actions.close")}
</Button> </Button>
</Space>
</Form> </Form>
</div> </div>
); );

2
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -117,7 +117,9 @@ function JobsDocumentsComponent({
galleryImages={galleryImages} galleryImages={galleryImages}
deletionCallback={billsCallback || refetch} deletionCallback={billsCallback || refetch}
/> />
{!billId && (
<JobsDocumentsGalleryReassign galleryImages={galleryImages} /> <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
)}
</Space> </Space>
</Col> </Col>
<Col span={24}> <Col span={24}>

6
client/src/components/jobs-notes/jobs.notes.component.jsx
View File

@@ -5,7 +5,7 @@ import {
EyeInvisibleFilled, EyeInvisibleFilled,
WarningFilled, WarningFilled,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Button, Card, Table } from "antd"; import { Button, Card, Space, Table } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -82,7 +82,7 @@ export function JobNotesComponent({
key: "actions", key: "actions",
width: 150, width: 150,
render: (text, record) => ( render: (text, record) => (
<span> <Space wrap>
<Button <Button
loading={deleteLoading} loading={deleteLoading}
disabled={record.audit || jobRO} disabled={record.audit || jobRO}
@@ -104,7 +104,7 @@ export function JobNotesComponent({
> >
<EditFilled /> <EditFilled />
</Button> </Button>
</span> </Space>
), ),
}, },
]; ];

16
client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
View File

@@ -1,4 +1,4 @@
import { Form, Input, Switch } from "antd"; import { Col, Form, Input, Row, Switch } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import NotesPresetButton from "../notes-preset-button/notes-preset-button.component"; import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
@@ -7,7 +7,8 @@ export default function NoteUpsertModalComponent({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <Row gutter={[16, 16]}>
<Col span={8}>
<Form.Item <Form.Item
label={t("notes.fields.critical")} label={t("notes.fields.critical")}
name="critical" name="critical"
@@ -15,6 +16,8 @@ export default function NoteUpsertModalComponent({ form }) {
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
</Col>
<Col span={8}>
<Form.Item <Form.Item
label={t("notes.fields.private")} label={t("notes.fields.private")}
name="private" name="private"
@@ -22,6 +25,11 @@ export default function NoteUpsertModalComponent({ form }) {
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
</Col>
<Col span={8}>
<NotesPresetButton form={form} />
</Col>
<Col span={24}>
<Form.Item <Form.Item
label={t("notes.fields.text")} label={t("notes.fields.text")}
name="text" name="text"
@@ -37,7 +45,7 @@ export default function NoteUpsertModalComponent({ form }) {
placeholder={t("notes.labels.newnoteplaceholder")} placeholder={t("notes.labels.newnoteplaceholder")}
/> />
</Form.Item> </Form.Item>
<NotesPresetButton form={form} /> </Col>
</div> </Row>
); );
} }

7
client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
View File

@@ -90,7 +90,12 @@ export function NoteUpsertModalContainer({
}} }}
destroyOnClose destroyOnClose
> >
<Form form={form} onFinish={handleFinish} initialValues={existingNote}> <Form
form={form}
onFinish={handleFinish}
initialValues={existingNote}
layout="vertical"
>
<NoteUpsertModalComponent form={form} /> <NoteUpsertModalComponent form={form} />
</Form> </Form>
</Modal> </Modal>

5
client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
View File

@@ -1,3 +1,4 @@
import { Card } from "antd";
import moment from "moment"; import moment from "moment";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -68,7 +69,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
}, []); }, []);
return ( return (
<div> <Card>
<ResponsiveContainer width="100%" height={475}> <ResponsiveContainer width="100%" height={475}>
<ComposedChart <ComposedChart
data={data} data={data}
@@ -108,6 +109,6 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </Card>
); );
} }

10
client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
View File

@@ -26,18 +26,22 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
}, 0); }, 0);
return ( return (
<div className='imex-flex-row__margin'> <Card
<Card title={moment(date).format("D - ddd")}> title={moment(date).format("D - ddd")}
className="ant-card-grid-hoverable"
style={{ height: "100%" }}
>
<Statistic <Statistic
valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }} valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
label="B"
value={bodyHrs.toFixed(1)} value={bodyHrs.toFixed(1)}
/> />
<Statistic <Statistic
valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }} valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
label="P"
value={paintHrs.toFixed(1)} value={paintHrs.toFixed(1)}
/> />
</Card> </Card>
</div>
); );
} }
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats); export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats);

17
client/src/components/scoreboard-display/scoreboard-display.component.jsx
View File

@@ -1,6 +1,6 @@
import { Col, Row } from "antd";
import React from "react"; import React from "react";
import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component"; import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component"; import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component"; import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
@@ -20,11 +20,18 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
}); });
return ( return (
<div> <Row gutter={[16, 16]}>
<ScoreboardTargetsTable /> <Col span={24}>
<ScoreboardJobsList scoreBoardlist={scoreBoardlist} /> <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
</Col>
<Col span={24}>
<ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} /> <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
</Col>
<Col span={24}>
<ScoreboardChart sbEntriesByDate={sbEntriesByDate} /> <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
</div> </Col>
</Row>
); );
} }

17
client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
View File

@@ -1,11 +1,13 @@
import { CalendarOutlined } from "@ant-design/icons"; import { CalendarOutlined } from "@ant-design/icons";
import { Col, Row, Statistic } from "antd"; import { Card, Col, Row, Statistic } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
import * as Util from "./scoreboard-targets-table.util"; import * as Util from "./scoreboard-targets-table.util";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
const rowGutter = [16, 16]; const rowGutter = [16, 16];
const statSpans = { xs: 24, sm: 6 }; const statSpans = { xs: 24, sm: 6 };
export function ScoreboardTargetsTable({ bodyshop }) { export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <Card
title={t("scoreboard.labels.targets")}
extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
>
<Row gutter={rowGutter}> <Row gutter={rowGutter}>
<Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}> <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
<Statistic <Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Statistic <Statistic
title={t("scoreboard.labels.dailytarget")} title={t("scoreboard.labels.dailytarget")}
value={bodyshop.scoreboard_target.dailyBodyTarget} value={bodyshop.scoreboard_target.dailyBodyTarget}
prefix='B' prefix="B"
/> />
</Col> </Col>
<Col {...statSpans}> <Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Col {...statSpans}> <Col {...statSpans}>
<Statistic <Statistic
value={bodyshop.scoreboard_target.dailyPaintTarget} value={bodyshop.scoreboard_target.dailyPaintTarget}
prefix='P' prefix="P"
/> />
</Col> </Col>
<Col {...statSpans}> <Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
</Row> </Row>
</Col> </Col>
</Row> </Row>
</div> </Card>
); );
} }
export default connect( export default connect(

34
client/src/components/vendors-form/vendors-form.component.jsx
View File

@@ -1,9 +1,11 @@
import { DeleteFilled } from "@ant-design/icons"; import { DeleteFilled } from "@ant-design/icons";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
InputNumber, InputNumber,
PageHeader,
Select, Select,
Space, Space,
Switch, Switch,
@@ -27,7 +29,18 @@ export default function VendorsFormComponent({
const { getFieldValue } = form; const { getFieldValue } = form;
return ( return (
<div> <div>
<PageHeader
title={form.getFieldValue("name")}
extra={
<Space> <Space>
<Form.Item
label={t("vendors.fields.active")}
name="active"
initialValue={true}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Button <Button
onClick={() => form.submit()} onClick={() => form.submit()}
type="primary" type="primary"
@@ -39,6 +52,8 @@ export default function VendorsFormComponent({
{t("general.actions.delete")} {t("general.actions.delete")}
</Button> </Button>
</Space> </Space>
}
/>
<FormFieldsChanged form={form} /> <FormFieldsChanged form={form} />
<LayoutFormRow grow> <LayoutFormRow grow>
<Form.Item <Form.Item
@@ -50,14 +65,7 @@ export default function VendorsFormComponent({
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item
label={t("vendors.fields.active")}
name="active"
initialValue={true}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item <Form.Item
label={t("vendors.fields.email")} label={t("vendors.fields.email")}
rules={[ rules={[
@@ -104,7 +112,7 @@ export default function VendorsFormComponent({
<Input /> <Input />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow> <LayoutFormRow grow>
<Form.Item label={t("vendors.fields.discount")} name="discount"> <Form.Item label={t("vendors.fields.discount")} name="discount">
<InputNumber min={0} max={1} precision={2} /> <InputNumber min={0} max={1} precision={2} />
</Form.Item> </Form.Item>
@@ -125,16 +133,14 @@ export default function VendorsFormComponent({
</Select> </Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Typography.Title level={4}> <Divider align="left">{t("vendors.labels.preferredmakes")}</Divider>
{t("vendors.labels.preferredmakes")}
</Typography.Title>
<Form.List name="favorite"> <Form.List name="favorite">
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
<div> <div>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <Form.Item key={field.key}>
<div style={{ display: "flex" }}> <Space wrap>
<Form.Item <Form.Item
label={t("vendors.fields.make")} label={t("vendors.fields.make")}
key={`${index}make`} key={`${index}make`}
@@ -154,7 +160,7 @@ export default function VendorsFormComponent({
remove(field.name); remove(field.name);
}} }}
/> />
</div> </Space>
</Form.Item> </Form.Item>
))} ))}
<Form.Item> <Form.Item>

1
client/src/components/vendors-form/vendors-form.container.jsx
View File

@@ -119,6 +119,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<Form <Form
onFinish={handleFinish} onFinish={handleFinish}

25
client/src/components/vendors-list/vendors-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Input, Table } from "antd"; import { Button, Card, Input, Space, Table } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -75,20 +75,14 @@ export default function VendorsListComponent({
: []; : [];
return ( return (
<Table <Card
loading={loading} extra={
title={() => { <Space wrap>
return ( <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
<div className="imex-table-header">
<Button onClick={handleNewVendor}>
{t("vendors.actions.new")}
</Button>
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
className="imex-table-header__search"
placeholder={t("general.labels.search")} placeholder={t("general.labels.search")}
onChange={(e) => { onChange={(e) => {
setSearchText(e.target.value); setSearchText(e.target.value);
@@ -96,9 +90,11 @@ export default function VendorsListComponent({
value={searchText} value={searchText}
enterButton enterButton
/> />
</div> </Space>
); }
}} >
<Table
loading={loading}
pagination={{ position: "top" }} pagination={{ position: "top" }}
columns={columns} columns={columns}
rowKey="id" rowKey="id"
@@ -117,5 +113,6 @@ export default function VendorsListComponent({
}; };
}} }}
/> />
</Card>
); );
} }

6
client/src/components/vendors-list/vendors-list.container.jsx
View File

@@ -1,10 +1,10 @@
import React from "react";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries"; import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
import VendorsListComponent from "./vendors-list.component"; import VendorsListComponent from "./vendors-list.component";
import queryString from "query-string";
import { useHistory, useLocation } from "react-router-dom";
export default function VendorsListContainer() { export default function VendorsListContainer() {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS); const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);

10
client/src/pages/scoreboard/scoreboard.page.component.jsx
View File

@@ -1,10 +0,0 @@
import React from "react";
import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
export default function ProductionBoardComponent({ scoreboardSubscription }) {
return (
<div>
<ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
</div>
);
}

6
client/src/pages/scoreboard/scoreboard.page.container.jsx
View File

@@ -7,7 +7,7 @@ import {
setSelectedHeader, setSelectedHeader,
} from "../../redux/application/application.actions"; } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ScoreboardPageComponent from "./scoreboard.page.component"; import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
import { useSubscription } from "@apollo/client"; import { useSubscription } from "@apollo/client";
import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries"; import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
import moment from "moment"; import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
return ( return (
<RbacWrapper action="scoreboard:view"> <RbacWrapper action="scoreboard:view">
<ScoreboardPageComponent <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
scoreboardSubscription={scoreboardSubscription}
/>
</RbacWrapper> </RbacWrapper>
); );
} }

49
client/src/pages/shop-vendor/shop-vendor.page.component.jsx generated
View File

@@ -1,28 +1,45 @@
import { Col, Row } from "antd"; import { Drawer, Grid } from "antd";
import queryString from "query-string";
import React from "react"; import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import VendorsFormContainer from "../../components/vendors-form/vendors-form.container"; import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
import VendorsListContainer from "../../components/vendors-list/vendors-list.container"; import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
const listSpan = {
md: { span: 24 },
lg: { span: 8 },
};
const formSapn = {
md: { span: 24 },
lg: { span: 16 },
};
export default function ShopVendorPageComponent() { export default function ShopVendorPageComponent() {
const search = queryString.parse(useLocation().search);
const { selectedvendor } = search;
const history = useHistory();
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const bpoints = {
xs: "100%",
sm: "100%",
md: "100%",
lg: "50%",
xl: "50%",
xxl: "45%",
};
const drawerPercentage = selectedBreakpoint
? bpoints[selectedBreakpoint[0]]
: "100%";
return ( return (
<div> <div>
<Row gutter={[16, 16]}>
<Col {...listSpan}>
<VendorsListContainer /> <VendorsListContainer />
</Col>
<Col {...formSapn}> <Drawer
width={drawerPercentage}
onClose={() => {
delete search.selectedvendor;
history.push({ search: queryString.stringify(search) });
}}
visible={selectedvendor}
>
<VendorsFormContainer /> <VendorsFormContainer />
</Col> </Drawer>
</Row>
</div> </div>
); );
} }

3
client/src/pages/temporary-docs/temporary-docs.component.jsx
View File

@@ -12,14 +12,11 @@ export default function TemporaryDocsComponent() {
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<div>
<div>Buttons to move and assign things.</div>
<JobsDocumentsComponent <JobsDocumentsComponent
data={data ? data.documents : []} data={data ? data.documents : []}
jobId={null} jobId={null}
billId={null} billId={null}
refetch={refetch} refetch={refetch}
/> />
</div>
); );
} }

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

@@ -1175,6 +1175,7 @@
}, },
"changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?", "changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?",
"checklistcompletedby": "Checklist completed by {{by}} at {{at}}", "checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
"checklistdocuments": "Checklist Documents",
"checklists": "Checklists", "checklists": "Checklists",
"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.", "closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
"cost": "Cost", "cost": "Cost",
@@ -1723,6 +1724,7 @@
"asoftodaytarget": "As of Today", "asoftodaytarget": "As of Today",
"dailytarget": "Daily", "dailytarget": "Daily",
"monthlytarget": "Monthly", "monthlytarget": "Monthly",
"targets": "Targets",
"weeklytarget": "Weekly", "weeklytarget": "Weekly",
"workingdays": "Working Days / Month" "workingdays": "Working Days / Month"
}, },

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

@@ -1175,6 +1175,7 @@
}, },
"changeclass": "", "changeclass": "",
"checklistcompletedby": "", "checklistcompletedby": "",
"checklistdocuments": "",
"checklists": "", "checklists": "",
"closeconfirm": "", "closeconfirm": "",
"cost": "", "cost": "",
@@ -1723,6 +1724,7 @@
"asoftodaytarget": "", "asoftodaytarget": "",
"dailytarget": "", "dailytarget": "",
"monthlytarget": "", "monthlytarget": "",
"targets": "",
"weeklytarget": "", "weeklytarget": "",
"workingdays": "" "workingdays": ""
}, },

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

@@ -1175,6 +1175,7 @@
}, },
"changeclass": "", "changeclass": "",
"checklistcompletedby": "", "checklistcompletedby": "",
"checklistdocuments": "",
"checklists": "", "checklists": "",
"closeconfirm": "", "closeconfirm": "",
"cost": "", "cost": "",
@@ -1723,6 +1724,7 @@
"asoftodaytarget": "", "asoftodaytarget": "",
"dailytarget": "", "dailytarget": "",
"monthlytarget": "", "monthlytarget": "",
"targets": "",
"weeklytarget": "", "weeklytarget": "",
"workingdays": "" "workingdays": ""
}, },