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

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenyaemr/esm-pharmacy-app",
+  "version": "5.2.1-pre.724",
+  "description": "pharmacy app for KenyaEMR",
+  "browser": "dist/kenyaemr-esm-pharmacy-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-core#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-core#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-core/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.42.1",
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "gitHead": "26fcec8e422b36202ce9874565ac44d9326f94da"
+}

package/src/autosuggest/autosuggest.component.tsx

@@ -0,0 +1,187 @@
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Layer, Search, type SearchProps } from '@carbon/react';
+import classNames from 'classnames';
+import styles from './autosuggest.scss';
+
+// FIXME Temporarily included types from Carbon
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded?: boolean;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?(): void;
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the Search
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: Function;
+  getFieldValue: Function;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean | undefined;
+  invalidText?: string | undefined;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  ...searchProps
+}) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSuggestions([]);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query) {
+      getSearchResults(query).then((suggestions) => {
+        setSuggestions(suggestions);
+      });
+    } else {
+      setSuggestions([]);
+    }
+  };
+
+  const handleClear = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSuggestionSelected(name, undefined);
+  };
+
+  const handleClick = (index: number) => {
+    const display = getDisplayValue(suggestions[index]);
+    const value = getFieldValue(suggestions[index]);
+    searchBox.current.value = display;
+    onSuggestionSelected(name, value);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {suggestions.length > 0 && (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <li key={index} onClick={(e) => handleClick(index)} role="presentation">
+              {getDisplayValue(suggestion)}
+            </li>
+          ))}
+        </ul>
+      )}
+      {invalid ? <label className={classNames(styles.invalidMsg)}>{invalidText}</label> : <></>}
+    </div>
+  );
+};

package/src/autosuggest/autosuggest.scss

@@ -0,0 +1,62 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 143px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: #fff;
+  margin-bottom: 20px;
+  z-index: 99;
+}
+
+.suggestions li {
+  padding: spacing.$spacing-05;
+  line-height: 1.29;
+  color: #525252;
+  border-bottom: 1px solid #8d8d8d;
+}
+
+.suggestions li:hover {
+  background-color: #e5e5e5;
+  color: #161616;
+  cursor: pointer;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid #999;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, #da1e28);
+}

package/src/config-schema.ts

@@ -0,0 +1,43 @@
+import { Type, validator } from '@openmrs/esm-framework';
+
+/**
+ * This is the config schema. It expects a configuration object which
+ * looks like this:
+ *
+ * ```json
+ * { "casualGreeting": true, "whoToGreet": ["Mom"] }
+ * ```
+ *
+ * In OpenMRS Microfrontends, all config parameters are optional. Thus,
+ * all elements must have a reasonable default. A good default is one
+ * that works well with the reference application.
+ *
+ * To understand the schema below, please read the configuration system
+ * documentation:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ * Note especially the section "How do I make my module configurable?"
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
+ * and the Schema Reference
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
+ */
+export const configSchema = {
+  casualGreeting: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: 'Whether to use a casual greeting (or a formal one).',
+  },
+  whoToGreet: {
+    _type: Type.Array,
+    _default: ['World'],
+    _description: 'Who should be greeted. Names will be separated by a comma and space.',
+    _elements: {
+      _type: Type.String,
+    },
+    _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')],
+  },
+};
+
+export type Config = {
+  casualGreeting: boolean;
+  whoToGreet: Array<string>;
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useUserMappedPharmacies } from './useUserMappedPharmacies';
+export { default as usePharmacy } from './usePharmacy';
+export { default as usePharmacyPatients } from './usePharmacyPatients';
+export { default as usePharmacyUsers } from './usePharmacyUsers';

package/src/hooks/usePharmacy.ts

