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

Added viewing all CSI responses + read only version of configurable form BOD-154

Browse Source
This commit is contained in:
Patrick Fic
2020-06-04 13:44:43 -07:00
parent 910183d8e7
commit 90152fc613
27 changed files with 615 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
View File

@@ -128,7 +128,7 @@ export default function AccountingPayablesTableComponent({
),
},
];
console.log("transInProgress", transInProgress);
const handleSearch = (e) => {
setState({ ...state, search: e.target.value });
};

9
client/src/components/config-form-components/checkbox/checkbox.component.jsx
View File

@@ -2,21 +2,22 @@ import React from "react";
import { Form, Checkbox } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
const { name, label, required } = formItem;
const { t } = useTranslation();
return (
<Form.Item
name={name}
label={label}
valuePropName='checked'
valuePropName="checked"
rules={[
{
required: required,
message: t("general.validation.required"),
},
]}>
<Checkbox />
]}
>
<Checkbox disabled={readOnly} />
</Form.Item>
);
}

14
client/src/components/config-form-components/config-form-components.component.jsx
View File

@@ -5,21 +5,23 @@ import Text from "./text/text.component";
import Textarea from "./textarea/textarea.component";
import Rate from "./rate/rate.component";
export default function ConfirmFormComponents({ componentList }) {
export default function ConfirmFormComponents({ componentList, readOnly }) {
return (
<div>
{componentList.map((f, idx) => {
switch (f.type) {
case "checkbox":
return <CheckboxFormItem key={idx} formItem={f} />;
return (
<CheckboxFormItem key={idx} formItem={f} readOnly={readOnly} />
);
case "slider":
return <Slider key={idx} formItem={f} />;
return <Slider key={idx} formItem={f} readOnly={readOnly} />;
case "text":
return <Text key={idx} formItem={f} />;
return <Text key={idx} formItem={f} readOnly={readOnly} />;
case "textarea":
return <Textarea key={idx} formItem={f} />;
return <Textarea key={idx} formItem={f} readOnly={readOnly} />;
case "rate":
return <Rate key={idx} formItem={f} />;
return <Rate key={idx} formItem={f} readOnly={readOnly} />;
default:
return <div key={idx}>Error</div>;
}

7
client/src/components/config-form-components/rate/rate.component.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { Form, Rate } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
const { name, label, required } = formItem;
const { t } = useTranslation();
return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
required: required,
message: t("general.validation.required"),
},
]}>
<Rate allowHalf />
]}
>
<Rate disabled={readOnly} allowHalf />
</Form.Item>
);
}

7
client/src/components/config-form-components/slider/slider.component.jsx
View File

@@ -2,7 +2,7 @@ import { Form, Slider } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
const { name, label, required, min, max } = formItem;
const { t } = useTranslation();
return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
required: required,
message: t("general.validation.required"),
},
]}>
<Slider min={min || 0} max={max || 10} />
]}
>
<Slider disabled={readOnly} min={min || 0} max={max || 10} />
</Form.Item>
);
}

7
client/src/components/config-form-components/text/text.component.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { Form, Input } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
const { name, label, required } = formItem;
const { t } = useTranslation();
return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
required: required,
message: t("general.validation.required"),
},
]}>
<Input />
]}
>
<Input disabled={readOnly} />
</Form.Item>
);
}

7
client/src/components/config-form-components/textarea/textarea.component.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { Form, Input } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
const { name, label, required, rows } = formItem;
const { t } = useTranslation();
return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
required: required,
message: t("general.validation.required"),
},
]}>
<Input.TextArea rows={rows || 4} />
]}
>
<Input.TextArea disabled={readOnly} rows={rows || 4} />
</Form.Item>
);
}

43
client/src/components/csi-response-form/csi-response-form.container.jsx Normal file
View File

@@ -0,0 +1,43 @@
import { useQuery } from "@apollo/react-hooks";
import { Form } from "antd";
import queryString from "query-string";
import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
import ConfigFormComponents from "../config-form-components/config-form-components.component";
import { useTranslation } from "react-i18next";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
export default function CsiResponseFormContainer() {
const { t } = useTranslation();
const [form] = Form.useForm();
const searchParams = queryString.parse(useLocation().search);
const { responseid } = searchParams;
const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
variables: {
id: responseid,
},
skip: !!!responseid,
});
useEffect(() => {
form.resetFields();
}, [data, form]);
if (!!!responseid) return <div>{t("csi.labels.noneselected")}</div>;
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<Form form={form} initialValues={data.csi_by_pk.response}>
<ConfigFormComponents
readOnly
componentList={data.csi_by_pk.csiquestion.config}
/>
</Form>
</div>
);
}

