From f998c32b328e9b5e5cd2c4c13b2ea1fa6699042b Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Mon, 13 Jul 2020 16:22:06 -0700
Subject: [PATCH] Added save warning to cc edit page BOD-127

---
 .../courtesy-car-form.component.jsx           | 60 ++++++++++---------
 .../form-fields-changed-alert.component.jsx   |  7 ++-
 .../courtesy-car-create.page.component.jsx    |  6 +-
 .../courtesy-car-detail.page.component.jsx    |  4 +-
 .../courtesy-car-detail.page.container.jsx    |  1 +
 5 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
index 5542fb26c..bdcecb5eb 100644
--- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
+++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
@@ -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 />
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index 851a3dafc..ae407ec98 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -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>
diff --git a/client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx b/client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx
index 4f5b8b75a..43aa539d3 100644
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.component.jsx
@@ -1,6 +1,6 @@
 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() {
-  return <CourtesyCarFormComponent />;
+export default function CourtesyCarCreateComponent({ form }) {
+  return <CourtesyCarFormComponent form={form} />;
 }
diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
index 8a874d3aa..ea5c74b55 100644
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
+++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.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 (
     <div>
-      <CourtesyCarCreateFormComponent />
+      <CourtesyCarCreateFormComponent form={form} />
       <CourtesyCarContractListComponent contracts={contracts} />
     </div>
   );
diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
index d0c264804..10e62eee2 100644
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
+++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
@@ -117,6 +117,7 @@ export function CourtesyCarDetailPageContainer({
     >
       <CourtesyCarDetailPageComponent
         contracts={data ? data.courtesycars_by_pk.cccontracts : []}
+        form={form}
       />
     </Form>
   );