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

BOD-23 Added labor pages tab + finalized time ticket tab + created allocation calculations

Browse Source
This commit is contained in:
Patrick Fic
2020-04-15 15:39:05 -07:00
parent 325a82ac86
commit 8e12320c19
20 changed files with 724 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
View File

@@ -1,15 +1,16 @@
import { DatePicker, Form, Input, Switch } from "antd";
import { DatePicker, Form, InputNumber, Input, Select } 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";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
export default function TimeTicketModalComponent({
form,
roAutoCompleteOptions,
employeeAutoCompleteOptions,
loadJobLines,
loadLineTicketData,
lineTicketData,
responsibilityCenters,
}) {
const { t } = useTranslation();
@@ -19,7 +20,7 @@ export default function TimeTicketModalComponent({
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
label={t("timetickets.fields.ro_number")}
rules={[
{
required: true,
@@ -31,7 +32,7 @@ export default function TimeTicketModalComponent({
options={roAutoCompleteOptions}
onBlur={() => {
if (form.getFieldValue("jobid") !== null) {
loadJobLines({
loadLineTicketData({
variables: { id: form.getFieldValue("jobid") },
});
}
@@ -51,21 +52,10 @@ export default function TimeTicketModalComponent({
<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")}
label={t("timetickets.fields.date")}
name="date"
rules={[
{
@@ -77,15 +67,8 @@ export default function TimeTicketModalComponent({
<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"
label={t("timetickets.fields.productivehrs")}
name="productivehrs"
rules={[
{
required: true,
@@ -93,7 +76,52 @@ export default function TimeTicketModalComponent({
},
]}
>
<CurrencyInput />
<InputNumber />
</Form.Item>
<Form.Item
label={t("timetickets.fields.actualhrs")}
name="actualhrs"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item
name="cost_center"
label={t("timetickets.fields.cost_center")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select
style={{ width: "150px" }}
onChange={() => {
console.log("Changed.");
}}
>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name="ciecacode"
label={t("timetickets.fields.ciecacode")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input disabled />
</Form.Item>
</div>
@@ -104,6 +132,11 @@ export default function TimeTicketModalComponent({
>
Get Them Values
</button>
<LaborAllocationsTable
joblines={lineTicketData.joblines}
timetickets={lineTicketData.timetickets}
/>
</div>
);
}

155
client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
View File

@@ -1,17 +1,22 @@
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification, Button } from "antd";
import React, { useState, useEffect } from "react";
import { Button, Form, Modal, notification } from "antd";
import React, { useEffect, useState } 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 { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import {
INSERT_NEW_TIME_TICKET,
UPDATE_TIME_TICKET,
} from "../../graphql/timetickets.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";
import moment from "moment";
const mapStateToProps = createStructuredSelector({
timeTicketModal: selectTimeTicket,
bodyshop: selectBodyshop,
@@ -20,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
});
function TimeTicketModalContainer({
export function TimeTicketModalContainer({
timeTicketModal,
toggleModalVisible,
bodyshop,
@@ -28,52 +33,60 @@ function TimeTicketModalContainer({
const [form] = Form.useForm();
const { t } = useTranslation();
const [enterAgain, setEnterAgain] = useState(false);
// const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
const [updateTicket] = useMutation(UPDATE_TIME_TICKET);
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 [loadLineTicketData, { data: lineTicketData }] = useLazyQuery(
GET_LINE_TICKET_BY_PK
);
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),
// }),
// });
// });
if (timeTicketModal.context.id) {
updateTicket({
variables: {
timeticketId: timeTicketModal.context.id,
timeticket: values,
},
})
.then(handleMutationSuccess)
.catch(handleMutationError);
} else {
insertTicket({
variables: {
timeTicketInput: [values],
},
})
.then(handleMutationSuccess)
.catch(handleMutationError);
}
};
const handleMutationSuccess = (response) => {
notification["success"]({
message: t("timetickets.successes.created"),
});
if (timeTicketModal.actions.refetch) timeTicketModal.actions.refetch();
if (enterAgain) {
form.resetFields();
} else {
toggleModalVisible();
}
setEnterAgain(false);
};
const handleMutationError = (error) => {
setEnterAgain(false);
notification["error"]({
message: t("timetickets.errors.creating", {
message: JSON.stringify(error),
}),
});
};
const handleCancel = () => {
@@ -84,6 +97,39 @@ function TimeTicketModalContainer({
if (enterAgain) form.submit();
}, [enterAgain, form]);
useEffect(() => {
if (timeTicketModal.visible) form.resetFields();
}, [timeTicketModal.visible, form]);
const handleFieldsChange = (changedFields, allFields) => {
if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
const emps = EmployeeAutoCompleteData.employees.filter(
(e) => e.id === changedFields.employeeid
);
form.setFieldsValue({
cost_center: emps.length > 0 ? emps[0].cost_center : "",
ciecacode: Object.keys(
bodyshop.md_responsibility_centers.defaults
).find(
(key) =>
bodyshop.md_responsibility_centers.defaults[key] ===
emps[0].cost_center
),
});
}
if (!!changedFields.cost_center && !!EmployeeAutoCompleteData) {
form.setFieldsValue({
ciecacode: Object.keys(
bodyshop.md_responsibility_centers.defaults
).find(
(key) =>
bodyshop.md_responsibility_centers.defaults[key] ===
changedFields.cost_center
),
});
}
};
return (
<Modal
title={
@@ -96,6 +142,7 @@ function TimeTicketModalContainer({
okText={t("general.actions.save")}
onOk={() => form.submit()}
onCancel={handleCancel}
forceRender
afterClose={() => form.resetFields()}
footer={
<span>
@@ -121,13 +168,17 @@ function TimeTicketModalContainer({
onFinish={handleFinish}
autoComplete={"off"}
form={form}
onFinishFailed={() => {
setEnterAgain(false);
console.log("Finish failed");
}}
initialValues={{
jobid: timeTicketModal.context.jobId || null,
}}
initialValues={
timeTicketModal.context.timeticket
? {
...timeTicketModal.context.timeticket,
date: timeTicketModal.context.timeticket.date
? moment(timeTicketModal.context.date)
: null,
}
: { jobid: timeTicketModal.context.jobId || null }
}
onValuesChange={handleFieldsChange}
>
<TimeTicketModalComponent
form={form}
@@ -136,10 +187,12 @@ function TimeTicketModalContainer({
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
loadJobLines={loadJobLines}
loadLineTicketData={loadLineTicketData}
lineTicketData={
lineTicketData ? lineTicketData : { joblines: [], timetickets: [] }
}
/>
</Form>
{JSON.stringify(jobLinesData)}
</Modal>
);
}