159
client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx Normal file
View File

@@ -0,0 +1,159 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useLocation } from "react-router-dom";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
export default function CsiResponseListPaginated({
refetch,
loading,
responses,
total,
}) {
const search = queryString.parse(useLocation().search);
const { responseid, page, sortcolumn, sortorder } = search;
const history = useHistory();
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
});
const { t } = useTranslation();
const columns = [
{
title: t("jobs.fields.ro_number"),
dataIndex: "ro_number",
key: "ro_number",
width: "8%",
sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
sortOrder: sortcolumn === "ro_number" && sortorder,
render: (text, record) => (
<Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
),
},
{
title: t("jobs.fields.est_number"),
dataIndex: "est_number",
key: "est_number",
width: "8%",
sorter: (a, b) => a.job.est_number - b.job.est_number,
sortOrder: sortcolumn === "est_number" && sortorder,
render: (text, record) => (
<Link to={"/manage/jobs/" + record.job.id}>
{record.job.est_number}
</Link>
),
},
{
title: t("jobs.fields.owner"),
dataIndex: "owner",
key: "owner",
ellipsis: true,
sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
width: "25%",
sortOrder: sortcolumn === "owner" && sortorder,
render: (text, record) => {
return record.owner ? (
<Link to={"/manage/owners/" + record.owner.id}>
{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
</Link>
) : (
<span>{`${record.job.ownr_fn || ""} ${
record.job.ownr_ln || ""
}`}</span>
);
},
},
{
title: t("csi.fields.completedon"),
dataIndex: "completedon",
key: "completedon",
ellipsis: true,
sorter: (a, b) => a.completedon - b.completedon,
width: "25%",
sortOrder: sortcolumn === "completedon" && sortorder,
render: (text, record) => {
return record.completedon ? (
<DateFormatter>{record.completedon}</DateFormatter>
) : null;
},
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
search.page = pagination.current;
search.sortcolumn = sorter.columnKey;
search.sortorder = sorter.order;
history.push({ search: queryString.stringify(search) });
};
const handleOnRowClick = (record) => {
if (record) {
if (record.id) {
search.responseid = record.id;
history.push({ search: queryString.stringify(search) });
}
} else {
delete search.responseid;
history.push({ search: queryString.stringify(search) });
}
};
return (
<div>
<Table
loading={loading}
title={() => {
return (
<div style={{ display: "flex" }}>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
{
// <Input.Search
// placeholder={t("general.labels.search")}
// onSearch={(value) => {
// search.search = value;
// history.push({ search: queryString.stringify(search) });
// }}
// enterButton
// />
}
</div>
);
}}
size="small"
pagination={{
position: "top",
pageSize: 25,
current: parseInt(page || 1),
total: total,
}}
columns={columns}
rowKey="id"
dataSource={responses}
onChange={handleTableChange}
rowSelection={{
onSelect: (record) => {
handleOnRowClick(record);
},
selectedRowKeys: [responseid],
type: "radio",
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
}, // click row
};
}}
/>
</div>
);
}

2
client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
View File

