Merge pull request #67 from PiusKariuki/chore/procedures-specify-fiel…

…d-SJT-71 Chore/procedures specify field sjt 71
IntelliSOFT-Consulting · Aug 26, 2024 · 7a10a1d · 7a10a1d
2 parents 58267ce + b10421f
commit 7a10a1d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/packages/esm-procedure-app/package.json b/packages/esm-procedure-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sjthc/esm-procedure-app",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
   "browser": "dist/sjthc-esm-procedure-app.js",
@@ -113,5 +113,5 @@
     "webpack-cli": "^5.1.4"
   },
   "packageManager": "[email protected]",
-  "gitHead": "804db3d0620a3ab202a82f9775d991614561b962"
+  "gitHead": "4b10a610438ac44aeeaa232264138487ab59dbbf"
 }
diff --git a/...e-app/src/form/procedures-orders/add-procedures-order/procedures-order-form.component.tsx b/...e-app/src/form/procedures-orders/add-procedures-order/procedures-order-form.component.tsx
@@ -76,6 +76,7 @@ export function ProceduresOrderForm({
     error: errorLoadingTestTypes,
   } = useProceduresTypes();
   const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [showOtherBodySite, setShowBodySite] = useState(false);
   const {
     items: { answers: specimenSourceItems },
     isLoading: isLoadingSpecimenSourceItems,
@@ -93,9 +94,11 @@ export function ProceduresOrderForm({
     ) || {}
   ).required;
 
+  const bleedingSiteID = "162668AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+  const otherBleedingSiteOptionID = "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
   const {
-    items: { answers: bodySiteItems, name },
-  } = useConceptById("162668AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+    items: {answers: bodySiteItems, name},
+  } = useConceptById(bleedingSiteID);
 
   const proceduresOrderFormSchema = z.object({
     instructions: z.string().optional(),
@@ -146,6 +149,7 @@ export function ProceduresOrderForm({
     previousOrder: z.string().optional(),
     frequency: z.string().optional(),
     bodySite: z.string().optional(),
+    otherBodySite: z.string().optional(),
   });
 
   const orderFrequencies: Array<OrderFrequency> = useMemo(
@@ -156,7 +160,8 @@ export function ProceduresOrderForm({
   const {
     control,
     handleSubmit,
-    formState: { errors, defaultValues, isDirty },
+    formState: {errors, defaultValues, isDirty,},
+    watch
   } = useForm<ProcedureOrderBasketItem>({
     mode: "all",
     resolver: zodResolver(proceduresOrderFormSchema),
@@ -165,6 +170,17 @@ export function ProceduresOrderForm({
     },
   });
 
+  useEffect(() => {
+    const subscription = watch((value, {name, type}) => {
+      if (name === "bodySite") {
+          setShowBodySite(value.bodySite == otherBleedingSiteOptionID)
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
+  watch('bodySite',)
+
   const orderReasonUuids =
     (
       config.labTestsWithOrderReasons?.find(
@@ -405,6 +421,35 @@ export function ProceduresOrderForm({
               </Column>
             </Grid>
           )}
+          {showOtherBodySite && (
+            <Grid className={styles.gridRow}>
+              <Column lg={16} md={8} sm={4}>
+                <InputWrapper>
+                  <Controller
+                    name="otherBodySite"
+                    control={control}
+                    render={({field: {onChange, onBlur, value}}) => (
+                      <TextArea
+                        enableCounter
+                        id="specifyBodySite"
+                        size="lg"
+                        labelText={t(
+                          "specifyBodySite",
+                          "Specify Other Body Site"
+                        )}
+                        value={value}
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        maxCount={500}
+                        invalid={errors.otherBodySite?.message}
+                        invalidText={errors.otherBodySite?.message}
+                      />
+                    )}
+                  />
+                </InputWrapper>
+              </Column>
+            </Grid>
+          )}
           <Grid className={styles.gridRow}>
             <Column lg={16} md={8} sm={4}>
               <InputWrapper>

diff --git a/packages/esm-procedure-app/src/form/procedures-orders/api.ts b/packages/esm-procedure-app/src/form/procedures-orders/api.ts
@@ -120,6 +120,7 @@ export function prepProceduresOrderPostData(
       instructions: order.instructions,
       orderReason: order.orderReason,
       bodySite: order.bodySite,
+      otherBodySite: order.otherBodySite
     };
     if (order.urgency === "ON_SCHEDULED_DATE") {
       payload["scheduledDate"] = order.scheduleDate;

diff --git a/packages/esm-procedure-app/src/types/index.ts b/packages/esm-procedure-app/src/types/index.ts
@@ -425,6 +425,7 @@ export interface ProcedureOrderBasketItem extends OrderBasketItem {
   urgency?: string;
   instructions?: string;
   previousOrder?: string;
+  otherBodySite?: string;
   orderReason?: string;
   scheduledDate?: string | Date;
   commentsToFulfiller?: string;