From 2f2ba31e1b3070b53ce0877542c93f1cb7d19e9b Mon Sep 17 00:00:00 2001 From: Josh Gamache Date: Wed, 6 Nov 2024 15:38:16 -0700 Subject: [PATCH] chore: revise frontend components to reflect new model --- .../outcomes/hwcr-outcome-by-animal-v2.tsx | 10 +- .../oucome-by-animal/animal-outcome.tsx | 4 +- .../oucome-by-animal/create-outcome.tsx | 18 +-- .../outcomes/oucome-by-animal/drug-item.tsx | 33 +--- .../outcomes/oucome-by-animal/drug-used.tsx | 152 ++++-------------- .../oucome-by-animal/edit-outcome.tsx | 18 +-- 6 files changed, 57 insertions(+), 178 deletions(-) diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx index fadf7e959..4d4e7b66f 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx @@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks"; import { selectComplaint } from "../../../../store/reducers/complaints"; import { Button } from "react-bootstrap"; -import { AnimalOutcomeV2 } from "../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; +import { AnimalOutcomeV3 } from "../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; import { from } from "linq-to-typescript"; import { WildlifeComplaint } from "../../../../types/app/complaints/wildlife-complaint"; import { CreateAnimalOutcome } from "./oucome-by-animal/create-outcome"; @@ -61,7 +61,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { //-- outcomes is a collection of all of the animal outcomes //-- for the selected complaint - const [outcomes, setOutcomes] = useState>([]); + const [outcomes, setOutcomes] = useState>([]); //-- modals //-- delete animal outcome modal @@ -87,7 +87,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { //-- save an item from the create-complaint component //-- when saving make sure that the outcome is successfully //-- saved before adding the outcome to the list of outcomes - const handleSave = (item: AnimalOutcomeV2) => { + const handleSave = (item: AnimalOutcomeV3) => { dispatch(createAnimalOutcome(id, item)).then((result) => { if (result === "success") { dispatch(getCaseFile(id)); @@ -99,7 +99,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { //-- save an item from the create-complaint component //-- when saving make sure that the outcome is successfully //-- saved before adding the outcome to the list of outcomes - const handleUpdate = (item: AnimalOutcomeV2) => { + const handleUpdate = (item: AnimalOutcomeV3) => { dispatch(updateAnimalOutcome(caseId, item)).then((result) => { if (result === "success") { dispatch(getCaseFile(id)); @@ -217,7 +217,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { {showForm && ( (outcomes)} + index={getNextOrderNumber(outcomes)} assignedOfficer={assignedOfficer} agency={agency} species={species} diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx index 2f411c692..918c324a4 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from "react"; -import { AnimalOutcomeV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; +import { AnimalOutcomeV3 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; import { useAppSelector } from "../../../../../hooks/hooks"; import { selectAgeDropdown, @@ -19,7 +19,7 @@ import { Button, Card, Col, ListGroup, Row } from "react-bootstrap"; type props = { index: number; - data: AnimalOutcomeV2; + data: AnimalOutcomeV3; agency: string; edit: Function; remove: Function; diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx index ace0ec9ab..96a95f8c5 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx @@ -12,9 +12,9 @@ import { selectThreatLevelDropdown, selectWildlifeComplaintOutcome, } from "../../../../../store/reducers/code-table"; -import { AnimalOutcomeV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; +import { AnimalOutcomeV3 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; import { AnimalTagV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-tag"; -import { DrugUsedV2 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used"; +import { DrugUsedV3 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used"; import Option from "../../../../../types/app/option"; import { selectOfficerListByAgency } from "../../../../../store/reducers/officer"; import { from } from "linq-to-typescript"; @@ -38,7 +38,7 @@ type props = { //-- this object is used to create an empty outcome //-- do not export this object -const defaultOutcome: AnimalOutcomeV2 = { +const defaultOutcome: AnimalOutcomeV3 = { id: "", species: "", sex: "", @@ -77,7 +77,7 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer //-- new input data // eslint-disable-line no-console, max-len - const [data, applyData] = useState({ ...defaultOutcome, species }); + const [data, applyData] = useState({ ...defaultOutcome, species }); //-- refs // eslint-disable-next-line @typescript-eslint/no-array-constructor @@ -88,7 +88,7 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer //-- input handlers const updateModel = ( property: string, - value: string | Date | Array | DrugAuthorization | null | undefined, + value: string | Date | Array | DrugAuthorization | null | undefined, ) => { const model = { ...data, [property]: value }; applyData(model); @@ -253,7 +253,7 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer const addDrugUsed = () => { const { drugs } = data; - const nextOrder = getNextOrderNumber(drugs); + const nextOrder = getNextOrderNumber(drugs); let id = uuidv4().toString(); @@ -264,11 +264,9 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer vial: "", drug: "", amountUsed: "", - amountDiscarded: "", - reactions: "", remainingUse: null, injectionMethod: "", - discardMethod: "", + additionalComments: "", officer: officer ?? "", order: nextOrder, }, @@ -303,7 +301,7 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer drugRefs.current = update.length === 0 ? [] : drugRefs.current.filter((item) => item.id !== null && item.id === id); }; - const updateDrugUsed = (drug: DrugUsedV2) => { + const updateDrugUsed = (drug: DrugUsedV3) => { const { drugs: source } = data; const items = source.filter(({ id }) => id !== drug.id); diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx index bd89fd018..6dd32be2c 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx @@ -11,12 +11,10 @@ type props = { vial: string; drug: string; amountUsed: string; - amountDiscarded: string; injectionMethod: string; - discardMethod: string; + additionalComments: string; - reactions: string; remainingUse: string | null; officer?: string; @@ -27,10 +25,8 @@ export const DrugItem: FC = ({ vial, drug, amountUsed, - amountDiscarded, injectionMethod, - discardMethod, - reactions, + additionalComments, remainingUse, officer, date, @@ -110,33 +106,14 @@ export const DrugItem: FC = ({
{remaining}
- {remainingUse === "DISC" && ( - <> - -
Amount discarded
-
- {amountDiscarded} {amountDiscarded ? "ml" : ""} -
- - -
Discard method
-
{discardMethod}
- - - )} -
Adverse Reactions
-
{reactions ? <>{reactions} : "None"}
+
Additional comments
+
{additionalComments ? <>{additionalComments} : "None"}
+ ((props, ref) => { const drugUseMethods = useAppSelector(selectDrugUseMethods); const remainingDrugUse = useAppSelector(selectRemainingDrugUse); - const { - id, - vial, - drug, - amountUsed, - amountDiscarded, - reactions, - remainingUse, - injectionMethod, - discardMethod, - order, - remove, - update, - } = props; - - const [showDiscarded, setShowDiscarded] = useState(remainingUse === "DISC"); + const { id, vial, drug, amountUsed, remainingUse, injectionMethod, additionalComments, order, remove, update } = + props; //-- error messages // const [vialError, setVialError] = useState(""); const [drugError, setDrugError] = useState(""); - const [amountDiscardedError, setAmountDiscardedError] = useState(""); const [amountUsedError, setAmountUsedError] = useState(""); const [injectionMethodError, setInjectionMethodError] = useState(""); - const [discardMethodError, setDiscardMethodError] = useState(""); + const [drugAdditionalCommentsErrorMsg, setDrugAdditionalCommentsErrorMsg] = useState(""); //-- this allows the developers to consume functions within the //-- drug-used component in a parent component @@ -86,14 +69,6 @@ export const DrugUsed = forwardRef((props, ref) => { result = false; } - if (amountDiscarded && !isPositiveNum(amountDiscarded)) { - setAmountDiscardedError("Must be a positive number"); - result = false; - } else if (amountDiscarded && Number.parseFloat(amountDiscarded) === 0) { - setAmountDiscardedError("Must be a positive number"); - result = false; - } - if (!vial) { setVialError(REQUIRED); result = false; @@ -109,21 +84,6 @@ export const DrugUsed = forwardRef((props, ref) => { result = false; } - //-- edge case - //-- if the user selects DISC from remainingUse then check to - //-- make sure that the user also provides a discard amount and method - if (remainingUse === "DISC") { - if (!amountDiscarded) { - setAmountDiscardedError(REQUIRED); - result = false; - } - - if (!discardMethod) { - setDiscardMethodError(REQUIRED); - result = false; - } - } - return result; }; @@ -149,20 +109,13 @@ export const DrugUsed = forwardRef((props, ref) => { vial, drug, amountUsed, - amountDiscarded, - reactions, remainingUse, injectionMethod, - discardMethod, + additionalComments, order, }; let updatedDrug = { ...source, [property]: value }; - //-- if the user selects DISC clear the method and amount discarded - if (property === "remainingUse" && (value === "STOR" || value === "RDIS")) { - updatedDrug = { ...updatedDrug, discardMethod: "", amountDiscarded: "" }; - } - update(updatedDrug, property); }; @@ -200,18 +153,12 @@ export const DrugUsed = forwardRef((props, ref) => { }; const handleRemainingUsed = (input: string) => { - setShowDiscarded(input === "DISC"); updateModel("remainingUse", input); }; - const handleAmountDiscardedChange = (input: string) => { - updateModel("amountDiscarded", input); - setAmountDiscardedError(""); - }; - - const handleDiscardMethodChange = (input: string) => { - updateModel("discardMethod", input); - setDiscardMethodError(""); + const handleDrugAdditionalCommentsChange = (input: string) => { + updateModel("additionalComments", input); + setDrugAdditionalCommentsErrorMsg(""); }; return ( @@ -328,67 +275,26 @@ export const DrugUsed = forwardRef((props, ref) => { - {showDiscarded && ( - <> -
- -
- { - const { - target: { value }, - } = evt; - handleAmountDiscardedChange(value ?? ""); - }} - /> -
-
-
- -
- { - const { - target: { value }, - } = evt; - handleDiscardMethodChange(value ?? ""); - }} - /> -
-
- - )} - -
- -
- { - const { - target: { value }, - } = evt; - updateModel("reactions", value); - }} +
+ +
+
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 index 1bf7ec277..6faa65576 100644 --- 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 @@ -1,5 +1,5 @@ import { FC, useRef, useState } from "react"; -import { AnimalOutcomeV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; +import { AnimalOutcomeV3 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome"; import { useAppSelector } from "../../../../../hooks/hooks"; import { selectSpeciesCodeDropdown, @@ -16,7 +16,7 @@ import { BsExclamationCircleFill } from "react-icons/bs"; import { ValidationDatePicker } from "../../../../../common/validation-date-picker"; import Option from "../../../../../types/app/option"; import { AnimalTagV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-tag"; -import { DrugUsedV2 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used"; +import { DrugUsedV3 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used"; import { DrugAuthorization } from "../../../../../types/app/complaints/outcomes/wildlife/drug-authorization"; import { EarTag } from "./ear-tag"; import { from } from "linq-to-typescript"; @@ -31,7 +31,7 @@ import { ToggleError } from "../../../../../common/toast"; type props = { index: number; id: string; - outcome: AnimalOutcomeV2; + outcome: AnimalOutcomeV3; assignedOfficer: string; agency: string; update: Function; @@ -58,7 +58,7 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of const [showModal, setShowModal] = useState(false); //-- new input data - const [data, applyData] = useState({ ...outcome }); + const [data, applyData] = useState({ ...outcome }); //-- refs // eslint-disable-next-line @typescript-eslint/no-array-constructor @@ -113,7 +113,7 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of //-- input handlers const updateModel = ( property: string, - value: string | Date | Array | DrugAuthorization | null | undefined, + value: string | Date | Array | DrugAuthorization | null | undefined, ) => { const model = { ...data, [property]: value }; applyData(model); @@ -224,7 +224,7 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of const addDrugUsed = () => { const { drugs } = data; - const nextOrder = getNextOrderNumber(drugs); + const nextOrder = getNextOrderNumber(drugs); let id = uuidv4().toString(); @@ -235,11 +235,9 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of vial: "", drug: "", amountUsed: "", - amountDiscarded: "", - reactions: "", remainingUse: null, injectionMethod: "", - discardMethod: "", + additionalComments: "", officer: officer ?? "", order: nextOrder, }, @@ -274,7 +272,7 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of drugRefs.current = update.length === 0 ? [] : drugRefs.current.filter((item) => item.id !== null && item.id === id); }; - const updateDrugUsed = (drug: DrugUsedV2) => { + const updateDrugUsed = (drug: DrugUsedV3) => { const { drugs: source } = data; const items = source.filter(({ id }) => id !== drug.id);