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

package/src/components/Demand/tab.scss

@@ -0,0 +1,145 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.totalDemand {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  display: flex;
+}
+
+.totalDemandLength {
+  color: var(--brand-03);
+  display: block;
+  margin-left: 6px;
+}
+
+.expandedRow>td>div {
+  max-height: max-content !important;
+}
+
+.expandedRow td {
+  padding: 0 2rem;
+}
+
+.expandedRow th[colspan] td[colspan]>div:first-child {
+  padding: 0 1rem;
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.container {
+  border: 1px solid colors.$gray-20;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 layout.$spacing-05;
+  background-color: colors.$white-0;
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid var(--brand-03);
+    }
+  }
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.searchbar {
+  input {
+    background-color: colors.$gray-10;
+  }
+}
+
+.link {
+  text-decoration: none;
+  max-width: 50%;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.layer {
+  height: 100%;
+
+  :global(.cds--btn--primary) {
+    background-color: unset;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .headerContainer {
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+    svg {
+      margin-left: 0;
+      margin-right: layout.$spacing-03;
+    }
+    h4 {
+      text-align: right;
+    }
+  }
+}

package/src/components/Demand/tab.tsx

@@ -0,0 +1,315 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { useState } from "react";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  type DataTableHeader,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  Pagination,
+} from "@carbon/react";
+
+import {
+  type ToastType,
+  isDesktop,
+  showModal,
+  showToast,
+  useConfig,
+  useLayoutType,
+  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";
+
+const DemandTab: React.FC = (/* {} */) => {
+  //I. hooks
+  const [loading, setLoading] = useState(true);
+  const { t } = useTranslation();
+  const [error, setError] = useState(false);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? "sm" : "lg";
+  const [demands, setDemands] = useState([]);
+  const [searchString, setSearchString] = useState("");
+  const [processing, setProcessing] = useState(false);
+  const [pageSize, setPageSize] = useState(5);
+
+  //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(), []);
+
+  //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" },
+    ],
+    []
+  );
+
+  // chargement des démandes
+  useEffect(() => {
+    const fun = async () => {
+      setLoading(true);
+      setError(false);
+      await doctorService
+        .getDemands()
+        .then((demands) => {
+          if (demands) {
+            setDemands(demands);
+          } else {
+            setError(true);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    };
+    fun();
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [doctorService]);
+
+  // filtrage et formatage des demandes
+  const mapDemands = useMemo(() => {
+    const map = new Map();
+    demands.forEach((demand) => {
+      map.set(demand.id, demand);
+    });
+    return map;
+  }, [demands]);
+
+  const tableRows = useMemo(
+    () =>
+      demands
+        .map((demand, i) => {
+          return {
+            ...demand,
+            date: formatDatetime(parseDate(demand.date), {
+              mode: "wide",
+            }),
+            numero: i + 1,
+          };
+        })
+        .filter((demand) => {
+          if (searchString === "") {
+            return true;
+          }
+          if (demand.date && `${demand.date}`.includes(searchString)) {
+            return true;
+          }
+          if (demand.service && `${demand.service}`.includes(searchString)) {
+            return true;
+          }
+          return false;
+        }),
+    [demands, searchString]
+  );
+
+  // pagination des demandes
+  const { results, goTo, currentPage } = usePagination(tableRows, pageSize);
+
+  // fonction de rejet
+  const handleReject = useCallback(
+    async (demand) => {
+      if (!processing) {
+        setProcessing(true);
+        const res = await doctorService.rejectDemand(demand.id);
+        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";
+            } else {
+              setError(true);
+            }
+          });
+        } else {
+          message = `Erreur de rejet`;
+        }
+        setProcessing(false);
+        showToast({ description: message, kind: type });
+      }
+    },
+    [doctorService, processing]
+  );
+
+  // fonction de validation
+  const handleValidate = useCallback(
+    async (demand) => {
+      if (!processing) {
+        setProcessing(true);
+        const dispose = showModal(
+          "opencare-validate-demand-form",
+          {
+            demand,
+            onClose: () => {
+              dispose();
+            },
+          },
+          async () => {
+            await doctorService.getDemands().then((demands) => {
+              if (demands) {
+                setDemands(demands);
+              } else {
+                setError(true);
+              }
+            });
+            setProcessing(false);
+          }
+        );
+      }
+    },
+    [doctorService, processing]
+  );
+
+  // II. returns
+  if (loading) {
+    return <DataTableSkeleton role="progressbar" row={5} />;
+  }
+
+  if (error) {
+    return <span>Error</span>;
+  }
+
+  if (demands.length == 0) {
+    return <EmptyLayout headerTitle={"Demands"} displayText={"demands"} />;
+  }
+
+  return (
+    <Layer className={styles.container}>
+      <Tile className={styles.headerContainer}>
+        <div
+          className={
+            isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading
+          }
+        >
+          <h4>Demands</h4>
+        </div>
+        <span className={styles.totalDemand}>
+          Total :
+          <span className={styles.totalDemandLength}>{demands.length}</span>
+        </span>
+      </Tile>
+      <div className={styles.toolbar}>
+        <Search
+          className={styles.searchbar}
+          labelText=""
+          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,
+        }) => (
+          <>
+            <TableContainer {...getTableContainerProps()}>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.value ? (
+                            cell.value
+                          ) : (
+                            <TableCell>
+                              <Button
+                                kind="danger"
+                                size="small"
+                                disable={processing}
+                                onClick={() => {
+                                  handleReject(mapDemands.get(row.id));
+                                }}
+                              >
+                                Reject
+                              </Button>
+                              <Button
+                                kind="primary"
+                                size="small"
+                                disable={processing}
+                                onClick={() => {
+                                  handleValidate(mapDemands.get(row.id));
+                                }}
+                              >
+                                Validation
+                              </Button>
+                            </TableCell>
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </>
+        )}
+      </DataTable>
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={getPageSizes(tableRows, 5) ?? []}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+        totalItems={tableRows.length}
+      />
+    </Layer>
+  );
+};
+
+export default DemandTab;

