Claim Tasks WIP.
This commit is contained in:
Patrick Fic
@@ -0,0 +1,223 @@
|
||||
import { Button, Form, Input, InputNumber, Radio } 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 EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
|
||||
import EmployeeTeamSearchSelectComponent from "../employee-team-search-select/employee-team-search-select.component";
|
||||
import FormDatePickerComponent from "../form-date-picker/form-date-picker.component";
|
||||
import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TimeTicketTaskModalComponent);
|
||||
|
||||
export function TimeTicketTaskModalComponent({
|
||||
bodyshop,
|
||||
form,
|
||||
employeeAutoCompleteOptions,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow grow noDivider>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => (
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("timetickets.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<JobSearchSelectComponent
|
||||
convertedOnly={!bodyshop.tt_allow_post_to_invoiced}
|
||||
notExported={!bodyshop.tt_allow_post_to_invoiced}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item name="employeeid" label={t("timetickets.fields.employee")}>
|
||||
<EmployeeSearchSelectComponent
|
||||
options={employeeAutoCompleteOptions}
|
||||
allowClear
|
||||
onSelect={(value) => {
|
||||
const emps =
|
||||
employeeAutoCompleteOptions &&
|
||||
employeeAutoCompleteOptions.filter((e) => e.id === value)[0];
|
||||
form.setFieldsValue({ flat_rate: emps && emps.flat_rate });
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="employeeteamid"
|
||||
label={t("timetickets.fields.employee_team")}
|
||||
>
|
||||
<EmployeeTeamSearchSelectComponent />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="hourstype"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="LAB">Body</Radio>
|
||||
<Radio value="LAR">Refinish</Radio>
|
||||
<Radio value="LAM">Mechanical</Radio>
|
||||
<Radio value="LAF">Frame</Radio>
|
||||
<Radio value="LAG">Glass</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="percent"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={1} addonAfter="%" />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<Form.List name={["timetickets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.employeeid")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "employeeid"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<EmployeeSearchSelectComponent
|
||||
options={bodyshop.employees}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.date")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "date"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<FormDatePickerComponent />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.productivehrs")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "productivehrs"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.actualhrs")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "actualhrs"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.rate")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.cost_center")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("timetickets.fields.memo")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "memo"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("employee_teams.actions.newmember")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import React from "react";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
|
||||
import { Modal, Form } from "antd";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
|
||||
import { useLazyQuery, useQuery } from "@apollo/client";
|
||||
import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
|
||||
import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import Dinero from "dinero.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketTasksModal: selectTimeTicketTasks,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TimeTickeTaskModalContainer);
|
||||
|
||||
export function TimeTickeTaskModalContainer({
|
||||
bodyshop,
|
||||
timeTicketTasksModal,
|
||||
toggleModalVisible,
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const { context, visible } = timeTicketTasksModal;
|
||||
const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
|
||||
skip: !visible,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
//Query the Job Information and Prefill the Form.
|
||||
const [queryJobInfo, { loading, data: lineTicketData }] = useLazyQuery(
|
||||
GET_JOB_INFO_DRAW_CALCULATIONS,
|
||||
{
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
}
|
||||
);
|
||||
|
||||
async function handleFinish(values) {}
|
||||
|
||||
const handleFieldsChange = async (changed, allFields) => {
|
||||
const formData = form.getFieldsValue();
|
||||
if (changed[0].name[0] === "jobid") {
|
||||
await queryJobInfo({ variables: { id: changed[0].value } });
|
||||
}
|
||||
|
||||
if (
|
||||
!formData.jobid ||
|
||||
!formData.employeeteamid ||
|
||||
!formData.hourstype ||
|
||||
!formData.percent
|
||||
) {
|
||||
console.log("Not everything populated.");
|
||||
return;
|
||||
}
|
||||
let data = [];
|
||||
let eligibleHours = 0;
|
||||
|
||||
const theTeam = JSON.parse(formData.employeeteamid);
|
||||
|
||||
if (theTeam) {
|
||||
eligibleHours =
|
||||
lineTicketData.joblines.reduce(
|
||||
(acc, val) =>
|
||||
acc + (formData.hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
|
||||
0
|
||||
) * (formData.percent / 100 || 0);
|
||||
|
||||
data = theTeam.employee_team_members.map((e) => {
|
||||
return {
|
||||
employeeid: e.id,
|
||||
date: 0,
|
||||
percentage: e.percentage,
|
||||
rate: e.labor_rates[formData.hourstype],
|
||||
cost_center:
|
||||
bodyshop.md_responsibility_centers.defaults.costs[
|
||||
formData.hourstype
|
||||
],
|
||||
productivehrs:
|
||||
Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100,
|
||||
pay: Dinero({
|
||||
amount: Math.round((e.labor_rates[formData.hourstype] || 0) * 100),
|
||||
})
|
||||
.multiply(
|
||||
Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100
|
||||
)
|
||||
.toFormat("$0.00"),
|
||||
};
|
||||
});
|
||||
form.setFieldsValue({ timetickets: data });
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
open={visible}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
width="80%"
|
||||
>
|
||||
<Form
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onHandleFinish={handleFinish}
|
||||
onFieldsChange={handleFieldsChange}
|
||||
>
|
||||
<TimeTicketTaskModalComponent
|
||||
form={form}
|
||||
employeeAutoCompleteOptions={
|
||||
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
|
||||
}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user