Added some additional save indiactors BOD-134

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

@@ -9,11 +9,14 @@ export default function ContractCreatePageComponent({
   form,
   selectedJobState,
   selectedCarState,
+  loading,
 }) {
   const { t } = useTranslation();
   return (
     <div>
-      <Button htmlType="submit">{t("general.actions.create")}</Button>
+      <Button type="primary" onClick={() => form.submit()} loading={loading}>
+        {t("general.actions.create")}
+      </Button>
       <ContractJobsContainer selectedJobState={selectedJobState} />
       <ContractCarsContainer selectedCarState={selectedCarState} />
       <ContractLicenseDecodeButton form={form} />

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

@@ -23,6 +23,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
+  const [loading, setLoading] = useState(false);
   const selectedCarState = useState(null);
   const selectedJobState = useState(
     (location.state && location.state.jobId) || null
@@ -31,6 +32,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
 
   const handleFinish = (values) => {
     if (!!selectedCarState[0] && !!selectedJobState[0]) {
+      setLoading(true);
       insertContract({
         variables: {
           contract: {
@@ -61,6 +63,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
         message: t("contracts.errors.selectjobandcar"),
       });
     }
+    setLoading(false);
   };
 
   useEffect(() => {
@@ -84,9 +87,11 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
         form={form}
         layout="vertical"
         autoComplete="no"
+        initialValues={{ status: "contracts.status.new" }}
         onFinish={handleFinish}
       >
         <ContractCreatePageComponent
+          loading={loading}
           form={form}
           selectedJobState={selectedJobState}
           selectedCarState={selectedCarState}

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

@@ -2,10 +2,14 @@ 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, form }) {
+export default function CourtesyCarDetailPageComponent({
+  contracts,
+  form,
+  saveLoading,
+}) {
   return (
     <div>
-      <CourtesyCarCreateFormComponent form={form} />
+      <CourtesyCarCreateFormComponent form={form} saveLoading={saveLoading} />
       <CourtesyCarContractListComponent contracts={contracts} />
     </div>
   );

client/src/pages/courtesy-car-detail/courtesy-car-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";
@@ -27,7 +27,7 @@ export function CourtesyCarDetailPageContainer({
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
   const { ccId } = useParams();
-
+  const [saveLoading, setSaveLoading] = useState(false);
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
     variables: { id: ccId },
   });
@@ -63,18 +63,24 @@ export function CourtesyCarDetailPageContainer({
       );
   }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);
 
-  const handleFinish = (values) => {
-    insertCourtesyCar({
+  const handleFinish = async (values) => {
+    setSaveLoading(true);
+
+    const result = await insertCourtesyCar({
       variables: { cc: { ...values }, ccId: ccId },
-    })
-      .then((response) => {
-        notification["success"]({ message: t("courtesycars.successes.saved") });
-      })
-      .catch((error) =>
-        notification["error"]({
-          message: t("courtesycars.errors.saving", { error: error }),
-        })
-      );
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("courtesycars.errors.saving", { error: error }),
+      });
+    }
+
+    notification["success"]({
+      message: t("courtesycars.successes.saved"),
+    });
+
+    setSaveLoading(false);
   };
 
   useEffect(() => {
@@ -120,6 +126,7 @@ export function CourtesyCarDetailPageContainer({
         <CourtesyCarDetailPageComponent
           contracts={data ? data.courtesycars_by_pk.cccontracts : []}
           form={form}
+          saveLoading={saveLoading}
         />
       </Form>
     </RbacWrapper>