Added enter again on invoice modal.

This commit is contained in:
Patrick Fic
2020-04-14 16:17:13 -07:00
parent ad87cb31ef
commit 91af10eef2
9 changed files with 127 additions and 46 deletions

View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2"> <babeledit_project version="1.2" be_version="2.6.1">
<!-- <!--
BabelEdit project file BabelEdit project file
@@ -4085,6 +4085,27 @@
<folder_node> <folder_node>
<name>actions</name> <name>actions</name>
<children> <children>
<concept_node>
<name>cancel</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> <concept_node>
<name>create</name> <name>create</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -4190,6 +4211,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>saveandnew</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> </children>
</folder_node> </folder_node>
<folder_node> <folder_node>

View File

@@ -1,6 +1,6 @@
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks"; import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification } from "antd"; import { Form, Modal, notification, Button } from "antd";
import React from "react"; import React, { useState, useEffect } 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";
@@ -12,6 +12,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors"; import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import InvoiceEnterModalComponent from "./invoice-enter-modal.component"; import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
invoiceEnterModal: selectInvoiceEnterModal, invoiceEnterModal: selectInvoiceEnterModal,
@@ -19,16 +20,19 @@ const mapStateToProps = createStructuredSelector({
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")), toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
}); });
function InvoiceEnterModalContainer({ function InvoiceEnterModalContainer({
invoiceEnterModal, invoiceEnterModal,
toggleModalVisible, toggleModalVisible,
bodyshop, bodyshop,
setInvoiceEnterContext,
}) { }) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const [enterAgain, setEnterAgain] = useState(false);
const [insertInvoice] = useMutation(INSERT_NEW_INVOICE); const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, { const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
@@ -69,9 +73,15 @@ function InvoiceEnterModalContainer({
if (invoiceEnterModal.actions.refetch) if (invoiceEnterModal.actions.refetch)
invoiceEnterModal.actions.refetch(); invoiceEnterModal.actions.refetch();
toggleModalVisible(); if (enterAgain) {
form.resetFields();
} else {
toggleModalVisible();
}
setEnterAgain(false);
}) })
.catch((error) => { .catch((error) => {
setEnterAgain(false);
notification["error"]({ notification["error"]({
message: t("invoices.errors.creating", { message: t("invoices.errors.creating", {
message: JSON.stringify(error), message: JSON.stringify(error),
@@ -84,6 +94,10 @@ function InvoiceEnterModalContainer({
toggleModalVisible(); toggleModalVisible();
}; };
useEffect(() => {
if (enterAgain) form.submit();
}, [enterAgain, form]);
return ( return (
<Modal <Modal
title={ title={
@@ -96,12 +110,35 @@ function InvoiceEnterModalContainer({
okText={t("general.actions.save")} okText={t("general.actions.save")}
onOk={() => form.submit()} onOk={() => form.submit()}
onCancel={handleCancel} onCancel={handleCancel}
afterClose={() => form.resetFields()}
footer={
<span>
<Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
<Button onClick={() => form.submit()}>
{t("general.actions.save")}
</Button>
{invoiceEnterModal.context && invoiceEnterModal.context.id ? null : (
<Button
type="primary"
onClick={() => {
setEnterAgain(true);
}}
>
{t("general.actions.saveandnew")}
</Button>
)}
</span>
}
destroyOnClose destroyOnClose
> >
<Form <Form
onFinish={handleFinish} onFinish={handleFinish}
autoComplete={"off"} autoComplete={"off"}
form={form} form={form}
onFinishFailed={() => {
setEnterAgain(false);
console.log("Finish failed");
}}
initialValues={{ initialValues={{
jobid: jobid:
(invoiceEnterModal.context.job && (invoiceEnterModal.context.job &&

View File

@@ -31,7 +31,7 @@ export default function InvoiceEnterModalLinesComponent({
return ( return (
<div> <div>
<Form.List name="invoicelines"> <Form.List name="invoicelines" >
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
<div> <div>

View File

@@ -1,5 +1,5 @@
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd"; import { Button, Form, Input } from "antd";
import { LockFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useApolloClient } from "react-apollo"; import { useApolloClient } from "react-apollo";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -10,17 +10,17 @@ import { UPSERT_USER } from "../../graphql/user.queries";
import { emailSignInStart } from "../../redux/user/user.actions"; import { emailSignInStart } from "../../redux/user/user.actions";
import { import {
selectCurrentUser, selectCurrentUser,
selectSignInError selectSignInError,
} from "../../redux/user/user.selectors"; } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
signInError: selectSignInError signInError: selectSignInError,
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = (dispatch) => ({
emailSignInStart: (email, password) => emailSignInStart: (email, password) =>
dispatch(emailSignInStart({ email, password })) dispatch(emailSignInStart({ email, password })),
}); });
export default connect( export default connect(
@@ -29,12 +29,9 @@ export default connect(
)(function SignInComponent({ emailSignInStart, currentUser, signInError }) { )(function SignInComponent({ emailSignInStart, currentUser, signInError }) {
const apolloClient = useApolloClient(); const apolloClient = useApolloClient();
const handleFinish = values => { const handleFinish = (values) => {
console.log("Login");
const { email, password } = values; const { email, password } = values;
emailSignInStart(email, password); emailSignInStart(email, password);
//Try to do the login using a saga here.
}; };
if (currentUser.authorized === true) { if (currentUser.authorized === true) {
@@ -43,17 +40,17 @@ export default connect(
mutation: UPSERT_USER, mutation: UPSERT_USER,
variables: { variables: {
authEmail: currentUser.email, authEmail: currentUser.email,
authToken: currentUser.uid authToken: currentUser.uid,
} },
}) })
.then() .then()
.catch(error => { .catch((error) => {
console.log("User login upsert error.", error); console.log("User login upsert error.", error);
}); });
} }
return ( return (
<div> <div style={{ width: "450px" }}>
{currentUser.authorized === true ? <Redirect to="/manage?" /> : null} {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
<img src={Logo} height="100" width="100" alt="Bodyshop.app" /> <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
@@ -61,33 +58,23 @@ export default connect(
<Form onFinish={handleFinish}> <Form onFinish={handleFinish}>
<Form.Item <Form.Item
name="email" name="email"
label="E-mail" rules={[{ required: true, message: "Please input your email!" }]}
rules={[
{
//TODO Ensure using translations.
type: "email",
message: "Please enter a valid email."
},
{
required: true,
message: "Please your email."
}
]}
> >
<Input /> <Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="Username"
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="password" name="password"
rules={[{ required: true, message: "Please enter your password." }]} rules={[{ required: true, message: "Please input your Password!" }]}
> >
<Input <Input
prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />} prefix={<LockOutlined className="site-form-item-icon" />}
type="password" type="password"
placeholder="Password" placeholder="Password"
/> />
</Form.Item> </Form.Item>
<div>Forgot password</div>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
Log in Log in
</Button> </Button>

View File

@@ -45,12 +45,10 @@ export const QUERY_OWNER_BY_ID = gql`
clm_no clm_no
status status
clm_total clm_total
vehicle { v_model_yr
id v_model_desc
v_model_yr v_make_desc
v_model_desc vehicleid
v_make_desc
}
} }
} }
} }

View File

@@ -2,5 +2,16 @@ import React from "react";
import SignIn from "../../components/sign-in-form/sign-in-form.component"; import SignIn from "../../components/sign-in-form/sign-in-form.component";
export default () => { export default () => {
return <SignIn />; return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "middle",
padding: "4em",
}}
>
<SignIn />
</div>
);
}; };

View File

@@ -287,11 +287,13 @@
}, },
"general": { "general": {
"actions": { "actions": {
"cancel": "Cancel",
"create": "Create", "create": "Create",
"delete": "Delete", "delete": "Delete",
"edit": "Edit", "edit": "Edit",
"reset": "Reset to original.", "reset": "Reset to original.",
"save": "Save" "save": "Save",
"saveandnew": "Save and New"
}, },
"labels": { "labels": {
"actions": "Actions", "actions": "Actions",

View File

@@ -287,11 +287,13 @@
}, },
"general": { "general": {
"actions": { "actions": {
"cancel": "",
"create": "", "create": "",
"delete": "Borrar", "delete": "Borrar",
"edit": "Editar", "edit": "Editar",
"reset": "Restablecer a original.", "reset": "Restablecer a original.",
"save": "Salvar" "save": "Salvar",
"saveandnew": ""
}, },
"labels": { "labels": {
"actions": "Comportamiento", "actions": "Comportamiento",

View File

@@ -287,11 +287,13 @@
}, },
"general": { "general": {
"actions": { "actions": {
"cancel": "",
"create": "", "create": "",
"delete": "Effacer", "delete": "Effacer",
"edit": "modifier", "edit": "modifier",
"reset": "Rétablir l'original.", "reset": "Rétablir l'original.",
"save": "sauvegarder" "save": "sauvegarder",
"saveandnew": ""
}, },
"labels": { "labels": {
"actions": "actes", "actions": "actes",