@@ -0,0 +1,17 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { Pharmacy } from '../types';
+
+const usePharmacy = (pharmacyUuid: string) => {
+  const customeRepresentation = 'full';
+  const url = `${restBaseUrl}/location/${pharmacyUuid}?v=${customeRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Pharmacy>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    error,
+    pharmacy: data?.data,
+  };
+};
+
+export default usePharmacy;

package/src/hooks/usePharmacyPatients.ts

@@ -0,0 +1,48 @@
+import { FetchResponse, formatDatetime, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { PharamacyPatientMapping, PharmacyPatient } from '../types';
+
+const usePharmacyPatients = (pharmacyUuid: string) => {
+  const url = `${restBaseUrl}/datafilter/search?type=org.openmrs.Patient`;
+
+  const fetchPharmacyPatients = async (url: string) => {
+    const abortController = new AbortController();
+
+    const response = await openmrsFetch(url, {
+      body: JSON.stringify({
+        entityIdentifier: '',
+        entityType: 'org.openmrs.Patient',
+        basisIdentifier: pharmacyUuid,
+        basisType: 'org.openmrs.Location',
+      }),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    });
+    return response;
+  };
+
+  const { data, isLoading, error } = useSWR<FetchResponse<Array<PharamacyPatientMapping>>>(url, fetchPharmacyPatients);
+
+  return {
+    isLoading,
+    error,
+    patients: (data?.data ?? []).map(extractData),
+  };
+};
+
+const extractData = (mapping: PharamacyPatientMapping) => {
+  return {
+    name: mapping.entity.name,
+    uuid: mapping.entity.uuid,
+    age: mapping.entity.age,
+    gender: mapping.entity.gender,
+    telephoneContact: mapping.entity['Telephone contact'],
+    openmrsId: mapping.entity.OpenMRSID,
+    dateMapped: formatDatetime(new Date(mapping.dateCreated), { mode: 'standard', noToday: true }),
+  } as PharmacyPatient;
+};
+
+export default usePharmacyPatients;

package/src/hooks/usePharmacyUsers.ts

@@ -0,0 +1,43 @@
+import { FetchResponse, formatDatetime, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { PhamarcyUserMapping, PharmacyUser } from '../types';
+
+const usePharmacyUsers = (pharmacyUuid: string) => {
+  const customPresentation = 'full';
+  const url = `${restBaseUrl}/datafilter/search?type=org.openmrs.User`;
+  const fetchPharmacyUsers = async (url: string) => {
+    const abortController = new AbortController();
+
+    const response = await openmrsFetch(url, {
+      body: JSON.stringify({
+        entityIdentifier: '',
+        entityType: 'org.openmrs.User',
+        basisIdentifier: pharmacyUuid,
+        basisType: 'org.openmrs.Location',
+      }),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    });
+    return response;
+  };
+  const { data, isLoading, error } = useSWR<FetchResponse<PhamarcyUserMapping[]>>(url, fetchPharmacyUsers);
+
+  return {
+    isLoading,
+    error,
+    users: (data?.data ?? []).map(extractData),
+  };
+};
+
+const extractData = (mapping: PhamarcyUserMapping) => {
+  return {
+    name: mapping.entity.name,
+    uuid: mapping.entity.uuid,
+    dateMapped: formatDatetime(new Date(mapping.dateCreated), { mode: 'standard', noToday: true }),
+  } as PharmacyUser;
+};
+
+export default usePharmacyUsers;

package/src/hooks/useUserMappedPharmacies.ts

@@ -0,0 +1,47 @@
+import { FetchResponse, formatDatetime, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { PhamarcyUserMapping, Pharmacy } from '../types';
+
+const extractPharmacyData = (mapping: PhamarcyUserMapping) => {
+  return {
+    uuid: mapping.basis.uuid,
+    name: mapping.basis.name,
+    dateMaped: formatDatetime(new Date(mapping.dateCreated), { mode: 'standard', noToday: true }),
+    cityVillage: mapping.basis.cityVillage,
+    countyDistrict: mapping.basis.countyDistrict,
+    mflCode: mapping.basis['Master Facility Code'],
+  } as Pharmacy;
+};
+
+const useUserMappedPharmacies = (userUuid: string) => {
+  const url = `${restBaseUrl}/datafilter/search`;
+
+  const fetchUserPharmacies = async (url: string) => {
+    const abortController = new AbortController();
+
+    const response = await openmrsFetch(url, {
+      body: JSON.stringify({
+        entityIdentifier: userUuid,
+        entityType: 'org.openmrs.User',
+        basisIdentifier: '',
+        basisType: 'org.openmrs.Location',
+      }),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    });
+    return response;
+  };
+
+  const { isLoading, error, data } = useSWR<FetchResponse<PhamarcyUserMapping[]>>(url, fetchUserPharmacies);
+
+  return {
+    isLoading,
+    error,
+    pharmacies: (data?.data ?? []).map(extractPharmacyData),
+  };
+};
+
+export default useUserMappedPharmacies;

package/src/index.ts

@@ -0,0 +1,41 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './pharmacy-left-panel/pharmacy-left-panel-link.component';
+const moduleName = '@kenyaemr/esm-pharmacy-app';
+
+const options = {
+  featureName: 'esm-pharmacy-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  const pharmacyBasepath = `${window.spaBase}/home/pharmacy`;
+
+  defineConfigSchema(moduleName, configSchema);
+  registerBreadcrumbs([
+    {
+      title: 'pharmacy',
+      path: pharmacyBasepath,
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
+}
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+export const pharmacyAssignmentForm = getAsyncLifecycle(
+  () => import('./pharamacy-forms/pharamacy-assignment-form.workspace'),
+  options,
+);
+export const pharmacyDeleteConfirmDialog = getAsyncLifecycle(
+  () => import('./pharamacy-forms/delete-confirm-dialog.modal'),
+  options,
+);
+export const pharmacyDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'pharmacy',
+    title: 'Community Pharmacy',
+  }),
+  options,
+);

package/src/pharamacy-forms/delete-confirm-dialog.modal.tsx

@@ -0,0 +1,26 @@
+import { Button, ButtonSet, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const DeleteConfirmDialog = ({ onClose, onDelete }) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <ModalHeader closeModal={onClose}>{t('warning', 'Warning!')}</ModalHeader>
+      <ModalBody>Are you sure you want to revoke access?</ModalBody>
+      <ModalFooter>
+        <ButtonSet>
+          <Button kind="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button kind="primary" onClick={onDelete}>
+            Revoke
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default DeleteConfirmDialog;