@pih/esm-referrals-queue-app 2.0.0-pre.11 → 2.0.0-pre.12

package/dist/pih-esm-referrals-queue-app.js.buildmanifest.json

@@ -44,7 +44,7 @@
         "132.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "2d87332c94fc325b50c8",
+      "hash": "f0ec2086103a5bfe7fee",
       "childrenByOrder": {}
     },
     {
@@ -95,7 +95,7 @@
         "main.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "e58b17deeea05be8f913",
+      "hash": "6b108a42d6b242e0afac",
       "childrenByOrder": {}
     },
     {
@@ -150,9 +150,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 282,
+      "size": 375,
       "sizes": {
-        "javascript": 282
+        "javascript": 375
       },
       "names": [],
       "idHints": [],
@@ -164,7 +164,7 @@
         "319.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "591af7145fbc437fe30a",
+      "hash": "8276b3c3ed78dc838866",
       "childrenByOrder": {}
     },
     {
@@ -197,9 +197,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 257,
+      "size": 335,
       "sizes": {
-        "javascript": 257
+        "javascript": 335
       },
       "names": [],
       "idHints": [],
@@ -211,7 +211,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "c225f62cd303ccdd2715",
+      "hash": "da6b74efbd20e349ed91",
       "childrenByOrder": {}
     },
     {
@@ -472,9 +472,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 253,
+      "size": 348,
       "sizes": {
-        "javascript": 253
+        "javascript": 348
       },
       "names": [],
       "idHints": [],
@@ -486,7 +486,7 @@
         "757.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "7c2988fe9f15d7b36662",
+      "hash": "09d28da7cd1c7d212321",
       "childrenByOrder": {}
     },
     {
@@ -494,10 +494,10 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1032574,
+      "size": 1032276,
       "sizes": {
         "consume-shared": 126,
-        "javascript": 1032448
+        "javascript": 1032150
       },
       "names": [],
       "idHints": [],
@@ -509,7 +509,7 @@
         "830.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "a2d7e01b34f127910d41",
+      "hash": "910b36549298f5eeeb36",
       "childrenByOrder": {}
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pih/esm-referrals-queue-app",
-  "version": "2.0.0-pre.11",
+  "version": "2.0.0-pre.12",
   "license": "MPL-2.0",
   "description": "A page for viewing the J9 Home Visits from CommCare",
   "browser": "dist/pih-esm-referrals-queue-app.js",

package/src/referrals-queue/referrals-queue.component.tsx

@@ -83,32 +83,30 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
         </Heading>
         <div className={styles.controlsContainer}>
           <div className={styles.inputContainer}>
-            <div className={styles.dateInputContainer}>
-              <DatePicker
-                dateFormat="d/M/Y"
-                datePickerType="range"
-                locale={language === "ht" ? "fr" : language}
-                maxDate={new Date().toISOString()}
-                onChange={(date) => {
-                  if (date && date.length > 0) {
-                    setFromDate(date ? moment(date[0]) : null);
-                    if (date.length > 1) {
-                      setToDate(date ? moment(date[1]) : null);
-                    }
+            <DatePicker
+              dateFormat="d/M/Y"
+              datePickerType="range"
+              locale={language === "ht" ? "fr" : language}
+              maxDate={new Date().toISOString()}
+              onChange={(date) => {
+                if (date && date.length > 0) {
+                  setFromDate(date ? moment(date[0]) : null);
+                  if (date.length > 1) {
+                    setToDate(date ? moment(date[1]) : null);
                   }
-                }}
-                value={[fromDate.toISOString(), toDate.toISOString()]}
-              >
-                <DatePickerInput id="from-date" labelText={t("from", "From")} />
-                <DatePickerInput id="to-date" labelText={t("to", "To")} />
-              </DatePicker>
-            </div>
+                }
+              }}
+              value={[fromDate.toISOString(), toDate.toISOString()]}
+            >
+              <DatePickerInput id="from-date" labelText={t("from", "From")} />
+              <DatePickerInput id="to-date" labelText={t("to", "To")} />
+            </DatePicker>
           </div>
           <div className={styles.inputContainer}>
-            <div style={{ width: 300 }}>
+            <div style={{ width: 400 }}>
               <Dropdown
                 id="referral-type"
-                label=""
+                label={t("select-referral-type", "Select Referral Type")}
                 titleText={t("referral-type", "Referral Type")}
                 items={referralTypes}
                 onChange={(e) => setReferralTypeFilter(e.selectedItem)}
@@ -116,7 +114,7 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div>
+            <div style={{ width: 400 }}>
               <label htmlFor="query-input">
                 <Trans i18nKey="filter-by-patient">Filter by patient</Trans>
               </label>
@@ -128,10 +126,10 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div style={{ width: 300 }}>
+            <div style={{ width: 400 }}>
               <Dropdown
                 id="status"
-                label=""
+                label={t("select-status", "Select Status")}
                 titleText={t("status", "Status")}
                 items={statuses}
                 onChange={(e) => setStatusFilter(e.selectedItem)}

package/src/referrals-queue/referrals-queue.scss

@@ -6,13 +6,9 @@
   max-width: 1500px;
 }
 
-
 .tableContainer {
   height: 500px;
   overflow-x: auto;
-  margin: 0 1rem;
-  border: 2px solid lightgrey;
-  border-radius: 0.25rem;
 }
 
 .controlsContainer {
@@ -26,14 +22,6 @@
   min-width: 300px;
   text-align: left;
   padding:  0.5rem;
-}
-
-.inputContainer label {
-  display: inline-block;
-  margin: 0 0.5rem 0.5rem 0;
-}
-
-.dateInputContainer {
-  margin: 2rem 2rem 1rem 0;
+  align-items: flex-end;
 }
 

package/src/referrals-queue/referrals-queue.test.tsx

@@ -93,7 +93,7 @@ describe("referrals queue", () => {
     screen.getByText("28 Mar");
   });
 
-  // TODO: fix and re-enable
+  // TODO figure out how to test links
   it.skip("navigates to the links", async () => {
     const table = screen.getByRole("table");
     const pt0DashLink = within(table).getByText(referrals[0].zl_emr_id);
@@ -125,32 +125,42 @@ describe("referrals queue", () => {
     expect(within(table).getByText("Test Complete").tagName).not.toBe("A"); // the actual test
   });
 
-  it.skip("filters by referral type", () => {
-    const dropdown = screen.getByLabelText("Referral Type", {
-      selector: "select",
-    });
-    fireEvent.change(dropdown, { target: { value: "Mental Health" } });
+  it("filters by referral type", () => {
+    fireEvent.click(screen.getByLabelText("Referral Type", {
+      selector: "button",
+    }));
+    fireEvent.click(screen.getByText("Mental Health",  {
+      selector: "div"
+    }));
     expect(screen.queryByText("PTID1")).toBeNull();
     expect(screen.queryByText("PTID2")).not.toBeNull();
     expect(screen.queryByText("PTID3")).toBeNull();
   });
 
-  it.skip("infers list of referral types from data", () => {
-    const dropdown = screen.getByLabelText("Referral Type", {
-      selector: "select",
-    });
-    fireEvent.change(dropdown, { target: { value: "Test Referral Type" } });
-    expect(screen.queryByDisplayValue("Test Referral Type")).not.toBeNull();
+  it("infers list of referral types from data", () => {
+    expect(screen.queryByText("Test Referral Type", { selector: "span" })).toBeNull();  // sanity check
+    fireEvent.click(screen.getByLabelText("Referral Type", {
+      selector: "button",
+    }));
+    fireEvent.click(screen.getByText("Test Referral Type",  {
+      selector: "div"
+    }));
+    expect(screen.queryByText("Test Referral Type", { selector: "span" })).not.toBeNull();
   });
 
-  it.skip("filters by statuses, with dropdown inferred from data", () => {
-    const dropdown = screen.getByLabelText("Status", { selector: "select" });
-    fireEvent.change(dropdown, { target: { value: "Test Complete" } });
+  it("filters by statuses, with dropdown inferred from data", () => {
+    fireEvent.click(screen.getByLabelText("Status", {
+      selector: "button",
+    }));
+    fireEvent.click(screen.getByText("Test Complete",  {
+      selector: "div"
+    }));
     expect(screen.queryByText("PTID1")).toBeNull();
     expect(screen.queryByText("PTID2")).toBeNull();
     expect(screen.queryByText("PTID3")).not.toBeNull();
   });
 
+  // TODO figure out how to interact with Carbon datepicker
   it.skip("calls getReferrals with the correct date arguments", () => {
     const monthAgoString = "2020-09-30";
     expect(mockedGetReferrals).lastCalledWith({

package/translations/en.json

@@ -8,6 +8,8 @@
   "referral-date": "Referral Date",
   "referral-type": "Referral Type",
   "referrals-queue": "Referrals Queue",
+  "select-referral-type": "Select Referral Type",
+  "select-status": "Select Status",
   "status": "Status",
   "to": "To"
 }

package/translations/es.json

@@ -8,6 +8,8 @@
   "referral-date": "Fecha de referencia",
   "referral-type": "Tipo de referencia",
   "referrals-queue": "Cola de referencias",
+  "select-referral-type": "Seleccionar tipo de referencia",
+  "select-status": "Seleccionar estado",
   "status": "Estado",
   "to": "Hasta"
 }

package/translations/fr.json

@@ -8,6 +8,8 @@
   "referral-date": "Date de Référé",
   "referral-type": "Type Référé",
   "referrals-queue": "List de Référé",
+  "select-referral-type": "Sélectionnez le type de référé",
+  "select-status": "Sélectionnez le état",
   "status": "État",
   "to": "à"
 }