BOD-23 Added schema changes for time tickets + redux config for time ticket modal + scaffolding for time ticket modal.
This commit is contained in:
Patrick Fic
@@ -0,0 +1,54 @@
|
||||
import { Select, Tag } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
const { Option } = Select;
|
||||
//To be used as a form element only.
|
||||
|
||||
const EmployeeSearchSelect = ({ value, onChange, options, onSelect }) => {
|
||||
const [option, setOption] = useState(value);
|
||||
const { t } = useTranslation();
|
||||
useEffect(() => {
|
||||
if (onChange) {
|
||||
onChange(option);
|
||||
}
|
||||
}, [option, onChange]);
|
||||
|
||||
return (
|
||||
<Select
|
||||
showSearch
|
||||
value={option}
|
||||
style={{
|
||||
width: 400,
|
||||
}}
|
||||
onChange={setOption}
|
||||
optionFilterProp="search"
|
||||
onSelect={onSelect}
|
||||
>
|
||||
{options
|
||||
? options.map((o) => (
|
||||
<Option
|
||||
key={o.id}
|
||||
value={o.id}
|
||||
search={`${o.employee_number} ${o.first_name} ${o.last_name}`}
|
||||
discount={o.discount}
|
||||
>
|
||||
<div style={{ display: "flex" }}>
|
||||
{`${o.employee_number} ${o.first_name} ${o.last_name}`}
|
||||
<Tag color="blue">{o.cost_center}</Tag>
|
||||
<Tag color="red">
|
||||
<CurrencyFormatter>{o.base_rate}</CurrencyFormatter>
|
||||
</Tag>
|
||||
<Tag color="red">
|
||||
{o.flat_rate
|
||||
? t("timetickets.labels.flat_rate")
|
||||
: t("timetickets.labels.straight_time")}
|
||||
</Tag>
|
||||
</div>
|
||||
</Option>
|
||||
))
|
||||
: null}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
export default EmployeeSearchSelect;
|
||||
@@ -0,0 +1,45 @@
|
||||
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";
|
||||
|
||||
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 },
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(null, mapDispatchToProps)(JobsDetailLaborContainer);
|
||||
@@ -0,0 +1,109 @@
|
||||
import { DatePicker, Form, Input, Switch } 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";
|
||||
|
||||
export default function TimeTicketModalComponent({
|
||||
form,
|
||||
roAutoCompleteOptions,
|
||||
employeeAutoCompleteOptions,
|
||||
loadJobLines,
|
||||
responsibilityCenters,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("invoices.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<JobSearchSelect
|
||||
options={roAutoCompleteOptions}
|
||||
onBlur={() => {
|
||||
if (form.getFieldValue("jobid") !== null) {
|
||||
loadJobLines({
|
||||
variables: { id: form.getFieldValue("jobid") },
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="employeeid"
|
||||
label={t("timetickets.fields.employee")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<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")}
|
||||
name="date"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<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"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(form.getFieldsValue());
|
||||
}}
|
||||
>
|
||||
Get Them Values
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
|
||||
import { Form, Modal, notification, Button } from "antd";
|
||||
import React, { useState, useEffect } 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 { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.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";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketModal: selectTimeTicket,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
|
||||
});
|
||||
|
||||
function TimeTicketModalContainer({
|
||||
timeTicketModal,
|
||||
toggleModalVisible,
|
||||
bodyshop,
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
const [enterAgain, setEnterAgain] = useState(false);
|
||||
// const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
|
||||
|
||||
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 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),
|
||||
// }),
|
||||
// });
|
||||
// });
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
toggleModalVisible();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (enterAgain) form.submit();
|
||||
}, [enterAgain, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
timeTicketModal.context && timeTicketModal.context.id
|
||||
? t("timetickets.labels.edit")
|
||||
: t("timetickets.labels.new")
|
||||
}
|
||||
width={"90%"}
|
||||
visible={timeTicketModal.visible}
|
||||
okText={t("general.actions.save")}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={handleCancel}
|
||||
afterClose={() => form.resetFields()}
|
||||
footer={
|
||||
<span>
|
||||
<Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
|
||||
<Button onClick={() => form.submit()}>
|
||||
{t("general.actions.save")}
|
||||
</Button>
|
||||
{timeTicketModal.context && timeTicketModal.context.id ? null : (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setEnterAgain(true);
|
||||
}}
|
||||
>
|
||||
{t("general.actions.saveandnew")}
|
||||
</Button>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form
|
||||
onFinish={handleFinish}
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
onFinishFailed={() => {
|
||||
setEnterAgain(false);
|
||||
console.log("Finish failed");
|
||||
}}
|
||||
initialValues={{
|
||||
jobid: timeTicketModal.context.jobId || null,
|
||||
}}
|
||||
>
|
||||
<TimeTicketModalComponent
|
||||
form={form}
|
||||
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
||||
employeeAutoCompleteOptions={
|
||||
EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
|
||||
}
|
||||
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
||||
loadJobLines={loadJobLines}
|
||||
/>
|
||||
</Form>
|
||||
{JSON.stringify(jobLinesData)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TimeTicketModalContainer);
|
||||
Reference in New Issue
Block a user