Merge branch 'ohcnetwork:develop' into issues/8627/fix-addbed-notific…

…ation
ohcnetwork · Oct 1, 2024 · 14bda20 · 14bda20
2 parents cce41a0 + 99d79de
commit 14bda20
Show file tree

Hide file tree

Showing 46 changed files with 348 additions and 261 deletions.
diff --git a/src/Common/hooks/useExport.tsx b/src/Common/hooks/useExport.tsx
@@ -1,9 +1,7 @@
 import dayjs from "../../Utils/dayjs";
 import { useState } from "react";
-import { useDispatch } from "react-redux";
 
 export default function useExport() {
-  const dispatch: any = useDispatch();
   const [isExporting, setIsExporting] = useState(false);
 
   const getTimestamp = () => {
@@ -16,17 +14,17 @@ export default function useExport() {
 
   const exportCSV = async (
     filenamePrefix: string,
-    action: any,
+    getData: () => Promise<string | null>,
     parse = (data: string) => data,
   ) => {
     setIsExporting(true);
 
     const filename = `${filenamePrefix}_${getTimestamp()}.csv`;
 
-    const res = await dispatch(action);
-    if (res.status === 200) {
+    const data = await getData();
+    if (data) {
       const a = document.createElement("a");
-      const blob = new Blob([parse(res.data)], {
+      const blob = new Blob([parse(data)], {
         type: "text/csv",
       });
       a.href = URL.createObjectURL(blob);
@@ -39,15 +37,15 @@ export default function useExport() {
 
   const exportJSON = async (
     filenamePrefix: string,
-    action: any,
+    getData: () => Promise<{ results: object[] } | null>,
     parse = (data: string) => data,
   ) => {
     setIsExporting(true);
 
-    const res = await dispatch(action);
-    if (res.status === 200) {
+    const data = await getData();
+    if (data?.results.length) {
       const a = document.createElement("a");
-      const blob = new Blob([parse(JSON.stringify(res.data.results))], {
+      const blob = new Blob([parse(JSON.stringify(data.results))], {
         type: "application/json",
       });
       a.href = URL.createObjectURL(blob);
@@ -59,7 +57,7 @@ export default function useExport() {
   };
 
   const exportFile = (
-    action: any,
+    action: () => Promise<{ results: object[] } | string | null>,
     filePrefix = "export",
     type = "csv",
     parse = (data: string) => data,
@@ -68,13 +66,17 @@ export default function useExport() {
 
     switch (type) {
       case "csv":
-        exportCSV(filePrefix, action(), parse);
+        exportCSV(filePrefix, action as Parameters<typeof exportCSV>[1], parse);
         break;
       case "json":
-        exportJSON(filePrefix, action(), parse);
+        exportJSON(
+          filePrefix,
+          action as Parameters<typeof exportJSON>[1],
+          parse,
+        );
         break;
       default:
-        exportCSV(filePrefix, action(), parse);
+        exportCSV(filePrefix, action as Parameters<typeof exportCSV>[1], parse);
     }
   };
 

diff --git a/src/Common/hooks/useSlug.ts b/src/Common/hooks/useSlug.ts
@@ -31,6 +31,9 @@ export const useSlugs = (...prefix: string[]) => {
 const findSlug = (segments: string[], prefix: string, fallback?: string) => {
   const index = segments.findIndex((segment) => segment === prefix);
   if (index === -1) {
+    if (fallback) {
+      return fallback;
+    }
     throw new Error(
       `Prefix "${prefix}" not found in path "${segments.join("/")}"`,
     );

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
@@ -1,6 +1,5 @@
 import { Scanner } from "@yudiel/react-qr-scanner";
 import * as Notification from "../../Utils/Notifications.js";
-import { listAssets } from "../../Redux/actions";
 import { assetClassProps, AssetData } from "./AssetTypes";
 import { useState, useEffect, lazy } from "react";
 import { Link, navigate } from "raviger";
@@ -317,13 +316,12 @@ const AssetsList = () => {
                   },
                   {
                     label: "Export Assets (JSON)",
-                    action: () =>
-                      authorizedForImportExport &&
-                      listAssets({
-                        ...qParams,
-                        json: true,
-                        limit: totalCount,
-                      }),
+                    action: async () => {
+                      const { data } = await request(routes.listAssets, {
+                        query: { ...qParams, json: true, limit: totalCount },
+                      });
+                      return data ?? null;
+                    },
                     type: "json",
                     filePrefix: `assets_${facility?.name ?? "all"}`,
                     options: {
@@ -334,13 +332,12 @@ const AssetsList = () => {
                   },
                   {
                     label: "Export Assets (CSV)",
-                    action: () =>
-                      authorizedForImportExport &&
-                      listAssets({
-                        ...qParams,
-                        csv: true,
-                        limit: totalCount,
-                      }),
+                    action: async () => {
+                      const { data } = await request(routes.listAssets, {
+                        query: { ...qParams, csv: true, limit: totalCount },
+                      });
+                      return data ?? null;
+                    },
                     type: "csv",
                     filePrefix: `assets_${facility?.name ?? "all"}`,
                     options: {

diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -12,6 +12,7 @@ import useFullscreen from "../../Common/hooks/useFullscreen";
 import useBreakpoints from "../../Common/hooks/useBreakpoints";
 import { GetPresetsResponse } from "./routes";
 import VideoPlayer from "./videoPlayer";
+import MonitorAssetPopover from "../Common/MonitorAssetPopover";
 
 interface Props {
   children?: React.ReactNode;
@@ -145,10 +146,10 @@ export default function CameraFeed(props: Props) {
   );
 
   return (
-    <div ref={playerWrapperRef} className="flex flex-col justify-center">
+    <div ref={playerWrapperRef} className="flex h-full flex-col justify-center">
       <div
         className={classNames(
-          "flex max-h-screen flex-col justify-center",
+          "flex max-h-screen min-h-full flex-col justify-center",
           props.className,
           isFullscreen ? "bg-black" : "bg-zinc-100",
           isIOS && isFullscreen && "px-20",
@@ -157,7 +158,7 @@ export default function CameraFeed(props: Props) {
         <div
           className={classNames(
             isFullscreen ? "hidden lg:flex" : "flex",
-            "items-center justify-between px-4 py-0.5 transition-all duration-500 ease-in-out lg:py-1",
+            "shrink-0 items-center justify-between px-4 py-0.5 transition-all duration-500 ease-in-out lg:py-1",
             (() => {
               if (playerStatus !== "playing") {
                 return "bg-black text-zinc-400";
@@ -185,6 +186,10 @@ export default function CameraFeed(props: Props) {
             <span className="text-xs font-bold md:text-sm">
               {props.asset.name}
             </span>
+            <MonitorAssetPopover
+              asset={props.asset}
+              className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
+            />
             {!isIOS && (
               <div
                 className={classNames(
@@ -202,7 +207,7 @@ export default function CameraFeed(props: Props) {
             )}
           </div>
         </div>
-        <div className="group relative aspect-video bg-black">
+        <div className="group relative flex-1 bg-black">
           {/* Notifications */}
           <FeedAlert state={state} />
           {playerStatus === "playing" && <FeedWatermark />}
@@ -250,7 +255,7 @@ export default function CameraFeed(props: Props) {
           <VideoPlayer
             playerRef={playerRef}
             streamUrl={streamUrl}
-            className="absolute inset-x-0 mx-auto aspect-video max-h-full w-full"
+            className="max-h-[calc(100vh-40px)] w-full object-contain"
             onPlay={() => {
               setPlayedOn(new Date());
               setState("playing");
@@ -266,6 +271,7 @@ export default function CameraFeed(props: Props) {
             }}
             onError={props.onStreamError}
           />
+
           {inlineControls && playerStatus === "playing" && controls}
         </div>
         {!inlineControls && (

diff --git a/src/Components/Common/Export.tsx b/src/Components/Common/Export.tsx
@@ -6,14 +6,17 @@ import DropdownMenu, {
 import ButtonV2 from "../../Components/Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import useExport from "../../Common/hooks/useExport";
+import { Route } from "../../Utils/request/types";
+import request from "../../Utils/request/request";
 
 interface ExportItem {
   options?: DropdownItemProps;
   type?: "csv" | "json";
   filePrefix?: string;
   label: string;
   parse?: (data: string) => string;
-  action?: any;
+  action?: Parameters<ReturnType<typeof useExport>["exportFile"]>[0];
+  route?: Route<string | { results: object[] }, unknown>;
 }
 
 interface ExportMenuProps {
@@ -27,7 +30,8 @@ interface ExportButtonProps {
   tooltip?: string | undefined;
   tooltipClassName?: string;
   type?: "csv" | "json";
-  action?: any;
+  action?: Parameters<ReturnType<typeof useExport>["exportFile"]>[0];
+  route?: Route<string | { results: object[] }, unknown>;
   parse?: (data: string) => string;
   filenamePrefix: string;
 }
@@ -45,9 +49,18 @@ export const ExportMenu = ({
     return (
       <ButtonV2
         disabled={isExporting || disabled}
-        onClick={() =>
-          exportFile(item.action, item.filePrefix, item.type, item.parse)
-        }
+        onClick={() => {
+          let action = item.action;
+          if (item.route) {
+            action = async () => {
+              const { data } = await request(item.route!);
+              return data ?? null;
+            };
+          }
+          if (action) {
+            exportFile(action, item.filePrefix, item.type, item.parse);
+          }
+        }}
         border
         ghost
         className="py-2.5"
@@ -69,9 +82,18 @@ export const ExportMenu = ({
         {exportItems.map((item) => (
           <DropdownItem
             key={item.label}
-            onClick={() =>
-              exportFile(item.action, item.filePrefix, item.type, item.parse)
-            }
+            onClick={() => {
+              let action = item.action;
+              if (item.route) {
+                action = async () => {
+                  const { data } = await request(item.route!);
+                  return data ?? null;
+                };
+              }
+              if (action) {
+                exportFile(action, item.filePrefix, item.type, item.parse);
+              }
+            }}
             {...item.options}
           >
             {item.label}
@@ -94,9 +116,18 @@ export const ExportButton = ({
     <>
       <ButtonV2
         disabled={isExporting || props.disabled}
-        onClick={() =>
-          exportFile(props.action, props.filenamePrefix, type, parse)
-        }
+        onClick={() => {
+          let action = props.action;
+          if (props.route) {
+            action = async () => {
+              const { data } = await request(props.route!);
+              return data ?? null;
+            };
+          }
+          if (action) {
+            exportFile(action, props.filenamePrefix, type, parse);
+          }
+        }}
         className="tooltip mx-2 p-4 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
         variant="secondary"
         ghost

diff --git a/...talsMonitor/VitalsMonitorAssetPopover.tsx → ...Components/Common/MonitorAssetPopover.tsx b/...talsMonitor/VitalsMonitorAssetPopover.tsx → ...Components/Common/MonitorAssetPopover.tsx
@@ -10,13 +10,15 @@ import {
   Transition,
 } from "@headlessui/react";
 
-interface VitalsMonitorAssetPopoverProps {
+interface MonitorAssetPopoverProps {
   asset?: AssetData;
+  className?: string;
 }
 
-const VitalsMonitorAssetPopover = ({
+const MonitorAssetPopover = ({
   asset,
-}: VitalsMonitorAssetPopoverProps) => {
+  className,
+}: MonitorAssetPopoverProps) => {
   const { t } = useTranslation();
 
   return (
@@ -35,9 +37,9 @@ const VitalsMonitorAssetPopover = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <PopoverPanel className="absolute z-[100] mt-2 w-56 -translate-x-1/3 translate-y-[-280px] rounded-md bg-white md:w-[350px] md:-translate-y-full md:translate-x-6">
+        <PopoverPanel className={className}>
           <div className="flex flex-col gap-3 p-5">
-            <div className="flex items-center gap-2 text-lg font-bold">
+            <div className="flex items-center gap-2 text-lg font-bold text-black">
               <CareIcon
                 icon={
                   (
@@ -51,13 +53,17 @@ const VitalsMonitorAssetPopover = ({
               <p>{asset?.name}</p>
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-sm md:text-base">Middleware Hostname:</p>
+              <p className="text-sm text-black md:text-base">
+                {t("middleware_hostname")}:
+              </p>
               <p className="break-words text-secondary-600">
                 {asset?.resolved_middleware?.hostname}
               </p>
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-sm md:text-base">Local IP Address:</p>
+              <p className="text-sm text-black md:text-base">
+                {t("local_ipaddress")}:
+              </p>
               <p className="break-words text-secondary-600">
                 {asset?.meta?.local_ip_address}
               </p>
@@ -81,4 +87,4 @@ const VitalsMonitorAssetPopover = ({
   );
 };
 
-export default VitalsMonitorAssetPopover;
+export default MonitorAssetPopover;
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -80,11 +80,12 @@ interface EditDiagnosesProps {
   className?: string;
   value: ConsultationDiagnosis[];
   suggestions?: ICD11DiagnosisModel[];
+  consultationId?: string;
   onUpdate?: (diagnoses: ConsultationDiagnosis[]) => void;
 }
 
 export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
-  const consultation = useSlug("consultation");
+  const consultation = useSlug("consultation", props.consultationId);
   const [diagnoses, setDiagnoses] = useState(props.value);
   const [prefill, setPrefill] = useState<ICD11DiagnosisModel>();