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

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

@@ -1,10 +1,10 @@
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 queryString from "query-string";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { useLocation, useHistory } from "react-router-dom";
import {
INSERT_NEW_BILL_LINES,
UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
export default function BillDetailEditcontainer() {
const search = queryString.parse(useLocation().search);
const history = useHistory();
const { t } = useTranslation();
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
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, {
variables: { billid: search.billid },
skip: !!!search.billid,
@@ -111,47 +128,59 @@ export default function BillDetailEditcontainer() {
const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
return (
<LoadingSkeleton loading={loading}>
<PageHeader
title={
data &&
`${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
}
extra={
<Popconfirm
visible={visible}
onConfirm={() => form.submit()}
onCancel={() => setVisible(false)}
okButtonProps={{ loading: updateLoading }}
title={t("bills.labels.editadjwarning")}
<Drawer
width={drawerPercentage}
onClose={() => {
delete search.billid;
history.push({ search: queryString.stringify(search) });
}}
visible={search.billid}
>
{loading && <LoadingSkeleton />}
{!loading && (
<>
<PageHeader
title={
data &&
`${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
}
extra={
<Popconfirm
visible={visible}
onConfirm={() => form.submit()}
onCancel={() => setVisible(false)}
okButtonProps={{ loading: updateLoading }}
title={t("bills.labels.editadjwarning")}
>
<Button
htmlType="submit"
disabled={exported}
onClick={handleSave}
loading={updateLoading}
type="primary"
>
{t("general.actions.save")}
</Button>
</Popconfirm>
}
/>
<Form
form={form}
onFinish={handleFinish}
initialValues={transformData(data)}
layout="vertical"
>
<Button
htmlType="submit"
disabled={exported}
onClick={handleSave}
loading={updateLoading}
type="primary"
>
{t("general.actions.save")}
</Button>
</Popconfirm>
}
/>
<Form
form={form}
onFinish={handleFinish}
initialValues={transformData(data)}
layout="vertical"
>
<BillFormContainer form={form} billEdit disabled={exported} />
<JobDocumentsGallery
jobId={data ? data.bills_by_pk.jobid : null}
billId={search.billid}
documentsList={data ? data.bills_by_pk.documents : []}
billsCallback={refetch}
/>
</Form>
</LoadingSkeleton>
<BillFormContainer form={form} billEdit disabled={exported} />
<JobDocumentsGallery
jobId={data ? data.bills_by_pk.jobid : null}
billId={search.billid}
documentsList={data ? data.bills_by_pk.documents : []}
billsCallback={refetch}
/>
</Form>
</>
)}
</Drawer>
);
}

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

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

755
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 {
Button,
Divider,
Form,
Input,
InputNumber,
Select,
Space,
Switch,
Table,
} from "antd";
import React from "react";
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 { createStructuredSelector } from "reselect";
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({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
@@ -38,331 +36,394 @@ export function BillEnterModalLinesComponent({
const { t } = useTranslation();
const { setFieldsValue, getFieldsValue, getFieldValue } = form;
const columns = [
{
title: t("billlines.fields.jobline"),
dataIndex: "joblineid",
editable: true,
width: "10%",
formItemProps: (field) => {
return {
key: `${field.index}joblinename`,
name: [field.name, "joblineid"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<BillLineSearchSelect
disabled={disabled}
options={lineData}
onSelect={(value, opt) => {
setFieldsValue({
billlines: getFieldsValue(["billlines"]).billlines.map(
(item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
quantity: opt.part_qty || 1,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults.costs[opt.part_type] ||
null
: null,
};
}
return item;
}
),
});
}}
/>
),
},
{
title: t("billlines.fields.line_desc"),
dataIndex: "line_desc",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}line_desc`,
name: [field.name, "line_desc"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => <Input disabled={disabled} />,
},
{
title: t("billlines.fields.quantity"),
dataIndex: "quantity",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}quantity`,
name: [field.name, "quantity"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<InputNumber precision={0} min={0} disabled={disabled} />
),
},
{
title: t("billlines.fields.actual_price"),
dataIndex: "actual_price",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}actual_price`,
name: [field.name, "actual_price"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<CurrencyInput
min={0}
disabled={disabled}
onBlur={(e) => {
setFieldsValue({
billlines: getFieldsValue("billlines").billlines.map(
(item, idx) => {
console.log("Checking", index, idx);
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 {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) * (1 - discount) +
Number.EPSILON) *
100
) / 100,
};
}
return item;
}
),
});
}}
/>
),
},
{
title: t("billlines.fields.actual_cost"),
dataIndex: "actual_cost",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}actual_cost`,
name: [field.name, "actual_cost"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<CurrencyInput min={0} disabled={disabled} />
),
additional: (record, index) => (
<Form.Item shouldUpdate>
{() => {
const line = getFieldsValue(["billlines"]).billlines[index];
if (!!!line) return null;
const lineDiscount = (
1 -
Math.round((line.actual_cost / line.actual_price) * 100) / 100
).toPrecision(2);
if (lineDiscount - discount === 0) return <div />;
return <WarningOutlined style={{ color: "red" }} />;
}}
</Form.Item>
),
},
{
title: t("billlines.fields.cost_center"),
dataIndex: "cost_center",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}cost_center`,
name: [field.name, "cost_center"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<Select style={{ width: "150px" }} disabled={disabled}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}>{item.name}</Select.Option>
))}
</Select>
),
},
{
title: t("billlines.fields.federal_tax_applicable"),
dataIndex: "applicable_taxes.federal",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}fedtax`,
valuePropName: "checked",
initialValue: true,
name: [field.name, "applicable_taxes", "federal"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.state_tax_applicable"),
dataIndex: "applicable_taxes.state",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}statetax`,
valuePropName: "checked",
name: [field.name, "applicable_taxes", "state"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.local_tax_applicable"),
dataIndex: "applicable_taxes.local",
editable: true,
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) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
),
},
{
title: t("billlines.labels.deductedfromlbr"),
dataIndex: "deductedfromlbr",
editable: true,
formItemProps: (field) => {
return {
valuePropName: "checked",
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 (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
return (
<div>
<Form.Item
label={t("joblines.fields.mod_lbr_ty")}
key={`${index}modlbrty`}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
>
<Select allowClear>
<Select.Option value="LAA">
{t("joblines.fields.lbr_types.LAA")}
</Select.Option>
<Select.Option value="LAB">
{t("joblines.fields.lbr_types.LAB")}
</Select.Option>
<Select.Option value="LAD">
{t("joblines.fields.lbr_types.LAD")}
</Select.Option>
<Select.Option value="LAE">
{t("joblines.fields.lbr_types.LAE")}
</Select.Option>
<Select.Option value="LAF">
{t("joblines.fields.lbr_types.LAF")}
</Select.Option>
<Select.Option value="LAG">
{t("joblines.fields.lbr_types.LAG")}
</Select.Option>
<Select.Option value="LAM">
{t("joblines.fields.lbr_types.LAM")}
</Select.Option>
<Select.Option value="LAR">
{t("joblines.fields.lbr_types.LAR")}
</Select.Option>
<Select.Option value="LAS">
{t("joblines.fields.lbr_types.LAS")}
</Select.Option>
<Select.Option value="LAU">
{t("joblines.fields.lbr_types.LAU")}
</Select.Option>
<Select.Option value="LA1">
{t("joblines.fields.lbr_types.LA1")}
</Select.Option>
<Select.Option value="LA2">
{t("joblines.fields.lbr_types.LA2")}
</Select.Option>
<Select.Option value="LA3">
{t("joblines.fields.lbr_types.LA3")}
</Select.Option>
<Select.Option value="LA4">
{t("joblines.fields.lbr_types.LA4")}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("jobs.labels.adjustmentrate")}
name={[record.name, "lbr_adjustment", "rate"]}
initialValue={bodyshop.default_adjustment_rate}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber precision={2} min={0.01} />
</Form.Item>
</div>
);
return <span />;
}}
</Form.Item>
),
},
];
const mergedColumns = columns.map((col) => {
if (!col.editable) return col;
return {
...col,
onCell: (record) => ({
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 (
<div className="invoice-form-lines-wrapper">
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div>
<div style={{ display: "flex", alignItems: "center" }}>
<LayoutFormRow style={{ flex: 1 }} grow>
<Form.Item
span={8}
label={t("billlines.fields.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<BillLineSearchSelect
disabled={disabled}
options={lineData}
onSelect={(value, opt) => {
setFieldsValue({
billlines: getFieldsValue([
"billlines",
]).billlines.map((item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
quantity: opt.part_qty || 1,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults.costs[
opt.part_type
] || null
: null,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("billlines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.quantity")}
key={`${index}quantity`}
name={[field.name, "quantity"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber
precision={0}
min={0}
disabled={disabled}
/>
</Form.Item>
<Form.Item
label={t("billlines.fields.actual_price")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput
min={0}
disabled={disabled}
onBlur={(e) => {
setFieldsValue({
billlines: getFieldsValue(
"billlines"
).billlines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) *
(1 - discount) +
Number.EPSILON) *
100
) / 100,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<div>
<Form.Item
label={t("billlines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput min={0} disabled={disabled} />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
const line = getFieldsValue(["billlines"])
.billlines[index];
if (!!!line) return null;
const lineDiscount = (
1 -
Math.round(
(line.actual_cost / line.actual_price) * 100
) /
100
).toPrecision(2);
if (lineDiscount - discount === 0) return <div />;
return <WarningOutlined style={{ color: "red" }} />;
}}
</Form.Item>
</div>
<Form.Item
label={t("billlines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select style={{ width: "150px" }} disabled={disabled}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}>
{item.name}
</Select.Option>
))}
</Select>
</Form.Item>
<Space flex>
<Form.Item
label={t("billlines.fields.federal_tax_applicable")}
key={`${index}fedtax`}
initialValue={true}
valuePropName="checked"
name={[field.name, "applicable_taxes", "federal"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.state_tax_applicable")}
key={`${index}statetax`}
valuePropName="checked"
name={[field.name, "applicable_taxes", "state"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.local_tax_applicable")}
key={`${index}localtax`}
valuePropName="checked"
name={[field.name, "applicable_taxes", "local"]}
>
<Switch disabled={disabled} />
</Form.Item>
</Space>
<Form.Item
label={t("billlines.fields.location")}
key={`${index}location`}
name={[field.name, "location"]}
>
<Select style={{ width: "10rem" }} disabled={disabled}>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("billlines.labels.deductedfromlbr")}
key={`${index}deductedfromlbr`}
valuePropName="checked"
name={[field.name, "deductedfromlbr"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
if (
getFieldValue([
"billlines",
field.name,
"deductedfromlbr",
])
)
return (
<div>
<Form.Item
label={t("joblines.fields.mod_lbr_ty")}
key={`${index}modlbrty`}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={[
field.name,
"lbr_adjustment",
"mod_lbr_ty",
]}
>
<Select allowClear>
<Select.Option value="LAA">
{t("joblines.fields.lbr_types.LAA")}
</Select.Option>
<Select.Option value="LAB">
{t("joblines.fields.lbr_types.LAB")}
</Select.Option>
<Select.Option value="LAD">
{t("joblines.fields.lbr_types.LAD")}
</Select.Option>
<Select.Option value="LAE">
{t("joblines.fields.lbr_types.LAE")}
</Select.Option>
<Select.Option value="LAF">
{t("joblines.fields.lbr_types.LAF")}
</Select.Option>
<Select.Option value="LAG">
{t("joblines.fields.lbr_types.LAG")}
</Select.Option>
<Select.Option value="LAM">
{t("joblines.fields.lbr_types.LAM")}
</Select.Option>
<Select.Option value="LAR">
{t("joblines.fields.lbr_types.LAR")}
</Select.Option>
<Select.Option value="LAS">
{t("joblines.fields.lbr_types.LAS")}
</Select.Option>
<Select.Option value="LAU">
{t("joblines.fields.lbr_types.LAU")}
</Select.Option>
<Select.Option value="LA1">
{t("joblines.fields.lbr_types.LA1")}
</Select.Option>
<Select.Option value="LA2">
{t("joblines.fields.lbr_types.LA2")}
</Select.Option>
<Select.Option value="LA3">
{t("joblines.fields.lbr_types.LA3")}
</Select.Option>
<Select.Option value="LA4">
{t("joblines.fields.lbr_types.LA4")}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("jobs.labels.adjustmentrate")}
name={[field.name, "lbr_adjustment", "rate"]}
initialValue={
bodyshop.default_adjustment_rate
}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber precision={2} min={0.01} />
</Form.Item>
</div>
);
return <span />;
}}
</Form.Item>
</LayoutFormRow>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
<DeleteFilled
disabled={disabled}
onClick={() => {
remove(field.name);
}}
/>
</div>
<Divider />
</div>
</Form.Item>
))}
<>
<Table
components={{
body: {
cell: EditableCell,
},
}}
size="small"
bordered
dataSource={fields}
columns={mergedColumns}
scroll={{ x: true }}
rowClassName="editable-row"
/>
<Form.Item>
<Button
disabled={disabled}
@@ -374,7 +435,7 @@ export function BillEnterModalLinesComponent({
{t("billlines.actions.newline")}
</Button>
</Form.Item>
</div>
</>
);
}}
</Form.List>
@@ -385,3 +446,39 @@ export default connect(
mapStateToProps,
mapDispatchToProps
)(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 AlertComponent from "../alert/alert.component";
import { Prompt, useLocation } from "react-router-dom";
import "./form-fields-changed.styles.scss";
export default function FormsFieldChanged({ form }) {
const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
form.resetFields();
};
const loc = useLocation();
if (!form.isFieldsTouched()) return <></>;
//if (!form.isFieldsTouched()) 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())
return (
<div>
<span>
<Prompt
when={true}
message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
</div>
}
/>
</div>
</span>
);
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 { Space } from "antd";
import React from "react";
export default function FormListMoveArrows({ move, index, total }) {
const upDisabled = index === 0;
@@ -13,9 +14,9 @@ export default function FormListMoveArrows({ move, index, total }) {
};
return (
<div>
<Space direction="vertical">
<UpOutlined disabled={upDisabled} onClick={handleUp} />
<DownOutlined disabled={downDisabled} onClick={handleDown} />
</div>
</Space>
);
}

178
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 { Button, Form, notification, Switch } from "antd";
import { Button, Card, Form, notification, Switch } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -112,94 +112,98 @@ export function JobChecklistForm({
};
return (
<Form
form={form}
onFinish={handleFinish}
initialValues={{
...(type === "intake" && {
addToProduction: true,
scheduled_completion: job && job.scheduled_completion,
scheduled_delivery: job && job.scheduled_delivery,
}),
...(type === "deliver" && {
removeFromProduction: true,
actual_completion: job && job.actual_completion,
}),
...formItems
.filter((fi) => fi.value)
.reduce((acc, fi) => {
acc[fi.name] = fi.value;
return acc;
}, {}),
}}
<Card
title={t("checklist.labels.checklist")}
extra={
!readOnly && (
<Button loading={loading} onClick={() => form.submit()}>
{t("general.actions.submit")}
</Button>
)
}
>
{t("checklist.labels.checklist")}
<Form
form={form}
onFinish={handleFinish}
initialValues={{
...(type === "intake" && {
addToProduction: true,
scheduled_completion: job && job.scheduled_completion,
scheduled_delivery: job && job.scheduled_delivery,
}),
...(type === "deliver" && {
removeFromProduction: true,
actual_completion: job && job.actual_completion,
}),
...formItems
.filter((fi) => fi.value)
.reduce((acc, fi) => {
acc[fi.name] = fi.value;
return acc;
}, {}),
}}
>
<ConfigFormComponents componentList={formItems} readOnly={readOnly} />
<ConfigFormComponents componentList={formItems} readOnly={readOnly} />
{type === "intake" && (
<div>
<Form.Item
name="addToProduction"
valuePropName="checked"
label={t("checklist.labels.addtoproduction")}
disabled={readOnly}
>
<Switch />
</Form.Item>
<Form.Item
name="scheduled_completion"
label={t("jobs.fields.scheduled_completion")}
disabled={readOnly}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker />
</Form.Item>
<Form.Item
name="scheduled_delivery"
label={t("jobs.fields.scheduled_delivery")}
disabled={readOnly}
>
<DateTimePicker />
</Form.Item>
</div>
)}
{type === "deliver" && (
<div>
<Form.Item
name="actual_completion"
label={t("jobs.fields.actual_completion")}
disabled={readOnly}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker />
</Form.Item>
<Form.Item
name="removeFromProduction"
valuePropName="checked"
label={t("checklist.labels.removefromproduction")}
disabled={readOnly}
>
<Switch defaultChecked={true} />
</Form.Item>
</div>
)}
{!readOnly && (
<Button loading={loading} htmlType="submit">
{t("general.actions.submit")}
</Button>
)}
</Form>
{type === "intake" && (
<div>
<Form.Item
name="addToProduction"
valuePropName="checked"
label={t("checklist.labels.addtoproduction")}
disabled={readOnly}
>
<Switch disabled={readOnly} />
</Form.Item>
<Form.Item
name="scheduled_completion"
label={t("jobs.fields.scheduled_completion")}
disabled={readOnly}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker />
</Form.Item>
<Form.Item
name="scheduled_delivery"
label={t("jobs.fields.scheduled_delivery")}
disabled={readOnly}
>
<DateTimePicker />
</Form.Item>
</div>
)}
{type === "deliver" && (
<div>
<Form.Item
name="actual_completion"
label={t("jobs.fields.actual_completion")}
disabled={readOnly}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DateTimePicker />
</Form.Item>
<Form.Item
name="removeFromProduction"
valuePropName="checked"
label={t("checklist.labels.removefromproduction")}
disabled={readOnly}
>
<Switch disabled={readOnly} defaultChecked={true} />
</Form.Item>
</div>
)}
</Form>
</Card>
);
}

16
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 { Button, List } from "antd";
import { Button, Card, List } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
@@ -44,10 +44,14 @@ export default function JobIntakeTemplateList({ templates }) {
};
return (
<div>
<Button onClick={renderAllTemplates} loading={loading}>
{t("checklist.actions.printall")}
</Button>
<Card
title={t("jobs.labels.checklistdocuments")}
extra={
<Button onClick={renderAllTemplates} loading={loading}>
{t("checklist.actions.printall")}
</Button>
}
>
<List
itemLayout="horizontal"
dataSource={templates}
@@ -72,6 +76,6 @@ export default function JobIntakeTemplateList({ templates }) {
</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;
return (
<Row gutter={[48, 48]}>
<Col span={6}>
<Row gutter={[16, 16]}>
<Col sm={24} md={8}>
<JobChecklistTemplateList templates={templates} type={type} />
</Col>
<Col span={18}>
<Col sm={24} md={16}>
<JobChecklistForm formItems={form} type={type} job={job} />
</Col>
</Row>

67
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 { Button, Popover, Select, Spin } from "antd";
import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -40,35 +40,42 @@ export function JobEmployeeAssignments({
};
const popContent = (
<div>
<Select
id="employeeSelector"
showSearch
style={{ width: 200 }}
optionFilterProp="children"
onChange={onChange}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{bodyshop.employees.map((emp) => (
<Select.Option value={emp.id} key={emp.id}>
{`${emp.first_name} ${emp.last_name}`}
</Select.Option>
))}
</Select>
<Button
type="primary"
disabled={!assignment.employeeid || jobRO}
onClick={() => {
handleAdd(assignment);
setVisibility(false);
}}
>
Assign
</Button>
<Button onClick={() => setVisibility(false)}>Close</Button>
</div>
<Row gutter={[16, 16]}>
<Col span={24}>
<Select
id="employeeSelector"
showSearch
style={{ width: 200 }}
optionFilterProp="children"
onChange={onChange}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
0
}
>
{bodyshop.employees.map((emp) => (
<Select.Option value={emp.id} key={emp.id}>
{`${emp.first_name} ${emp.last_name}`}
</Select.Option>
))}
</Select>
</Col>
<Col span={24}>
<Space wrap>
<Button
type="primary"
disabled={!assignment.employeeid || jobRO}
onClick={() => {
handleAdd(assignment);
setVisibility(false);
}}
>
Assign
</Button>
<Button onClick={() => setVisibility(false)}>Close</Button>
</Space>
</Col>
</Row>
);
return (

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

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

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

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

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

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

74
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 { useTranslation } from "react-i18next";
import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
@@ -7,37 +7,45 @@ export default function NoteUpsertModalComponent({ form }) {
const { t } = useTranslation();
return (
<div>
<Form.Item
label={t("notes.fields.critical")}
name="critical"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("notes.fields.private")}
name="private"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("notes.fields.text")}
name="text"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input.TextArea
rows={8}
placeholder={t("notes.labels.newnoteplaceholder")}
/>
</Form.Item>
<NotesPresetButton form={form} />
</div>
<Row gutter={[16, 16]}>
<Col span={8}>
<Form.Item
label={t("notes.fields.critical")}
name="critical"
valuePropName="checked"
>
<Switch />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label={t("notes.fields.private")}
name="private"
valuePropName="checked"
>
<Switch />
</Form.Item>
</Col>
<Col span={8}>
<NotesPresetButton form={form} />
</Col>
<Col span={24}>
<Form.Item
label={t("notes.fields.text")}
name="text"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input.TextArea
rows={8}
placeholder={t("notes.labels.newnoteplaceholder")}
/>
</Form.Item>
</Col>
</Row>
);
}

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

@@ -90,7 +90,12 @@ export function NoteUpsertModalContainer({
}}
destroyOnClose
>
<Form form={form} onFinish={handleFinish} initialValues={existingNote}>
<Form
form={form}
onFinish={handleFinish}
initialValues={existingNote}
layout="vertical"
>
<NoteUpsertModalComponent form={form} />
</Form>
</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 React from "react";
import { connect } from "react-redux";
@@ -68,7 +69,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
}, []);
return (
<div>
<Card>
<ResponsiveContainer width="100%" height={475}>
<ComposedChart
data={data}
@@ -108,6 +109,6 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
/>
</ComposedChart>
</ResponsiveContainer>
</div>
</Card>
);
}

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

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

21
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 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 ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
@@ -20,11 +20,18 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
});
return (
<div>
<ScoreboardTargetsTable />
<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />
<ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
<ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
</div>
<Row gutter={[16, 16]}>
<Col span={24}>
<ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
</Col>
<Col span={24}>
<ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
</Col>
<Col span={24}>
<ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
</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 { Col, Row, Statistic } from "antd";
import { Card, Col, Row, Statistic } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
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";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
const rowGutter = [16, 16];
const statSpans = { xs: 24, sm: 6 };
export function ScoreboardTargetsTable({ bodyshop }) {
export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
const { t } = useTranslation();
return (
<div>
<Card
title={t("scoreboard.labels.targets")}
extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
>
<Row gutter={rowGutter}>
<Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
<Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Statistic
title={t("scoreboard.labels.dailytarget")}
value={bodyshop.scoreboard_target.dailyBodyTarget}
prefix='B'
prefix="B"
/>
</Col>
<Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Col {...statSpans}>
<Statistic
value={bodyshop.scoreboard_target.dailyPaintTarget}
prefix='P'
prefix="P"
/>
</Col>
<Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
</Row>
</Col>
</Row>
</div>
</Card>
);
}
export default connect(

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

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

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

@@ -1,5 +1,5 @@
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 React, { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -75,47 +75,44 @@ export default function VendorsListComponent({
: [];
return (
<Table
loading={loading}
title={() => {
return (
<div className="imex-table-header">
<Button onClick={handleNewVendor}>
{t("vendors.actions.new")}
</Button>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
className="imex-table-header__search"
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.target.value);
}}
value={searchText}
enterButton
/>
</div>
);
}}
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
onChange={handleTableChange}
dataSource={filteredVendors}
rowSelection={{
onSelect: handleOnRowClick,
type: "radio",
selectedRowKeys: [selectedvendor],
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
},
};
}}
/>
<Card
extra={
<Space wrap>
<Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.target.value);
}}
value={searchText}
enterButton
/>
</Space>
}
>
<Table
loading={loading}
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
onChange={handleTableChange}
dataSource={filteredVendors}
rowSelection={{
onSelect: handleOnRowClick,
type: "radio",
selectedRowKeys: [selectedvendor],
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
},
};
}}
/>
</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 queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
import VendorsListComponent from "./vendors-list.component";
import queryString from "query-string";
import { useHistory, useLocation } from "react-router-dom";
export default function VendorsListContainer() {
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,
} from "../../redux/application/application.actions";
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 { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
return (
<RbacWrapper action="scoreboard:view">
<ScoreboardPageComponent
scoreboardSubscription={scoreboardSubscription}
/>
<ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
</RbacWrapper>
);
}

53
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 { useHistory, useLocation } from "react-router-dom";
import VendorsFormContainer from "../../components/vendors-form/vendors-form.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() {
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 (
<div>
<Row gutter={[16, 16]}>
<Col {...listSpan}>
<VendorsListContainer />
</Col>
<Col {...formSapn}>
<VendorsFormContainer />
</Col>
</Row>
<VendorsListContainer />
<Drawer
width={drawerPercentage}
onClose={() => {
delete search.selectedvendor;
history.push({ search: queryString.stringify(search) });
}}
visible={selectedvendor}
>
<VendorsFormContainer />
</Drawer>
</div>
);
}

15
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" />;
return (
<div>
<div>Buttons to move and assign things.</div>
<JobsDocumentsComponent
data={data ? data.documents : []}
jobId={null}
billId={null}
refetch={refetch}
/>
</div>
<JobsDocumentsComponent
data={data ? data.documents : []}
jobId={null}
billId={null}
refetch={refetch}
/>
);
}

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?",
"checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
"checklistdocuments": "Checklist Documents",
"checklists": "Checklists",
"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
"cost": "Cost",
@@ -1723,6 +1724,7 @@
"asoftodaytarget": "As of Today",
"dailytarget": "Daily",
"monthlytarget": "Monthly",
"targets": "Targets",
"weeklytarget": "Weekly",
"workingdays": "Working Days / Month"
},

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

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

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

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