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

feature/IO-3499-React-19: Ticket Ticket Issues, Employee Select Issues

Browse Source
This commit is contained in:
Dave
2026-01-16 17:13:43 -05:00
parent 5271970ec1
commit ddf4256e58
1 changed files with 143 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { useLazyQuery } from "@apollo/client/react"; import { useLazyQuery } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react"; import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd"; import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
import { useEffect } from "react"; import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -40,6 +40,7 @@ export function TimeTicketModalComponent({
isOpen isOpen
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
treatments: { Enhanced_Payroll } treatments: { Enhanced_Payroll }
} = useTreatmentsWithConfig({ } = useTreatmentsWithConfig({
@@ -48,49 +49,68 @@ export function TimeTicketModalComponent({
splitKey: bodyshop.imexshopid splitKey: bodyshop.imexshopid
}); });
const [loadLineTicketData, { called, loading, data: lineTicketData }] = useLazyQuery(GET_LINE_TICKET_BY_PK, { const [loadLineTicketData, { loading, data: lineTicketData }] = useLazyQuery(GET_LINE_TICKET_BY_PK, {
fetchPolicy: "network-only", fetchPolicy: "network-only",
nextFetchPolicy: "network-only" nextFetchPolicy: "network-only"
}); });
// Watch the jobid field so we can refetch the bottom section without relying on jobid changes
const watchedJobId = Form.useWatch("jobid", form); const watchedJobId = Form.useWatch("jobid", form);
// Local mutable memory: dedupe jobid-driven fetches without re-rendering.
const lastFetchedJobIdRef = useRef(null);
// Reset + fetch when job changes (never during render)
useEffect(() => {
if (!isOpen) {
lastFetchedJobIdRef.current = null;
return;
}
if (!watchedJobId) {
lastFetchedJobIdRef.current = null;
return;
}
if (lastFetchedJobIdRef.current === watchedJobId) return;
lastFetchedJobIdRef.current = watchedJobId;
loadLineTicketData({ variables: { id: watchedJobId } });
}, [isOpen, watchedJobId, loadLineTicketData]);
// Force refresh (e.g., after Save / external refresh bump)
useEffect(() => { useEffect(() => {
if (!isOpen) return; if (!isOpen) return;
if (!watchedJobId) return; if (!watchedJobId) return;
if (!lineTicketRefreshKey) return; if (lineTicketRefreshKey === 0) return;
loadLineTicketData({ id: watchedJobId }); loadLineTicketData({ variables: { id: watchedJobId } });
}, [lineTicketRefreshKey, watchedJobId, isOpen]); }, [lineTicketRefreshKey, isOpen, watchedJobId, loadLineTicketData]);
const CostCenterSelect = ({ emps, value, ...props }) => { const CostCenterSelect = ({ emps, value, ...props }) => (
return ( <Select
<Select value={value === "timetickets.labels.shift" ? t(value) : value}
value={value === "timetickets.labels.shift" ? t(value) : value} {...props}
{...props} disabled={value === "timetickets.labels.shift" || disabled}
disabled={value === "timetickets.labels.shift" || disabled} >
> {emps &&
{emps && emps.rates.map((item) => (
emps.rates.map((item) => ( <Select.Option key={item.cost_center} value={item.cost_center}>
<Select.Option key={item.cost_center} value={item.cost_center}> {item.cost_center === "timetickets.labels.shift"
{item.cost_center === "timetickets.labels.shift" ? t(item.cost_center)
? t(item.cost_center) : bodyshop.cdk_dealerid ||
: bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ||
bodyshop.pbs_serialnumber || bodyshop.rr_dealerid ||
bodyshop.rr_dealerid || Enhanced_Payroll.treatment === "on"
Enhanced_Payroll.treatment === "on" ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`) : item.cost_center}
: item.cost_center} </Select.Option>
</Select.Option> ))}
))} </Select>
</Select> );
);
};
const MemoInput = ({ value, ...props }) => { const MemoInput = ({ value, ...props }) => (
return <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />; <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />
}; );
return ( return (
<div> <div>
@@ -102,8 +122,7 @@ export function TimeTicketModalComponent({
label={t("timetickets.fields.ro_number")} label={t("timetickets.fields.ro_number")}
rules={[ rules={[
{ {
required: !(form.getFieldValue("cost_center") === "timetickets.labels.shift") required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
//message: t("general.validation.required"),
} }
]} ]}
> >
@@ -115,25 +134,25 @@ export function TimeTicketModalComponent({
</Form.Item> </Form.Item>
)} )}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("timetickets.fields.date")} label={t("timetickets.fields.date")}
name="date" name="date"
rules={[ rules={[
{ {
required: true required: true
//message: t("general.validation.required"),
} }
]} ]}
> >
<DateTimePicker isDateOnly /> <DateTimePicker isDateOnly />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="employeeid" name="employeeid"
label={t("timetickets.fields.employee")} label={t("timetickets.fields.employee")}
rules={[ rules={[
{ {
required: true required: true
//message: t("general.validation.required"),
} }
]} ]}
> >
@@ -141,29 +160,23 @@ export function TimeTicketModalComponent({
disabled={employeeSelectDisabled || disabled} disabled={employeeSelectDisabled || disabled}
options={employeeAutoCompleteOptions} options={employeeAutoCompleteOptions}
onSelect={(value) => { onSelect={(value) => {
const emps = employeeAutoCompleteOptions && employeeAutoCompleteOptions.filter((e) => e.id === value)[0]; const emps = employeeAutoCompleteOptions?.find((e) => e.id === value);
form.setFieldsValue({ flat_rate: emps?.flat_rate }); form.setFieldsValue({ flat_rate: emps?.flat_rate });
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}> <Form.Item shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}>
{() => { {() => {
const employeeId = form.getFieldValue("employeeid"); const employeeId = form.getFieldValue("employeeid");
const emps = const emps = employeeAutoCompleteOptions?.find((e) => e.id === employeeId);
employeeAutoCompleteOptions && employeeAutoCompleteOptions.filter((e) => e.id === employeeId)[0];
return ( return (
<Form.Item <Form.Item
name="cost_center" name="cost_center"
label={t("timetickets.fields.cost_center")} label={t("timetickets.fields.cost_center")}
valuePropName="value" valuePropName="value"
rules={[ rules={[{ required: true }]}
{
required: true
//message: t("general.validation.required"),
}
]}
> >
<CostCenterSelect emps={emps} /> <CostCenterSelect emps={emps} />
</Form.Item> </Form.Item>
@@ -185,52 +198,46 @@ export function TimeTicketModalComponent({
<LayoutFormRow> <LayoutFormRow>
<Form.Item shouldUpdate> <Form.Item shouldUpdate>
{() => ( {() => (
<> <Form.Item
<Form.Item label={t("timetickets.fields.productivehrs")}
label={t("timetickets.fields.productivehrs")} name="productivehrs"
name="productivehrs" rules={[
rules={[ ({ getFieldValue }) => ({
({ getFieldValue }) => ({ validator(rule, value) {
validator(rule, value) { if (!bodyshop.tt_enforce_hours_for_tech_console) return Promise.resolve();
if (!bodyshop.tt_enforce_hours_for_tech_console) { if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();
return Promise.resolve();
}
if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();
//Check the cost center, const totals = CalculateAllocationsTotals(
const totals = CalculateAllocationsTotals( bodyshop,
bodyshop, lineTicketData.joblines,
lineTicketData.joblines, lineTicketData.timetickets,
lineTicketData.timetickets, lineTicketData.jobs_by_pk.lbr_adjustments
lineTicketData.jobs_by_pk.lbr_adjustments );
);
const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center"; const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center";
const costCenterDiff = const costCenterDiff =
Math.round( Math.round(
totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference * (totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference ||
10 0) * 10
) / 10; ) / 10;
if (value > costCenterDiff) if (value > costCenterDiff) {
return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable")); return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
else {
return Promise.resolve();
}
} }
}), return Promise.resolve();
{
required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
//message: t("general.validation.required"),
} }
]} }),
> {
<InputNumber precision={1} /> required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
</Form.Item> }
</> ]}
>
<InputNumber precision={1} />
</Form.Item>
)} )}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
dependencies={["productivehrs"]} dependencies={["productivehrs"]}
label={t("timetickets.fields.actualhrs")} label={t("timetickets.fields.actualhrs")}
@@ -240,71 +247,68 @@ export function TimeTicketModalComponent({
async validator(rule, value) { async validator(rule, value) {
if (value) { if (value) {
const prodHrs = getFieldValue("productivehrs"); const prodHrs = getFieldValue("productivehrs");
if (prodHrs < 0 && value !== 0) return Promise.reject(t("timetickets.labels.zeroactualnegativeprod")); if (prodHrs < 0 && value !== 0) {
else { return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
return Promise.resolve();
} }
} else {
return Promise.resolve();
} }
return Promise.resolve();
} }
}) })
]} ]}
> >
<InputNumber min={0} precision={1} /> <InputNumber min={0} precision={1} />
</Form.Item> </Form.Item>
{
<>
<Form.Item label={t("timetickets.fields.clockon")} name="clockon">
<FormDateTimePicker
minuteStep={5}
disabled={
disabled ||
!HasRbacAccess({
bodyshop,
authLevel,
action: "timetickets:shiftedit"
})
}
/>
</Form.Item>
<Form.Item
label={t("timetickets.fields.clockoff")}
name="clockoff"
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
const clockon = getFieldValue("clockon");
if (!value) return Promise.resolve(); <>
if (!clockon && value) return Promise.reject(t("timetickets.validation.clockoffwithoutclockon")); <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
// TODO - Verify this exists <FormDateTimePicker
if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) minuteStep={5}
return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon")); disabled={
disabled ||
return Promise.resolve(); !HasRbacAccess({
} bodyshop,
authLevel,
action: "timetickets:shiftedit"
}) })
]} }
> />
<FormDateTimePicker </Form.Item>
minuteStep={5}
disabled={ <Form.Item
disabled || label={t("timetickets.fields.clockoff")}
!HasRbacAccess({ name="clockoff"
bodyshop, rules={[
authLevel, ({ getFieldValue }) => ({
action: "timetickets:shiftedit" validator(rule, value) {
}) const clockon = getFieldValue("clockon");
if (!value) return Promise.resolve();
if (!clockon && value) return Promise.reject(t("timetickets.validation.clockoffwithoutclockon"));
if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) {
return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
}
return Promise.resolve();
} }
/> })
</Form.Item> ]}
</> >
} <FormDateTimePicker
minuteStep={5}
disabled={
disabled ||
!HasRbacAccess({
bodyshop,
authLevel,
action: "timetickets:shiftedit"
})
}
/>
</Form.Item>
</>
<Form.Item label={t("timetickets.fields.memo")} name="memo"> <Form.Item label={t("timetickets.fields.memo")} name="memo">
<MemoInput /> <MemoInput />
</Form.Item> </Form.Item>
<Form.Item shouldUpdate> <Form.Item shouldUpdate>
{() => ( {() => (
<Form.Item <Form.Item
@@ -312,8 +316,7 @@ export function TimeTicketModalComponent({
label={t("timetickets.fields.ciecacode")} label={t("timetickets.fields.ciecacode")}
rules={[ rules={[
{ {
required: !form.getFieldValue("cost_center") === "timetickets.labels.shift" required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
//message: t("general.validation.required"),
} }
]} ]}
> >
@@ -323,15 +326,7 @@ export function TimeTicketModalComponent({
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Form.Item dependencies={["jobid"]}> <LaborAllocationContainer jobid={watchedJobId || null} loading={loading} lineTicketData={lineTicketData} />
{() => {
const jobid = form.getFieldValue("jobid");
if ((!called && jobid) || (jobid && lineTicketData?.jobs_by_pk?.id !== jobid && !loading)) {
loadLineTicketData({ id: jobid });
}
return <LaborAllocationContainer jobid={jobid || null} loading={loading} lineTicketData={lineTicketData} />;
}}
</Form.Item>
</div> </div>
); );
} }
@@ -341,17 +336,20 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
if (loading) return <LoadingSkeleton />; if (loading) return <LoadingSkeleton />;
if (!lineTicketData) return null; if (!lineTicketData) return null;
if (!jobid) return null; if (!jobid) return null;
return ( return (
<Space orientation="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}> <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
<JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} /> <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
</Card> </Card>
<LaborAllocationsTable <LaborAllocationsTable
jobId={jobid} jobId={jobid}
joblines={lineTicketData.joblines} joblines={lineTicketData.joblines}
timetickets={lineTicketData.timetickets} timetickets={lineTicketData.timetickets}
adjustments={lineTicketData.jobs_by_pk.lbr_adjustments} adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
/> />
{!hideTimeTickets && ( {!hideTimeTickets && (
<TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole /> <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
)} )}