Restructured Consent Records

src/Components/Common/FilePreviewDialog.tsx

@@ -32,6 +32,19 @@ type FilePreviewProps = {
   fixedWidth?: boolean;
 };
 
+const previewExtensions = [
+  ".html",
+  ".htm",
+  ".pdf",
+  ".mp4",
+  ".webm",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".webp",
+];
+
 const FilePreviewDialog = (props: FilePreviewProps) => {
   const { show, onClose, file_state, setFileState, downloadURL, fileUrl } =
     props;
@@ -130,13 +143,21 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                   }}
                   pageNumber={page}
                 />
-              ) : (
+              ) : previewExtensions.includes(file_state.extension) ? (
                 <iframe
                   sandbox=""
                   title="Source Files"
                   src={fileUrl}
                   className="h-[75vh] w-full"
                 />
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  <CareIcon
+                    icon="l-file"
+                    className="mb-4 text-5xl text-gray-600"
+                  />
+                  Can't preview this file. Try downloading it.
+                </div>
               )}
             </div>
           </div>

src/Components/Facility/ConsultationForm.tsx

@@ -1,6 +1,6 @@
 import * as Notification from "../../Utils/Notifications.js";
 
-import { BedModel, ConsentRecord, FacilityModel } from "./models";
+import { BedModel, FacilityModel } from "./models";
 import {
   CONSULTATION_SUGGESTION,
   DISCHARGE_REASONS,
@@ -119,7 +119,6 @@ type FormDetails = {
   death_confirmed_doctor: string;
   InvestigationAdvice: InvestigationType[];
   procedures: ProcedureType[];
-  consent_records: ConsentRecord[];
 };
 
 const initForm: FormDetails = {
@@ -170,7 +169,6 @@ const initForm: FormDetails = {
   death_confirmed_doctor: "",
   InvestigationAdvice: [],
   procedures: [],
-  consent_records: [],
 };
 
 const initError = Object.assign(

src/Components/Facility/models.tsx

@@ -99,12 +99,18 @@ export interface OptionsType {
 
 export type PatientCategory = "Comfort Care" | "Mild" | "Moderate" | "Critical";
 
-export type ConsentRecord = {
+export interface PatientConsentModel {
   id: string;
   type: (typeof CONSENT_TYPE_CHOICES)[number]["id"];
-  patient_code_status?: (typeof CONSENT_PATIENT_CODE_STATUS_CHOICES)[number]["id"];
-  deleted?: boolean;
-};
+  patient_code_status:
+    | (typeof CONSENT_PATIENT_CODE_STATUS_CHOICES)[number]["id"]
+    | null;
+  archived: boolean;
+  archived_by?: UserBareMinimum;
+  archived_date: string;
+  created_date: string;
+  created_by: UserBareMinimum;
+}
 
 export interface ConsultationModel {
   encounter_date: string;
@@ -174,7 +180,6 @@ export interface ConsultationModel {
   is_readmission?: boolean;
   medico_legal_case?: boolean;
   investigation?: InvestigationType[];
-  consent_records?: ConsentRecord[];
 }
 
 export interface PatientStatsModel {

src/Components/Patient/PatientConsentRecordBlock.tsx

@@ -3,185 +3,117 @@ import {
   CONSENT_PATIENT_CODE_STATUS_CHOICES,
   CONSENT_TYPE_CHOICES,
 } from "../../Common/constants";
-import routes from "../../Redux/api";
-import useQuery from "../../Utils/request/useQuery";
-import { ConsentRecord } from "../Facility/models";
 import { FileUploadModel } from "./models";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../Common/components/ButtonV2";
-import { useEffect } from "react";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import { PatientConsentModel } from "../Facility/models";
 
 export default function PatientConsentRecordBlockGroup(props: {
-  consentRecord: ConsentRecord;
+  consentRecord: PatientConsentModel;
   previewFile: (file: FileUploadModel, file_associating_id: string) => void;
   archiveFile: (
     file: FileUploadModel,
     file_associating_id: string,
     skipPrompt?: { reason: string },
   ) => void;
-  onDelete: (consentRecord: ConsentRecord) => void;
-  refreshTrigger: any;
+  editFile: (file: FileUploadModel) => void;
   showArchive: boolean;
-  onFilesFound: () => void;
+  files?: FileUploadModel[];
 }) {
   const {
     consentRecord,
     previewFile,
     archiveFile,
-    refreshTrigger,
+    editFile,
+    files,
     showArchive,
   } = props;
 
   const authUser = useAuthUser();
 
-  const filesQuery = useQuery(routes.viewUpload, {
-    query: {
-      file_type: "CONSENT_RECORD",
-      associating_id: consentRecord.id,
-      is_archived: false,
-      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, {
-    query: {
-      file_type: "CONSENT_RECORD",
-      associating_id: consentRecord.id,
-      is_archived: true,
-      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);
   const consentPCS = CONSENT_PATIENT_CODE_STATUS_CHOICES.find(
     (c) => c.id === consentRecord.patient_code_status,
   );
 
-  const data = showArchive
-    ? [
-        ...(archivedFilesQuery.data?.results || []),
-        ...(consentRecord.deleted ? filesQuery.data?.results || [] : []),
-      ]
-    : filesQuery.data?.results;
-
-  const loading = archivedFilesQuery.loading || filesQuery.loading;
-
-  useEffect(() => {
-    if (!showArchive) {
-      filesQuery.refetch();
-    } else {
-      archivedFilesQuery.refetch();
-    }
-  }, [showArchive, refreshTrigger]);
-
   return (
     <div
-      className={`flex flex-col gap-2 ${(data?.length || 0) < 1 && "hidden"}`}
+      className={`flex flex-col gap-2 ${(files?.length || 0) < 1 && "hidden"}`}
     >
       <div className="flex items-center justify-between">
         <div>
           <h4>
             {consent?.text} {consentPCS?.text && `(${consentPCS.text})`}
           </h4>
-          {consentRecord.deleted && (
-            <div>
-              <div className="text-sm">
-                <CareIcon icon="l-archive" className="mr-1" />
-                Archived
-              </div>
-            </div>
-          )}
         </div>
-        {/*
-        {!consentRecord.deleted && !showArchive && (
-          <button
-            className="text-red-500 hover:text-red-600"
-            onClick={() => props.onDelete(consentRecord)}
-          >
-            <CareIcon icon="l-archive" className="mr-1" />
-            Archive
-          </button>
-        )}
-      */}
       </div>
-      {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" />
+      {files?.map((file: FileUploadModel, i: number) => (
+        <div
+          key={i}
+          className={`flex flex-col justify-between gap-2 rounded-lg border border-gray-300 xl:flex-row xl: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="min-w-[40%] break-all">
+              <div className="">
+                {file.name}
+                {file.extension} {file.is_archived && "(Archived)"}
               </div>
-              <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 className="text-xs text-gray-700">
+                {dayjs(
+                  file.is_archived ? file.archived_datetime : file.created_date,
+                ).format("DD MMM YYYY, hh:mm A")}{" "}
+                by{" "}
+                {file.is_archived
+                  ? file.archived_by?.username
+                  : file.uploaded_by?.username}
               </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 ||
+          </div>
+          <div className="flex shrink-0 flex-wrap 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)}
+                  variant={"secondary"}
+                  onClick={() => editFile(file)}
                   className=""
                 >
-                  <CareIcon
-                    icon={file.is_archived ? "l-info-circle" : "l-archive"}
-                  />
-                  {file.is_archived ? "More Info" : "Archive"}
+                  <CareIcon icon={"l-pen"} />
+                  Rename
                 </ButtonV2>
               )}
-            </div>
+            {(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>
   );
 }