@mbehenri/openmrs-esm-opentms-meet-app 1.0.0

package/src/components/Appointment/index.tsx

@@ -0,0 +1,207 @@
+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";
+
+interface PatientAppointmentsBaseProps {
+  patientUuid: string;
+}
+
+const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({
+  patientUuid,
+}) => {
+  //I. hooks
+  const { t } = useTranslation();
+  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 [tokenNextcloud, setTokenNextcloud] = useState("");
+
+  const { user } = useSession();
+
+  const [url, setUrl] = useState("");
+
+  //recupération de la configuration
+  const conf = useConfig();
+
+  // update env variable
+
+  env.API_HOST = conf["API_HOST"];
+  env.API_PASSWORD = conf["API_PASSWORD"];
+  env.API_PORT = conf["API_PORT"];
+  env.API_USER = conf["API_USER"];
+  env.API_SECURE = conf["API_SECURE"];
+  const doctorService = useMemo(() => DoctorService.getInstance(), []);
+
+  // chargement des appointements
+  useEffect(() => {
+    const fun = async () => {
+      setLoading(true);
+      setError(false);
+      await doctorService
+        .getAppointments(patientUuid, user.person.uuid)
+        .then((appointments) => {
+          if (appointments) {
+            setAppointments(appointments);
+          } else {
+            setError(true);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    };
+    fun();
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [doctorService, patientUuid, user.person.uuid]);
+
+  useEffect(() => {
+    const fun = async () => {
+      setLoading(true);
+      setError(false);
+      await doctorService
+        .getTokenNextcloud(patientUuid)
+        .then((token) => {
+          setTokenNextcloud(token);
+        })
+        .catch((e) => console.error(e));
+    };
+    fun();
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [doctorService, patientUuid]);
+
+  const handleUrlMeeting = useCallback((url: string) => {
+    setUrl(url);
+    /* launchWorkspace("opencare-meet-iframe", {
+      url,
+      context: "view",
+    }); */
+  }, []);
+
+  // II. returns
+  if (loading) {
+    return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+  }
+
+  if (error) {
+    return <span>Error</span>;
+  }
+
+  return (
+    <>
+      <div className={styles.contentSwitcherWrapper}>
+        <ContentSwitcher
+          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")} />
+        </ContentSwitcher>
+      </div>
+
+      {(() => {
+        if (appointments.get(contentSwitcherValue).length > 0) {
+          return (
+            <PatientAppointmentsTable
+              appointments={appointments.get(contentSwitcherValue)}
+              handleUrlMeeting={handleUrlMeeting}
+            />
+          );
+        }
+        if (contentSwitcherValue === AppointmentTypes.UPCOMING) {
+          return (
+            <Layer>
+              <Tile className={styles.tile}>
+                <p className={styles.content}>
+                  {t(
+                    "noUpcomingAppointmentsForPatient",
+                    "There are no upcoming appointments to display for this patient"
+                  )}
+                </p>
+              </Tile>
+            </Layer>
+          );
+        }
+        if (contentSwitcherValue === AppointmentTypes.TODAY) {
+          return (
+            <Layer>
+              <Tile className={styles.tile}>
+                <p className={styles.content}>
+                  {
+                    "There are no appointments scheduled for today to display for this patient"
+                  }
+                </p>
+              </Tile>
+            </Layer>
+          );
+        }
+        if (contentSwitcherValue === AppointmentTypes.PAST) {
+          return (
+            <Layer>
+              <Tile className={styles.tile}>
+                <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 (
+            <MeetIframe
+              url={url}
+              username={user.display}
+              token={tokenNextcloud}
+            />
+          );
+        }
+      })()}
+    </>
+  );
+};
+
+export default PatientAppointmentsBase;

package/src/components/Appointment/menu.scss

@@ -0,0 +1,7 @@
+.layer {
+    height: 100%;
+  }
+  
+  .menuItem {
+    max-width: none;
+  }

package/src/components/Appointment/menu.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { Layer, OverflowMenu, OverflowMenuItem } from "@carbon/react";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./menu.scss";
+
+interface appointmentsActionMenuProps {
+  appointment: any;
+  patientUuid: string;
+}
+
+export const PatientAppointmentsActionMenu = ({
+  appointment,
+  patientUuid,
+}: appointmentsActionMenuProps) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu
+        aria-label="Edit or delete appointment"
+        size={isTablet ? "lg" : "sm"}
+        flipped
+        align="left"
+      >
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="editAppointment"
+          itemText={t("edit", "Edit")}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="roomAppointment"
+          itemText={t("room", "Go")}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="cancelAppointment"
+          itemText={t("cancel", "Cancel")}
+          isDelete={true}
+          hasDivider
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};

package/src/components/Appointment/tab.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DataTable,
+  type DataTableHeader,
+  Table,
+  Layer,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+} from "@carbon/react";
+import {
+  formatDatetime,
+  isDesktop,
+  parseDate,
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import { Button } from "@carbon/react";
+import { getPageSizes } from "../../utils";
+
+interface AppointmentTableProps {
+  appointments: Array<any>;
+  handleUrlMeeting: (url: string) => void;
+}
+
+const PatientAppointmentsTable: React.FC<AppointmentTableProps> = ({
+  appointments,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  handleUrlMeeting = (url) => {},
+}) => {
+  // I. hooks
+
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? "sm" : "lg";
+  const [pageSize, setPageSize] = useState(5);
+
+  const tableRows = useMemo(
+    () =>
+      appointments.map((appointment) => {
+        return {
+          id: appointment.uuid,
+          date: formatDatetime(parseDate(appointment.startDateTime), {
+            mode: "wide",
+          }),
+          location: appointment?.location ? appointment?.location : "——",
+          service: appointment.service,
+          status: appointment.status,
+          type: appointment.appointmentKind
+            ? appointment.appointmentKind
+            : "——",
+          notes: appointment.comments ? appointment.comments : "——",
+        };
+      }),
+    [appointments]
+  );
+
+  const mapAppointments = useMemo(() => {
+    const map = new Map();
+    appointments.forEach((appointment) => {
+      map.set(appointment.uuid, appointment);
+    });
+    return map;
+  }, [appointments]);
+
+  const { results, goTo, currentPage } = usePagination(tableRows, pageSize);
+
+  const tableHeaders: Array<typeof DataTableHeader> = useMemo(
+    () => [
+      { key: "date", header: t("date", "Date") },
+      { key: "location", header: t("location", "Location") },
+      { key: "service", header: t("service", "Service") },
+      { key: "status", header: t("status", "Status") },
+      { key: "type", header: t("type", "Type") },
+      { key: "notes", header: t("notes", "Notes") },
+    ],
+    [t]
+  );
+
+  const HandleJoin = useCallback(
+    (appointment) => {
+      handleUrlMeeting(appointment.linkRoom);
+    },
+    [handleUrlMeeting]
+  );
+
+  return (
+    <Layer style={{ marginBottom: "1rem" }}>
+      <DataTable
+        rows={results}
+        headers={tableHeaders}
+        isSortable
+        size={responsiveSize}
+        useZebraStyles
+      >
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}
+                    >
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>
+                        {cell.value?.content ?? cell.value}
+                      </TableCell>
+                    ))}
+                    <TableCell className="cds--table-column-menu">
+                      {/* <PatientAppointmentsActionMenu
+                        appointment={appointments[i]}
+                        patientUuid={patientUuid}
+                      /> */}
+                      <Button
+                        size="small"
+                        onClick={() => {
+                          HandleJoin(mapAppointments.get(row.id));
+                        }}
+                      >
+                        Joindre
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={getPageSizes(results, 5) ?? []}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+        totalItems={results.length}
+      />
+    </Layer>
+  );
+};
+
+export default PatientAppointmentsTable;

package/src/components/Demand/form.scss

@@ -0,0 +1,19 @@
+.formGroupsContainer {
+  margin: 1rem
+}
+
+.formGroupContainer {
+  margin-top: 0.5rem;
+}
+
+.buttonContainer {
+  display: flex;
+  width: 100%;
+  background-color: #0d8888;
+}
+
+.formButton {
+  max-width: unset !important;
+  flex: 1;
+  height: 4rem;
+}

package/src/components/Demand/form.tsx

@@ -0,0 +1,236 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Form,
+  FormGroup,
+  Dropdown,
+  DatePicker,
+  DatePickerInput,
+  NumberInput,
+  TimePicker,
+  TimePickerSelect,
+  SelectItem,
+  Button,
+} from "@carbon/react";
+import { Layer, Tile } from "@carbon/react";
+import { showToast, useConfig /*useLayoutType*/ } from "@openmrs/esm-framework";
+import styles from "./form.scss";
+import env from "../../repositories/env";
+import DoctorService from "../../services/doctor";
+//import { inLocalTimeOffsetUTC } from "../../utils";
+
+export interface ValidateDemandFormProps {
+  demand: any;
+  onClose: () => void;
+}
+
+interface Doctor {
+  id: string;
+  name: string;
+}
+
+export const ValidateDemandForm: React.FC<ValidateDemandFormProps> = ({
+  demand,
+  onClose,
+}) => {
+  //const isTablet = useLayoutType() === "tablet";
+
+  const [selectedDoctor, setSelectedDoctor] = useState<Doctor | null>(null);
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [startTime, setStartTime] = useState<string>("00:00");
+  const [ampm, setAmpm] = useState<string>("AM");
+  const [duration, setDuration] = useState<number>(30);
+  const [doctors, setDoctors] = useState([]);
+  //recupération de la configuration
+
+  const [processing, setProcessing] = useState(false);
+  const conf = useConfig();
+
+  // update env variable
+
+  env.API_HOST = conf["API_HOST"];
+  env.API_PASSWORD = conf["API_PASSWORD"];
+  env.API_PORT = conf["API_PORT"];
+  env.API_USER = conf["API_USER"];
+  env.API_SECURE = conf["API_SECURE"];
+  const doctorService = useMemo(() => DoctorService.getInstance(), []);
+
+  useEffect(() => {
+    const fun = async () => {
+      await doctorService.getProviders().then((doctors) => {
+        if (doctors) {
+          setDoctors(doctors);
+        }
+      });
+    };
+    fun();
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [doctorService]);
+
+  const handleDoctorChange = useCallback(
+    (selectedItem: any) => {
+      const doctor = doctors.find(
+        (doc) => doc.name === selectedItem.selectedItem
+      );
+      setSelectedDoctor(doctor || null);
+    },
+    [doctors]
+  );
+
+  const handleStartDateChange = useCallback((date: Date[]) => {
+    setStartDate(date[0] || null);
+  }, []);
+
+  const handleStartTimeChange = useCallback((event: any) => {
+    setStartTime(event.target.value);
+  }, []);
+
+  const handleAmpmChange = useCallback((event: any) => {
+    setAmpm(event.target.value);
+  }, []);
+
+  const handleDurationChange = useCallback((event: any) => {
+    setDuration(event.target.value);
+  }, []);
+
+  const handleSubmit = async () => {
+    if (startDate && startTime && duration > 0) {
+      if (!processing) {
+        setProcessing(true);
+        let [hours, minutes] = startTime.split(":").map(Number);
+        if (ampm === "PM" && hours < 12) {
+          hours += 12;
+        }
+        if (ampm === "AM" && hours === 12) {
+          hours = 0;
+        }
+        const combinedDateTime = new Date(startDate);
+        combinedDateTime.setHours(hours, minutes);
+
+        // Gestion de la soumission du formulaire
+        await doctorService
+          .validateDemand(
+            demand.id,
+            selectedDoctor.id,
+            combinedDateTime,
+            duration
+          )
+          .then((res) => {
+            /* const res = true; */
+            if (res) {
+              showToast({
+                description: `the demand initiated by ${demand.patient} have been validated`,
+                kind: "success",
+              });
+            } else {
+              showToast({
+                description: `error during validation`,
+                kind: "error",
+              });
+            }
+          })
+          .finally(() => {
+            setProcessing(false);
+            if (onClose) {
+              onClose();
+            }
+          });
+      }
+    }
+  };
+
+  const handleCancel = useCallback(() => {
+    // Gestion de l'annulation du formulaire
+    /* showToast({ description: `cancel` }); */
+    if (!processing) {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [onClose, processing]);
+
+  return (
+    <Layer>
+      <Tile>
+        <h2>Validate demand</h2>
+      </Tile>
+      <Form>
+        <div className={styles.formGroupsContainer}>
+          <FormGroup
+            legendText="Provider"
+            className={styles.formGroupContainer}
+          >
+            <Dropdown
+              id="doctor-dropdown"
+              items={doctors.map((doc) => doc.name)}
+              onChange={handleDoctorChange}
+            />
+          </FormGroup>
+
+          <FormGroup
+            legendText="StartDateTime"
+            className={styles.formGroupContainer}
+            style={{ display: "flex" }}
+          >
+            <DatePicker
+              dateFormat="d/m/Y"
+              datePickerType="single"
+              onChange={handleStartDateChange}
+            >
+              <DatePickerInput
+                id="start-date-picker"
+                placeholder="jj/mm/aaaa"
+              />
+            </DatePicker>
+            <TimePicker
+              id="start-time-picker"
+              onChange={handleStartTimeChange}
+              value={startTime}
+            />
+            <TimePickerSelect
+              id="time-picker-select-ampm"
+              labelText="AM/PM"
+              onChange={handleAmpmChange}
+            >
+              <SelectItem value="AM" text="AM" />
+              <SelectItem value="PM" text="PM" />
+            </TimePickerSelect>
+          </FormGroup>
+
+          <FormGroup
+            legendText="Duration (minutes)"
+            className={styles.formGroupContainer}
+          >
+            <NumberInput
+              id="duration-input"
+              min={10}
+              value={duration}
+              onChange={handleDurationChange}
+            />
+          </FormGroup>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            kind="secondary"
+            size="large"
+            className={styles.formButton}
+            onClick={handleCancel}
+            disable={processing}
+          >
+            Cancel
+          </Button>
+          <Button
+            kind="primary"
+            size="large"
+            className={styles.formButton}
+            disable={processing}
+            onClick={handleSubmit}
+          >
+            {processing ? "Validating ..." : "Validate"}
+          </Button>
+        </div>
+      </Form>
+    </Layer>
+  );
+};