- Merge client update into test-beta
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -1,197 +1,187 @@
|
||||
import {
|
||||
Alert,
|
||||
Col,
|
||||
Form,
|
||||
Radio,
|
||||
Row,
|
||||
Skeleton,
|
||||
Space,
|
||||
Spin,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import {Alert, Col, Form, Radio, Row, Skeleton, Space, Spin, Typography,} 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 {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
|
||||
import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
bodyshop: selectBodyshop,
|
||||
//currentUser: selectCurrentUser
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TimeTicketTaskModalComponent);
|
||||
|
||||
export function TimeTicketTaskModalComponent({
|
||||
bodyshop,
|
||||
form,
|
||||
loading,
|
||||
completedTasks,
|
||||
unassignedHours,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
bodyshop,
|
||||
form,
|
||||
loading,
|
||||
completedTasks,
|
||||
unassignedHours,
|
||||
}) {
|
||||
const {t} = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xl={12} lg={24}>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("timetickets.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<JobSearchSelectComponent convertedOnly={true} notExported={true} />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<Form.Item name="task" label={t("timetickets.labels.task")}>
|
||||
{loading ? (
|
||||
<Spin />
|
||||
) : (
|
||||
<Radio.Group
|
||||
optionType="button"
|
||||
options={bodyshop.md_tasks_presets.presets.map((preset) => ({
|
||||
value: preset.name,
|
||||
label: preset.name,
|
||||
disabled: completedTasks
|
||||
.map((task) => task.name)
|
||||
.includes(preset.name),
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item dependencies={["task"]}>
|
||||
{() => {
|
||||
const { task } = form.getFieldsValue();
|
||||
const theTaskPreset = bodyshop.md_tasks_presets?.presets?.find(
|
||||
(tp) => tp.name === task
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xl={12} lg={24}>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("timetickets.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<JobSearchSelectComponent convertedOnly={true} notExported={true}/>
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<Form.Item name="task" label={t("timetickets.labels.task")}>
|
||||
{loading ? (
|
||||
<Spin/>
|
||||
) : (
|
||||
<Radio.Group
|
||||
optionType="button"
|
||||
options={bodyshop.md_tasks_presets.presets.map((preset) => ({
|
||||
value: preset.name,
|
||||
label: preset.name,
|
||||
disabled: completedTasks
|
||||
.map((task) => task.name)
|
||||
.includes(preset.name),
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item dependencies={["task"]}>
|
||||
{() => {
|
||||
const {task} = form.getFieldsValue();
|
||||
const theTaskPreset = bodyshop.md_tasks_presets?.presets?.find(
|
||||
(tp) => tp.name === task
|
||||
);
|
||||
|
||||
if (!task) return null;
|
||||
return (
|
||||
<table className="task-tickets-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("bodyshop.fields.md_tasks_presets.percent")}</td>
|
||||
<td>{`${theTaskPreset.percent || 0}%`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{t("bodyshop.fields.md_tasks_presets.hourstype")}
|
||||
</td>
|
||||
<td>{theTaskPreset.hourstype.join(", ")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{t("bodyshop.fields.md_tasks_presets.nextstatus")}
|
||||
</td>
|
||||
<td>{theTaskPreset.nextstatus}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xl={12} lg={24}>
|
||||
{loading ? (
|
||||
<Skeleton />
|
||||
) : (
|
||||
<Form.List name="timetickets">
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<>
|
||||
<Typography.Title level={4}>
|
||||
{t("timetickets.labels.claimtaskpreview")}
|
||||
</Typography.Title>
|
||||
<table className="task-tickets-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("timetickets.fields.employee")}</th>
|
||||
<th>{t("timetickets.fields.cost_center")}</th>
|
||||
<th>{t("timetickets.fields.ciecacode")}</th>
|
||||
<th>{t("timetickets.fields.productivehrs")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{fields.map((field, index) => (
|
||||
<tr key={field.key}>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}employeeid`}
|
||||
name={[field.name, "employeeid"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent type="employee" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}cost_center`}
|
||||
name={[field.name, "cost_center"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}ciecacode`}
|
||||
name={[field.name, "ciecacode"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}productivehrs`}
|
||||
name={[field.name, "productivehrs"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
if (!task) return null;
|
||||
return (
|
||||
<table className="task-tickets-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("bodyshop.fields.md_tasks_presets.percent")}</td>
|
||||
<td>{`${theTaskPreset.percent || 0}%`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{t("bodyshop.fields.md_tasks_presets.hourstype")}
|
||||
</td>
|
||||
<td>{theTaskPreset.hourstype.join(", ")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{t("bodyshop.fields.md_tasks_presets.nextstatus")}
|
||||
</td>
|
||||
<td>{theTaskPreset.nextstatus}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xl={12} lg={24}>
|
||||
{loading ? (
|
||||
<Skeleton/>
|
||||
) : (
|
||||
<Form.List name="timetickets">
|
||||
{(fields, {add, remove, move}) => {
|
||||
return (
|
||||
<>
|
||||
<Typography.Title level={4}>
|
||||
{t("timetickets.labels.claimtaskpreview")}
|
||||
</Typography.Title>
|
||||
<table className="task-tickets-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("timetickets.fields.employee")}</th>
|
||||
<th>{t("timetickets.fields.cost_center")}</th>
|
||||
<th>{t("timetickets.fields.ciecacode")}</th>
|
||||
<th>{t("timetickets.fields.productivehrs")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{fields.map((field, index) => (
|
||||
<tr key={field.key}>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}employeeid`}
|
||||
name={[field.name, "employeeid"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent type="employee"/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}cost_center`}
|
||||
name={[field.name, "cost_center"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}ciecacode`}
|
||||
name={[field.name, "ciecacode"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
key={`${index}productivehrs`}
|
||||
name={[field.name, "productivehrs"]}
|
||||
>
|
||||
<ReadOnlyFormItemComponent/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Alert
|
||||
type="success"
|
||||
message={t("timetickets.labels.payrollclaimedtasks")}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
)}
|
||||
{unassignedHours > 0 && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={t("timetickets.validation.unassignedlines", {
|
||||
unassignedHours: unassignedHours,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{bodyshop?.md_tasks_presets?.use_approvals && (
|
||||
<Col xl={12} lg={24}>
|
||||
<Alert
|
||||
type="success"
|
||||
message={t("timetickets.labels.payrollclaimedtasks")}
|
||||
message={t("tt_approvals.labels.approval_queue_in_use")}
|
||||
type="warning"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
)}
|
||||
{unassignedHours > 0 && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={t("timetickets.validation.unassignedlines", {
|
||||
unassignedHours: unassignedHours,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{bodyshop?.md_tasks_presets?.use_approvals && (
|
||||
<Col xl={12} lg={24}>
|
||||
<Alert
|
||||
message={t("tt_approvals.labels.approval_queue_in_use")}
|
||||
type="warning"
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</Col>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,151 +1,149 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, {useCallback, useEffect, useState} from "react";
|
||||
|
||||
import { Form, Modal, notification } from "antd";
|
||||
import {Form, Modal, notification} from "antd";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
|
||||
import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {toggleModalVisible} from "../../redux/modals/modals.actions";
|
||||
import {selectTimeTicketTasks} from "../../redux/modals/modals.selectors";
|
||||
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||
import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
|
||||
import { useApolloClient } from "@apollo/client";
|
||||
import { QUERY_COMPLETED_TASKS } from "../../graphql/jobs.queries";
|
||||
import {useApolloClient} from "@apollo/client";
|
||||
import {QUERY_COMPLETED_TASKS} from "../../graphql/jobs.queries";
|
||||
import "./time-ticket-task-modal.styles.scss";
|
||||
import { selectTechnician } from "../../redux/tech/tech.selectors";
|
||||
import {selectTechnician} from "../../redux/tech/tech.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketTasksModal: selectTimeTicketTasks,
|
||||
bodyshop: selectBodyshop,
|
||||
currentUser: selectCurrentUser,
|
||||
technician: selectTechnician,
|
||||
timeTicketTasksModal: selectTimeTicketTasks,
|
||||
bodyshop: selectBodyshop,
|
||||
currentUser: selectCurrentUser,
|
||||
technician: selectTechnician,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TimeTickeTaskModalContainer);
|
||||
|
||||
export function TimeTickeTaskModalContainer({
|
||||
bodyshop,
|
||||
currentUser,
|
||||
technician,
|
||||
timeTicketTasksModal,
|
||||
toggleModalVisible,
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const { context, visible, actions } = timeTicketTasksModal;
|
||||
const [completedTasks, setCompletedTasks] = useState([]);
|
||||
const [unassignedHours, setUnassignedHours] = useState(0);
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const client = useApolloClient();
|
||||
bodyshop,
|
||||
currentUser,
|
||||
technician,
|
||||
timeTicketTasksModal,
|
||||
toggleModalVisible,
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const {context, visible, actions} = timeTicketTasksModal;
|
||||
const [completedTasks, setCompletedTasks] = useState([]);
|
||||
const [unassignedHours, setUnassignedHours] = useState(0);
|
||||
const {t} = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const client = useApolloClient();
|
||||
|
||||
async function handleFinish(values) {
|
||||
calculateTickets({ values, handleFinish: true });
|
||||
}
|
||||
const getCompletedTasks = useCallback(
|
||||
async (jobid) => {
|
||||
setLoading(true);
|
||||
|
||||
const { data } = await client.query({
|
||||
query: QUERY_COMPLETED_TASKS,
|
||||
variables: { jobid },
|
||||
});
|
||||
|
||||
setCompletedTasks(data.jobs_by_pk.completed_tasks || []);
|
||||
setLoading(false);
|
||||
},
|
||||
[client]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
form.setFieldsValue({ ...context, task: null, timetickets: null });
|
||||
if (context.jobid) {
|
||||
getCompletedTasks(context.jobid);
|
||||
}
|
||||
async function handleFinish(values) {
|
||||
calculateTickets({values, handleFinish: true});
|
||||
}
|
||||
}, [context.jobid, visible, getCompletedTasks, form, context]);
|
||||
|
||||
async function handleValueChange(changedValues, allValues) {
|
||||
if (changedValues.jobid) {
|
||||
getCompletedTasks(changedValues.jobid);
|
||||
}
|
||||
if (allValues.jobid && allValues.task) {
|
||||
calculateTickets({ values: allValues, handleFinish: false });
|
||||
}
|
||||
}
|
||||
const getCompletedTasks = useCallback(
|
||||
async (jobid) => {
|
||||
setLoading(true);
|
||||
|
||||
const calculateTickets = async ({ values, handleFinish }) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data, ...response } = await axios.post("/payroll/claimtask", {
|
||||
jobid: values.jobid,
|
||||
task: values.task,
|
||||
calculateOnly: !handleFinish,
|
||||
employee: technician
|
||||
? {
|
||||
name: `${technician.first_name} ${technician.last_name}`.trim(),
|
||||
employeeid: technician.id,
|
||||
const {data} = await client.query({
|
||||
query: QUERY_COMPLETED_TASKS,
|
||||
variables: {jobid},
|
||||
});
|
||||
|
||||
setCompletedTasks(data.jobs_by_pk.completed_tasks || []);
|
||||
setLoading(false);
|
||||
},
|
||||
[client]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
form.setFieldsValue({...context, task: null, timetickets: null});
|
||||
if (context.jobid) {
|
||||
getCompletedTasks(context.jobid);
|
||||
}
|
||||
: { name: currentUser.displayName, email: currentUser.email },
|
||||
});
|
||||
if (response.status === 200 && handleFinish) {
|
||||
//Close the modal
|
||||
if (actions?.refetch) actions.refetch();
|
||||
toggleModalVisible();
|
||||
} else if (handleFinish === false) {
|
||||
form.setFieldsValue({ timetickets: data.ticketsToInsert });
|
||||
setUnassignedHours(data.unassignedHours);
|
||||
} else {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(data),
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", { message: error.message }),
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [context.jobid, visible, getCompletedTasks, form, context]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
open={visible}
|
||||
onCancel={() => {
|
||||
toggleModalVisible();
|
||||
form.resetFields();
|
||||
}}
|
||||
width="80%"
|
||||
onOk={() => form.submit()}
|
||||
>
|
||||
<Form
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
initialValues={context}
|
||||
onValuesChange={handleValueChange}
|
||||
>
|
||||
<TimeTicketTaskModalComponent
|
||||
form={form}
|
||||
loading={loading}
|
||||
completedTasks={completedTasks}
|
||||
unassignedHours={unassignedHours}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
async function handleValueChange(changedValues, allValues) {
|
||||
if (changedValues.jobid) {
|
||||
getCompletedTasks(changedValues.jobid);
|
||||
}
|
||||
if (allValues.jobid && allValues.task) {
|
||||
calculateTickets({values: allValues, handleFinish: false});
|
||||
}
|
||||
}
|
||||
|
||||
const calculateTickets = async ({values, handleFinish}) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const {data, ...response} = await axios.post("/payroll/claimtask", {
|
||||
jobid: values.jobid,
|
||||
task: values.task,
|
||||
calculateOnly: !handleFinish,
|
||||
employee: technician
|
||||
? {
|
||||
name: `${technician.first_name} ${technician.last_name}`.trim(),
|
||||
employeeid: technician.id,
|
||||
}
|
||||
: {name: currentUser.displayName, email: currentUser.email},
|
||||
});
|
||||
if (response.status === 200 && handleFinish) {
|
||||
//Close the modal
|
||||
if (actions?.refetch) actions.refetch();
|
||||
toggleModalVisible();
|
||||
} else if (handleFinish === false) {
|
||||
form.setFieldsValue({timetickets: data.ticketsToInsert});
|
||||
setUnassignedHours(data.unassignedHours);
|
||||
} else {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {
|
||||
message: JSON.stringify(data),
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("timetickets.errors.creating", {message: error.message}),
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
open={visible}
|
||||
onCancel={() => {
|
||||
toggleModalVisible();
|
||||
form.resetFields();
|
||||
}}
|
||||
width="80%"
|
||||
onOk={() => form.submit()}
|
||||
>
|
||||
<Form
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
initialValues={context}
|
||||
onValuesChange={handleValueChange}
|
||||
>
|
||||
<TimeTicketTaskModalComponent
|
||||
form={form}
|
||||
loading={loading}
|
||||
completedTasks={completedTasks}
|
||||
unassignedHours={unassignedHours}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user