Merge branch 'develop' into form-draft

cypress/e2e/resource_spec/filter.cy.ts

@@ -44,17 +44,19 @@ describe("Resource filter", () => {
       "ASC Modified Date",
       "DESC Modified Date",
       "ASC Created Date",
-    ].forEach((select) => {
-      cy.get("[name='ordering']").select(select);
+    ].forEach((option) => {
+      cy.get("div [id='ordering'] > div > button").click();
+      cy.get("li").contains(option).click();
       cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
       cy.contains("Apply").click().wait("@resource_filter");
       cy.contains("Filters").click();
     });
   });
 
   it("filter by emergency case", () => {
-    ["yes", "no"].forEach((select) => {
-      cy.get("[name='emergency']").select(select);
+    ["yes", "no"].forEach((option) => {
+      cy.get("div [id='emergency'] > div > button").click();
+      cy.get("li").contains(option).click();
       cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
       cy.contains("Apply").click().wait("@resource_filter");
       cy.contains("Filters").click();
@@ -63,42 +65,18 @@ describe("Resource filter", () => {
 
   it("filter by created date", () => {
     cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
-    cy.get("[name='created_date_after']").click();
-    cy.get(
-      "[role='button'][aria-label='Move backward to switch to the previous month.']"
-    ).click();
-    cy.get("td[tabindex='-1']")
-      .first()
-      .then(($td) => {
-        $td[0].click();
-
-        cy.get("td[tabindex='-1']")
-          .eq(14)
-          .then(($td2) => {
-            $td2[0].click();
-          });
-      });
+    cy.get("input[name='created_date_start']").click();
+    cy.get("#date-1").click();
+    cy.get("#date-1").click();
     cy.contains("Apply").click();
     cy.wait("@resource_filter");
   });
 
   it("filter by modified date", () => {
     cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
-    cy.get("[name='modified_date_after']").click();
-    cy.get(
-      "[role='button'][aria-label='Move backward to switch to the previous month.']"
-    ).click();
-    cy.get("td[tabindex='-1']")
-      .first()
-      .then(($td) => {
-        $td[0].click();
-
-        cy.get("td[tabindex='-1']")
-          .eq(14)
-          .then(($td2) => {
-            $td2[0].click();
-          });
-      });
+    cy.get("input[name='modified_date_start']").click();
+    cy.get("#date-1").click();
+    cy.get("#date-1").click();
     cy.contains("Apply").click();
     cy.wait("@resource_filter");
   });

src/Components/Common/DateRangeInputV2.tsx

@@ -7,6 +7,7 @@ export type DateRange = {
 };
 
 type Props = {
+  name?: string;
   value?: DateRange;
   onChange: (value: DateRange) => void;
   className?: string;
@@ -23,6 +24,7 @@ const DateRangeInputV2 = ({ value, onChange, ...props }: Props) => {
     <div className="flex gap-2">
       <div className="flex-auto">
         <DateInputV2
+          name={props.name + "_start"}
           className={props.className}
           value={start}
           onChange={(start) => {
@@ -38,6 +40,7 @@ const DateRangeInputV2 = ({ value, onChange, ...props }: Props) => {
       </div>
       <div className="flex-auto">
         <DateInputV2
+          name={props.name + "_end"}
           className={props.className}
           value={end}
           onChange={(end) => onChange({ start, end })}

src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res

@@ -89,8 +89,8 @@ let getStatus = (min, minText, max, maxText, val) => {
                   {str(Pain.regionToString(state.region))}
                 </span>
               </div>
-              <div className="flex flex-col sm:flex-row gap-2 mt-2">
-                <div>
+              <div className="flex flex-col sm:flex-row justify-center mt-2">
+                <div className="w-full">
                   <Slider
                     title={""}
                     className="px-0 py-5 m-0"

src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res

@@ -98,8 +98,8 @@ let make = (
                   {str(PressureSore.regionToString(state.region))}
                 </span>
               </div>
-              <div className="flex flex-col sm:flex-row gap-2 mt-2">
-                <div>
+              <div className="flex flex-col sm:flex-row justify-center mt-2">
+                <div className="w-full">
                   <label className="block font-medium text-black text-left"> {str("Width")} </label>
                   <input
                     type_="number"

src/Components/DeathReport/DeathReport.tsx

@@ -11,7 +11,6 @@ import moment from "moment";
 import { formatDate } from "../../Utils/utils";
 import Page from "../Common/components/Page";
 import Form from "../Form/Form";
-import { createFormContext } from "../Form/FormContext";
 import { useTranslation } from "react-i18next";
 import { navigate } from "raviger";
 
@@ -42,8 +41,6 @@ type DeathReport = {
   facility: string;
 };
 
-const deathReportContext = createFormContext<DeathReport>();
-
 export default function PrintDeathReport(props: { id: string }) {
   const initialState = {
     name: "",
@@ -355,9 +352,8 @@ export default function PrintDeathReport(props: { id: string }) {
           backUrl={`/facility/${patientData.facility}/patient/${id}`}
           className="w-full"
         >
-          <Form
+          <Form<DeathReport>
             disabled={isPrintMode}
-            context={deathReportContext}
             defaults={patientData}
             asyncGetDefaults={async () => patientData}
             submitLabel="Preview"

src/Components/Facility/AssetCreate.tsx

@@ -538,10 +538,10 @@ const AssetCreate = (props: AssetProps) => {
                           setLocation((selectedId as string) || "")
                         }
                         selected={location}
-                        errors=""
                         showAll={false}
                         multiple={false}
                         facilityId={facilityId as unknown as number}
+                        errors={state.errors.location}
                       />
                     </div>
                     {/* Asset Type */}

src/Components/Facility/CentralNursingStation.tsx

@@ -158,6 +158,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       </FieldLabel>
                       <div className="flex gap-2 w-full items-center">
                         <LocationSelect
+                          key={qParams.location}
                           name="Facilities"
                           setSelected={(location) => updateQuery({ location })}
                           selected={qParams.location}

src/Components/Facility/Consultations/LiveFeed.tsx

@@ -1,9 +1,7 @@
-/* eslint-disable eqeqeq */
 import { useEffect, useState, useRef } from "react";
 import { useDispatch } from "react-redux";
 import screenfull from "screenfull";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import loadable from "@loadable/component";
 import {
   listAssetBeds,
   partialUpdateAssetBed,
@@ -15,23 +13,16 @@ import {
   useMSEMediaPlayer,
 } from "../../../Common/hooks/useMSEplayer";
 import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
-const PageTitle = loadable(() => import("../../Common/PageTitle"));
 import * as Notification from "../../../Utils/Notifications.js";
-import {
-  Card,
-  CardContent,
-  InputLabel,
-  Modal,
-  Tooltip,
-} from "@material-ui/core";
 import { FeedCameraPTZHelpButton } from "./Feed";
 import { AxiosError } from "axios";
-import { isNull } from "lodash";
 import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../models";
-import { LegacyTextInputField } from "../../Common/HelperInputFields";
 import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
+import Page from "../../Common/components/Page";
+import ConfirmDialogV2 from "../../Common/ConfirmDialogV2";
+import { FieldLabel } from "../../Form/FormFields/FormField";
 
 const LiveFeed = (props: any) => {
   const middlewareHostname =
@@ -294,85 +285,50 @@ const LiveFeed = (props: any) => {
   }
 
   return (
-    <div className="mt-4 px-6 mb-2">
-      <PageTitle title="Live Feed" hideBack={true} />
-
+    <Page title="Live Feed" hideBack>
       {toDelete && (
-        <Modal
-          className="flex h-fit justify-center items-center top-1/2"
-          open={!isNull(toDelete)}
-        >
-          <Card>
-            <CardContent>
-              <h5>
-                Confirm delete preset: {toDelete.meta.preset_name} (in bed:{" "}
-                {toDelete.bed_object.name})?
-              </h5>
-              <hr />
-              <div className="flex gap-3 justify-end mt-2">
-                <button
-                  className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
-                  onClick={() => deletePreset(toDelete.id)}
-                >
-                  Confirm
-                </button>
-                <button className="text-sm" onClick={() => setToDelete(null)}>
-                  Cancel
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-        </Modal>
+        <ConfirmDialogV2
+          show
+          title="Are you sure you want to delete this preset?"
+          description={
+            <span>
+              <p>
+                Preset: <strong>{toDelete.meta.preset_name}</strong>
+              </p>
+              <p>
+                Bed: <strong>{toDelete.bed_object.name}</strong>
+              </p>
+            </span>
+          }
+          action="Delete"
+          variant="danger"
+          onClose={() => setToDelete(null)}
+          onConfirm={() => deletePreset(toDelete.id)}
+        />
       )}
       {toUpdate && (
-        <Modal
-          className="flex h-fit justify-center items-center top-1/2"
-          open={!isNull(toUpdate)}
+        <ConfirmDialogV2
+          show
+          title="Update Preset"
+          description={"Preset: " + toUpdate.meta.preset_name}
+          action="Update"
+          variant="primary"
+          onClose={() => setToUpdate(null)}
+          onConfirm={() => updatePreset(toUpdate)}
         >
-          <Card>
-            <CardContent>
-              <h5>Update Preset</h5>
-              <hr />
-              <div>
-                <InputLabel id="asset-type">Bed</InputLabel>
-                <BedSelect
-                  name="bed"
-                  setSelected={(selected) => setBed(selected as BedModel)}
-                  selected={bed}
-                  error=""
-                  multiple={false}
-                  location={cameraAsset.location_id}
-                  facility={cameraAsset.facility_id}
-                />
-              </div>
-              <div>
-                <InputLabel id="location">Preset Name</InputLabel>
-                <LegacyTextInputField
-                  name="name"
-                  id="location"
-                  variant="outlined"
-                  margin="dense"
-                  type="text"
-                  value={preset}
-                  onChange={(e) => setNewPreset(e.target.value)}
-                  errors=""
-                />
-              </div>
-
-              <div className="flex gap-3 justify-end mt-2">
-                <button
-                  onClick={() => updatePreset(toUpdate)}
-                  className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
-                >
-                  Confirm
-                </button>
-                <button className="text-sm" onClick={() => setToUpdate(null)}>
-                  Cancel
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-        </Modal>
+          <div className="flex flex-col mt-4">
+            <FieldLabel required>Bed</FieldLabel>
+            <BedSelect
+              name="bed"
+              setSelected={(selected) => setBed(selected as BedModel)}
+              selected={bed}
+              error=""
+              multiple={false}
+              location={cameraAsset.location_id}
+              facility={cameraAsset.facility_id}
+            />
+          </div>
+        </ConfirmDialogV2>
       )}
       <div className="mt-4 flex flex-col">
         <div className="flex flex-col lg:flex-row gap-4 mt-4 relative">
@@ -451,30 +407,20 @@ const LiveFeed = (props: any) => {
                     .replace("ArrowRight", "→");
 
                 return (
-                  <Tooltip
-                    placement="top"
-                    arrow={true}
-                    title={
-                      <span className="text-sm font-semibold">
-                        {`${option.label}  (${shortcutKeyDescription})`}
-                      </span>
-                    }
-                    key={option.action}
+                  <button
+                    className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1 tooltip"
+                    onClick={option.callback}
                   >
-                    <button
-                      className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1"
-                      onClick={option.callback}
-                    >
-                      <span className="sr-only">{option.label}</span>
-                      {option.icon ? (
-                        <i className={`fas fa-${option.icon} md:p-2`}></i>
-                      ) : (
-                        <span className="px-2 font-bold h-full w-8 flex items-center justify-center">
-                          {option.value}x
-                        </span>
-                      )}
-                    </button>
-                  </Tooltip>
+                    <span className="sr-only">{option.label}</span>
+                    {option.icon ? (
+                      <i className={`fas fa-${option.icon} md:p-2`}></i>
+                    ) : (
+                      <span className="px-2 font-bold h-full w-8 flex items-center justify-center">
+                        {option.value}x
+                      </span>
+                    )}
+                    <span className="tooltip-text tooltip-top -translate-x-1/2 text-sm font-semibold">{`${option.label}  (${shortcutKeyDescription})`}</span>
+                  </button>
                 );
               })}
               <div className="pl-3 hideonmobilescreen">
@@ -644,7 +590,7 @@ const LiveFeed = (props: any) => {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };