Added view form modal

apps/back-end/src/visits/visits.service.ts

@@ -126,6 +126,20 @@ export class VisitsService {
                 uuid: true,
               },
             },
+            answers: {
+              select: {
+                uuid: true,
+                valueText: true,
+                valueDateTime: true,
+                valueNumber: true,
+                question: {
+                  select: {
+                    uuid: true,
+                    question: true,
+                  },
+                },
+              },
+            },
           },
         },
       },

apps/front-end/src/app/components/encounters/encounter-form.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData, useNavigate } from 'react-router-dom';
 import { getFormByEncounterType } from "../../forms/form-service";
 import { FormSchema } from "../../forms/types";
 import FormRenderer from "../../forms/form-renderer/form-renderer";
@@ -14,6 +14,7 @@ const EncounterForm: React.FC = ()=>{
         visitUuid: string;
         encounterUuid: string;
     };
+    const navigate = useNavigate();
     const [form,setForm] = useState<FormSchema>();
     useEffect(()=>{
         const f = getFormByEncounterType(data.encounterTypeUuid);
@@ -25,15 +26,17 @@ const EncounterForm: React.FC = ()=>{
             encounterUuid: data.encounterUuid,
             answers: formData
          };
-         console.log('payload', payload);
          addEncounterAnswers(payload);
     };
     const addEncounterAnswers = (payload: EncounterAnswers)=>{
          createEncounterAnswers(payload).then((result)=>{
-            console.log('result', result);
+            redirectToVisits();
          }).catch((error)=>{
             console.log('error', error);
-         });;
+         });
+    };
+    const redirectToVisits = ()=>{
+        navigate(`../${data.uuid}/visits`)
     };
     return(
     <div>

apps/front-end/src/app/components/encounters/encounter-list.component.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React,{ useState } from 'react';
 import TableList from '../table-list/table-list';
 import { Button } from 'antd';
 import { Encounter } from '../../models/encounter';
 import { formatDate } from '../../utils/date-formatter';
 import { EyeOutlined, EditOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import ViewEncounterModal from './view-encounter-modal';
 
 
 const columns = [
@@ -34,17 +35,26 @@ const EncounterList: React.FC<{
   encounters: Encounter[];
 }> = ({ encounters }) => {
   const navigate = useNavigate();
-  const onClickHandler =  (encounterUuid: string): void => {
-    return;
+  const [isViewModalOpen, setIsViewModalOpen] = useState<boolean>(false);
+  const [selectedEncounter, setSelectedEncounter] = useState<Encounter>();
+
+  const viewEncounterHandler =  (encounter: Encounter): void => {
+    setSelectedEncounter(encounter);
+    setIsViewModalOpen(true)
   };
 
   const onClickEditHandler = (visitUuid: string,encounterTypeUuid: string,encounterUuid: string)=>{
      navigate(`./${visitUuid}/encounter/${encounterUuid}/encounter-form/${encounterTypeUuid}`)
 
   };
 
+  const cancelViewModal = ()=>{
+   setIsViewModalOpen(false);
+  };
+
 
   return (
+    <>
     <TableList
       cols={columns}
       data={encounters.map((e) => {
@@ -57,7 +67,7 @@ const EncounterList: React.FC<{
             <>
             <Button
               type="default"
-              onClick={() => onClickHandler(e.uuid)}
+              onClick={() => viewEncounterHandler(e)}
             >
             <EyeOutlined />
 
@@ -73,6 +83,12 @@ const EncounterList: React.FC<{
         };
       })}
     />
+    {selectedEncounter? <ViewEncounterModal 
+    isModalOpen={isViewModalOpen} 
+    handleCancel={cancelViewModal} 
+    encounter={selectedEncounter}
+    />: ''}
+    </>
   );
 };
 

apps/front-end/src/app/components/encounters/view-encounter-modal.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button, Modal, Row, Col} from 'antd';
+import { getYearMonthDate } from '../../utils/date-formatter';
+import { Encounter } from '../../models/encounter';
+
+interface viewEncounterProps {
+  isModalOpen: boolean;
+  encounter: Encounter;
+  handleCancel: ()=>void;
+}
+
+const ViewEncounterModal: React.FC<viewEncounterProps> = ({
+  isModalOpen,
+  encounter,
+  handleCancel,
+}) => {
+
+    const renderAnswer = (ans: { valueText: string;
+      valueDateTime: string;
+      valueNumber: number;})=>{
+        if(ans.valueDateTime){
+            return getYearMonthDate(ans.valueDateTime);
+        }
+        if(ans.valueNumber){
+            return ans.valueNumber;
+        }
+        if(ans.valueText){
+           return ans.valueText;
+        }
+    };
+
+    return (
+        <Modal
+          title="Encounter Details"
+          open={isModalOpen}
+          footer={[
+            <Button key="back" onClick={handleCancel} danger>
+              Close
+            </Button>,
+          ]}
+        >
+          <Row>
+            <Col>
+              { encounter?.answers ? encounter.answers.map((e)=>{
+                 return <p key={e.uuid}>{e.question.question} : {renderAnswer(e)}</p>
+              }) : ''}
+
+            </Col>
+          </Row>
+        </Modal>
+      );
+};
+
+export default ViewEncounterModal;

apps/front-end/src/app/models/encounter.ts

@@ -23,4 +23,14 @@ export interface Encounter {
   visit: {
     uuid: string;
   };
+  answers?: {
+    uuid: string;
+    valueText: string;
+    valueDateTime: string;
+    valueNumber: number;
+    question: {
+      uuid: string;
+      question: string;
+    };
+  }[];
 }

apps/front-end/src/app/pages/visits/patient-visits.tsx

@@ -20,7 +20,7 @@ const PatientVisits: React.FC<{
 }) => {
 
   const [selectedVisit, setSelectedVisit] = useState<Visit>();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   const handleCancel = () => {
     setIsModalOpen(false);
@@ -73,19 +73,19 @@ const PatientVisits: React.FC<{
                   <Descriptions.Item label="Location">{v.location.name}</Descriptions.Item>
               </Descriptions>
               { displayActionButton(v)}
-          {v.encounters.length> 0 && <EncounterList encounters={v.encounters} />}
+          {v.encounters.length> 0 && <EncounterList encounters={v.encounters}/>}
 
           </Card>
         );
       })}
 
-      <CreateEnconterModal
+      {selectedVisit ? <CreateEnconterModal
         patientUuid={patientUuid}
         visit={selectedVisit}
         isModalOpen={isModalOpen}
         handleCancel={handleCancel}
         onNewEncounter = { onNewEncounter }
-      />
+      />: ''}
     </Space>
   );
 };

