Merge branch 'release/0.6.9' into feature/CE-1135-webeoc-polling

bcgov · Dec 7, 2024 · 65321aa · 65321aa
2 parents 5e02450 + 2ff6c11
commit 65321aa
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 13 deletions.
diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx
@@ -45,6 +45,15 @@ const defaultAuthorization: DrugAuthorization = {
   date: new Date(),
 };
 
+type modalProps = {
+  title: string;
+  description: string;
+  confirmText: string;
+  cancelText: string;
+  confirm: () => void | null;
+  cancel: () => void | null;
+};
+
 export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: officer, agency, update, toggle }) => {
   //-- select data from redux
   const speciesList = useAppSelector(selectSpeciesCodeDropdown);
@@ -58,6 +67,18 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
   const showSectionErrors = isInEdit.showSectionErrors;
 
   const [showModal, setShowModal] = useState(false);
+  const [modalContent, setModalContent] = useState<modalProps>({
+    title: "",
+    description: "",
+    confirmText: "",
+    cancelText: "",
+    confirm: () => {
+      return null;
+    },
+    cancel: () => {
+      return null;
+    },
+  });
 
   //-- new input data
   const [data, applyData] = useState<AnimalOutcome>({ ...outcome });
@@ -318,6 +339,14 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
   };
 
   const handleCancel = () => {
+    setModalContent({
+      title: "Cancel changes?",
+      description: "Your changes will be lost.",
+      confirmText: "No, go back",
+      cancelText: "Yes, cancel changes",
+      confirm: close,
+      cancel: cancel,
+    });
     setShowModal(true);
   };
   const close = () => {
@@ -329,16 +358,35 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
     toggle("");
   };
 
+  const showEditWarning = (onConfirm: Function, onCancel?: Function) => {
+    setModalContent({
+      title: "Confirm changes?",
+      description:
+        "Editing the outcome or date of this report might affect public reporting statistics. Are you sure you want to continue?",
+      confirmText: "Yes",
+      cancelText: "No",
+      confirm: () => {
+        if (onConfirm) {
+          onConfirm();
+        }
+        setShowModal(false);
+      },
+      cancel: () => {
+        if (onCancel) {
+          onCancel();
+        }
+        setShowModal(false);
+      },
+    });
+    setShowModal(true);
+  };
+
   return (
     <>
       <StandaloneConfirmCancelModal
-        title="Cancel changes?"
-        description="Your changes will be lost."
+        {...modalContent}
         show={showModal}
-        closeAndCancel={cancel}
-        close={close}
       />
-
       <Card
         className="comp-animal-card comp-outcome-report-block"
         border={showSectionErrors ? "danger" : "default"}
@@ -493,8 +541,11 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
                     options={outcomes}
                     enableValidation={false}
                     placeholder={"Select"}
+                    value={getDropdownOption(data.outcome, outcomes)}
                     onChange={(evt) => {
-                      updateModel("outcome", evt?.value);
+                      showEditWarning(() => {
+                        updateModel("outcome", evt?.value);
+                      });
                     }}
                     defaultOption={getDropdownOption(data.outcome, outcomes)}
                   />
@@ -540,7 +591,9 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
                   id="equipment-day-set"
                   maxDate={new Date()}
                   onChange={(input: Date) => {
-                    handleOutcomeDateChange(input);
+                    showEditWarning(() => {
+                      handleOutcomeDateChange(input);
+                    });
                   }}
                   selectedDate={data?.date}
                   placeholder={"Select"}

diff --git a/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx b/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx
@@ -10,11 +10,21 @@ type props = {
   show: boolean;
   title: string;
   description: string;
-  close: () => void | null;
-  closeAndCancel: () => void | null;
+  confirmText: string;
+  cancelText: string;
+  confirm: () => void | null;
+  cancel: () => void | null;
 };
 
-export const StandaloneConfirmCancelModal: FC<props> = ({ show, title, description, close, closeAndCancel }) => {
+export const StandaloneConfirmCancelModal: FC<props> = ({
+  show,
+  title,
+  description,
+  confirmText,
+  cancelText,
+  confirm,
+  cancel,
+}) => {
   return (
     <Modal
       show={show}
@@ -34,11 +44,11 @@ export const StandaloneConfirmCancelModal: FC<props> = ({ show, title, descripti
       <Modal.Footer>
         <Button
           variant="outline-primary"
-          onClick={close}
+          onClick={confirm}
         >
-          No, go back
+          {confirmText}
         </Button>
-        <Button onClick={closeAndCancel}>Yes, cancel changes</Button>
+        <Button onClick={cancel}>{cancelText}</Button>
       </Modal.Footer>
     </Modal>
   );