Added save warning to cc edit page BOD-127

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

View File

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

View File

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