@mbehenri/openmrs-esm-opentms-meet-app 1.0.1 → 1.0.3

package/src/components/Appointment/index.tsx

@@ -1,56 +1,44 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  ContentSwitcher,
-  DataTableSkeleton,
-  Layer,
-  Switch,
-  Tile,
-} from "@carbon/react";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, DataTableSkeleton, Layer, Switch, Tile } from '@carbon/react';
 import {
   getCurrentUser,
   useConfig,
   useLayoutType,
   useSession,
   //launchWorkspaces
-} from "@openmrs/esm-framework";
-import PatientAppointmentsTable from "./tab";
-import styles from "./index.scss";
-import DoctorService, { AppointmentTypes } from "../../services/doctor";
-import env from "../../repositories/env";
-import { MeetIframe } from "../MeetIframe";
+} from '@openmrs/esm-framework';
+import PatientAppointmentsTable from './tab';
+import styles from './index.scss';
+import DoctorService, { AppointmentTypes } from '../../services/doctor';
+import env from '../../repositories/env';
+import { MeetIframe } from '../MeetIframe';
 
 interface PatientAppointmentsBaseProps {
   patientUuid: string;
 }
 
-const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
-  patientUuid,
-}) => {
+const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patientUuid }) => {
   //I. hooks
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === "tablet";
-  const [contentSwitcherValue, setContentSwitcherValue] = useState(
-    AppointmentTypes.UPCOMING
-  );
+  const isTablet = useLayoutType() === 'tablet';
+  const [contentSwitcherValue, setContentSwitcherValue] = useState(AppointmentTypes.UPCOMING);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const [appointments, setAppointments] = useState<Map<number, Array<any>>>(
-    new Map()
-  );
+  const [appointments, setAppointments] = useState<Map<number, Array<any>>>(new Map());
 
-  const [tokenNextcloud, setTokenNextcloud] = useState("");
+  const [tokenNextcloud, setTokenNextcloud] = useState('');
 
   const { user } = useSession();
 
-  const [url, setUrl] = useState("");
+  const [url, setUrl] = useState('');
 
   //recupération de la configuration
   const conf = useConfig();
 
   // update env variable
-  env.API_SECURE = conf["API_SECURE"];
-  env.API_BASE_URL = conf["API_BASE_URL"];
+  env.API_SECURE = conf['API_SECURE'];
+  env.API_BASE_URL = conf['API_BASE_URL'];
   const doctorService = useMemo(() => DoctorService.getInstance(), []);
 
   // chargement des appointements
@@ -96,7 +84,7 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
 
   const handleUrlMeeting = useCallback((url: string) => {
     setUrl(url);
-    /* launchWorkspace("opencare-meet-iframe", {
+    /* launchWorkspace("opentms-meet-iframe", {
       url,
       context: "view",
     }); */
@@ -115,14 +103,14 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
     <>
       <div className={styles.contentSwitcherWrapper}>
         <ContentSwitcher
-          size={isTablet ? "md" : "sm"}
+          size={isTablet ? 'md' : 'sm'}
           onChange={({ index }) => {
             setContentSwitcherValue(index);
           }}
         >
-          <Switch name={"upcoming"} text={t("upcoming", "Upcoming")} />
-          <Switch name={"today"} text={t("today", "Today")} />
-          <Switch name={"past"} text={t("past", "Past")} />
+          <Switch name={'upcoming'} text={t('upcoming', 'Upcoming')} />
+          <Switch name={'today'} text={t('today', 'Today')} />
+          <Switch name={'past'} text={t('past', 'Past')} />
         </ContentSwitcher>
       </div>
 
@@ -141,8 +129,8 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
               <Tile className={styles.tile}>
                 <p className={styles.content}>
                   {t(
-                    "noUpcomingAppointmentsForPatient",
-                    "There are no upcoming appointments to display for this patient"
+                    'noUpcomingAppointmentsForPatient',
+                    'There are no upcoming appointments to display for this patient',
                   )}
                 </p>
               </Tile>
@@ -154,9 +142,7 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
             <Layer>
               <Tile className={styles.tile}>
                 <p className={styles.content}>
-                  {
-                    "There are no appointments scheduled for today to display for this patient"
-                  }
+                  {'There are no appointments scheduled for today to display for this patient'}
                 </p>
               </Tile>
             </Layer>
@@ -166,34 +152,20 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
           return (
             <Layer>
               <Tile className={styles.tile}>
-                <p className={styles.content}>
-                  {"There are no past appointments to display for this patient"}
-                </p>
+                <p className={styles.content}>{'There are no past appointments to display for this patient'}</p>
               </Tile>
             </Layer>
           );
         }
 
-        if (url != "") {
-          return (
-            <iframe
-              title="Web Meeting"
-              src={url}
-              style={{ width: "100%", height: "500px" }}
-            />
-          );
+        if (url != '') {
+          return <iframe title="Web Meeting" src={url} style={{ width: '100%', height: '500px' }} />;
         }
       })()}
 
       {(() => {
-        if (url != "") {
-          return (
-            <MeetIframe
-              url={url}
-              username={user.display}
-              token={tokenNextcloud}
-            />
-          );
+        if (url != '') {
+          return <MeetIframe url={url} username={user.display} token={tokenNextcloud} />;
         }
       })()}
     </>

package/src/components/Demand/tab.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .totalDemand {
   @include type.type-style('heading-compact-02');

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/EmptyLayout/index.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-01');

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/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validator } from "@openmrs/esm-framework";
+import { Type, validator } from '@openmrs/esm-framework';
 
 /**
  * This is the config schema. It expects a configuration object which
@@ -23,13 +23,13 @@ import { Type, validator } from "@openmrs/esm-framework";
 export const configSchema = {
   API_SECURE: {
     _type: Type.String,
-    _default: "------------------",
-    _description: "API secure key",
+    _default: '*******************',
+    _description: 'API secure key',
   },
   API_BASE_URL: {
     _type: Type.String,
-    _default: "http://localhost:8000",
-    _description: "API base url",
+    _default: 'http://localhost:8000',
+    _description: 'API base url',
   },
 };
 

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/extensions/AppointmentTabExt.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PatientAppointmentsBase from '../components/Appointment';
+import { usePatient } from '@openmrs/esm-framework';
+
+/* interface Props {} */
+
+const AppointmentTabExt: React.FC /* <Props> */ = () => {
+  const { isLoading, patientUuid, error } = usePatient();
+
+  return (
+    <div>
+      {isLoading ? <span>...</span> : error ? <span></span> : <PatientAppointmentsBase patientUuid={patientUuid} />}
+    </div>
+  );
+};
+
+export default AppointmentTabExt;

package/src/{Extensions → extensions}/DemandTabExt.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import DemandTab from "../components/Demand/tab";
+import React from 'react';
+import DemandTab from '../components/Demand/tab';
 
 /* interface Props {} */
 

package/src/{Extensions → extensions}/MeetIframeExt.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { MeetIframe } from "../components/MeetIframe";
+import React, { useMemo } from 'react';
+import { MeetIframe } from '../components/MeetIframe';
 
 interface Props {
   url: string;

package/src/{Extensions → extensions}/ValidateDemandFormExt.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { ValidateDemandForm } from "../components/Demand/form";
+import React from 'react';
+import { ValidateDemandForm } from '../components/Demand/form';
 
 export interface ValidateDemandFormExtProps {
   demand: any;
   onClose?: () => void;
 }
 
-export const ValidateDemandFormExt: React.FC<ValidateDemandFormExtProps> = ({
-  demand,
-  onClose,
-}) => {
+export const ValidateDemandFormExt: React.FC<ValidateDemandFormExtProps> = ({ demand, onClose }) => {
   return <ValidateDemandForm demand={demand} onClose={onClose} />;
 };
+
+export default ValidateDemandFormExt;