[MDS-5949] New Code Edit error (#3066)

* re-initialize form when new values are added so they don't get discarded as changes. Did put in render submit button and async changes because it was already done, fixed classname that was accidentally doing boolean math instead of string concatenation. Put spaces between rows
bcgov · Apr 24, 2024 · d5ec32c · d5ec32c
1 parent a8b7b30
commit d5ec32c
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 55 deletions.
diff --git a/services/common/src/components/forms/BaseInput.tsx b/services/common/src/components/forms/BaseInput.tsx
@@ -80,7 +80,7 @@ interface BaseViewInputProps {
 }
 export const BaseViewInput: FC<BaseViewInputProps> = ({ label = "", value = "" }) => {
   return (
-    <div className="view-item">
+    <div className="view-item ant-form-item">
       {label && label !== "" && (
         <Typography.Paragraph className="view-item-label">{label}</Typography.Paragraph>
       )}

diff --git a/services/common/src/components/forms/FormWrapper.tsx b/services/common/src/components/forms/FormWrapper.tsx
@@ -89,15 +89,16 @@ const FormWrapper: FC<FormWrapperProps & InjectedFormProps<any>> = ({
     }
   }, [isEditMode]);
 
-  const handleSubmit = (values) => {
+  const handleSubmit = async (values) => {
     dispatch(submit(props.name));
     if (!formErrors) {
-      props.onSubmit(values);
+      await props.onSubmit(values);
     }
   };
 
-  const formClassName =
-    `common-form common-form-${props.name} form-` + isEditMode ? "edit" : "view";
+  const formClassName = `common-form common-form-${props.name} form-${
+    isEditMode ? "edit" : "view"
+  }`;
 
   return (
     <FormProvider value={providerValues}>

diff --git a/services/common/src/components/forms/RenderSubmitButton.tsx b/services/common/src/components/forms/RenderSubmitButton.tsx
@@ -0,0 +1,38 @@
+import React, { FC, ReactNode, useContext } from "react";
+import { useSelector } from "react-redux";
+import { isDirty, isSubmitting } from "redux-form";
+import { FormContext } from "./FormWrapper";
+import { Button } from "antd";
+import { BaseButtonProps } from "antd/lib/button/button";
+
+interface RenderSubmitButtonProps {
+  buttonText?: string | ReactNode;
+  buttonProps?: BaseButtonProps;
+}
+
+const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
+  buttonText = "Save Changes",
+  buttonProps,
+}) => {
+  const { formName, isEditMode } = useContext(FormContext);
+  const submitting = useSelector(isSubmitting(formName));
+  const isFormDirty = useSelector(isDirty(formName));
+
+  return (
+    <>
+      {isEditMode && (
+        <Button
+          type="primary"
+          disabled={!isFormDirty || submitting}
+          loading={submitting}
+          htmlType="submit"
+          {...buttonProps}
+        >
+          {buttonText}
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default RenderSubmitButton;
diff --git a/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap b/services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RenderCancelButton component renders properly, does not show confirm on pristine form 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-FORM_NAME form-edit"
     id="FORM_NAME"
   >
     <button

diff --git a/...s/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap b/...s/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AuthorizationsInvolved renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <div

diff --git a/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/BasicInformation.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`BasicInformation renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <h3

diff --git a/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap b/services/common/src/components/projectSummary/__snapshots__/Declaration.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Declaration renders properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-ADD_EDIT_PROJECT_SUMMARY form-edit"
     id="ADD_EDIT_PROJECT_SUMMARY"
   >
     <div

diff --git a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-edit.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReportDetailsForm renders edit mode properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-edit"
     id="VIEW_EDIT_REPORT"
   >
     <div>
@@ -720,7 +720,7 @@ exports[`ReportDetailsForm renders edit mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -739,7 +739,7 @@ exports[`ReportDetailsForm renders edit mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"

diff --git a/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap b/services/common/src/components/reports/__snapshots__/ReportDetailsForm-view.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReportDetailsForm renders view mode properly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-vertical edit"
+    class="ant-form ant-form-vertical common-form common-form-VIEW_EDIT_REPORT form-view"
     id="VIEW_EDIT_REPORT"
   >
     <div>
@@ -283,7 +283,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -302,7 +302,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -332,7 +332,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -351,7 +351,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -370,7 +370,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -389,7 +389,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -429,7 +429,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"
@@ -448,7 +448,7 @@ exports[`ReportDetailsForm renders view mode properly 1`] = `
         style="padding: 4px 8px 4px 8px;"
       >
         <div
-          class="view-item"
+          class="view-item ant-form-item"
         >
           <div
             class="ant-typography view-item-label"

diff --git a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeManagement.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { change, Field, reset } from "redux-form";
+import { change, Field, initialize, reset } from "redux-form";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
 import PlusOutlined from "@ant-design/icons/PlusOutlined";
 import { Button, Input, Row, Table, Typography } from "antd";
@@ -52,6 +52,7 @@ const ComplianceCodeManagement: FC = () => {
     if (complianceCodes) {
       const newList = Object.values(complianceCodes).sort(sortComplianceCodesByArticleNumber);
       setFilteredRecordsList(newList);
+      dispatch(initialize(FORM.COMPLIANCE_CODE_BULK_EDIT, complianceCodes));
     }
   }, [complianceCodes]);
 
@@ -78,8 +79,8 @@ const ComplianceCodeManagement: FC = () => {
     }
   };
 
-  const handleModalSave = (values: IComplianceArticle) => {
-    dispatch(
+  const handleModalSave = async (values: IComplianceArticle) => {
+    await dispatch(
       change(FORM.COMPLIANCE_CODE_BULK_EDIT, `${formPrefix}${values.compliance_article_id}`, values)
     );
   };
@@ -271,6 +272,7 @@ const ComplianceCodeManagement: FC = () => {
           <Button
             onClick={() => openAddModal()}
             disabled={isEditMode}
+            loading={isLoading}
             type="primary"
             icon={<PlusOutlined />}
           >
@@ -311,7 +313,11 @@ const ComplianceCodeManagement: FC = () => {
                           </Button>
                         </>
                       ) : (
-                        <Button onClick={() => setIsEditMode(true)} type="primary">
+                        <Button
+                          onClick={() => setIsEditMode(true)}
+                          type="primary"
+                          loading={isLoading}
+                        >
                           Edit Expiry Dates
                         </Button>
                       )}

diff --git a/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx b/services/core-web/src/components/admin/complianceCodes/ComplianceCodeViewEditForm.tsx
@@ -21,6 +21,7 @@ import RenderDate from "@mds/common/components/forms/RenderDate";
 import RenderRadioButtons from "@mds/common/components/forms/RenderRadioButtons";
 import RenderAutoSizeField from "@mds/common/components/forms/RenderAutoSizeField";
 import RenderCancelButton from "@mds/common/components/forms/RenderCancelButton";
+import RenderSubmitButton from "@mds/common/components/forms/RenderSubmitButton";
 import {
   formatComplianceCodeArticleNumber,
   stripParentheses,
@@ -66,7 +67,7 @@ const ComplianceCodeViewEditForm: FC<{
     }
   }, [section, sub_section, paragraph, sub_paragraph]);
 
-  const handleSubmit = (values: IComplianceArticle) => {
+  const handleSubmit = async (values: IComplianceArticle) => {
     const cim_or_cpo =
       values.cim_or_cpo !== REPORT_REGULATORY_AUTHORITY_CODES.NONE ? values.cim_or_cpo : null;
     const payload = { ...values, article_act_code: "HSRCM", cim_or_cpo };
@@ -89,7 +90,7 @@ const ComplianceCodeViewEditForm: FC<{
         isEditMode={isEditMode}
         isModal={true}
       >
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={24}>
             <Typography.Text strong>HSRC Details</Typography.Text>
           </Col>
@@ -127,7 +128,7 @@ const ComplianceCodeViewEditForm: FC<{
             />
           </Col>
         </Row>
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={24} className="hide-required-indicator">
             <Field
               id="articleNumber"
@@ -139,7 +140,7 @@ const ComplianceCodeViewEditForm: FC<{
             />
           </Col>
         </Row>
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]} className="form-row-margin">
           <Col span={12}>
             <Field
               name="effective_date"
@@ -221,11 +222,7 @@ const ComplianceCodeViewEditForm: FC<{
         </Row>
         <Row gutter={[16, 16]} justify="end">
           <RenderCancelButton />
-          {isEditMode && (
-            <Button htmlType="submit" type="primary">
-              Save Code
-            </Button>
-          )}
+          <RenderSubmitButton buttonText="Save Code" />
         </Row>
       </FormWrapper>
     </div>

diff --git a/services/core-web/src/styles/components/Forms.scss b/services/core-web/src/styles/components/Forms.scss
@@ -72,6 +72,10 @@
   margin-bottom: 10px;
 }
 
+.common-form.form-view .ant-row.form-row-margin {
+  margin-bottom: 1em;
+}
+
 .vertical-radio-group {
   display: flex;
   flex-direction: column;