CE-606 Bug fix for validation (#338)

Co-authored-by: Barrett Falk <bfalk@salussystems.com>
Co-authored-by: afwilcox <alecwilcox@gmail.com>
Co-authored-by: Mike <100624415+marqueone-ps@users.noreply.github.com>

frontend/src/app/components/containers/complaints/outcomes/animal-outcomes/drug-authorization.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from "react";
+import { FC, useState } from "react";
 import { Row, Col } from "react-bootstrap";
 import { CompSelect } from "../../../../common/comp-select";
 import { useAppSelector } from "../../../../../hooks/hooks";
@@ -19,12 +19,7 @@ export const DrugAuthorization: FC<Props> = ({ agency, drugAuthorization, update
   const assigned = useAppSelector(selectComplaintAssignedBy);
 
   const [authorizedBy, setAuthorizedBy] = useState(drugAuthorization?.officer ?? assigned ?? undefined);
-  const [authorizedOn, setAuthorizedOn] = useState<Date | undefined>();
-
-  useEffect(() => {
-    const date = drugAuthorization?.date ? new Date(drugAuthorization?.date) : new Date();
-    setAuthorizedOn(date);
-  }, [drugAuthorization]);
+  const [authorizedOn, setAuthorizedOn] = useState<Date | undefined>(drugAuthorization?.date ?? undefined);
 
   const getValue = (property: string): Option | undefined => {
     if (property === "officer") {
@@ -34,21 +29,21 @@ export const DrugAuthorization: FC<Props> = ({ agency, drugAuthorization, update
 
   const handleAuthorizedByChange = (input: string | undefined) => {
     setAuthorizedBy(input);
-    const newDrugAuth: DrugAuthorizationType = { officer: input ?? "", date: authorizedOn ?? undefined };
-    update(newDrugAuth);
+    const newDrugAuth: DrugAuthorizationType = { officer: input ?? "", date: authorizedOn ?? undefined, officerErrorMessage: drugAuthorization?.officerErrorMessage, dateErrorMessage: drugAuthorization?.dateErrorMessage};
+    update(newDrugAuth, "officer");
   };
 
-  const handleAuthorizedOnChange = (input: Date | undefined | null) => {
+  const handleAuthorizedOnChange = (input: Date | undefined) => {
     setAuthorizedOn(input ?? undefined);
-    update({ officer: authorizedBy, date: input ?? undefined });
+    update({ officer: authorizedBy, date: input ?? undefined , officerErrorMessage: drugAuthorization?.officerErrorMessage, dateErrorMessage: drugAuthorization?.dateErrorMessage}, "date");
   };
 
   return (
     <div className="comp-animal-outcome-report-inner-spacing">
       <Row>
         <Col md={5}>
           <div
-            className="comp-details-label-input-pair"
+            className="drug-auth-details-label-input-pair"
             id="officer-assigned-pair-id"
           >
             <label
@@ -75,7 +70,7 @@ export const DrugAuthorization: FC<Props> = ({ agency, drugAuthorization, update
 
         <Col md="4">
           <div
-            className="comp-details-label-input-pair"
+            className="drug-auth-details-label-input-pair"
             id="officer-assigned-pair-id"
           >
             <label

frontend/src/app/components/containers/complaints/outcomes/animal-outcomes/edit-animal-outcome.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from "uuid";
 
@@ -76,16 +76,12 @@ export const EditAnimalOutcome: FC<EditAnimalOutcomeProps> = ({
   );
   const [outcome, setOutcome] = useState<Option | undefined>(animalOutcomeItemData?.outcome);
   const [outcomeOfficer, setOutcomeOfficer] = useState<Option | undefined>(animalOutcomeItemData?.officer);
-  const [outcomeDate, setOutcomeDate] = useState<Date | undefined>();
+  const [outcomeDate, setOutcomeDate] = useState<Date | undefined>(animalOutcomeItemData?.date);
 
   const [speciesErrorMessage, setSpeciesErrorMessage] = useState<string>("");
   const [outcomeOfficerErrorMessage, setOutcomeOfficerErrorMessage] = useState<string>("");
   const [outcomeDateErrorMessage, setOutcomeDateErrorMessage] = useState<string>("");
 
-  useEffect(() => {
-    const date = animalOutcomeItemData?.date ? new Date(animalOutcomeItemData?.date) : new Date();
-    setOutcomeDate(date);
-  }, [animalOutcomeItemData]);
 
   const handleSaveAnimalOutcome = () => {
     const id = editMode ? animalOutcomeItemData?.id?.toString() : uuidv4();
@@ -268,8 +264,10 @@ export const EditAnimalOutcome: FC<EditAnimalOutcomeProps> = ({
       });
     if (update.length === 0) {
       if (drugAuthorization) {
-        drugAuthorization.officerErrorMessage = "";
-        drugAuthorization.dateErrorMessage = "";
+        setDrugAuthorization({
+          officer: "",
+          date: new Date(),
+        })
       }
     }
     setDrugs(update);
@@ -352,25 +350,36 @@ export const EditAnimalOutcome: FC<EditAnimalOutcomeProps> = ({
     setDrugs(update);
   };
 
-  const updateDrugAuthorization = (drugAuthorization: DrugAuthorization | undefined) => {
+  const updateDrugAuthorization = (newDrugAuthorization: DrugAuthorization | undefined) => {
     let isValid = true;
-    if (drugAuthorization) {
-      if (!drugAuthorization?.officer) {
-        drugAuthorization.officerErrorMessage = "Required";
-        isValid = false;
-      } else {
-        drugAuthorization.officerErrorMessage = "";
+    isValid = updateDrugAuthorizationFromInput(newDrugAuthorization, "officer");
+    isValid = updateDrugAuthorizationFromInput(newDrugAuthorization, "date") && isValid;
+    return isValid;
+  };
+
+  const updateDrugAuthorizationFromInput = (newDrugAuthorization: DrugAuthorization | undefined, type: string) => {
+    let isValid = true;
+    if (newDrugAuthorization) {
+      if(type === "officer")
+      {
+        if (!newDrugAuthorization?.officer) {
+          newDrugAuthorization.officerErrorMessage = "Required";
+          isValid = false;
+        } else {
+          newDrugAuthorization.officerErrorMessage = "";
+        }
       }
-      if (!drugAuthorization?.date) {
-        drugAuthorization.dateErrorMessage = "Required";
-        isValid = false;
-      } else {
-        drugAuthorization.dateErrorMessage = "";
+      if(type === "date")
+      {
+        if (!newDrugAuthorization?.date) {
+          newDrugAuthorization.dateErrorMessage = "Required";
+          isValid = false;
+        } else {
+          newDrugAuthorization.dateErrorMessage = "";
+        }
       }
-    } else {
-      isValid = false;
+      setDrugAuthorization(newDrugAuthorization);
     }
-    setDrugAuthorization(drugAuthorization);
     return isValid;
   };
 
@@ -396,7 +405,7 @@ export const EditAnimalOutcome: FC<EditAnimalOutcomeProps> = ({
           <AddDrugAuthorization
             drugAuthorization={drugAuthorization}
             agency={complaintData?.ownedBy ?? "COS"}
-            update={updateDrugAuthorization}
+            update={updateDrugAuthorizationFromInput}
           />
         </>
       );
@@ -439,7 +448,6 @@ export const EditAnimalOutcome: FC<EditAnimalOutcomeProps> = ({
           }
           updateDrug(item);
         });
-
       isValid = updateDrugAuthorization(drugAuthorization) && isDrugItemValid;
     }
 

frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal.tsx

@@ -45,7 +45,7 @@ export const HWCROutcomeByAnimal: FC = () => {
     drugAuthorization: 
     {
       officer: assigned?.value ?? "",
-      date: undefined,
+      date: new Date(),
     },
     outcome: undefined,
     officer: assigned,

frontend/src/assets/sass/complaint.scss

@@ -583,6 +583,27 @@ p {
   }
 }
 
+.drug-auth-details-label-input-pair {
+  display: flex;
+  min-height: 70px;
+
+  label {
+    color: $gray-500;
+    margin-top: 6px;
+    min-width: 191px;
+    max-width: 191px;
+  }
+
+  .comp-details-input {
+    flex-basis: 100%;
+    color: $gray-900;
+
+    i.bi {
+      color: $gray-500;
+    }
+  }
+}
+
 .comp-details-label-div-pair {
   display: flex;
   align-items: center;