(feat) O3-4026 Add an icon for vitals and biometrics on the left nav #2079

Munyua123 · 2024-10-28T13:53:07Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

Screenshots

Related Issue

Other

Munyua123 · 2024-10-28T13:54:48Z

@denniskigen I have made the changes on the icon using the Activity Icon.

denniskigen

Thanks for making the changes, @Munyua123. It's close. I've left a few more recommendations.

denniskigen · 2024-10-29T09:26:14Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

 import { ConfigurableLink } from '@openmrs/esm-framework';
+import { ActivityIcon } from '@openmrs/esm-framework';


Can we consolidate these imports?

denniskigen · 2024-10-29T09:26:43Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

@@ -4,6 +4,8 @@ import last from 'lodash-es/last';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { ConfigurableLink } from '@openmrs/esm-framework';
+import { ActivityIcon } from '@openmrs/esm-framework';
+import styling from './dashboardextension.scss';


Suggested change

import styling from './dashboardextension.scss';

import styles from './dashboardextension.scss';

Can we rename this file to dashboard-extension.scss for consistency? https://o3-docs.openmrs.org/docs/coding-conventions#naming

denniskigen · 2024-10-29T09:26:56Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

@@ -22,13 +24,18 @@ export const DashboardExtension = ({
  const location = useLocation();
  const navLink = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);

+  const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styling.icons} /> : null;


Suggested change

const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styling.icons} /> : null;

const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styles.icons} /> : null;

