Completed the File upload option and created new component for View the page

NikhilA8606 · NikhilA8606 · commit aa5327a8b038 · 2025-02-21T02:16:26.000+05:30
diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
@@ -1,3 +1,6 @@
+import { Suspense, lazy } from "react";
+
+import Loading from "@/components/Common/Loading";
 import QuestionnaireResponseView from "@/components/Facility/ConsultationDetails/QuestionnaireResponseView";
 import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire";
 import TreatmentSummary from "@/components/Patient/TreatmentSummary";
@@ -6,6 +9,9 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterShow } from "@/pages/Encounters/EncounterShow";
 import { PrintPrescription } from "@/pages/Encounters/PrintPrescription";
 
+const ExcalidrawPage = lazy(() => import("@/components/Files/ExcalidrawPage"));
+const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
+
 const consultationRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/prescriptions/print":
     ({ facilityId, encounterId, patientId }) => (
@@ -27,6 +33,20 @@ const consultationRoutes: AppRoutes = {
         patientId={patientId}
       />
     ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/drawings": ({
+    encounterId,
+  }) => (
+    <Suspense fallback={<Loading />}>
+      <ExcalidrawPage associatingId={encounterId} fileType="encounter" />
+    </Suspense>
+  ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/drawings/:drawingId":
+    ({ drawingId }) => (
+      <Suspense fallback={<Loading />}>
+        <ExcalidrawView drawingId={drawingId} />
+      </Suspense>
+    ),
+
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:slug":
     ({ facilityId, encounterId, slug, patientId }) => (
       <EncounterQuestionnaire
diff --git a/src/Routers/routes/PatientRoutes.tsx b/src/Routers/routes/PatientRoutes.tsx
@@ -13,9 +13,8 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterList } from "@/pages/Encounters/EncounterList";
 import VerifyPatient from "@/pages/Patients/VerifyPatient";
 
-const ExcalidrawPage = lazy(
-  () => import("@/components/Files/ExcalidrawDialog"),
-);
+const ExcalidrawPage = lazy(() => import("@/components/Files/ExcalidrawPage"));
+const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
 
 const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patients": ({ facilityId }) => (
@@ -54,18 +53,17 @@ const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:id/drawings": ({ id }) => {
     return (
       <Suspense fallback={<Loading />}>
-        <ExcalidrawPage patientId={id} />
+        <ExcalidrawPage associatingId={id} fileType="patient" />
       </Suspense>
     );
   },
 
   "/facility/:facilityId/patient/:patientId/drawings/:drawingId": ({
     drawingId,
-    patientId,
   }) => {
     return (
       <Suspense fallback={<Loading />}>
-        <ExcalidrawPage patientId={patientId} drawingId={drawingId} />
+        <ExcalidrawView drawingId={drawingId} />
       </Suspense>
     );
   },
