Adding HIV Prevention Services Nav Group

packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx

@@ -169,7 +169,7 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
             queueEntry[0]?.uuid,
             contentSwitcherIndex,
             priorityComment,
-            "comment",
+            'comment',
           );
 
           let navigateTo = `${window.getOpenmrsSpaBase()}home`;

packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx

@@ -81,7 +81,6 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
     setSearchTerm(event?.target?.value?.trim().toLowerCase());
   }, []);
 
-
   const { isLoading, items, totalCount, currentPageSize, setPageSize, pageSizes, currentPage, setCurrentPage } =
     usePatientQueuePages(activeLocationUuid, status, isToggled, true);
 

packages/esm-ugandaemr-app/src/app-menu/app-search-bar/app-search-bar.component.tsx

@@ -18,10 +18,8 @@ interface AppSearchBarProps {
 const AppSearchBar = React.forwardRef<HTMLInputElement, AppSearchBarProps>(
   ({ onChange, onClear, onSubmit, small }, ref) => {
     const { t } = useTranslation();
-    const [searchTerm, setSearchTerm] = useState("");
-    const menuItemExtensions = useAssignedExtensions(
-      appMenuItemSlot
-    ) as AssignedExtension[];
+    const [searchTerm, setSearchTerm] = useState('');
+    const menuItemExtensions = useAssignedExtensions(appMenuItemSlot) as AssignedExtension[];
 
     const handleChange = (val: string) => {
       setSearchTerm(val);
@@ -39,7 +37,7 @@ const AppSearchBar = React.forwardRef<HTMLInputElement, AppSearchBarProps>(
 
     const filteredExtensions = menuItemExtensions
       .filter((extension) => {
-        const itemName = extension?.name ?? "";
+        const itemName = extension?.name ?? '';
         return itemName.toLowerCase().includes(searchTerm.toLowerCase());
       })
       .map((extension) => (
@@ -65,12 +63,12 @@ const AppSearchBar = React.forwardRef<HTMLInputElement, AppSearchBarProps>(
           <Search
             autoFocus
             className={styles.appSearchInput}
-            closeButtonLabelText={t("clearSearch", "Clear")}
+            closeButtonLabelText={t('clearSearch', 'Clear')}
             labelText=""
             onChange={(event) => handleChange(event.target.value)}
             onClear={onClear}
-            placeholder={t("searchForApp", "Search for an application")}
-            size={small ? "sm" : "lg"}
+            placeholder={t('searchForApp', 'Search for an application')}
+            size={small ? 'sm' : 'lg'}
             value={searchTerm}
             ref={ref}
             data-testid="appSearchBar"
@@ -80,26 +78,25 @@ const AppSearchBar = React.forwardRef<HTMLInputElement, AppSearchBarProps>(
           {searchTerm
             ? filteredExtensions
             : menuItemExtensions.map((extension) => (
-              <ComponentContext.Provider
-                key={extension?.id}
-                value={{
-                  featureName: extension?.moduleName,
-                  moduleName: extension?.moduleName,
-                  extension: {
-                    extensionId: extension?.id,
-                    extensionSlotName: appMenuItemSlot,
-                    extensionSlotModuleName: extension?.moduleName,
-                  },
-                }}
-              >
-                <Extension />
-              </ComponentContext.Provider>
-            ))}
+                <ComponentContext.Provider
+                  key={extension?.id}
+                  value={{
+                    featureName: extension?.moduleName,
+                    moduleName: extension?.moduleName,
+                    extension: {
+                      extensionId: extension?.id,
+                      extensionSlotName: appMenuItemSlot,
+                      extensionSlotModuleName: extension?.moduleName,
+                    },
+                  }}
+                >
+                  <Extension />
+                </ComponentContext.Provider>
+              ))}
         </div>
       </>
     );
-  }
+  },
 );
 
-export default AppSearchBar;;
-
+export default AppSearchBar;

packages/esm-ugandaemr-app/src/app-menu/app-search-icon/app-search-icon.component.tsx

@@ -1,17 +1,16 @@
-import React, { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { HeaderGlobalAction } from "@carbon/react";
-import { Close, Switcher } from "@carbon/react/icons";
-import AppSearchOverlay from "../app-search-overlay/app-search-overlay.component";
-import styles from "./app-search-icon.scss";
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HeaderGlobalAction } from '@carbon/react';
+import { Close, Switcher } from '@carbon/react/icons';
+import AppSearchOverlay from '../app-search-overlay/app-search-overlay.component';
+import styles from './app-search-icon.scss';
 
-interface AppSearchLaunchProps { }
+interface AppSearchLaunchProps {}
 
 const AppSearchLaunch: React.FC<AppSearchLaunchProps> = () => {
   const { t } = useTranslation();
   const [showSearchInput, setShowSearchInput] = useState(false);
 
-
   const handleGlobalAction = useCallback(() => {
     if (showSearchInput) {
       setShowSearchInput(false);
@@ -20,24 +19,15 @@ const AppSearchLaunch: React.FC<AppSearchLaunchProps> = () => {
     }
   }, [setShowSearchInput, showSearchInput]);
 
-
   return (
     <div className={styles.appSearchIconWrapper}>
-      {showSearchInput && (
-        <AppSearchOverlay
-          onClose={handleGlobalAction}
-          query={''}
-        />
-      )}
+      {showSearchInput && <AppSearchOverlay onClose={handleGlobalAction} query={''} />}
 
       <div className={`${showSearchInput && styles.closeButton}`}>
         <HeaderGlobalAction
-          aria-label={t("searchApp", "Search App")}
+          aria-label={t('searchApp', 'Search App')}
           aria-labelledby="Search App"
-          className={`${showSearchInput
-            ? styles.activeSearchIconButton
-            : styles.searchIconButton
-            }`}
+          className={`${showSearchInput ? styles.activeSearchIconButton : styles.searchIconButton}`}
           enterDelayMs={500}
           name="SearchAppIcon"
           data-testid="searchAppIcon"
@@ -47,7 +37,6 @@ const AppSearchLaunch: React.FC<AppSearchLaunchProps> = () => {
         </HeaderGlobalAction>
       </div>
     </div>
-
   );
 };
 

packages/esm-ugandaemr-app/src/app-menu/app-search-overlay/app-search-overlay.component.tsx

@@ -1,23 +1,19 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Overlay from "../../overlay/overlay";
-import AppSearchBar from "../app-search-bar/app-search-bar.component";
-import debounce from "lodash-es/debounce";
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Overlay from '../../overlay/overlay';
+import AppSearchBar from '../app-search-bar/app-search-bar.component';
+import debounce from 'lodash-es/debounce';
 
 interface AppSearchOverlayProps {
   onClose: () => void;
   query?: string;
   header?: string;
 }
 
-const AppSearchOverlay: React.FC<AppSearchOverlayProps> = ({
-  onClose,
-  query = "",
-  header,
-}) => {
+const AppSearchOverlay: React.FC<AppSearchOverlayProps> = ({ onClose, query = '', header }) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState(query);
-  const handleClear = useCallback(() => setSearchTerm(""), [setSearchTerm]);
+  const handleClear = useCallback(() => setSearchTerm(''), [setSearchTerm]);
 
   useEffect(() => {
     if (query) {
@@ -30,15 +26,8 @@ const AppSearchOverlay: React.FC<AppSearchOverlayProps> = ({
   }, 300);
 
   return (
-    <Overlay
-      header={header ?? t("searchResults", "Search results")}
-      close={onClose}
-    >
-      <AppSearchBar
-        onSubmit={onSearchQueryChange}
-        onChange={onSearchQueryChange}
-        onClear={handleClear}
-      />
+    <Overlay header={header ?? t('searchResults', 'Search results')} close={onClose}>
+      <AppSearchBar onSubmit={onSearchQueryChange} onChange={onSearchQueryChange} onClear={handleClear} />
     </Overlay>
   );
 };

packages/esm-ugandaemr-app/src/dashboard.meta.tsx

@@ -11,6 +11,12 @@ export const hivCareAndTreatmentDashboardDMeta = {
   isExpanded: false,
 };
 
+export const hivPrevetionServicesboardDMeta = {
+  title: 'HIV Prevention Services',
+  slotName: 'hiv-prevention-services-slot',
+  isExpanded: false,
+};
+
 export const generalCounsellingDashboardMeta = {
   slot: 'general-counselling-summary-slot',
   columns: 1,
@@ -19,6 +25,23 @@ export const generalCounsellingDashboardMeta = {
   layoutMode: 'anchored',
 };
 
+export const htsDashboardMeta = {
+  slot: 'hiv-testing-services-slot',
+  columns: 1,
+  title: 'HTS',
+  path: 'hts',
+  layoutMode: 'anchored',
+};
+
+export const vmmcDashboardMeta = {
+  slot: 'vmmc-services-slot',
+  columns: 1,
+  title: 'VMMC',
+  path: 'vmmc',
+  layoutMode: 'anchored',
+};
+
+
 export const treatmentRegimenDashboardMeta = {
   slot: 'treatment-regimen-slot',
   columns: 1,

packages/esm-ugandaemr-app/src/index.ts

@@ -20,17 +20,28 @@ import SubjectiveFindingsComponent from './pages/clinical-patient-summary/clinic
 import ObjectiveFindingsComponent from './pages/clinical-patient-summary/clinical-patient-summary-tabs/objective-findings.component';
 import TreatmentPlanComponent from './pages/clinical-patient-summary/clinical-patient-summary-tabs/treatment-plan.component';
 import AssessmentComponent from './pages/clinical-patient-summary/clinical-patient-summary-tabs/assessment.component';
-import { createOHRIPatientChartSideNavLink, patientChartDivider_dashboardMeta } from "@ohri/openmrs-esm-ohri-commons-lib";
+import {
+  createOHRIPatientChartSideNavLink,
+  patientChartDivider_dashboardMeta,
+} from '@ohri/openmrs-esm-ohri-commons-lib';
 
 import {
   CalcMonthsOnART,
   DSDMCategorizationDatasource,
   latestObs,
   patientDSDM,
 } from './custom-expressions/custom-expressions';
-import { generalCounsellingDashboardMeta, hivCareAndTreatmentDashboardDMeta, treatmentRegimenDashboardMeta } from './dashboard.meta';
+import {
+  generalCounsellingDashboardMeta,
+  hivCareAndTreatmentDashboardDMeta, treatmentRegimenDashboardMeta,
+  hivPrevetionServicesboardDMeta,
+  htsDashboardMeta,
+  vmmcDashboardMeta,
+} from './dashboard.meta';
 import GeneralCounsellingSummary from './views/hiv/hct/general-counselling/general-counselling-summary.component';
 import TreatmentRegimen from './views/hiv/hct/treatment-regimen/treatment-regimen.component';
+import HivTestingServices from './views/hiv/hps/hts/hiv-testing-services.component';
+import VmmcServices from './views/hiv/hps/vmmc/vmmc-services.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -114,6 +125,10 @@ export const patientChartHIVCareAndTreatmentDashboard = getSyncLifecycle(
   createDashboardGroup(hivCareAndTreatmentDashboardDMeta),
   options,
 );
+export const patientChartHIVPreventionServicesDashboard = getSyncLifecycle(
+  createDashboardGroup(hivPrevetionServicesboardDMeta),
+  options,
+);
 
 export const generalCounsellingDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...generalCounsellingDashboardMeta, moduleName }),
@@ -125,6 +140,23 @@ export const generalCounsellingDashboard = getSyncLifecycle(GeneralCounsellingSu
   moduleName,
 });
 
+export const vmmcDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...vmmcDashboardMeta, moduleName }),
+  options,
+);
+
+export const vmmcDashboard = getSyncLifecycle(VmmcServices, {
+  featureName: 'vmmc-services',
+  moduleName,
+});
+
+export const htsDashboardLink = getSyncLifecycle(createDashboardLink({ ...htsDashboardMeta, moduleName }), options);
+
+export const htsDashboard = getSyncLifecycle(HivTestingServices, {
+  featureName: 'hiv-testing-services',
+  moduleName,
+});
+
 
 export const treatmentRegimenDashboardLink = getSyncLifecycle(createDashboardLink({ ...treatmentRegimenDashboardMeta, moduleName }), options)
 

packages/esm-ugandaemr-app/src/overlay/overlay.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import { isDesktop, useLayoutType } from "@openmrs/esm-framework";
-import styles from "./overlay.scss";
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './overlay.scss';
 
 interface OverlayProps {
   close: () => void;
@@ -10,20 +10,11 @@ interface OverlayProps {
   buttonsGroup?: React.ReactElement;
 }
 
-const Overlay: React.FC<OverlayProps> = ({
-  close,
-  children,
-  header,
-  buttonsGroup,
-}) => {
+const Overlay: React.FC<OverlayProps> = ({ close, children, header, buttonsGroup }) => {
   const layout = useLayoutType();
 
   return (
-    <div
-      className={
-        isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay
-      }
-    >
+    <div className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}>
       <div className={styles.overlayContent}>{children}</div>
       <div className={styles.buttonsGroup}>{buttonsGroup}</div>
     </div>

packages/esm-ugandaemr-app/src/routes.json

@@ -27,6 +27,12 @@
             "component": "patientChartHIVCareAndTreatmentDashboard",
             "order": 21
         },
+        {
+            "name": "hiv-prevention-services",
+            "slot": "patient-chart-dashboard-slot",
+            "component": "patientChartHIVPreventionServicesDashboard",
+            "order": 22
+        },
         {
             "name": "general-counselling-summary",
             "slot": "hiv-care-and-treatment-slot",
@@ -59,6 +65,38 @@
             "slot": "treatment-regimen-summary-slot",
             "component": "treatmentRegimenDashboard"
         },
+        {
+            "name": "hiv-testing-services",
+            "slot": "hiv-prevention-services-slot",
+            "component": "htsDashboardLink",
+            "meta": {
+                "slot": "hiv-testing-services-slot",
+                "columns": 1,
+                "path": "hts",
+                "layoutMode": "anchored"
+            }
+        },
+        {
+            "name": "hiv-testing-services-ext",
+            "slot": "hiv-testing-services-slot",
+            "component": "htsDashboard"
+        },
+        {
+            "name": "vmmc-services",
+            "slot": "hiv-prevention-services-slot",
+            "component": "vmmcDashboardLink",
+            "meta": {
+                "slot": "vmmc-services-slot",
+                "columns": 1,
+                "path": "vmmc",
+                "layoutMode": "anchored"
+            }
+        },
+        {
+            "name": "vmmc-services-ext",
+            "slot": "vmmc-services-slot",
+            "component": "vmmcDashboard"
+        },
         {
             "name": "retrieve-facility-code-modal",
             "component": "retrieveFacilityCodeModal"