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

Added save warning to cc edit page BOD-127

Browse Source
This commit is contained in:
Patrick Fic
2020-07-13 16:22:06 -07:00
parent e2f7566783
commit f998c32b32
5 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
View File

@@ -1,25 +1,29 @@
import { Button, DatePicker, Form, Input, InputNumber } from "antd";
import React from "react"; import React from "react";
import { Form, Input, InputNumber, DatePicker, Button } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component"; import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function CourtesyCarCreateFormComponent() { export default function CourtesyCarCreateFormComponent({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
{t("general.actions.save")} {t("general.actions.save")}
</Button> </Button>
<div className="imex-flex-row__grow imex-flex-row__margin-large">
<FormFieldsChanged form={form} />
</div>
<Form.Item <Form.Item
label={t("courtesycars.fields.make")} label={t("courtesycars.fields.make")}
name="make" name="make"
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -30,8 +34,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -42,8 +46,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -54,8 +58,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -66,8 +70,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -78,8 +82,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<Input /> <Input />
@@ -120,8 +124,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<CourtesyCarStatus /> <CourtesyCarStatus />
@@ -132,8 +136,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<InputNumber /> <InputNumber />
@@ -144,8 +148,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<DatePicker /> <DatePicker />
@@ -162,8 +166,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<CourtesyCarFuelSlider /> <CourtesyCarFuelSlider />
@@ -174,8 +178,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<DatePicker /> <DatePicker />
@@ -186,8 +190,8 @@ export default function CourtesyCarCreateFormComponent() {
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required"),
} },
]} ]}
> >
<DatePicker /> <DatePicker />

7
client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
View File

@@ -10,7 +10,7 @@ export default function FormsFieldChanged({ form }) {
const handleReset = () => { const handleReset = () => {
form.resetFields(); form.resetFields();
}; };
console.log("form.isFieldsTouched(true)", form.isFieldsTouched([], true));
const loc = useLocation(); const loc = useLocation();
return ( return (
@@ -28,7 +28,7 @@ export default function FormsFieldChanged({ form }) {
}} }}
/> />
<AlertComponent <AlertComponent
type='warning' type="warning"
message={ message={
<div> <div>
<span>{t("general.messages.unsavedchanges")}</span> <span>{t("general.messages.unsavedchanges")}</span>
@@ -37,7 +37,8 @@ export default function FormsFieldChanged({ form }) {
style={{ style={{
cursor: "pointer", cursor: "pointer",
textDecoration: "underline", textDecoration: "underline",
}}> }}
>
{t("general.actions.reset")} {t("general.actions.reset")}
</span> </span>
</div> </div>

6
client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx
View File

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

4
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
View File

@@ -2,10 +2,10 @@ import React from "react";
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"; import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component";
import CourtesyCarContractListComponent from "../../components/courtesy-car-contract-list/courtesy-car-contract-list.component"; import CourtesyCarContractListComponent from "../../components/courtesy-car-contract-list/courtesy-car-contract-list.component";
export default function CourtesyCarDetailPageComponent({ contracts }) { export default function CourtesyCarDetailPageComponent({ contracts, form }) {
return ( return (
<div> <div>
<CourtesyCarCreateFormComponent /> <CourtesyCarCreateFormComponent form={form} />
<CourtesyCarContractListComponent contracts={contracts} /> <CourtesyCarContractListComponent contracts={contracts} />
</div> </div>
); );

1
client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
View File

@@ -117,6 +117,7 @@ export function CourtesyCarDetailPageContainer({
> >
<CourtesyCarDetailPageComponent <CourtesyCarDetailPageComponent
contracts={data ? data.courtesycars_by_pk.cccontracts : []} contracts={data ? data.courtesycars_by_pk.cccontracts : []}
form={form}
/> />
</Form> </Form>
); );