package/src/components/EmptyLayout/index.scss

@@ -0,0 +1,69 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.displayText {
+  text-transform: lowercase;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.header4 {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: 1rem;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeading,
+  .tabletHeading {
+    text-align: right;
+  }
+}

package/src/components/EmptyLayout/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Layer, Tile } from "@carbon/react";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./index.scss";
+
+export interface EmptyLayoutProps {
+  displayText: string;
+  headerTitle: string;
+}
+
+export const EmptyLayout: React.FC<EmptyLayoutProps> = ({
+  headerTitle,
+  displayText,
+}) => {
+  const isTablet = useLayoutType() === "tablet";
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div
+          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
+        >
+          <h4>{headerTitle}</h4>
+        </div>
+        <p className={styles.content}>
+          There are no <span className={styles.displayText}>{displayText}</span>{" "}
+          for this location
+        </p>
+      </Tile>
+    </Layer>
+  );
+};

package/src/components/MeetIframe/index.scss

@@ -0,0 +1,56 @@
+@use '@carbon/colors';
+
+$color-blue-10: #edf5ff;
+
+$color-spinner: #2a73cd;
+/*$size-spinner: 56px;*/
+
+.contentViewWrapper {
+  background-color: $color-blue-10;
+  position: relative;
+  width: 100%;
+  height: 550px;
+}
+
+@keyframes spinner-annim {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.preloader {
+  background-color: $color-blue-10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+}
+
+.preloader .logo{
+  width: 50px;
+  height: 50px;
+}
+
+.spinner {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: conic-gradient(#0000 10%, $color-spinner);
+  animation: spinner-annim 1s infinite linear;
+}
+
+
+
+.viewer {
+  width: 100%;
+  height: 100%;
+}