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

BOD-23 Added schema changes for time tickets + redux config for time ticket modal + scaffolding for time ticket modal.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-14 17:38:05 -07:00
parent 91af10eef2
commit 325a82ac86
27 changed files with 829 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/components/employee-search-select/employee-search-select.component.jsx Normal file
View File

@@ -0,0 +1,54 @@
import { Select, Tag } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
const { Option } = Select;
//To be used as a form element only.
const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
useEffect(() => {
if (onChange) {
onChange(option);
}
}, [option, onChange]);
return (
<Select
showSearch
value={option}
style={{
width: 400,
}}
onChange={setOption}
optionFilterProp="search"
onSelect={onSelect}
>
{options
? options.map((o) => (
<Option
key={o.id}
value={o.id}
search={`${o.employee_number} ${o.first_name} ${o.last_name}`}
discount={o.discount}
>
<div style={{ display: "flex" }}>
{`${o.employee_number} ${o.first_name} ${o.last_name}`}
<Tag color="blue">{o.cost_center}</Tag>
<Tag color="red">
<CurrencyFormatter>{o.base_rate}</CurrencyFormatter>
</Tag>
<Tag color="red">
{o.flat_rate
? t("timetickets.labels.flat_rate")
: t("timetickets.labels.straight_time")}
</Tag>
</div>
</Option>
))
: null}
</Select>
);
};
export default EmployeeSearchSelect;

45
client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx Normal file
View File

@@ -0,0 +1,45 @@
import React from "react";
import { Button } from "antd";
import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import { useQuery } from "@apollo/react-hooks";
import { QUERY_TICKETS_BY_JOBID } from "../../graphql/timetickets.queries";
const mapDispatchToProps = (dispatch) => ({
setTimeTicketContext: (context) =>
dispatch(setModalContext({ context: context, modal: "timeTicket" })),
});
export function JobsDetailLaborContainer({ jobId, setTimeTicketContext }) {
const { loading, error, data, refetch } = useQuery(QUERY_TICKETS_BY_JOBID, {
variables: { jobid: jobId },
skip: !!!jobId,
});
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
{jobId}
<Button
onClick={() => {
setTimeTicketContext({
actions: { refetch },
context: {
jobId,
},
});
}}
>
TEST - Open Time Ticket Modal
</Button>
{JSON.stringify(data)}
</div>
);
}
export default connect(null, mapDispatchToProps)(JobsDetailLaborContainer);

109
client/src/components/time-ticket-modal/time-ticket-modal.component.jsx Normal file
View File