denniskigen · 2024-10-29T09:29:10Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

  return (
    <div key={path}>
      <ConfigurableLink
        className={classNames('cds--side-nav__link', { 'active-left-nav-link': path === navLink })}
        to={`${basePath}/${encodeURIComponent(path)}`}
      >
-        {t(title)}
+        <span className={styling.menu}>


Suggested change

<span className={styling.menu}>

<span className={styling.menu}>

Ditto

denniskigen · 2024-10-29T09:29:41Z

packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss

+  align-items: center;
+}
+
+.icons {


Would .icon be more preferable here? It's just one icon, right?

Munyua123 · 2024-10-29T11:25:10Z

@denniskigen I have made the changes that you had suggested. I have also made a change to use the switch case method, so that someone who is implementing more icons can just add the icons easily

Munyua123 · 2024-10-29T13:13:58Z

@denniskigen I have made the changes and added the icons for all of them but the immunizations tab. It seems that it has not been added to the openmrs framework and also there is none in the carbon react one. Also the icon i have used for the patient summary has not been added yet to the framework so i have used the one in the carbon react icons.

Munyua123 · 2024-10-29T13:15:30Z

I have added the screenshot also

denniskigen · 2024-10-29T13:51:08Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

+  const menuIcon = (title: string) => {
+    switch (title) {
+      case 'Patient Summary':
+        return <Report className={styles.icon} />;
+      case 'Vitals & Biometrics':
+        return <ActivityIcon className={styles.icon} />;
+      case 'Orders':
+        return <ShoppingCartIcon className={styles.icon} />;
+      case 'Medications':
+        return <MedicationIcon className={styles.icon} />;
+      case 'Results':
+        return <ChartAverageIcon className={styles.icon} />;
+      case 'Visits':
+        return <CalendarHeatMapIcon className={styles.icon} />;
+      case 'Allergies':
+        return <WarningIcon className={styles.icon} />;
+      case 'Conditions':
+        return <ListCheckedIcon className={styles.icon} />;
+      case 'Attachments':
+        return <DocumentAttachmentIcon className={styles.icon} />;
+      case 'Programs':
+        return <TableIcon className={styles.icon} />;
+      case 'Appointments':
+        return <EventScheduleIcon className={styles.icon} />;
+      default:
+        return null;
+    }
+  };
+
+  const renderIcon = menuIcon(title);


Maybe an object lookup like the following is more preferable. It has less code and better type inference, and it should be straightforward to pop in more icons:

Suggested change

const menuIcon = (title: string) => {

switch (title) {

case 'Patient Summary':

return <Report className={styles.icon} />;

case 'Vitals & Biometrics':

return <ActivityIcon className={styles.icon} />;

case 'Orders':

return <ShoppingCartIcon className={styles.icon} />;

case 'Medications':

return <MedicationIcon className={styles.icon} />;

case 'Results':

return <ChartAverageIcon className={styles.icon} />;

case 'Visits':

return <CalendarHeatMapIcon className={styles.icon} />;

case 'Allergies':

return <WarningIcon className={styles.icon} />;

case 'Conditions':

return <ListCheckedIcon className={styles.icon} />;

case 'Attachments':

return <DocumentAttachmentIcon className={styles.icon} />;

case 'Programs':

return <TableIcon className={styles.icon} />;

case 'Appointments':

return <EventScheduleIcon className={styles.icon} />;

default:

return null;

}

};

const renderIcon = menuIcon(title);

type MenuTitle = keyof typeof MenuIcons;

const MenuIcons = {

Allergies: WarningIcon,

Appointments: EventScheduleIcon,

Attachments: DocumentAttachmentIcon,

Conditions: ListCheckedIcon,

Medications: MedicationIcon,

Orders: ShoppingCartIcon,

'Patient Summary': Report,

Programs: TableIcon,

Results: ChartAverageIcon,

Visits: CalendarHeatMapIcon,

'Vitals & Biometrics': ActivityIcon,

} as const;

const menuIcon = (title: MenuTitle) => {

const Icon = MenuIcons[title];

return Icon ? <Icon className={styles.icon} /> : null;

};

const renderIcon = menuIcon(title as MenuTitle);

Munyua123 · 2024-10-29T14:21:24Z

@denniskigen The above is noted and will be implemented. I had a question will it be okay if i add the missing icons to the framework? or do i have to wait for directive on this

denniskigen · 2024-10-29T17:13:38Z

Yes, please go ahead and add them in Core.

Munyua123 · 2024-11-06T18:56:48Z

@denniskigen I have added all the icons , kindly review

denniskigen · 2024-11-06T19:11:05Z

@paulsonder @ciaranduffy could you give this a design review?

paulsonder · 2024-11-07T08:34:19Z

@denniskigen Works for me. We'll just need to coordinate on making sure these are reflected in the design docs.

CynthiaKamau · 2024-11-07T09:00:06Z

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

@@ -22,13 +37,40 @@ export const DashboardExtension = ({
  const location = useLocation();
  const navLink = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);

+  type MenuTitle = keyof typeof MenuIcons;
+
+  const MenuIcons = {


Thanks @Munyua123 for this, what will be the approach for adding icons for packages that do not live in the patient chart ?

@CynthiaKamau The approach may be adding the icons in their respective packages.

Munyua123 and others added 2 commits October 28, 2024 16:52

O3-4026 Add an icon for vitals and biometrics on the left nav

7941c7a

Merge branch 'main' into vitals-icon

cf563c5

denniskigen reviewed Oct 29, 2024

View reviewed changes

Munyua123 added 2 commits October 29, 2024 14:19

Update DashboardExtension.tsx

4ee007c

Update dashboardextension.scss

eef52ac

Munyua123 changed the title ~~O3-4026 Add an icon for vitals and biometrics on the left nav~~ (feat) O3-4026 Add an icon for vitals and biometrics on the left nav Oct 29, 2024

Munyua123 added 4 commits October 29, 2024 14:26

Update DashboardExtension.tsx

d222915

Merge branch 'main' into vitals-icon

2324f89

Update DashboardExtension.tsx

a8acd6d

Rename dashboardextension.scss to dashboard-extension.scss

7cc94cf

denniskigen reviewed Oct 29, 2024

View reviewed changes

Munyua123 added 6 commits November 2, 2024 12:18

Update DashboardExtension.tsx

57cbf35

Merge branch 'main' into vitals-icon

5be6fcb

Update DashboardExtension.tsx

3769c4f

Merge branch 'main' into vitals-icon

ded2ba9

Update DashboardExtension.tsx

d4cfa4d

Merge branch 'main' into vitals-icon

3779927

Munyua123 requested a review from denniskigen November 6, 2024 18:55

Merge branch 'main' into vitals-icon

ea18196

CynthiaKamau reviewed Nov 7, 2024

View reviewed changes

Merge branch 'main' into vitals-icon

640ffd5

Merge branch 'main' into vitals-icon

2c79bb4

Munyua123 requested a review from CynthiaKamau November 14, 2024 14:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) O3-4026 Add an icon for vitals and biometrics on the left nav #2079

(feat) O3-4026 Add an icon for vitals and biometrics on the left nav #2079

Munyua123 commented Oct 28, 2024 •

edited

Loading

Munyua123 commented Oct 28, 2024

denniskigen left a comment

denniskigen Oct 29, 2024

denniskigen Oct 29, 2024

denniskigen Oct 29, 2024

denniskigen Oct 29, 2024

denniskigen Oct 29, 2024

Munyua123 commented Oct 29, 2024

Munyua123 commented Oct 29, 2024

Munyua123 commented Oct 29, 2024 •

edited

Loading

denniskigen Oct 29, 2024

Munyua123 commented Oct 29, 2024

denniskigen commented Oct 29, 2024

Munyua123 commented Nov 6, 2024

denniskigen commented Nov 6, 2024

paulsonder commented Nov 7, 2024

CynthiaKamau Nov 7, 2024

Munyua123 Nov 7, 2024

		import { ConfigurableLink } from '@openmrs/esm-framework';
		import { ActivityIcon } from '@openmrs/esm-framework';

	import styling from './dashboardextension.scss';
	import styles from './dashboardextension.scss';

	const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styling.icons} /> : null;
	const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styles.icons} /> : null;

	<span className={styling.menu}>
	<span className={styling.menu}>

(feat) O3-4026 Add an icon for vitals and biometrics on the left nav #2079

Are you sure you want to change the base?

(feat) O3-4026 Add an icon for vitals and biometrics on the left nav #2079

Conversation

Munyua123 commented Oct 28, 2024 • edited Loading

Requirements

Summary

Screenshots

Related Issue

Other

Munyua123 commented Oct 28, 2024

denniskigen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Munyua123 commented Oct 29, 2024

Munyua123 commented Oct 29, 2024

Munyua123 commented Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

Munyua123 commented Oct 29, 2024

denniskigen commented Oct 29, 2024

Munyua123 commented Nov 6, 2024

denniskigen commented Nov 6, 2024

paulsonder commented Nov 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Munyua123 commented Oct 28, 2024 •

edited

Loading

Munyua123 commented Oct 29, 2024 •

edited

Loading