@mbehenri/openmrs-esm-opentms-meet-app 1.0.2 → 1.0.4

package/src/components/Demand/tab.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo } from "react";
-import { useState } from "react";
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useState } from 'react';
 import {
   Button,
   DataTable,
@@ -15,7 +15,7 @@ import {
   TableRow,
   Tile,
   Pagination,
-} from "@carbon/react";
+} from '@carbon/react';
 
 import {
   type ToastType,
@@ -27,14 +27,14 @@ import {
   formatDatetime,
   parseDate,
   usePagination,
-} from "@openmrs/esm-framework";
-import { EmptyLayout } from "../EmptyLayout";
-import styles from "./tab.scss";
-import DoctorService from "../../services/doctor";
-import env from "../../repositories/env";
-import { Search } from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { getPageSizes } from "../../utils";
+} from '@openmrs/esm-framework';
+import { EmptyLayout } from '../EmptyLayout';
+import styles from './tab.scss';
+import DoctorService from '../../services/doctor';
+import env from '../../repositories/env';
+import { Search } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getPageSizes } from '../../utils';
 
 const DemandTab: React.FC = (/* {} */) => {
   //I. hooks
@@ -42,9 +42,9 @@ const DemandTab: React.FC = (/* {} */) => {
   const { t } = useTranslation();
   const [error, setError] = useState(false);
   const layout = useLayoutType();
-  const responsiveSize = isDesktop(layout) ? "sm" : "lg";
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
   const [demands, setDemands] = useState([]);
-  const [searchString, setSearchString] = useState("");
+  const [searchString, setSearchString] = useState('');
   const [processing, setProcessing] = useState(false);
   const [pageSize, setPageSize] = useState(5);
 
@@ -53,21 +53,21 @@ const DemandTab: React.FC = (/* {} */) => {
 
   // update env variable
 
-  env.API_BASE_URL = conf["API_BASE_URL"];
-  env.API_SECURE = conf["API_SECURE"];
+  env.API_BASE_URL = conf['API_BASE_URL'];
+  env.API_SECURE = conf['API_SECURE'];
   const doctorService = useMemo(() => DoctorService.getInstance(), []);
 
   //const [reload, setReload] = useState("");
   // colonnes du tableau
   const headers: Array<typeof DataTableHeader> = useMemo(
     () => [
-      { key: "numero", header: "N°" },
-      { key: "patient", header: "Patient" },
-      { key: "service", header: "Service" },
-      { key: "date", header: "Date" },
-      { key: "action", header: "Action" },
+      { key: 'numero', header: 'N°' },
+      { key: 'patient', header: 'Patient' },
+      { key: 'service', header: 'Service' },
+      { key: 'date', header: 'Date' },
+      { key: 'action', header: 'Action' },
     ],
-    []
+    [],
   );
 
   // chargement des démandes
@@ -110,13 +110,13 @@ const DemandTab: React.FC = (/* {} */) => {
           return {
             ...demand,
             date: formatDatetime(parseDate(demand.date), {
-              mode: "wide",
+              mode: 'wide',
             }),
             numero: i + 1,
           };
         })
         .filter((demand) => {
-          if (searchString === "") {
+          if (searchString === '') {
             return true;
           }
           if (demand.date && `${demand.date}`.includes(searchString)) {
@@ -127,7 +127,7 @@ const DemandTab: React.FC = (/* {} */) => {
           }
           return false;
         }),
-    [demands, searchString]
+    [demands, searchString],
   );
 
   // pagination des demandes
@@ -139,14 +139,14 @@ const DemandTab: React.FC = (/* {} */) => {
       if (!processing) {
         setProcessing(true);
         const res = await doctorService.rejectDemand(demand.id);
-        let message = "";
-        let type: ToastType = "error";
+        let message = '';
+        let type: ToastType = 'error';
         if (res) {
           message = `the demand initiated by ${demand.patient} have been rejected`;
           await doctorService.getDemands().then((demands) => {
             if (demands) {
               setDemands(demands);
-              type = "success";
+              type = 'success';
             } else {
               setError(true);
             }
@@ -158,7 +158,7 @@ const DemandTab: React.FC = (/* {} */) => {
         showToast({ description: message, kind: type });
       }
     },
-    [doctorService, processing]
+    [doctorService, processing],
   );
 
   // fonction de validation
@@ -167,7 +167,7 @@ const DemandTab: React.FC = (/* {} */) => {
       if (!processing) {
         setProcessing(true);
         const dispose = showModal(
-          "opencare-validate-demand-form",
+          'opentms-validate-demand-form',
           {
             demand,
             onClose: () => {
@@ -183,11 +183,11 @@ const DemandTab: React.FC = (/* {} */) => {
               }
             });
             setProcessing(false);
-          }
+          },
         );
       }
     },
-    [doctorService, processing]
+    [doctorService, processing],
   );
 
   // II. returns
@@ -200,57 +200,37 @@ const DemandTab: React.FC = (/* {} */) => {
   }
 
   if (demands.length == 0) {
-    return <EmptyLayout headerTitle={"Demands"} displayText={"demands"} />;
+    return <EmptyLayout headerTitle={'Demands'} displayText={'demands'} />;
   }
 
   return (
     <Layer className={styles.container}>
       <Tile className={styles.headerContainer}>
-        <div
-          className={
-            isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading
-          }
-        >
+        <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
           <h4>Demands</h4>
         </div>
         <span className={styles.totalDemand}>
-          Total :
-          <span className={styles.totalDemandLength}>{demands.length}</span>
+          Total :<span className={styles.totalDemandLength}>{demands.length}</span>
         </span>
       </Tile>
       <div className={styles.toolbar}>
         <Search
           className={styles.searchbar}
           labelText=""
-          placeholder={t("filterTable", "Filter table")}
+          placeholder={t('filterTable', 'Filter table')}
           onChange={(event) => setSearchString(event.target.value)}
           size={responsiveSize}
         />
       </div>
-      <DataTable
-        rows={results}
-        headers={headers}
-        isSortable
-        size={responsiveSize}
-        useZebraStyles
-      >
-        {({
-          rows,
-          headers,
-          getHeaderProps,
-          getRowProps,
-          getTableProps,
-          getTableContainerProps,
-        }) => (
+      <DataTable rows={results} headers={headers} isSortable size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
           <>
             <TableContainer {...getTableContainerProps()}>
               <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
-                      <TableHeader {...getHeaderProps({ header })}>
-                        {header.header}
-                      </TableHeader>
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>

package/src/components/MeetIframe/index.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import styles from "./index.scss";
-import logo from "../../assets/img/Logo.png";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styles from './index.scss';
+import logo from '../../assets/img/Logo.png';
 
 interface MeetIframeProps {
   username: string;
@@ -8,11 +8,7 @@ interface MeetIframeProps {
   url: string;
 }
 
-export const MeetIframe: React.FC<MeetIframeProps> = ({
-  url,
-  token,
-  username,
-}) => {
+export const MeetIframe: React.FC<MeetIframeProps> = ({ url, token, username }) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const [showPreloader, setShowPreloader] = useState(false);
@@ -30,22 +26,16 @@ export const MeetIframe: React.FC<MeetIframeProps> = ({
 
         const iframeDocument = iframeWindow.document;
 
-        const isLoggedIn = iframeDocument.querySelector(".user-menu");
+        const isLoggedIn = iframeDocument.querySelector('.user-menu');
         if (isLoggedIn) {
           //console.log("Utilisateur déjà connecté.");
           //setShowPreloader(false);
           return; // Pas besoin de soumettre le formulaire
         }
 
-        const userInput = iframeDocument.querySelector(
-          'input[name="user"]'
-        ) as HTMLInputElement | null;
-        const passwordInput = iframeDocument.querySelector(
-          'input[name="password"]'
-        ) as HTMLInputElement | null;
-        const loginForm = iframeDocument.querySelector(
-          "form"
-        ) as HTMLFormElement | null;
+        const userInput = iframeDocument.querySelector('input[name="user"]') as HTMLInputElement | null;
+        const passwordInput = iframeDocument.querySelector('input[name="password"]') as HTMLInputElement | null;
+        const loginForm = iframeDocument.querySelector('form') as HTMLFormElement | null;
 
         if (userInput && passwordInput && loginForm) {
           userInput.value = username;
@@ -55,7 +45,7 @@ export const MeetIframe: React.FC<MeetIframeProps> = ({
           setTimeout(() => {
             loginForm.submit();
             // eslint-disable-next-line no-console
-            console.log("Formulaire de connexion soumis.");
+            console.log('Formulaire de connexion soumis.');
           }, 3000); // Délai de 3 secondes
           //console.log('username', userInput.value, 'password', passwordInput.value);
           return;
@@ -65,7 +55,7 @@ export const MeetIframe: React.FC<MeetIframeProps> = ({
       }
       //setShowPreloader(false);
     },
-    [token, username]
+    [token, username],
   );
 
   const handleLoad = useCallback(
@@ -75,7 +65,7 @@ export const MeetIframe: React.FC<MeetIframeProps> = ({
       }
       setShowPreloader(false);
     },
-    [handleLogin, needContinue]
+    [handleLogin, needContinue],
   );
 
   useEffect(() => {
@@ -85,31 +75,22 @@ export const MeetIframe: React.FC<MeetIframeProps> = ({
       const load = () => handleLoad(iframe);
 
       // Associer l'événement de chargement
-      iframe.addEventListener("load", load);
+      iframe.addEventListener('load', load);
 
       // Nettoyage de l'événement lors du démontage du composant
       return () => {
-        iframe.removeEventListener("load", load);
+        iframe.removeEventListener('load', load);
       };
     }
   }, [handleLoad]);
 
   return (
     <div className={styles.contentViewWrapper}>
-      <div
-        className={styles.preloader}
-        style={{ display: showPreloader ? "flex" : "none" }}
-      >
+      <div className={styles.preloader} style={{ display: showPreloader ? 'flex' : 'none' }}>
         <span className={styles.spinner}></span>
-        <img src={logo} alt="opencare logo" className="logo" />
+        <img src={logo} alt="opentms logo" className="logo" />
       </div>
-      <iframe
-        ref={iframeRef}
-        className={styles.viewer}
-        title="Web Meeting"
-        src={url}
-        allow="camera;microphone"
-      />
+      <iframe ref={iframeRef} className={styles.viewer} title="Web Meeting" src={url} allow="camera;microphone" />
     </div>
   );
 };

package/src/components/MeetIframe/jitsi.tsx

@@ -0,0 +1,35 @@
+import { JitsiMeeting } from '@jitsi/react-sdk';
+import { type LoggedInUser } from '@openmrs/esm-framework';
+import React from 'react';
+
+interface JitsiMeetCallProps {
+  appointment: {
+    roomName: string;
+  };
+  user: LoggedInUser;
+}
+
+export const JitsiMeetCall = ({ appointment, user }: JitsiMeetCallProps) => {
+  return (
+    <div style={{ height: '100vh' }}>
+      <JitsiMeeting
+        domain="meet.jit.si"
+        /* On doit definir le nom de la rencontre conformement a JITSI */
+        roomName={appointment.roomName}
+        configOverwrite={{
+          startWithAudioMuted: true,
+        }}
+        interfaceConfigOverwrite={{
+          SHOW_JITSI_WATERMARK: false,
+        }}
+        userInfo={{
+          displayName: user.firstname,
+          email: 'opensecure@gmail.com',
+        }}
+        getIFrameRef={(iframeRef) => {
+          iframeRef.style.height = '100%';
+        }}
+      />
+    </div>
+  );
+};

package/src/dashboard.meta.ts

@@ -1,11 +1,11 @@
 export const meetingDashboardMeta = {
-  name: "meeting",
-  slot: "opencare-dashboard-slot",
-  title: "Meeting",
+  name: 'meeting',
+  slot: 'opentms-dashboard-slot',
+  title: 'Meeting',
 };
 
 export const PaymentDashboardMeta = {
-  name: "payment",
-  slot: "opencare-dashboard-slot",
-  title: "Payment",
+  name: 'payment',
+  slot: 'opentms-dashboard-slot',
+  title: 'Payment',
 };

package/src/index.ts

@@ -35,7 +35,7 @@ export function startupApp() {
  * This named export tells the app shell that the default export of `root.component.tsx`
  * should be rendered when the route matches `root`. The full route
  * will be `openmrsSpaBase() + 'root'`, which is usually
- * `/openmrs/spa/opencare`.
+ * `/openmrs/spa/opentms`.
  */
 /* export const root = getSyncLifecycle(
   Root,

package/src/repositories/opentms/index.ts

@@ -0,0 +1,10 @@
+import { type TypeRepository } from '../TypeRepository';
+import ProdOpentmsRepository from './prodRepository';
+import OpentmsRepository from './repository';
+
+export function getOpentmsRepository(t: TypeRepository = 'fake'): OpentmsRepository {
+  if (t === 'fake') {
+    return new OpentmsRepository();
+  }
+  return new ProdOpentmsRepository();
+}

package/src/repositories/{Opencare → opentms}/prodRepository.ts

@@ -1,31 +1,25 @@
-import { BadResponse } from "../errors";
-import env from "../env";
-import OpencareRepository from "./repository";
+import { BadResponse } from '../errors';
+import env from '../env';
+import OpentmsRepository from './repository';
 
-class ProdOpencareRepository extends OpencareRepository {
+class ProdOpentmsRepository extends OpentmsRepository {
   async getDemands(): Promise<Array<any>> {
     let myHeaders = new Headers();
-    myHeaders.append("Accept", "application/json,");
-    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('Accept', 'application/json,');
+    myHeaders.append('Content-Type', 'application/json');
     //myHeaders.append("Authorization", `Basic ${TALK_BASE64}`);
 
     let requestOptions = {
-      method: "GET",
+      method: 'GET',
       headers: myHeaders,
     };
-    const demandProgressStatus = "2";
-    return await fetch(
-      `${env.API_BASE_URL}/demand?status=${demandProgressStatus}`,
-      requestOptions
-    )
+    const demandProgressStatus = '2';
+    return await fetch(`${env.API_BASE_URL}/demand?status=${demandProgressStatus}`, requestOptions)
       .then((response) => {
         if (response.ok) {
           return response.json();
         }
-        throw new BadResponse(
-          `Impossible de recupérer les démandes (${response.status})`,
-          "Opencare"
-        );
+        throw new BadResponse(`Impossible de recupérer les démandes (${response.status})`, 'Opentms');
       })
       .then(({ results }) => {
         const res: Array<any> = results;
@@ -33,34 +27,26 @@ class ProdOpencareRepository extends OpencareRepository {
       });
   }
 
-  async getAppointments(
-    patientUuid: string,
-    doctor?: string
-  ): Promise<Array<any>> {
+  async getAppointments(patientUuid: string, doctor?: string): Promise<Array<any>> {
     let myHeaders = new Headers();
-    myHeaders.append("Accept", "application/json,");
-    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('Accept', 'application/json,');
+    myHeaders.append('Content-Type', 'application/json');
     //myHeaders.append("Authorization", `Basic ${TALK_BASE64}`);
 
     let requestOptions = {
-      method: "GET",
+      method: 'GET',
       headers: myHeaders,
     };
 
     return await fetch(
-      `${env.API_BASE_URL}/patient/${patientUuid}/appointment${
-        doctor ? `?doctor=${doctor}` : ""
-      }`,
-      requestOptions
+      `${env.API_BASE_URL}/patient/${patientUuid}/appointment${doctor ? `?doctor=${doctor}` : ''}`,
+      requestOptions,
     )
       .then((response) => {
         if (response.ok) {
           return response.json();
         }
-        throw new BadResponse(
-          `Impossible de recupérer les rencontres (${response.status})`,
-          "Opencare"
-        );
+        throw new BadResponse(`Impossible de recupérer les rencontres (${response.status})`, 'Opentms');
       })
       .then(({ results }) => {
         const res: Array<any> = results;
@@ -68,11 +54,11 @@ class ProdOpencareRepository extends OpencareRepository {
           return {
             uuid: appointment.uuid,
             startDateTime: appointment.startDateTime,
-            location: "",
+            location: '',
             service: appointment.service,
             status: appointment.statusProgress,
-            appointmentKind: "Scheduled",
-            comments: "",
+            appointmentKind: 'Scheduled',
+            comments: '',
             linkRoom: appointment.linkRoom,
             patientUuid,
           };
@@ -82,25 +68,19 @@ class ProdOpencareRepository extends OpencareRepository {
 
   async rejectDemand(demand_id: string): Promise<void> {
     let myHeaders = new Headers();
-    myHeaders.append("Accept", "application/json,");
-    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('Accept', 'application/json,');
+    myHeaders.append('Content-Type', 'application/json');
     //myHeaders.append("Authorization", `Basic ${TALK_BASE64}`);
 
     let requestOptions = {
-      method: "PUT",
+      method: 'PUT',
       headers: myHeaders,
     };
-    await fetch(
-      `${env.API_BASE_URL}/demand/${demand_id}/reject`,
-      requestOptions
-    ).then((response) => {
+    await fetch(`${env.API_BASE_URL}/demand/${demand_id}/reject`, requestOptions).then((response) => {
       if (response.ok) {
         return response.json();
       }
-      throw new BadResponse(
-        `Impossible de rejeter la demande (${response.status})`,
-        "Opencare"
-      );
+      throw new BadResponse(`Impossible de rejeter la demande (${response.status})`, 'Opentms');
     });
   }
 
@@ -108,11 +88,11 @@ class ProdOpencareRepository extends OpencareRepository {
     demand_id: string,
     doctor_id: string,
     startDate: Date = new Date(),
-    duration = 30
+    duration = 30,
   ): Promise<void> {
     const myHeaders = new Headers();
-    myHeaders.append("Accept", "application/json,");
-    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('Accept', 'application/json,');
+    myHeaders.append('Content-Type', 'application/json');
 
     const raw = JSON.stringify({
       doctor_id: doctor_id,
@@ -121,33 +101,27 @@ class ProdOpencareRepository extends OpencareRepository {
     });
 
     const requestOptions = {
-      method: "POST",
+      method: 'POST',
       headers: myHeaders,
       body: raw,
     };
 
-    await fetch(
-      `${env.API_BASE_URL}/demand/${demand_id}/validate`,
-      requestOptions
-    ).then((response) => {
+    await fetch(`${env.API_BASE_URL}/demand/${demand_id}/validate`, requestOptions).then((response) => {
       if (response.ok) {
         return response.json();
       }
-      throw new BadResponse(
-        `Impossible de valider la demande (${response.status})`,
-        "Opencare"
-      );
+      throw new BadResponse(`Impossible de valider la demande (${response.status})`, 'Opentms');
     });
   }
 
   async getProviders(): Promise<Array<any>> {
     let myHeaders = new Headers();
-    myHeaders.append("Accept", "application/json,");
-    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append('Accept', 'application/json,');
+    myHeaders.append('Content-Type', 'application/json');
     //myHeaders.append("Authorization", `Basic ${TALK_BASE64}`);
 
     let requestOptions = {
-      method: "GET",
+      method: 'GET',
       headers: myHeaders,
     };
 
@@ -156,10 +130,7 @@ class ProdOpencareRepository extends OpencareRepository {
         if (response.ok) {
           return response.json();
         }
-        throw new BadResponse(
-          `Impossible de recupérer les rencontres (${response.status})`,
-          "Opencare"
-        );
+        throw new BadResponse(`Impossible de recupérer les rencontres (${response.status})`, 'Opentms');
       })
       .then(({ results }) => {
         const res: Array<any> = results;
@@ -173,4 +144,4 @@ class ProdOpencareRepository extends OpencareRepository {
   }
 }
 
-export default ProdOpencareRepository;
+export default ProdOpentmsRepository;

package/src/repositories/{Opencare → opentms}/repository.ts

@@ -1,14 +1,11 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
-class OpencareRepository {
+class OpentmsRepository {
   async getDemands(): Promise<Array<any>> {
     return [];
   }
 
-  async getAppointments(
-    patientUuid: string,
-    doctor?: string
-  ): Promise<Array<any>> {
+  async getAppointments(patientUuid: string, doctor?: string): Promise<Array<any>> {
     return [];
   }
 
@@ -18,7 +15,7 @@ class OpencareRepository {
     demand_id: string,
     doctor_id: string,
     startDate: Date = new Date(),
-    duration = 30
+    duration = 30,
   ): Promise<void> {}
 
   async getProviders(): Promise<Array<any>> {
@@ -27,8 +24,8 @@ class OpencareRepository {
 
   // must be different for production for the duration of the appointment
   async getTokenNextcloud(username: string): Promise<any> {
-    return "TALK_PASSWORD";
+    return 'TALK_PASSWORD';
   }
 }
 
-export default OpencareRepository;
+export default OpentmsRepository;