@@ -0,0 +1,109 @@
import { DatePicker, Form, Input, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
export default function TimeTicketModalComponent({
form,
roAutoCompleteOptions,
employeeAutoCompleteOptions,
loadJobLines,
responsibilityCenters,
}) {
const { t } = useTranslation();
return (
<div>
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<JobSearchSelect
options={roAutoCompleteOptions}
onBlur={() => {
if (form.getFieldValue("jobid") !== null) {
loadJobLines({
variables: { id: form.getFieldValue("jobid") },
});
}
}}
/>
</Form.Item>
<Form.Item
name="employeeid"
label={t("timetickets.fields.employee")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<EmployeeSearchSelect options={employeeAutoCompleteOptions} />
</Form.Item>
</div>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput />
</Form.Item>
</div>
<button
onClick={() => {
console.log(form.getFieldsValue());
}}
>
Get Them Values
</button>
</div>
);
}

150
client/src/components/time-ticket-modal/time-ticket-modal.container.jsx Normal file
View File

@@ -0,0 +1,150 @@
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification, Button } from "antd";
import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectTimeTicket } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TimeTicketModalComponent from "./time-ticket-modal.component";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import { GET_JOB_LINES_BY_PK_MINIMAL } from "../../graphql/jobs-lines.queries";
const mapStateToProps = createStructuredSelector({
timeTicketModal: selectTimeTicket,
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
});
function TimeTicketModalContainer({
timeTicketModal,
toggleModalVisible,
bodyshop,
}) {
const [form] = Form.useForm();
const { t } = useTranslation();
const [enterAgain, setEnterAgain] = useState(false);
// const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
skip: !timeTicketModal.visible,
});
const { data: EmployeeAutoCompleteData } = useQuery(QUERY_EMPLOYEES, {
skip: !timeTicketModal.visible,
});
const [loadJobLines, { data: jobLinesData }] = useLazyQuery(
GET_JOB_LINES_BY_PK_MINIMAL
);
const handleFinish = (values) => {
// insertInvoice({
// variables: {
// invoice: [
// Object.assign({}, values, {
// invoicelines: { data: values.invoicelines },
// }),
// ],
// },
// })
// .then((r) => {
// notification["success"]({
// message: t("invoices.successes.created"),
// });
// if (timeTicketModal.actions.refetch)
// timeTicketModal.actions.refetch();
// if (enterAgain) {
// form.resetFields();
// } else {
// toggleModalVisible();
// }
// setEnterAgain(false);
// })
// .catch((error) => {
// setEnterAgain(false);
// notification["error"]({
// message: t("invoices.errors.creating", {
// message: JSON.stringify(error),
// }),
// });
// });
};
const handleCancel = () => {
toggleModalVisible();
};
useEffect(() => {
if (enterAgain) form.submit();
}, [enterAgain, form]);
return (
<Modal
title={
timeTicketModal.context && timeTicketModal.context.id
? t("timetickets.labels.edit")
: t("timetickets.labels.new")
}
width={"90%"}
visible={timeTicketModal.visible}
okText={t("general.actions.save")}
onOk={() => form.submit()}
onCancel={handleCancel}
afterClose={() => form.resetFields()}
footer={
<span>
<Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
<Button onClick={() => form.submit()}>
{t("general.actions.save")}
</Button>
{timeTicketModal.context && timeTicketModal.context.id ? null : (
<Button
type="primary"
onClick={() => {
setEnterAgain(true);
}}
>
{t("general.actions.saveandnew")}
</Button>
)}
</span>
}
destroyOnClose
>
<Form
onFinish={handleFinish}
autoComplete={"off"}
form={form}
onFinishFailed={() => {
setEnterAgain(false);
console.log("Finish failed");
}}
initialValues={{
jobid: timeTicketModal.context.jobId || null,
}}
>
<TimeTicketModalComponent
form={form}
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
employeeAutoCompleteOptions={
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
loadJobLines={loadJobLines}
/>
</Form>
{JSON.stringify(jobLinesData)}
</Modal>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TimeTicketModalContainer);

20
client/src/graphql/jobs-lines.queries.js
View File

@@ -45,6 +45,26 @@ export const GET_JOB_LINES_BY_PK = gql`
}
`;
export const GET_JOB_LINES_BY_PK_MINIMAL = gql`
query GET_JOB_LINES_BY_PK_MINIMAL($id: uuid!) {
joblines(where: { jobid: { _eq: $id } }, order_by: { unq_seq: asc }) {
id
line_desc
part_type
oem_partno
db_price
act_price
part_qty
mod_lbr_ty
db_hrs
mod_lb_hrs
lbr_op
lbr_amt
op_code_desc
}
}
`;
export const UPDATE_JOB_LINE_STATUS = gql`
mutation UPDATE_JOB_LINE_STATUS($ids: [uuid!]!, $status: String!) {
update_joblines(where: { id: { _in: $ids } }, _set: { status: $status }) {

32
client/src/graphql/timetickets.queries.js Normal file
View File

@@ -0,0 +1,32 @@
import { gql } from "apollo-boost";
export const QUERY_TICKETS_BY_JOBID = gql`
query QUERY_TICKETS_BY_JOBID($jobid: uuid!) {
timetickets(where: { jobid: { _eq: $jobid } }) {
actualhrs
cost_center
ciecacode
rate
productivehrs
id
employee {
employee_number
first_name
last_name
id
}
}
}
`;
export const INSERT_NEW_TIME_TICKET = gql`
mutation INSERT_NEW_TIME_TICKET(
$timeTicketInput: [timetickets_insert_input!]!
) {
insert_timetickets(objects: $timeTicketInput) {
returning {
id
}
}
}
`;

2
client/src/pages/contract-detail/contract-detail.page.container.jsx
View File

@@ -46,7 +46,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs }) {
{
link: "/manage/courtesycars/contracts/new",
label: t("titles.bc.contracts-detail", {
number: data.cccontracts_by_pk.agreementnumber || "",
number: (data && data.cccontracts_by_pk.agreementnumber) || "",
}),
},
]);

5
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -69,6 +69,9 @@ const JobsDetailPliContainer = lazy(() =>
const JobsDetailAuditContainer = lazy(() =>
import("../../components/audit-trail-list/audit-trail-list.container")
);
const JobsDetailLaborContainer = lazy(() =>
import("../../components/jobs-detail-labor/jobs-detail-labor.container")
);
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -237,7 +240,7 @@ export function JobsDetailPage({
}
key="labor"
>
Labor
<JobsDetailLaborContainer jobId={job.id} />
</Tabs.TabPane>
<Tabs.TabPane
tab={

4
client/src/pages/manage/manage.page.component.jsx
View File

@@ -74,6 +74,9 @@ const InvoiceDetailPage = lazy(() =>
const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
const TimeTicketModalContainer = lazy(() =>
import("../../components/time-ticket-modal/time-ticket-modal.container")
);
const { Header, Content, Footer } = Layout;
export default function Manage({ match }) {
@@ -102,6 +105,7 @@ export default function Manage({ match }) {
<BreadCrumbs />
<EnterInvoiceModalContainer />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Switch>

15
client/src/redux/modals/modals.reducer.js
View File

@@ -4,8 +4,8 @@ const baseModal = {
visible: false,
context: {},
actions: {
refetch: null
}
refetch: null,
},
};
const INITIAL_STATE = {
@@ -14,7 +14,8 @@ const INITIAL_STATE = {
courtesyCarReturn: { ...baseModal },
noteUpsert: { ...baseModal },
schedule: { ...baseModal },
partsOrder: { ...baseModal }
partsOrder: { ...baseModal },
timeTicket: { ...baseModal },
};
const modalsReducer = (state = INITIAL_STATE, action) => {
@@ -24,8 +25,8 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
...state,
[action.payload]: {
...state[action.payload],
visible: !state[action.payload].visible
}
visible: !state[action.payload].visible,
},
};
case ModalsActionTypes.SET_MODAL_CONTEXT:
return {
@@ -33,8 +34,8 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
[action.payload.modal]: {
...state[action.payload.modal],
...action.payload.context,
visible: true
}
visible: true,
},
};
default:
return state;

5
client/src/redux/modals/modals.selectors.js
View File

@@ -31,3 +31,8 @@ export const selectPartsOrder = createSelector(
[selectModals],
modals => modals.partsOrder
);
export const selectTimeTicket = createSelector(
[selectModals],
modals => modals.timeTicket
);

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

@@ -712,6 +712,17 @@
"state": "Error reading page state. Please refresh."
}
},
"timetickets": {
"fields": {
"employee": "Employee"
},
"labels": {
"edit": "Edit Time Ticket",
"flat_rate": "Flat Rate",
"new": "New Time Ticket",
"straight_time": "Straight Time"
}
},
"titles": {
"app": "Bodyshop by ImEX Systems",
"bc": {

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

@@ -712,6 +712,17 @@
"state": "Error al leer el estado de la página. Porfavor refresca."
}
},
"timetickets": {
"fields": {
"employee": ""
},
"labels": {
"edit": "",
"flat_rate": "",
"new": "",
"straight_time": ""
}
},
"titles": {
"app": "Carrocería de ImEX Systems",
"bc": {

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

@@ -712,6 +712,17 @@
"state": "Erreur lors de la lecture de l'état de la page. Rafraichissez, s'il vous plait."
}
},
"timetickets": {
"fields": {
"employee": ""
},
"labels": {
"edit": "",
"flat_rate": "",
"new": "",
"straight_time": ""
}
},
"titles": {
"app": "Carrosserie par ImEX Systems",
"bc": {