@kenyaemr/esm-pharmacy-app 5.2.1-pre.724

package/src/pharmacy-tables/pharmacy-patients.component.tsx

@@ -0,0 +1,221 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { Add, TrashCan } from '@carbon/react/icons';
+import {
+  ErrorState,
+  UserHasAccess,
+  isDesktop,
+  launchWorkspace,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { mutate } from 'swr';
+import { usePharmacyPatients } from '../hooks';
+import { revokePharamacyAssignment } from '../pharmacy.resources';
+import styles from './pharmacy-tables.scss';
+
+export const PharmacyPatients: React.FC = () => {
+  const { pharmacyUuid } = useParams();
+  const { t } = useTranslation();
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const { error, patients, isLoading } = usePharmacyPatients(pharmacyUuid);
+  const headerTitle = t('pharmacyPatients', 'Pharmacy Patients');
+
+  const [pageSize, setPageSize] = useState(10);
+
+  const { results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+  const layout = useLayoutType();
+
+  const launchDeleteModal = (patientUuid: string) => {
+    const dispose = showModal('pharmacy-delete-confirm-dialog', {
+      onDelete: () => {
+        handleRevoke(patientUuid);
+        dispose();
+      },
+      onClose: () => dispose(),
+    });
+  };
+
+  const headers = [
+    {
+      header: t('openmrsId', 'OpenMRS ID'),
+      key: 'openmrsId',
+    },
+    {
+      header: t('name', 'Name'),
+      key: 'name',
+    },
+    {
+      header: t('age', 'Age'),
+      key: 'age',
+    },
+    {
+      header: t('sex', 'Sex'),
+      key: 'sex',
+    },
+    {
+      header: t('contact', 'Contact'),
+      key: 'contact',
+    },
+    {
+      header: t('dateMapped', 'Date Mapped'),
+      key: 'dateMapped',
+    },
+    {
+      header: t('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const tableRows =
+    results?.map((patient) => {
+      return {
+        id: `${patient.uuid}`,
+        openmrsId: patient.openmrsId,
+        name: patient.name,
+        age: patient.age ?? '--',
+        sex: patient.gender ?? '--',
+        contact: patient.telephoneContact ?? '--',
+        dateMapped: patient.dateMapped,
+        actions: (
+          <UserHasAccess privilege={'coreapps.systemAdministration'} fallback={`--`}>
+            <Button
+              kind="tertiary"
+              renderIcon={TrashCan}
+              onClick={() => {
+                launchDeleteModal(patient.uuid);
+              }}>
+              Revoke
+            </Button>
+          </UserHasAccess>
+        ),
+      };
+    }) ?? [];
+
+  const handdleAssignToPharmacy = () => {
+    launchWorkspace('pharmacy-assignment-form', {
+      workspaceTitle: 'Pharmacy Assignment Form',
+      pharmacyUuid,
+      type: 'org.openmrs.Patient',
+    });
+  };
+
+  const handleRevoke = async (patientUuid: string) => {
+    try {
+      const results = await revokePharamacyAssignment({
+        entityIdentifier: patientUuid,
+        basisIdentifier: pharmacyUuid,
+        entityType: 'org.openmrs.Patient',
+        basisType: 'org.openmrs.Location',
+      });
+      showSnackbar({ kind: 'success', subtitle: results, title: 'Success' });
+
+      mutate((key) => {
+        return typeof key === 'string' && key.startsWith(`/ws/rest/v1/datafilter/search?type=org.openmrs.Patient`);
+      });
+    } catch (error) {
+      showSnackbar({ kind: 'error', subtitle: error.message, title: 'Failure' });
+    }
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (patients.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{headerTitle}</h4>
+          </div>
+          <EmptyDataIllustration />
+          <p className={styles.content}>{t('noPharmacyPatients', 'No Pharmacy Patients to list.')}</p>
+          <UserHasAccess privilege={'coreapps.systemAdministration'}>
+            <Button onClick={handdleAssignToPharmacy} renderIcon={Add} kind="ghost">
+              {t('assignPatient', 'Assign Patient')}
+            </Button>
+          </UserHasAccess>
+        </Tile>
+      </Layer>
+    );
+  }
+  return (
+    <div className={styles.widgetContainer}>
+      <CardHeader title={headerTitle}>
+        <UserHasAccess privilege={'coreapps.systemAdministration'}>
+          <Button onClick={handdleAssignToPharmacy} renderIcon={Add} kind="ghost">
+            {t('assignPatient', 'Assign Patient')}
+          </Button>
+        </UserHasAccess>
+      </CardHeader>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={patients.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};

package/src/pharmacy-tables/pharmacy-table.component.tsx

@@ -0,0 +1,164 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import {
+  ConfigurableLink,
+  ErrorState,
+  isDesktop,
+  useLayoutType,
+  usePagination,
+  useSession,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUserMappedPharmacies } from '../hooks';
+import styles from './pharmacy-tables.scss';
+
+const PharmaciesTable = () => {
+  const { t } = useTranslation();
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const {
+    user: { uuid: sessionUserUuid },
+  } = useSession();
+  const { error, pharmacies, isLoading } = useUserMappedPharmacies(sessionUserUuid);
+
+  const headerTitle = t('communityPharmacies', 'Community pharmacies');
+
+  const [pageSize, setPageSize] = useState(10);
+
+  const { results, totalPages, currentPage, goTo } = usePagination(pharmacies, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+  const layout = useLayoutType();
+
+  const headers = [
+    {
+      header: t('name', 'Name'),
+      key: 'name',
+    },
+    {
+      header: t('dateMapped', 'Date Mapped'),
+      key: 'dateMapped',
+    },
+    {
+      header: t('cityVillage', 'City village'),
+      key: 'cityVillage',
+    },
+    {
+      header: t('stateProvince', 'State province'),
+      key: 'stateProvince',
+    },
+    {
+      header: t('countyDistrict', 'County District'),
+      key: 'countyDistrict',
+    },
+  ];
+
+  const tableRows =
+    results?.map((pharmacy) => {
+      return {
+        id: `${pharmacy.uuid}`,
+        name: (
+          <ConfigurableLink
+            to={window.getOpenmrsSpaBase() + `home/pharmacy/${pharmacy.uuid}`}
+            style={{ textDecoration: 'none' }}>
+            {pharmacy.name}
+          </ConfigurableLink>
+        ),
+        description: pharmacy.description ?? '--',
+        cityVillage: pharmacy.cityVillage ?? '--',
+        stateProvince: pharmacy.stateProvince ?? '--',
+        countyDistrict: pharmacy.countyDistrict ?? '--',
+        dateMapped: pharmacy.dateMaped,
+      };
+    }) ?? [];
+
+  const handdleTagPharmacy = () => {};
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (pharmacies.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{headerTitle}</h4>
+          </div>
+          <EmptyDataIllustration />
+          <p className={styles.content}>{t('noCommunityPharmacyToList', 'No Community Pharmacies to list.')}</p>
+        </Tile>
+      </Layer>
+    );
+  }
+  return (
+    <div className={styles.widgetContainer}>
+      <CardHeader title={`Community Pharmacies (${pharmacies.length})`}>
+        <div />
+      </CardHeader>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={pharmacies.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};
+
+export default PharmaciesTable;

package/src/pharmacy-tables/pharmacy-tables.scss

@@ -0,0 +1,49 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.widgetContainer {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: 1rem;
+}
+
+.widgetContainer :global(.cds--data-table) thead th button span {
+  height: unset !important;
+}
+
+.tile {
+  text-align: center;
+}
+
+.emptyStateContainer {
+  margin: 2rem 0;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$layout-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  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;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}

package/src/pharmacy-tables/pharmacy-users.component.tsx

@@ -0,0 +1,197 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { Add, TrashCan } from '@carbon/react/icons';
+import {
+  ErrorState,
+  UserHasAccess,
+  isDesktop,
+  launchWorkspace,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { mutate } from 'swr';
+import { usePharmacyUsers } from '../hooks';
+import { revokePharamacyAssignment } from '../pharmacy.resources';
+import styles from './pharmacy-tables.scss';
+
+export const PharmacyUsers: React.FC = () => {
+  const { pharmacyUuid } = useParams();
+  const { t } = useTranslation();
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const { error, users, isLoading } = usePharmacyUsers(pharmacyUuid);
+  const headerTitle = t('pharmacyUsers', 'Pharmacy Users');
+
+  const [pageSize, setPageSize] = useState(10);
+
+  const { results, totalPages, currentPage, goTo } = usePagination(users, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+  const layout = useLayoutType();
+
+  const headers = [
+    {
+      header: t('name', 'Name'),
+      key: 'name',
+    },
+    {
+      header: t('dateMapped', 'Date Mapped'),
+      key: 'dateMapped',
+    },
+    {
+      header: t('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const tableRows =
+    results?.map((user) => {
+      return {
+        id: `${user.uuid}`,
+        name: user.name,
+        dateMapped: user.dateMapped,
+        actions: (
+          <UserHasAccess privilege={'coreapps.systemAdministration'} fallback="--">
+            <Button
+              kind="tertiary"
+              renderIcon={TrashCan}
+              onClick={() => {
+                const dispose = showModal('pharmacy-delete-confirm-dialog', {
+                  onDelete: () => {
+                    handleRevoke(user.uuid);
+                    dispose();
+                  },
+                  onClose: () => dispose(),
+                });
+              }}>
+              Revoke
+            </Button>
+          </UserHasAccess>
+        ),
+      };
+    }) ?? [];
+
+  const handdleAssignToPharmacy = () => {
+    launchWorkspace('pharmacy-assignment-form', {
+      workspaceTitle: 'Pharmacy Assignment Form',
+      pharmacyUuid,
+      type: 'org.openmrs.User',
+    });
+  };
+
+  const handleRevoke = async (userUuid: string) => {
+    try {
+      const results = await revokePharamacyAssignment({
+        entityIdentifier: userUuid,
+        basisIdentifier: pharmacyUuid,
+        entityType: 'org.openmrs.User',
+        basisType: 'org.openmrs.Location',
+      });
+      showSnackbar({ kind: 'success', subtitle: results, title: 'Success' });
+
+      mutate((key) => {
+        return typeof key === 'string' && key.startsWith(`/ws/rest/v1/datafilter/search?type=org.openmrs.User`);
+      });
+    } catch (error) {
+      showSnackbar({ kind: 'error', subtitle: error.message, title: 'Failure' });
+    }
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (users.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{headerTitle}</h4>
+          </div>
+          <EmptyDataIllustration />
+          <p className={styles.content}>{t('noPharmacyUsers', 'No Pharmacy users to list.')}</p>
+          <UserHasAccess privilege={'coreapps.systemAdministration'}>
+            <Button onClick={handdleAssignToPharmacy} renderIcon={Add} kind="ghost">
+              {t('assignUser', 'Assign User')}
+            </Button>
+          </UserHasAccess>
+        </Tile>
+      </Layer>
+    );
+  }
+  return (
+    <div className={styles.widgetContainer}>
+      <CardHeader title={headerTitle}>
+        <UserHasAccess privilege={`coreapps.systemAdministration`}>
+          <Button onClick={handdleAssignToPharmacy} renderIcon={Add} kind="ghost">
+            {t('assignUser', 'Assign User')}
+          </Button>
+        </UserHasAccess>
+      </CardHeader>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={users.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};

package/src/pharmacy-tabs/pharmacy-tabs-component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TabPanels, TabPanel, TabList, Tabs, Tab } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { PharmacyPatients } from '../pharmacy-tables/pharmacy-patients.component';
+import { PharmacyUsers } from '../pharmacy-tables/pharmacy-users.component';
+import styles from './pharmacy-tabs.scss';
+
+export const PharmacyTabs: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <main>
+      <Tabs className={styles.tabs}>
+        <TabList className={styles.tablist} aria-label="List tabs" contained>
+          <Tab className={styles.tab}>{t('patients', 'Assigned Patients')}</Tab>
+          <Tab className={styles.tab}>{t('users', 'Asigned Users')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <PharmacyPatients />
+          </TabPanel>
+          <TabPanel>
+            <PharmacyUsers />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </main>
+  );
+};

package/src/pharmacy-tabs/pharmacy-tabs.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tabs {
+  grid-column: span 2;
+}
+
+.tablist {
+  padding: 0 spacing.$spacing-05;
+}
+
+.tab {
+  min-width: 8.875rem;
+
+  &:active {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+}