apps/front-end/src/app/pages/visits/visits.tsx

@@ -44,11 +44,6 @@ const Visits: React.FC = () => {
     });
   }, [data,newEncounter,newVisit,completedVisit]);
   const items: TabsProps['items'] = [
-    {
-      key: 'newVisit',
-      label: `New Visit`,
-      children: <NewVisit patientUuid={data.uuid} onNewVisitCreated = {newVisitsHandler}/>,
-    },
     {
       key: 'active-visits',
       label: `Active Visits`,
@@ -71,12 +66,17 @@ const Visits: React.FC = () => {
          onCompleteVisit = { completeVisitHandler}
          />,
     },
+    {
+      key: 'newVisit',
+      label: `New Visit`,
+      children: <NewVisit patientUuid={data.uuid} onNewVisitCreated = {newVisitsHandler}/>,
+    },
   ];
   return (
     <Row>
       <Col span={22}>
         <h4>Visits</h4>
-        <Tabs defaultActiveKey="1" items={items} />
+        <Tabs defaultActiveKey="active-visits" items={items} />
       </Col>
     </Row>
   );

prisma/schema.prisma

@@ -136,7 +136,7 @@ model Encounter {
   updatedAt       DateTime      @updatedAt
   visit           Visit         @relation(fields: [visitId], references: [id])
   visitId         Int
-  Answer          Answer[]
+  answers         Answer[]
 }
 
 model ProgramEnrollment {