U4X-532: Creating a notification dialog

src/components/navbar/navbar.component.tsx

@@ -25,6 +25,7 @@ import UserMenuPanel from "../navbar-header-panels/user-menu-panel.component";
 import SideMenuPanel from "../navbar-header-panels/side-menu-panel.component";
 import styles from "./navbar.scss";
 import AppSearchLaunch from "../app-search-icon/app-search-icon.component";
+import NotificationsMenuButton from "../notifications-menu/notifications-menu-button.component";
 
 const Navbar: React.FC = () => {
   const session = useSession();
@@ -141,6 +142,7 @@ const Navbar: React.FC = () => {
             expanded={isActivePanel("sideMenu")}
           />
         )}
+        <NotificationsMenuButton />
         {showAppMenu && <AppSearchLaunch />}
         <NotificationsMenuPanel expanded={isActivePanel("notificationsMenu")} />
         {showUserMenu && (

src/components/notifications-menu/notifications-menu-button.component.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useCallback } from "react";
+import { HeaderGlobalAction } from "@carbon/react";
+import { Close, Notification, NotificationNew } from "@carbon/react/icons";
+import styles from "./notifications-menu-button.scss";
+import { useLayoutType } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import NotificationMenuOverlay from "./notifications-menu-overlay.component";
+import { useGetAlerts } from "./notifications-menu.resource";
+
+const NotificationsMenuButton: React.FC = () => {
+  const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const { alerts } = useGetAlerts();
+
+  const toggleNotificationPanel = useCallback(() => {
+    setIsNotificationPanelOpen(!isNotificationPanelOpen);
+  }, [isNotificationPanelOpen]);
+
+  const hasUnreadAlerts = alerts.some((alert) => !alert.alertRead);
+
+  return (
+    <div className={styles.noficationButtonContainer}>
+      {isNotificationPanelOpen && <NotificationMenuOverlay />}
+      <HeaderGlobalAction
+        aria-label={t("notifications", "Notifications")}
+        aria-labelledby="Notifications Icon"
+        className={`${
+          isNotificationPanelOpen
+            ? styles.activeNotificationButton
+            : styles.notificationButton
+        }`}
+        onClick={toggleNotificationPanel}
+      >
+        {isNotificationPanelOpen ? (
+          <Close size={20} />
+        ) : hasUnreadAlerts ? (
+          <NotificationNew size={20} />
+        ) : (
+          <Notification size={20} />
+        )}
+      </HeaderGlobalAction>
+    </div>
+  );
+};
+
+export default NotificationsMenuButton;

src/components/notifications-menu/notifications-menu-button.scss

@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+.noficationButtonContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}