@@ -21,7 +21,7 @@ const DateTimePicker = ({ value, onChange, onBlur }) => {
selected={value ? new Date(value) : null}
onChange={handleChange}
showTimeSelect
timeIntervals={5}
timeIntervals={15}
onBlur={onBlur}
isClearable
placeholderText={t("general.labels.selectdate")}

3
client/src/components/header/header.component.jsx
View File

@@ -250,6 +250,9 @@ function Header({
{t("menus.header.shop_vendors")}
</Link>
</Menu.Item>
<Menu.Item key="shop-csi">
<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu

2
client/src/components/invoice-export-all-button/invoice-export-all-button.component.jsx
View File

@@ -55,7 +55,7 @@ export function InvoiceExportAllButton({
try {
PartnerResponse = await axios.post(
"http://48f9a09ccdec.ngrok.io/qb/",
"http://localhost:1337/qb/",
QbXmlResponse.data
);
} catch (error) {

33
client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
View File

@@ -32,27 +32,29 @@ export function JobsDetailHeaderActions({
const client = useApolloClient();
const history = useHistory();
const statusmenu = (
<Menu key='popovermenu'>
<Menu.Item key='cccontract'>
<Menu key="popovermenu">
<Menu.Item key="cccontract">
<Link
to={{
pathname: "/manage/courtesycars/contracts/new",
state: { jobId: job.id },
}}>
}}
>
{t("menus.jobsactions.newcccontract")}
</Link>
</Menu.Item>
<Menu.Item
key='addtoproduction'
key="addtoproduction"
disabled={!!!job.converted || !!job.inproduction}
onClick={() => AddToProduction(client, job.id, refetch)}>
onClick={() => AddToProduction(client, job.id, refetch)}
>
{t("jobs.actions.addtoproduction")}
</Menu.Item>
<Menu.Item key='duplicatejob'>
<Menu.Item key="duplicatejob">
<Popconfirm
title={t("jobs.labels.duplicateconfirm")}
okText='Yes'
cancelText='No'
okText="Yes"
cancelText="No"
onClick={(e) => e.stopPropagation()}
onConfirm={() =>
DuplicateJob(
@@ -64,12 +66,13 @@ export function JobsDetailHeaderActions({
}
)
}
getPopupContainer={(trigger) => trigger.parentNode}>
getPopupContainer={(trigger) => trigger.parentNode}
>
{t("menus.jobsactions.duplicate")}
</Popconfirm>
</Menu.Item>
<Menu.Item
key='postinvoices'
key="postinvoices"
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: refetch },
@@ -77,14 +80,16 @@ export function JobsDetailHeaderActions({
job: job,
},
});
}}>
}}
>
{t("jobs.actions.postInvoices")}
</Menu.Item>
<Menu.Item key='closejob'>
<Menu.Item key="closejob">
<Link
to={{
pathname: `/manage/jobs/${job.id}/close`,
}}>
}}
>
{t("menus.jobsactions.closejob")}
</Link>
</Menu.Item>
@@ -92,7 +97,7 @@ export function JobsDetailHeaderActions({
</Menu>
);
return (
<Dropdown overlay={statusmenu} key='changestatus'>
<Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
<Button>
{t("general.labels.actions")} <DownCircleFilled />
</Button>

23
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -1,4 +1,4 @@
import { DownCircleFilled } from "@ant-design/icons";
import { DownCircleFilled, PrinterFilled } from "@ant-design/icons";
import {
Avatar,
Badge,
@@ -31,13 +31,15 @@ const mapStateToProps = createStructuredSelector({
const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) =>
dispatch(setModalContext({ context: context, modal: "schedule" })),
setPrintCenterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "printCenter" })),
});
export function JobsDetailHeader({
job,
mutationConvertJob,
refetch,
setPrintCenterContext,
bodyshop,
updateJobStatus,
setScheduleContext,
@@ -66,11 +68,26 @@ export function JobsDetailHeader({
);
const menuExtra = [
<Dropdown overlay={statusmenu} key="changestatus">
<Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
<Button>
{t("jobs.actions.changestatus")} <DownCircleFilled />
</Button>
</Dropdown>,
<Button
onClick={() => {
setPrintCenterContext({
actions: { refetch: refetch },
context: {
id: job.id,
type: "job",
},
});
}}
key="printing"
>
<PrinterFilled />
{t("jobs.actions.printCenter")}
</Button>,
<Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
<Button
//TODO Enabled logic based on status.

9
client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
View File

@@ -47,8 +47,8 @@ export default function JobsList({ refetch, loading, jobs, total }) {
},
{
title: t("jobs.fields.owner"),
dataIndex: "ownr_ln",
key: "ownr_ln",
dataIndex: "owner",
key: "owner",
ellipsis: true,
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
width: "25%",
@@ -176,7 +176,6 @@ export default function JobsList({ refetch, loading, jobs, total }) {
return (
<div>
THE RIGHT COMPONENT
<Table
loading={loading}
title={() => {
@@ -196,7 +195,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
</div>
);
}}
size='small'
size="small"
pagination={{
position: "top",
pageSize: 25,
@@ -204,7 +203,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
total: total,
}}
columns={columns}
rowKey='id'
rowKey="id"
dataSource={jobs}
onChange={handleTableChange}
/>

1
client/src/components/schedule-day-view/schedule-day-view.component.jsx
View File

@@ -11,7 +11,6 @@ export default function ScheduleDayViewComponent({ data, day }) {
events={data}
defaultView="day"
views={["day"]}
style={{ height: "40vh" }}
date={day}
/>
);

4
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -71,7 +71,9 @@ export default function ScheduleJobModalComponent({
/>
</Col>
<Col span={10}>
<ScheduleDayViewContainer day={appData.start} />
<div style={{ height: "70vh" }}>
<ScheduleDayViewContainer day={appData.start} />
</div>
</Col>
</Row>
);