BOD-17 Creation of new contract page

This commit is contained in:
Patrick Fic
2020-03-30 17:27:33 -07:00
parent fa3031e313
commit 9ae3843b3b
11 changed files with 899 additions and 3 deletions

View File

@@ -0,0 +1,287 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Form, Input, DatePicker, InputNumber, Button } from "antd";
import aamva from "aamva";
export default function ContractFormComponent() {
const [state, setState] = useState("");
const { t } = useTranslation();
return (
<div>
<Input value={state} onChange={e => setState(e.target.value)} />
<Button
onClick={() => {
console.log("state", state);
//let data = state;
var data =
"%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^ ?\
;6360100462172082009=2101198299090=?\
#! 33435 I 1600 ECCECC00000?";
data = data.replace(/\n/, "");
// replace spaces with regular space
data = data.replace(/\s/g, " ");
var track = data.match(/(.*?\?)(.*?\?)(.*?\?)/);
console.log("data", data);
console.log("track", track);
const a = aamva.stripe(data);
console.log(JSON.stringify(a));
}}
>
Decode
</Button>
<Form.Item
label={t("contracts.fields.status")}
name="status "
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.start")}
name="start"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.scheduledreturn")}
name="scheduledreturn"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.actualreturn")}
name="actualreturn"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.kmstart")}
name="kmstart"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t("contracts.fields.kmend")}
name="kmend"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlnumber")}
name="driver_dlnumber"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlexpiry")}
name="driver_dlexpiry"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlst")}
name="driver_dlst"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_fn")}
name="driver_fn"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ln")}
name="driver_ln"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_addr1")}
name="driver_addr1"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_addr2")}
name="driver_addr2"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_city")}
name="driver_city"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_state")}
name="driver_state"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_zip")}
name="driver_zip"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ph1")}
name="driver_ph1"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dob")}
name="driver_dob"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_num")}
name="cc_num"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_expiry")}
name="cc_expiry"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_cardholder")}
name="cc_cardholder"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
</div>
);
}

View File

@@ -0,0 +1,10 @@
import React from "react";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
export default function ContractCreatePageComponent() {
return (
<div>
<ContractFormComponent />
</div>
);
}

View File

@@ -0,0 +1,38 @@
import React, { useEffect } from "react";
import ContractCreatePageComponent from "./contract-create.page.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { Form, notification } from "antd";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export function ContractCreatePageContainer({ bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation();
const handleFinish = values => {
// insertCourtesyCar({
// variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
// })
// .then(response => {
notification["success"]({ message: t("courtesycars.successes.saved") });
// })
// .catch(error => console.log("error", error));
};
useEffect(() => {
document.title = t("titles.contracts-create");
}, [t]);
return (
<Form form={form} autoComplete="no" onFinish={handleFinish}>
<ContractCreatePageComponent />
</Form>
);
}
export default connect(mapStateToProps, null)(ContractCreatePageContainer);

View File

@@ -1,6 +1,6 @@
import React from "react";
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"
import CourtesyCarFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"
export default function CourtesyCarCreateComponent() {
return <CourtesyCarCreateFormComponent />;
return <CourtesyCarFormComponent />;
}

View File

@@ -55,6 +55,9 @@ const CourtesyCarDetailContainer = lazy(() =>
const CourtesyCarsPage = lazy(() =>
import("../courtesy-cars/courtesy-cars.page.container")
);
const ContractCreatePage = lazy(() =>
import("../contract-create/contract-create.page.container")
);
const { Header, Content, Footer } = Layout;
@@ -117,7 +120,7 @@ export default function Manage({ match }) {
<Route
exact
path={`${match.path}/courtesycars/contracts/new`}
component={() => <div>new cc contract</div>}
component={ContractCreatePage}
/>
<Route
exact

View File

@@ -139,6 +139,31 @@
"save": "Bodyshop saved successfully. "
}
},
"contracts": {
"fields": {
"actualreturn": "Actual Return Date",
"cc_cardholder": "Cardholder Name",
"cc_expiry": "Credit Card Expiry Date",
"cc_num": "Credit Card Number",
"driver_addr1": "Driver Address 1",
"driver_addr2": "Driver Address 2",
"driver_city": "Driver City",
"driver_dlexpiry": "Driver's License Expiration Date",
"driver_dlnumber": "Driver's License Number",
"driver_dlst": "Driver's License State",
"driver_dob": "Driver's DOB",
"driver_fn": "Driver's First Name",
"driver_ln": "Driver's Last Name",
"driver_ph1": "Driver's Phone",
"driver_state": "Driver's State ",
"driver_zip": "Driver's Postal/ZIP Code",
"kmend": "Mileage End",
"kmstart": "Mileage Start",
"scheduledreturn": "Scheduled Return",
"start": "Contract Start",
"status": "Status"
}
},
"courtesycars": {
"erorrs": {
"saving": "Error saving courtesy card. {{error}}"
@@ -630,6 +655,7 @@
},
"titles": {
"app": "Bodyshop by ImEX Systems",
"contracts-create": "New Contract | $t(titles.app)",
"courtesycars-create": "New Courtesy Car | $t(titles.app)",
"courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)",
"jobs": "All Jobs | $t(titles.app)",

View File

@@ -139,6 +139,31 @@
"save": ""
}
},
"contracts": {
"fields": {
"actualreturn": "",
"cc_cardholder": "",
"cc_expiry": "",
"cc_num": "",
"driver_addr1": "",
"driver_addr2": "",
"driver_city": "",
"driver_dlexpiry": "",
"driver_dlnumber": "",
"driver_dlst": "",
"driver_dob": "",
"driver_fn": "",
"driver_ln": "",
"driver_ph1": "",
"driver_state": "",
"driver_zip": "",
"kmend": "",
"kmstart": "",
"scheduledreturn": "",
"start": " ",
"status": ""
}
},
"courtesycars": {
"erorrs": {
"saving": ""
@@ -630,6 +655,7 @@
},
"titles": {
"app": "Carrocería de ImEX Systems",
"contracts-create": "",
"courtesycars-create": "",
"courtesycars-detail": "",
"jobs": "Todos los trabajos | $t(titles.app)",

View File

@@ -139,6 +139,31 @@
"save": ""
}
},
"contracts": {
"fields": {
"actualreturn": "",
"cc_cardholder": "",
"cc_expiry": "",
"cc_num": "",
"driver_addr1": "",
"driver_addr2": "",
"driver_city": "",
"driver_dlexpiry": "",
"driver_dlnumber": "",
"driver_dlst": "",
"driver_dob": "",
"driver_fn": "",
"driver_ln": "",
"driver_ph1": "",
"driver_state": "",
"driver_zip": "",
"kmend": "",
"kmstart": "",
"scheduledreturn": "",
"start": "",
"status": ""
}
},
"courtesycars": {
"erorrs": {
"saving": ""
@@ -630,6 +655,7 @@
},
"titles": {
"app": "Carrosserie par ImEX Systems",
"contracts-create": "",
"courtesycars-create": "",
"courtesycars-detail": "",
"jobs": "Tous les emplois | $t(titles.app)",