diff --git a/src/components/Files/ExcalidrawPage.tsx b/src/components/Files/ExcalidrawPage.tsx
@@ -2,6 +2,7 @@ import { Excalidraw } from "@excalidraw/excalidraw";
 import { type ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
+import { navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -10,6 +11,7 @@ import { debounce } from "@/lib/utils";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 import Loading from "@/components/Common/Loading";
 import { CreateFileResponse } from "@/components/Patient/models";
@@ -19,16 +21,22 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 
 type Props = {
-  patientId: string;
+  associatingId: string;
+  fileType: string;
   drawingId?: string;
 };
 
-export default function ExcalidrawPage({ patientId, drawingId }: Props) {
+export default function ExcalidrawPage({
+  associatingId,
+  drawingId,
+  fileType,
+}: Props) {
   const [elements, setElements] = useState<readonly ExcalidrawElement[] | null>(
     drawingId ? null : [],
   );
   const [name, setName] = useState("");
   const [id, setId] = useState(drawingId);
+  const [isDirty, setIsDirty] = useState(false);
 
   const { data, isLoading } = useQuery({
     queryKey: ["file", id],
@@ -37,7 +45,11 @@ export default function ExcalidrawPage({ patientId, drawingId }: Props) {
     }),
     enabled: !!id,
   });
-  console.log(data);
+
+  useEffect(() => {
+    setIsDirty(!!elements?.length);
+  }, [elements?.length]);
+
   useEffect(() => {
     if (!data) {
       return;
@@ -87,11 +99,11 @@ export default function ExcalidrawPage({ patientId, drawingId }: Props) {
       let response: CreateFileResponse | null = null;
       if (!id) {
         response = await createUpload({
-          original_name: name,
+          original_name: `${name}.excalidraw`,
           name: name,
-          file_type: "patient",
+          file_type: fileType,
           file_category: "unspecified",
-          associating_id: patientId,
+          associating_id: associatingId,
           mime_type: "text/plain",
         });
         signedUrl = response.signed_url;
@@ -117,6 +129,7 @@ export default function ExcalidrawPage({ patientId, drawingId }: Props) {
         return;
       } else {
         toast.success(t("file_success__upload_complete"));
+        navigate(`drawings/${response!.id}`);
       }
     } catch (error) {
       console.error("Error in Step 1 (createUpload):", error);
@@ -128,27 +141,29 @@ export default function ExcalidrawPage({ patientId, drawingId }: Props) {
   }
 
   return (
-    <div className="flex flex-col h-[calc(100vh-5rem)]">
+    <div className="flex flex-col h-[calc(100vh-4rem)]">
       <div className="flex flex-row justify-between items-center p-2">
         <div className="flex flex-row items-center">
           <div className="rounded-full bg-primary-100 px-5 py-4">
             <CareIcon icon="l-pen" className="text-lg text-primary-500" />
           </div>
           <div className="m-4">
-            <input
+            <Input
               type="text"
               value={name}
               placeholder="Enter the File Name"
               onChange={(e) => setName(e.target.value)}
             />
           </div>
         </div>
-        <Button className="ml-auto" onClick={handleSave}>
-          {t("save")}
-        </Button>
+        {isDirty && (
+          <Button className="ml-auto" onClick={handleSave}>
+            {t("save")}
+          </Button>
+        )}
       </div>
 
-      <div className="flex-grow p-2">
+      <div className="flex-grow h-[calc(100vh-10rem)] -m-2">
         <Excalidraw
           UIOptions={{
             canvasActions: {
@@ -158,7 +173,6 @@ export default function ExcalidrawPage({ patientId, drawingId }: Props) {
             },
           }}
           initialData={{
-            elements: elements,
             appState: { theme: "light" },
           }}
           onChange={debounce(async (elements) => {
diff --git a/src/components/Files/ExcalidrawView.tsx b/src/components/Files/ExcalidrawView.tsx
@@ -0,0 +1,82 @@
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { type ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Input } from "@/components/ui/input";
+
+import Loading from "@/components/Common/Loading";
+
+import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
+
+type Props = {
+  drawingId?: string;
+};
+
+export default function ExcalidrawView({ drawingId }: Props) {
+  const [elements, setElements] = useState<readonly ExcalidrawElement[] | null>(
+    drawingId ? null : [],
+  );
+  const [name, setName] = useState("");
+  const [id] = useState(drawingId);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["file", id],
+    queryFn: query(routes.retrieveUpload, {
+      pathParams: { id: id || "" },
+    }),
+    enabled: !!id,
+  });
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    setName(data.name!);
+    const fetchData = async () => {
+      const response = await fetch(data.read_signed_url!);
+      const json = await response.json();
+      setElements(json.elements);
+    };
+    fetchData();
+  }, [data]);
+
+  if (isLoading || elements === null) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)]">
+      <div className="flex flex-row justify-between items-center p-2">
+        <div className="flex flex-row items-center">
+          <div className="rounded-full bg-primary-100 px-5 py-4">
+            <CareIcon icon="l-pen" className="text-lg text-primary-500" />
+          </div>
+          <div className="m-4">
+            <Input type="text" value={name} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-grow h-[calc(100vh-10rem)] -m-2">
+        <Excalidraw
+          viewModeEnabled={true}
+          UIOptions={{
+            canvasActions: {
+              saveAsImage: true,
+              export: false,
+              loadScene: false,
+            },
+          }}
+          initialData={{
+            appState: { theme: "light" },
+            elements: elements,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Files/FilesTab.tsx b/src/components/Files/FilesTab.tsx
@@ -123,8 +123,6 @@ export const FilesTab = (props: FilesTabProps) => {
     }),
   });
 
-  console.log("facilityId", props.facilityId);
-  console.log("PatientId", props.patientId);
   const fileManager = useFileManager({
     type: type,
     onArchive: refetch,
@@ -279,11 +277,17 @@ export const FilesTab = (props: FilesTabProps) => {
             {file.extension === ".excalidraw" && (
               <Button
                 variant="secondary"
-                onClick={() =>
-                  navigate(
-                    `/facility/${props.facilityId}/patient/${props.patientId}/drawings/${file.id}`,
-                  )
-                }
+                onClick={() => {
+                  if (type === "encounter") {
+                    navigate(
+                      `/facility/${props.facilityId}/patient/${props.patientId}/encounter/${props.encounter?.id}/drawings/${file.id}`,
+                    );
+                  } else {
+                    navigate(
+                      `/facility/${props.facilityId}/patient/${props.patientId}/drawings/${file.id}`,
+                    );
+                  }
+                }}
               >
                 <span className="flex flex-row items-center gap-1">
                   <CareIcon icon="l-eye" />
@@ -458,11 +462,17 @@ export const FilesTab = (props: FilesTabProps) => {
             <Button
               size="sm"
               variant="ghost"
-              onClick={() =>
-                navigate(
-                  `/facility/${props.facilityId}/patient/${props.patientId}/drawings`,
-                )
-              }
+              onClick={() => {
+                if (type === "encounter") {
+                  navigate(
+                    `/facility/${props.facilityId}/patient/${props.patientId}/encounter/${props.encounter?.id}/drawings`,
+                  );
+                } else {
+                  navigate(
+                    `/facility/${props.facilityId}/patient/${props.patientId}/drawings`,
+                  );
+                }
+              }}
               className="flex flex-row justify-stretch items-center w-full text-primary-900"
             >
               <CareIcon icon="l-pen" />
@@ -561,7 +571,6 @@ export const FilesTab = (props: FilesTabProps) => {
             files.results.map((file) => {
               const filetype = getFileType(file);
               const fileName = file.name ? file.name + file.extension : "";
-              console.log("fileName", file.extension);
               return (
                 <TableRow
                   key={file.id}
diff --git a/src/pages/Encounters/tabs/EncounterFilesTab.tsx b/src/pages/Encounters/tabs/EncounterFilesTab.tsx
@@ -7,6 +7,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => {
     <FilesTab
       type="encounter"
       facilityId={props.facilityId}
+      patientId={props.patient.id}
       encounter={props.encounter}
       subPage={props.subPage}
     />
