BOD-23 Added labor pages tab + finalized time ticket tab + created allocation calculations
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<babeledit_project version="1.2" be_version="2.6.1">
|
||||
<babeledit_project be_version="2.6.1" version="1.2">
|
||||
<!--
|
||||
|
||||
BabelEdit project file
|
||||
@@ -8567,6 +8567,48 @@
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>hrs_claimed</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>hrs_total</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>job</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
@@ -8588,6 +8630,27 @@
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>laborallocations</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>lines</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
@@ -10866,9 +10929,119 @@
|
||||
<folder_node>
|
||||
<name>timetickets</name>
|
||||
<children>
|
||||
<folder_node>
|
||||
<name>actions</name>
|
||||
<children>
|
||||
<concept_node>
|
||||
<name>enter</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
</children>
|
||||
</folder_node>
|
||||
<folder_node>
|
||||
<name>fields</name>
|
||||
<children>
|
||||
<concept_node>
|
||||
<name>actualhrs</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>ciecacode</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>cost_center</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>date</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>employee</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
@@ -10890,6 +11063,48 @@
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>productivehrs</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>ro_number</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
</children>
|
||||
</folder_node>
|
||||
<folder_node>
|
||||
|
||||
@@ -5,7 +5,13 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
const { Option } = Select;
|
||||
//To be used as a form element only.
|
||||
|
||||
const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
|
||||
const EmployeeSearchSelect = ({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
onSelect,
|
||||
onBlur,
|
||||
}) => {
|
||||
const [option, setOption] = useState(value);
|
||||
const { t } = useTranslation();
|
||||
useEffect(() => {
|
||||
@@ -24,6 +30,7 @@ const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
|
||||
onChange={setOption}
|
||||
optionFilterProp="search"
|
||||
onSelect={onSelect}
|
||||
onBlur={onBlur}
|
||||
>
|
||||
{options
|
||||
? options.map((o) => (
|
||||
@@ -39,7 +46,7 @@ const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
|
||||
<Tag color="red">
|
||||
<CurrencyFormatter>{o.base_rate}</CurrencyFormatter>
|
||||
</Tag>
|
||||
<Tag color="red">
|
||||
<Tag color="green">
|
||||
{o.flat_rate
|
||||
? t("timetickets.labels.flat_rate")
|
||||
: t("timetickets.labels.straight_time")}
|
||||
|
||||
@@ -78,7 +78,7 @@ export function JobDetailCards({
|
||||
? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
|
||||
: `${t("jobs.fields.est_number")} ${
|
||||
data.jobs_by_pk.est_number
|
||||
}`}{" "}
|
||||
}`}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,9 +13,9 @@ export default function JobDetailCardsVehicleComponent({ loading, data }) {
|
||||
>
|
||||
{data ? (
|
||||
<span>
|
||||
{data.vehicle?.v_model_yr || t("general.labels.na")}{" "}
|
||||
{data.vehicle?.v_make_desc || t("general.labels.na")}{" "}
|
||||
{data.vehicle?.v_model_desc || t("general.labels.na")}
|
||||
{` ${data.vehicle?.v_model_yr || t("general.labels.na")} ${
|
||||
data.vehicle?.v_make_desc || t("general.labels.na")
|
||||
} ${data.vehicle?.v_model_desc || t("general.labels.na")}`}
|
||||
</span>
|
||||
) : null}
|
||||
</CardTemplate>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
|
||||
import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
|
||||
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
|
||||
import { useTranslation } from "react-i18next";
|
||||
export default function JobsDetailLaborContainer({
|
||||
jobId,
|
||||
joblines,
|
||||
timetickets,
|
||||
refetch,
|
||||
loading,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<TimeTicketEnterButton actions={{ refetch }} context={{ jobid: jobId }}>
|
||||
{t("timetickets.actions.enter")}
|
||||
</TimeTicketEnterButton>
|
||||
<LaborAllocationsTableComponent
|
||||
joblines={joblines}
|
||||
timetickets={timetickets}
|
||||
/>
|
||||
<TimeTicketList
|
||||
loading={loading}
|
||||
timetickets={timetickets}
|
||||
refetch={refetch}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +1,24 @@
|
||||
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";
|
||||
import React from "react";
|
||||
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import JobsDetailLaborComponent from "./jobs-detail-labor.component";
|
||||
|
||||
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 },
|
||||
export default function JobsDetailLaborContainer({ jobId }) {
|
||||
const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
|
||||
variables: { id: 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>
|
||||
<JobsDetailLaborComponent
|
||||
loading={loading}
|
||||
jobId={jobId}
|
||||
timetickets={data ? data.timetickets : []}
|
||||
joblines={data ? data.joblines : []}
|
||||
refetch={refetch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(null, mapDispatchToProps)(JobsDetailLaborContainer);
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Typography, Row, Col } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [totals, setTotals] = useState([]);
|
||||
useEffect(() => {
|
||||
if (!!joblines && !!timetickets && !!bodyshop);
|
||||
setTotals(
|
||||
CalculateAllocationsTotals(
|
||||
bodyshop.md_responsibility_centers,
|
||||
joblines,
|
||||
timetickets
|
||||
)
|
||||
);
|
||||
}, [joblines, timetickets, bodyshop]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={3}>
|
||||
{t("jobs.labels.laborallocations")}
|
||||
</Typography.Title>
|
||||
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<strong>{t("timetickets.fields.cost_center")}</strong>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<strong>{t("jobs.labels.hrs_total")}</strong>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<strong>{t("jobs.labels.hrs_claimed")}</strong>
|
||||
</Col>
|
||||
</Row>
|
||||
{totals.map((t, idx) => (
|
||||
<Row key={idx}>
|
||||
<Col span={12}>{t.cost_center}</Col>
|
||||
<Col span={6}>{t.total}</Col>
|
||||
<Col span={6}>{t.claimed}</Col>
|
||||
</Row>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(LaborAllocationsTable);
|
||||
@@ -0,0 +1,29 @@
|
||||
export const CalculateAllocationsTotals = (
|
||||
responsibilitycenters,
|
||||
joblines,
|
||||
timetickets
|
||||
) => {
|
||||
const jobCodes = joblines
|
||||
.map((item) => item.mod_lbr_ty)
|
||||
.filter((value, index, self) => self.indexOf(value) === index && !!value);
|
||||
const ticketCodes = timetickets
|
||||
.map((item) => item.cieca_code)
|
||||
.filter((value, index, self) => self.indexOf(value) === index && !!value);
|
||||
const allCodes = [...jobCodes, ...ticketCodes];
|
||||
|
||||
const r = allCodes.reduce((acc, value) => {
|
||||
acc.push({
|
||||
opcode: value,
|
||||
cost_center: responsibilitycenters.defaults[value],
|
||||
total: joblines.reduce((acc2, val2) => {
|
||||
return val2.mod_lbr_ty === value ? acc2 + val2.mod_lb_hrs : acc2;
|
||||
}, 0),
|
||||
claimed: timetickets.reduce((acc3, val3) => {
|
||||
return val3.ciecacode === value ? acc3 + val3.productivehrs : acc3;
|
||||
}, 0),
|
||||
});
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return r;
|
||||
};
|
||||
@@ -262,7 +262,7 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
|
||||
<Select.Option key={idx}>{item}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>{" "}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenters.las")}
|
||||
rules={[
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Button } from "antd";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setTimeTicketContext: (context) =>
|
||||
dispatch(setModalContext({ context: context, modal: "timeTicket" })),
|
||||
});
|
||||
|
||||
export function TimeTicketEnterButton({
|
||||
actions,
|
||||
context,
|
||||
setTimeTicketContext,
|
||||
children,
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTimeTicketContext({
|
||||
actions,
|
||||
context,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
export default connect(null, mapDispatchToProps)(TimeTicketEnterButton);
|
||||
@@ -0,0 +1,94 @@
|
||||
import { Table } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import { DateFormatter } from "../../utils/DateFormatter";
|
||||
import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
|
||||
|
||||
export default function TimeTicketList({ loading, timetickets, refetch }) {
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" },
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("timetickets.fields.date"),
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
sorter: (a, b) => (a.date = b.date),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
|
||||
render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.employee"),
|
||||
dataIndex: "employee",
|
||||
key: "employee",
|
||||
sorter: (a, b) => alphaSort(a.employee.last_name, b.employee.last_name),
|
||||
sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<Link
|
||||
to={`/manage/employees/${record.employee.id}`}
|
||||
>{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.cost_center"),
|
||||
dataIndex: "cost_center",
|
||||
key: "cost_center",
|
||||
sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.productivehrs"),
|
||||
dataIndex: "productivehrs",
|
||||
key: "productivehrs",
|
||||
sorter: (a, b) => a.productivehrs - b.productivehrs,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "productivehrs" &&
|
||||
state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.actualhrs"),
|
||||
dataIndex: "actualhrs",
|
||||
key: "actualhrs",
|
||||
sorter: (a, b) => a.actualhrs - b.actualhrs,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "actualhrs" && state.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("general.labels.actions"),
|
||||
dataIndex: "actions",
|
||||
key: "actions",
|
||||
render: (text, record) => (
|
||||
<TimeTicketEnterButton
|
||||
actions={{ refetch }}
|
||||
context={{ id: record.id, timeticket: record }}
|
||||
>
|
||||
{t("general.actions.edit")}
|
||||
</TimeTicketEnterButton>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
loading={loading}
|
||||
size="small"
|
||||
pagination={{ position: "top" }}
|
||||
columns={columns.map((item) => ({ ...item }))}
|
||||
rowKey="id"
|
||||
dataSource={timetickets}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function Header({ bodyshop }) {
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img alt='' src={bodyshop.logo_img_path} />
|
||||
<img alt="" src={bodyshop.logo_img_path} />
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
@@ -13,7 +13,7 @@ export default function Header({ bodyshop }) {
|
||||
</div>
|
||||
<div>{`${bodyshop.address1} ${bodyshop.address2} ${bodyshop.city} ${bodyshop.state} ${bodyshop.zip_post}`}</div>
|
||||
<div>
|
||||
<a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>{" "}
|
||||
<a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>
|
||||
{` | ${bodyshop.ph1}`}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function AppointmentConfirmationEmail({ data }) {
|
||||
<strong>Appointment Reminder</strong>
|
||||
<p> Dear {`${appointment.job.ownr_fn} ${appointment.job.ownr_ln}`},</p>
|
||||
<p>
|
||||
You have an appointment at {data.bodyshops[0].shopname} on{" "}
|
||||
You have an appointment at {data.bodyshops[0].shopname} on
|
||||
<DateTimeFormatter>{appointment.start}</DateTimeFormatter>.
|
||||
</p>
|
||||
<p>Thank you from the team at {data.bodyshops[0].shopname}</p>
|
||||
|
||||
@@ -45,9 +45,9 @@ 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 }) {
|
||||
export const GET_LINE_TICKET_BY_PK = gql`
|
||||
query GET_LINE_TICKET_BY_PK($id: uuid!) {
|
||||
joblines(where: { jobid: { _eq: $id } }) {
|
||||
id
|
||||
line_desc
|
||||
part_type
|
||||
@@ -62,6 +62,22 @@ export const GET_JOB_LINES_BY_PK_MINIMAL = gql`
|
||||
lbr_amt
|
||||
op_code_desc
|
||||
}
|
||||
timetickets(where: { jobid: { _eq: $id } }) {
|
||||
actualhrs
|
||||
ciecacode
|
||||
cost_center
|
||||
date
|
||||
id
|
||||
jobid
|
||||
employeeid
|
||||
employee {
|
||||
id
|
||||
first_name
|
||||
last_name
|
||||
employee_number
|
||||
}
|
||||
productivehrs
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -30,3 +30,19 @@ export const INSERT_NEW_TIME_TICKET = gql`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const UPDATE_TIME_TICKET = gql`
|
||||
mutation UPDATE_TIME_TICKET(
|
||||
$timeticketId: uuid!
|
||||
$timeticket: timetickets_set_input!
|
||||
) {
|
||||
update_timetickets(
|
||||
where: { id: { _eq: $timeticketId } }
|
||||
_set: $timeticket
|
||||
) {
|
||||
returning {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -548,7 +548,10 @@
|
||||
"creating_new_job": "Creating new job...",
|
||||
"documents": "Documents",
|
||||
"existing_jobs": "Existing Jobs",
|
||||
"hrs_claimed": "Hours Claimed",
|
||||
"hrs_total": "Hours Total",
|
||||
"job": "Job Details",
|
||||
"laborallocations": "Labor Allocations",
|
||||
"lines": "Estimate Lines",
|
||||
"notes": "Notes",
|
||||
"override_header": "Override estimate header on import?",
|
||||
@@ -713,8 +716,17 @@
|
||||
}
|
||||
},
|
||||
"timetickets": {
|
||||
"actions": {
|
||||
"enter": "Enter New Time Ticket"
|
||||
},
|
||||
"fields": {
|
||||
"employee": "Employee"
|
||||
"actualhrs": "Actual Hours",
|
||||
"ciecacode": "CIECA Code",
|
||||
"cost_center": "Cost Center",
|
||||
"date": "Ticket Date",
|
||||
"employee": "Employee",
|
||||
"productivehrs": "Productive Hours",
|
||||
"ro_number": "Job to Post Against"
|
||||
},
|
||||
"labels": {
|
||||
"edit": "Edit Time Ticket",
|
||||
|
||||
@@ -548,7 +548,10 @@
|
||||
"creating_new_job": "Creando nuevo trabajo ...",
|
||||
"documents": "documentos",
|
||||
"existing_jobs": "Empleos existentes",
|
||||
"hrs_claimed": "",
|
||||
"hrs_total": "",
|
||||
"job": "",
|
||||
"laborallocations": "",
|
||||
"lines": "Líneas estimadas",
|
||||
"notes": "Notas",
|
||||
"override_header": "¿Anular encabezado estimado al importar?",
|
||||
@@ -713,8 +716,17 @@
|
||||
}
|
||||
},
|
||||
"timetickets": {
|
||||
"actions": {
|
||||
"enter": ""
|
||||
},
|
||||
"fields": {
|
||||
"employee": ""
|
||||
"actualhrs": "",
|
||||
"ciecacode": "",
|
||||
"cost_center": "",
|
||||
"date": "",
|
||||
"employee": "",
|
||||
"productivehrs": "",
|
||||
"ro_number": ""
|
||||
},
|
||||
"labels": {
|
||||
"edit": "",
|
||||
|
||||
@@ -548,7 +548,10 @@
|
||||
"creating_new_job": "Création d'un nouvel emploi ...",
|
||||
"documents": "Les documents",
|
||||
"existing_jobs": "Emplois existants",
|
||||
"hrs_claimed": "",
|
||||
"hrs_total": "",
|
||||
"job": "",
|
||||
"laborallocations": "",
|
||||
"lines": "Estimer les lignes",
|
||||
"notes": "Remarques",
|
||||
"override_header": "Remplacer l'en-tête d'estimation à l'importation?",
|
||||
@@ -713,8 +716,17 @@
|
||||
}
|
||||
},
|
||||
"timetickets": {
|
||||
"actions": {
|
||||
"enter": ""
|
||||
},
|
||||
"fields": {
|
||||
"employee": ""
|
||||
"actualhrs": "",
|
||||
"ciecacode": "",
|
||||
"cost_center": "",
|
||||
"date": "",
|
||||
"employee": "",
|
||||
"productivehrs": "",
|
||||
"ro_number": ""
|
||||
},
|
||||
"labels": {
|
||||
"edit": "",
|
||||
|
||||
Reference in New Issue
Block a user