CC Conversion Corrections IO-463

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -1,12 +1,12 @@
-import { Button, Typography, Row, Col } from "antd";
+import { Button, Col, Row, Space, Typography, Form } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
 import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
 import ContractFormComponent from "../../components/contract-form/contract-form.component";
 import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setCourtesyCarReturnModalContext: (context) =>
@@ -20,6 +20,7 @@ export function ContractDetailPage({
   setCourtesyCarReturnModalContext,
   refetch,
   form,
+  saveLoading,
 }) {
   const { t } = useTranslation();
   return (
@@ -28,27 +29,6 @@ export function ContractDetailPage({
         <Typography.Title>{`Agreement ${
           (contract && contract.agreementnumber) || ""
         } - ${t((contract && contract.status) || "")}`}</Typography.Title>
-        <Button type="primary" htmlType="submit">
-          {t("general.actions.save")}
-        </Button>
-        <Button
-          disabled={
-            !!!contract ||
-            (contract && contract.status !== "contracts.status.out")
-          }
-          onClick={() => {
-            setCourtesyCarReturnModalContext({
-              actions: { refetch },
-              context: {
-                contractId: contract.id,
-                courtesyCarId: courtesyCar.id,
-              },
-            });
-          }}
-        >
-          {t("courtesycars.actions.return")}
-        </Button>
-        <ContractConvertToRo contract={contract} />
       </Row>
 
       <Row>
@@ -57,6 +37,43 @@ export function ContractDetailPage({
           <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
         </Col>
         <Col span={18} offset={1}>
+          <Form.Item shouldUpdate>
+            {() => {
+              return (
+                <Space>
+                  <Button
+                    type="primary"
+                    htmlType="submit"
+                    loading={saveLoading}
+                  >
+                    {t("general.actions.save")}
+                  </Button>
+                  <Button
+                    disabled={
+                      !!!contract ||
+                      (contract && contract.status !== "contracts.status.out")
+                    }
+                    onClick={() => {
+                      setCourtesyCarReturnModalContext({
+                        actions: { refetch },
+                        context: {
+                          contractId: contract.id,
+                          courtesyCarId: courtesyCar.id,
+                        },
+                      });
+                    }}
+                  >
+                    {t("courtesycars.actions.return")}
+                  </Button>
+
+                  <ContractConvertToRo
+                    contract={contract}
+                    disabled={form.isFieldsTouched()}
+                  />
+                </Space>
+              );
+            }}
+          </Form.Item>
           <ContractFormComponent form={form} />
         </Col>
       </Row>

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import { Form, notification } from "antd";
 import moment from "moment";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -35,6 +35,7 @@ export function ContractDetailPageContainer({
 }) {
   const { t } = useTranslation();
   const [updateContract] = useMutation(UPDATE_CONTRACT);
+  const [saveLoading, setsaveLoading] = useState(false);
   const [form] = Form.useForm();
   const { contractId } = useParams();
 
@@ -95,6 +96,7 @@ export function ContractDetailPageContainer({
   ]);
 
   const handleFinish = async (values) => {
+    setsaveLoading(true);
     const result = await updateContract({
       variables: { cccontract: { ...values }, contractId: contractId },
     });
@@ -108,6 +110,8 @@ export function ContractDetailPageContainer({
     }
     notification["success"]({ message: t("contracts.successes.saved") });
     if (refetch) await refetch();
+    setsaveLoading(false);
+
     form.resetFields();
     form.resetFields();
   };
@@ -160,6 +164,7 @@ export function ContractDetailPageContainer({
             courtesyCar={data ? data.cccontracts_by_pk.courtesycar : null}
             refetch={refetch}
             form={form}
+            saveLoading={saveLoading}
           />
         </Form>
       </div>

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/react-hooks";
 import { Form, notification } from "antd";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
@@ -27,11 +27,13 @@ export function CourtesyCarCreateContainer({
   setSelectedHeader,
 }) {
   const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
   const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
   const { t } = useTranslation();
   const history = useHistory();
 
   const handleFinish = async (values) => {
+    setLoading(true);
     const result = await insertCourtesyCar({
       variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } },
     });
@@ -42,7 +44,9 @@ export function CourtesyCarCreateContainer({
           message: JSON.stringify(result.errors),
         }),
       });
+      setLoading(false);
     } else {
+      setLoading(false);
       form.resetFields();
       form.resetFields();
       notification["success"]({ message: t("courtesycars.successes.saved") });
@@ -67,7 +71,7 @@ export function CourtesyCarCreateContainer({
   return (
     <RbacWrapper action="courtesycar:create">
       <Form form={form} autoComplete="new-password" onFinish={handleFinish}>
-        <CourtesyCarFormComponent form={form} />
+        <CourtesyCarFormComponent form={form} saveLoading={loading} />
       </Form>
     </RbacWrapper>
   );