Merge Develop to Staging v24.22.0

src/Components/CameraFeed/AssetBedSelect.tsx

@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { AssetBedModel } from "../Assets/AssetTypes";
 import { Listbox, Transition } from "@headlessui/react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { classNames } from "../../Utils/utils";
 
 interface Props {
   options: AssetBedModel[];
@@ -10,7 +11,40 @@ interface Props {
   onChange?: (value: AssetBedModel) => void;
 }
 
-export default function AssetBedSelect(props: Props) {
+export default function CameraPresetSelect(props: Props) {
+  const label = props.label ?? defaultLabel;
+  return (
+    <>
+      <div className="hidden gap-2 whitespace-nowrap pr-2 md:flex">
+        {props.options
+          .slice(0, props.options.length > 5 ? 4 : 5)
+          .map((option) => (
+            <button
+              className={classNames(
+                "rounded-xl border px-2 py-0.5 text-xs transition-all duration-200 ease-in-out hover:bg-zinc-600",
+                props.value?.id === option.id
+                  ? "border-white bg-zinc-100 font-bold text-black"
+                  : "border-white/50 text-zinc-100",
+              )}
+              onClick={() => props.onChange?.(option)}
+            >
+              {label(option)}
+            </button>
+          ))}
+        {/* Desktop View */}
+        {props.options.length > 5 && (
+          <ShowMoreDropdown {...props} options={props.options.slice(4)} />
+        )}
+      </div>
+      <div className="md:hidden">
+        {/* Mobile View */}
+        <ShowMoreDropdown {...props} />
+      </div>
+    </>
+  );
+}
+
+const ShowMoreDropdown = (props: Props) => {
   const selected = props.value;
 
   const options = props.options.filter(({ meta }) => meta.type !== "boundary");
@@ -20,7 +54,7 @@ export default function AssetBedSelect(props: Props) {
   return (
     <Listbox value={selected} onChange={props.onChange}>
       <div className="relative flex-1">
-        <Listbox.Button className="relative w-full cursor-default pr-6 text-right text-xs text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm">
+        <Listbox.Button className="relative w-full cursor-default pr-6 text-right text-xs text-white focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm md:pl-2">
           <span className="block truncate">
             {selected ? label(selected) : "No Preset"}
           </span>
@@ -63,7 +97,7 @@ export default function AssetBedSelect(props: Props) {
       </div>
     </Listbox>
   );
-}
+};
 
 const defaultLabel = ({ bed_object, meta }: AssetBedModel) => {
   return `${bed_object.name}: ${meta.preset_name}`;

src/Components/CameraFeed/CameraFeed.tsx

@@ -10,6 +10,7 @@ import FeedNetworkSignal from "./FeedNetworkSignal";
 import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
 import Fullscreen from "../../CAREUI/misc/Fullscreen";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 interface Props {
   children?: React.ReactNode;
@@ -96,8 +97,13 @@ export default function CameraFeed(props: Props) {
         )}
       >
         <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
-          <div className="flex items-center gap-1 md:gap-2">
+          {props.children}
+          <div className="flex w-full items-center justify-end gap-1 md:gap-4">
             <span className="text-xs font-semibold text-white md:text-sm">
+              <CareIcon
+                icon="l-video"
+                className="hidden pr-2 text-base text-zinc-400 md:inline-block"
+              />
               {props.asset.name}
             </span>
             <div className={state === "loading" ? "animate-pulse" : ""}>
@@ -109,7 +115,6 @@ export default function CameraFeed(props: Props) {
               />
             </div>
           </div>
-          {props.children}
         </div>
 
         <div className="group relative aspect-video">

src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx

@@ -120,7 +120,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
             });
           }}
         >
-          <div className="flex w-36 items-center justify-end md:w-64">
+          <div className="flex items-center">
             {presets ? (
               <>
                 <AssetBedSelect
@@ -141,27 +141,30 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                 {isUpdatingPreset ? (
                   <CareIcon
                     icon="l-spinner"
-                    className="animate-spin text-base text-zinc-500 md:mx-2"
+                    className="animate-spin text-base text-zinc-300 md:mx-2"
                   />
                 ) : (
                   <ButtonV2
                     size="small"
                     variant="secondary"
                     disabled={!hasMoved}
-                    className="disabled:bg-transparent disabled:text-zinc-700"
+                    className="hover:bg-zinc-700 disabled:bg-transparent"
                     ghost
                     tooltip={
                       hasMoved
-                        ? "Save current position to preset"
+                        ? "Save current position to selected preset"
                         : "Change camera position to update preset"
                     }
-                    tooltipClassName={classNames(
-                      "translate-y-8 text-xs",
-                      hasMoved ? "-translate-x-20" : "-translate-x-28",
-                    )}
+                    tooltipClassName="translate-y-8 text-xs"
                     onClick={handleUpdatePreset}
                   >
-                    <CareIcon icon="l-save" className="text-base" />
+                    <CareIcon
+                      icon="l-save"
+                      className={classNames(
+                        "text-base",
+                        hasMoved ? "text-gray-200" : "text-gray-500",
+                      )}
+                    />
                   </ButtonV2>
                 )}
               </>

src/Components/Patient/PatientConsentRecordBlock.tsx

@@ -15,7 +15,11 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 export default function PatientConsentRecordBlockGroup(props: {
   consentRecord: ConsentRecord;
   previewFile: (file: FileUploadModel, file_associating_id: string) => void;
-  archiveFile: (file: FileUploadModel, file_associating_id: string) => void;
+  archiveFile: (
+    file: FileUploadModel,
+    file_associating_id: string,
+    skipPrompt?: { reason: string },
+  ) => void;
   onDelete: (consentRecord: ConsentRecord) => void;
   refreshTrigger: any;
   showArchive: boolean;
@@ -39,6 +43,24 @@ export default function PatientConsentRecordBlockGroup(props: {
       limit: 100,
       offset: 0,
     },
+    onResponse: (response) => {
+      /*
+      if (consentRecord.deleted === true && response.data?.results) {
+        const unarchivedFiles = response.data.results;
+        console.log("checking for unarchived files on this deleted consent record")
+        for (const file of unarchivedFiles) {
+          console.log("archiving file", file)
+          archiveFile(file, consentRecord.id, {
+            reason: "Consent Record Archived",
+          });
+        }
+      }
+      */
+
+      if ((response.data?.results?.length || 0) > 0) {
+        props.onFilesFound();
+      }
+    },
   });
 
   const archivedFilesQuery = useQuery(routes.viewUpload, {
@@ -49,6 +71,12 @@ export default function PatientConsentRecordBlockGroup(props: {
       limit: 100,
       offset: 0,
     },
+    prefetch: showArchive,
+    onResponse: (response) => {
+      if ((response.data?.results?.length || 0) > 0) {
+        props.onFilesFound();
+      }
+    },
   });
 
   const consent = CONSENT_TYPE_CHOICES.find((c) => c.id === consentRecord.type);
@@ -59,20 +87,19 @@ export default function PatientConsentRecordBlockGroup(props: {
   const data = showArchive
     ? [
         ...(archivedFilesQuery.data?.results || []),
-        ...(filesQuery.data?.results || []),
+        ...(consentRecord.deleted ? filesQuery.data?.results || [] : []),
       ]
     : filesQuery.data?.results;
 
-  useEffect(() => {
-    filesQuery.refetch();
-    archivedFilesQuery.refetch();
-  }, [refreshTrigger]);
+  const loading = archivedFilesQuery.loading || filesQuery.loading;
 
   useEffect(() => {
-    if ((data?.length || 0) > 1) {
-      props.onFilesFound();
+    if (!showArchive) {
+      filesQuery.refetch();
+    } else {
+      archivedFilesQuery.refetch();
     }
-  }, [data]);
+  }, [showArchive, refreshTrigger]);
 
   return (
     <div
@@ -104,54 +131,57 @@ export default function PatientConsentRecordBlockGroup(props: {
         )}
       */}
       </div>
-
-      {data?.map((file: FileUploadModel, i: number) => (
-        <div
-          key={i}
-          className={`flex items-center justify-between rounded-lg border border-gray-300 ${showArchive ? "text-gray-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-gray-100`}
-        >
-          <div className="flex items-center gap-4 ">
-            <div>
-              <CareIcon icon="l-file" className="text-5xl text-gray-600" />
-            </div>
-            <div className="min-w-[40%] break-all">
-              <div className="">
-                {file.name}
-                {file.extension} {file.is_archived && "(Archived)"}
+      {loading ? (
+        <div className="skeleton-animate-alpha h-32 rounded-lg" />
+      ) : (
+        data?.map((file: FileUploadModel, i: number) => (
+          <div
+            key={i}
+            className={`flex flex-col justify-between gap-2 rounded-lg border border-gray-300 md:flex-row md:items-center ${showArchive ? "text-gray-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-gray-100`}
+          >
+            <div className="flex items-center gap-4 ">
+              <div>
+                <CareIcon icon="l-file" className="text-5xl text-gray-600" />
               </div>
-              <div className="text-xs text-gray-700">
-                {dayjs(file.created_date).format("DD MMM YYYY, hh:mm A")}
+              <div className="min-w-[40%] break-all">
+                <div className="">
+                  {file.name}
+                  {file.extension} {file.is_archived && "(Archived)"}
+                </div>
+                <div className="text-xs text-gray-700">
+                  {dayjs(file.created_date).format("DD MMM YYYY, hh:mm A")}
+                </div>
               </div>
             </div>
+            <div className="flex shrink-0 justify-end gap-2">
+              {!file.is_archived && (
+                <ButtonV2
+                  onClick={() => previewFile(file, consentRecord.id)}
+                  className=""
+                >
+                  <CareIcon icon="l-eye" />
+                  View
+                </ButtonV2>
+              )}
+              {(file.is_archived ||
+                file?.uploaded_by?.username === authUser.username ||
+                authUser.user_type === "DistrictAdmin" ||
+                authUser.user_type === "StateAdmin") && (
+                <ButtonV2
+                  variant={file.is_archived ? "primary" : "secondary"}
+                  onClick={() => archiveFile(file, consentRecord.id)}
+                  className=""
+                >
+                  <CareIcon
+                    icon={file.is_archived ? "l-info-circle" : "l-archive"}
+                  />
+                  {file.is_archived ? "More Info" : "Archive"}
+                </ButtonV2>
+              )}
+            </div>
           </div>
-          <div className="flex shrink-0 gap-2">
-            {!file.is_archived && (
-              <ButtonV2
-                onClick={() => previewFile(file, consentRecord.id)}
-                className=""
-              >
-                <CareIcon icon="l-eye" />
-                View
-              </ButtonV2>
-            )}
-            {(file.is_archived ||
-              file?.uploaded_by?.username === authUser.username ||
-              authUser.user_type === "DistrictAdmin" ||
-              authUser.user_type === "StateAdmin") && (
-              <ButtonV2
-                variant={file.is_archived ? "primary" : "secondary"}
-                onClick={() => archiveFile(file, consentRecord.id)}
-                className=""
-              >
-                <CareIcon
-                  icon={file.is_archived ? "l-info-circle" : "l-archive"}
-                />
-                {file.is_archived ? "More Info" : "Archive"}
-              </ButtonV2>
-            )}
-          </div>
-        </div>
-      ))}
+        ))
+      )}
     </div>
   );
 }