src/components/notifications-menu/notifications-menu-overlay.component.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import styles from "./notifications-menu-overlay.scss";
+import { useTranslation } from "react-i18next";
+import { InlineLoading, Toggle } from "@carbon/react";
+import { useGetAlerts } from "./notifications-menu.resource";
+
+const NotificationMenuOverlay: React.FC = () => {
+  const { t } = useTranslation();
+  const [showOnlyUnread, setShowOnlyUnread] = useState(false);
+  const { alerts, isLoading, isError } = useGetAlerts();
+
+  return (
+    <div className={styles.notificationMenuOverlay}>
+      <div className={styles.header}>
+        <h2>{t("notifications", "Notifications")}</h2>
+        <div className={styles.toggleContainer}>
+          <Toggle
+            labelText={t("onlyShowUnread", "Only show unread")}
+            labelA={t("off", "Off")}
+            labelB={t("on", "On")}
+            size="sm"
+            onToggle={(isToggled) => setShowOnlyUnread(isToggled)}
+            defaultToggled={showOnlyUnread}
+            id="toggle-1"
+          />
+        </div>
+      </div>
+      {isLoading ? (
+        <InlineLoading
+          status="active"
+          iconDescription="Loading"
+          description="Loading notifications..."
+        />
+      ) : alerts.length === 0 ? (
+        <p>No notifications available</p>
+      ) : (
+        <ul className={styles.notificationList}>
+          {alerts
+            .filter((notification) =>
+              showOnlyUnread ? !notification.alertRead : true
+            )
+            .map((notification) => (
+              <li
+                key={notification.alertId}
+                className={`${styles.notificationItem} ${
+                  !notification.alertRead ? styles.unreadNotificationItem : ""
+                }`}
+              >
+                <div className={styles.notificationIndicatorWrapper}>
+                  {!notification.alertRead && (
+                    <span className={styles.unreadIndicator}></span>
+                  )}
+                </div>
+                <div className={styles.notificationContent}>
+                  <p className={styles.description}>{notification.display}</p>
+                  <span className={styles.time}>
+                    {notification.timeDifference}
+                  </span>
+                </div>
+              </li>
+            ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default NotificationMenuOverlay;

src/components/notifications-menu/notifications-menu-overlay.scss

@@ -0,0 +1,84 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+.notificationMenuOverlay {
+    position: absolute;
+    right: 2rem;
+    top: 50px;
+    display: block;
+    box-sizing: border-box;
+    width: 30rem;
+    height: calc(100vh - 75pt);
+    margin: 16px 0 16px;
+    background: white;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    z-index: 1000;
+    overflow: auto;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid #eaeaea;
+    h2 {
+        font-size: 20px;
+        margin: 0;
+        font-weight: var(--cds-label-01-font-weight, 600);
+        flex: 1;
+    }
+    .toggleContainer {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        .bx--toggle {
+            flex-shrink: 0;
+        }
+    }
+}
+
+.notificationList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.notificationItem {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #eaeaea;
+    &:last-child {
+        border-bottom: none;
+    }
+    &.unreadNotificationItem {
+        background-color: #f4f4f4;
+    }
+    .notificationIndicatorWrapper {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        .unreadIndicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: blue;
+            display: inline-block;
+            margin-left: 10px;
+        }
+    }
+    .notificationContent {
+        flex-grow: 1;
+        .description {
+            margin: 0;
+        }
+        .time {
+            display: block;
+            color: #999;
+            margin-top: 8px;
+            font-size: 12px;
+        }
+    }
+}

src/components/notifications-menu/notifications-menu.resource.ts

@@ -0,0 +1,53 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+export interface Notifications {
+  uuid: string;
+  display: string;
+  alertId: number;
+  alertRead: boolean;
+  dateToExpire: string;
+  dateCreated: string;
+  timeDifference: string;
+}
+
+export function useGetAlerts() {
+  const apiURL = `${restBaseUrl}/alert?v=full`;
+  const { data, error, isLoading } = useSWR<
+    { data: { results: Array<Notifications> } },
+    Error
+  >(apiURL, openmrsFetch);
+
+  const alerts = data?.data?.results || [];
+
+  alerts.forEach((notification) => {
+    const dateCreated = new Date(notification.dateCreated);
+    const currentDate = new Date();
+    const timeDifference = calculateTimeDifference(dateCreated, currentDate);
+    notification.timeDifference = timeDifference;
+  });
+
+  return {
+    alerts,
+    isLoading,
+    isError: error,
+  };
+}
+
+function calculateTimeDifference(date1: Date, date2: Date): string {
+  const timeDifferenceInMs = date2.getTime() - date1.getTime();
+  const seconds = Math.floor(timeDifferenceInMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return `${days} day${days > 1 ? "s" : ""} ago`;
+  } else if (hours > 0) {
+    return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+  } else if (minutes > 0) {
+    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+  } else {
+    return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
+  }
+}

src/index.ts

@@ -1,6 +1,7 @@
 import {
   defineConfigSchema,
   defineExtensionConfigSchema,
+  getAsyncLifecycle,
   getSyncLifecycle,
   setupOfflineSync,
 } from "@openmrs/esm-framework";

src/routes.json

@@ -1,46 +1,44 @@
 {
-  "$schema": "https://json.openmrs.org/routes.schema.json",
-  "backendDependencies": {
-    "webservices.rest": ">=2.2.0"
-  },
-  "pages": [
-    {
-      "component": "root",
-      "routeRegex": "^(?!login/?)",
-      "online": true,
-      "offline": true,
-      "order": 0
+    "$schema": "https://json.openmrs.org/routes.schema.json",
+    "backendDependencies": {
+        "webservices.rest": ">=2.2.0"
     },
-    {
-      "component": "redirect",
-      "routeRegex": "^$",
-      "online": true,
-      "offline": true,
-      "order": 0
-    }
-  ],
-  "extensions": [
-    {
-      "name": "default-user-panel",
-      "slot": "user-panel-slot",
-      "component": "userPanel",
-      "online": true,
-      "offline": true,
-      "order": 0
-    },
-    {
-      "name": "change-locale",
-      "slot": "user-panel-slot",
-      "component": "localeChanger",
-      "online": true,
-      "offline": true,
-      "order": 1
-    },
-    {
-      "name": "link",
-      "component": "linkComponent",
-      "online": true,
-      "offline": true
-    }
-  ]
+    "pages": [{
+            "component": "root",
+            "routeRegex": "^(?!login/?)",
+            "online": true,
+            "offline": true,
+            "order": 0
+        },
+        {
+            "component": "redirect",
+            "routeRegex": "^$",
+            "online": true,
+            "offline": true,
+            "order": 0
+        }
+    ],
+    "extensions": [{
+            "name": "default-user-panel",
+            "slot": "user-panel-slot",
+            "component": "userPanel",
+            "online": true,
+            "offline": true,
+            "order": 0
+        },
+        {
+            "name": "change-locale",
+            "slot": "user-panel-slot",
+            "component": "localeChanger",
+            "online": true,
+            "offline": true,
+            "order": 1
+        },
+        {
+            "name": "link",
+            "component": "linkComponent",
+            "online": true,
+            "offline": true
+        }
+    ]
 }