Feat/ims page headers and menu highlights

README.md

@@ -44,6 +44,7 @@ It is dedicated to be deployed as a module of [openimis-fe_js](https://github.co
 - `Searcher`: generic searcher page (with criteria form and result table)
 - `Form`: generic form. Manage dirty state, displays add/save button,...
 - `Table`: generic table. Headers (with -sort-actions), rows,...
+- `CommonSnackbar`: generic snackbar. Display banner based on response 
 
 ## Helpers
 

package.json

@@ -14,7 +14,7 @@
     "build": "rollup -c",
     "start": "rollup -c -w",
     "format": "prettier src -w",
-    "prepare":"npm run build"
+    "prepare": "npm run build"
   },
   "peerDependency": {
     "react-intl": "^5.8.1",
@@ -50,7 +50,9 @@
     "src"
   ],
   "dependencies": {
+    "cookie_js": "^1.4.2",
     "history": "^5.2.0",
+    "react-idle-timer": "^5.7.2",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.2.1"
   }

src/actions.js

@@ -8,6 +8,7 @@ import {
   formatGQLString,
   formatMutation,
   formatServerError,
+  decodeId,
 } from "./helpers/api";
 
 const ROLE_FULL_PROJECTION = () => [
@@ -28,8 +29,8 @@ const LANGUAGE_FULL_PROJECTION = () => ["name", "code", "sortOrder"];
 const MODULEPERMISSION_FULL_PROJECTION = () => ["modulePermsList{moduleName, permissions{permsName, permsValue}}"];
 
 function getApiUrl() {
-  let _baseApiUrl = process.env.REACT_APP_API_URL ?? '/api';
-  if (_baseApiUrl.indexOf('/') !== 0) {
+  let _baseApiUrl = process.env.REACT_APP_API_URL ?? "/api";
+  if (_baseApiUrl.indexOf("/") !== 0) {
     _baseApiUrl = `/${_baseApiUrl}`;
   }
   return _baseApiUrl;
@@ -39,6 +40,7 @@ export const baseApiUrl = getApiUrl();
 
 export function apiHeaders() {
   let headers = {
+    // "ngrok-skip-browser-warning": "true",
     "Content-Type": "application/json",
   };
   return headers;
@@ -147,7 +149,7 @@ export function prepareMutation(operation, input, params = {}) {
   return { operation, variables, clientMutationId: params.clientMutationId };
 }
 
-export function waitForMutation(clientMutationId) {
+export function waitForMutation(clientMutationId, additionalRequest = "") {
   return async (dispatch) => {
     let attempts = 0;
     let res;
@@ -166,6 +168,7 @@ export function waitForMutation(clientMutationId) {
                 clientMutationId
                 jsonContent
                 error
+                ${additionalRequest}
               }
             }
           }
@@ -186,7 +189,14 @@ export function waitForMutation(clientMutationId) {
   };
 }
 
-export function graphqlMutation(mutation, variables, type = "CORE_TRIGGER_MUTATION", params = {}, wait = true) {
+export function graphqlMutation(
+  mutation,
+  variables,
+  type = "CORE_TRIGGER_MUTATION",
+  params = {},
+  wait = true,
+  additionalRequest = "",
+) {
   let clientMutationId;
   if (variables?.input) {
     clientMutationId = uuid.uuid();
@@ -197,11 +207,51 @@ export function graphqlMutation(mutation, variables, type = "CORE_TRIGGER_MUTATI
     if (clientMutationId) {
       dispatch(fetchMutation(clientMutationId));
       if (wait) {
-        return dispatch(waitForMutation(clientMutationId));
+        return dispatch(waitForMutation(clientMutationId, additionalRequest));
       } else {
         return response?.payload?.data;
       }
     }
+  };
+}
+
+export function graphqlMutation2(
+  mutation,
+  variables,
+  type = "CORE_TRIGGER_MUTATION",
+  params = {},
+  wait = true,
+  additionalRequest = "",
+) {
+  let clientMutationId;
+  if (variables?.input) {
+    clientMutationId = uuid.uuid();
+    variables.input.clientMutationId = clientMutationId;
+  }
+  return async (dispatch) => {
+    const response = await dispatch(graphqlWithVariables(mutation, variables, type, params));
+    return response?.payload?.data;
+  };
+}
+
+export function graphqlMutationLegacy(
+  payload,
+  type = "CORE_TRIGGER_MUTATION",
+  params = {},
+  wait = true,
+  additionalRequest = "",
+) {
+  if (wait && !params.clientMutationId) {
+    console.error("graphqlMutationLegacy cannot wait with a specified clientMutationId");
+  }
+  return async (dispatch) => {
+    const response = await dispatch(graphql(payload, type, params));
+    dispatch(fetchMutation(params.clientMutationId));
+    if (wait) {
+      return dispatch(waitForMutation(params.clientMutationId, additionalRequest));
+    } else {
+      return response?.payload?.data;
+    }
     return response;
   };
 }
@@ -212,6 +262,7 @@ export function fetch(config) {
       [RSAA]: {
         ...config,
         headers: {
+          // "ngrok-skip-browser-warning": "true",
           "Content-Type": "application/json",
           ...config.headers,
         },
@@ -245,6 +296,12 @@ export function login(credentials) {
       await dispatch(refreshAuthToken());
     }
     const action = await dispatch(loadUser());
+    localStorage.setItem("userName", action?.payload?.username);
+    if (!localStorage.getItem("userLanguage")) {
+      localStorage.setItem("userLanguage", action?.payload?.i_user?.language);
+    }
+    localStorage.setItem("userId", action?.payload?.id);
+    localStorage.setItem("HfId", action?.payload?.i_user?.health_facility_id);
     return action.type !== "CORE_AUTH_ERR";
   };
 }
@@ -289,10 +346,23 @@ export function logout() {
       }
     `;
     await dispatch(graphqlMutation(mutation, {}));
+    localStorage.removeItem("userLanguage");
+    localStorage.removeItem("userId");
     return dispatch({ type: "CORE_AUTH_LOGOUT" });
   };
 }
 
+export function CheckAssignedProfile(userID) {
+  const mutation = `mutation CheckAssignedProfiles {
+      checkAssignedProfiles(userId:"${userID}") {
+          status
+      }
+  }
+    `;
+  return graphql(mutation, "CHECK_ASSIGNED_PROFILE", {});
+}
+// }
+
 export function fetchMutation(clientMutationId) {
   const payload = formatPageQuery(
     "mutationLogs",
@@ -449,12 +519,63 @@ export function roleNameSetValid() {
 
 export function saveCurrentPaginationPage(page, afterCursor, beforeCursor, module) {
   return (dispatch) => {
-    dispatch({ type: "CORE_PAGINATION_PAGE", payload: { page, afterCursor, beforeCursor, module} });
+    dispatch({ type: "CORE_PAGINATION_PAGE", payload: { page, afterCursor, beforeCursor, module } });
   };
 }
 
 export function clearCurrentPaginationPage() {
   return (dispatch) => {
-    dispatch({ type: "CORE_PAGINATION_PAGE_CLEAR" })
-  }
+    dispatch({ type: "CORE_PAGINATION_PAGE_CLEAR" });
+  };
+}
+
+export function fetchNotification(userID, first = 10) {
+  return graphql(
+    ` query CamuNotifications {
+        camuNotifications(first: ${first}, user_Id: "${userID}") {
+          totalCount
+          edgeCount
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            endCursor
+          }
+          edges {
+            node {
+             id
+              title
+              module
+              message
+              isRead
+              createdAt
+              redirectUrl
+            }
+          }
+        }
+      }
+    `,
+    "CORE_NOTIFICATION_LIST",
+  );
+}
+
+function formatNotificationGQL(data) {
+  return `
+        ${!!data.userId ? `userId: "${data.userId}"` : ""}
+        ${!!data.readAll ? `readAll: ${data.readAll}` : ""}
+        ${!!data.id ? `notificationId: "${decodeId(data.id)}"` : ""}
+    `;
+}
+
+export function markNotificationAsRead(data, clientMutationLabel) {
+  let mutation = `mutation MarkNotificationAsRead {
+    markNotificationAsRead(${formatNotificationGQL(data)}) {
+        success
+    }
+}`;
+  // let mutation = formatMutation("markNotificationAsRead ", formatNotificationGQL(data), clientMutationLabel);
+  var requestedDateTime = new Date();
+  return graphql(mutation, ["CORE_ROLE_MUTATION_REQ", "CORE_CREATE_NOTIFICATION_RESP", "CORE_ROLE_MUTATION_ERR"], {
+    clientMutationLabel,
+  });
 }

src/components/App.css

@@ -31,3 +31,9 @@
     transform: rotate(360deg);
   }
 }
+
+.MuiMenuItem-root,
+.MuiListItem-button,
+.MuiButton-root {
+  transition: background-color 0.3s ease !important;
+}

src/components/App.js

@@ -17,7 +17,11 @@ import LoginPage from "../pages/LoginPage";
 import { useAuthentication } from "../helpers/hooks";
 import ForgotPasswordPage from "../pages/ForgotPasswordPage";
 import SetPasswordPage from "../pages/SetPasswordPage";
+import VerifyUserAndUpdatePasswordPage from "../pages/VerifyUserAndUpdatePasswordPage";
 import { ErrorBoundary } from "@openimis/fe-core";
+import cookie from "cookie_js";
+import { useLocation } from "react-router-dom";
+// import { useQuery } from "./RequireAuth";
 
 export const ROUTER_CONTRIBUTION_KEY = "core.Router";
 export const UNAUTHENTICATED_ROUTER_CONTRIBUTION_KEY = "core.UnauthenticatedRouter";
@@ -33,6 +37,20 @@ const styles = () => ({
   },
 });
 
+export const getParamsFromUrl = () => {
+  const params = {};
+  const queryString = window.location.search; // e.g. "?id=123&name=Tom"
+
+  if (queryString) {
+    const urlParams = new URLSearchParams(queryString);
+    for (const [key, value] of urlParams.entries()) {
+      params[key] = value;
+    }
+  }
+
+  return params;
+};
+
 const App = (props) => {
   const {
     history,
@@ -48,6 +66,7 @@ const App = (props) => {
     ...others
   } = props;
 
+  const query = getParamsFromUrl();
   const auth = useAuthentication();
   const routes = useMemo(() => {
     return modulesManager.getContribs(ROUTER_CONTRIBUTION_KEY);
@@ -77,6 +96,22 @@ const App = (props) => {
     return { ...messages, ...msgs };
   }, [user?.language, messages]);
 
+  useEffect(() => {
+    if (query["hideMenuNavigation"]) {
+      localStorage.setItem("hideMenuNavigation", "yes");
+    } else {
+      localStorage.removeItem("hideMenuNavigation");
+    }
+
+    if (query["JWT"]) {
+      cookie.set("JWT", query["JWT"], { path: "/" });
+    }
+
+    if (query["JWT-refresh-token"]) {
+      cookie.set("JWT-refresh-token", query["JWT-refresh-token"], { path: "/" });
+    }
+  }, [query]);
+
   useEffect(() => {
     auth.initialize();
     if (process.env.NODE_ENV == "development") {
@@ -95,7 +130,7 @@ const App = (props) => {
 
   return (
     <>
-      <Helmet titleTemplate="%s - openIMIS" defaultTitle="openIMIS" />
+      <Helmet titleTemplate="%s - CAMU IMS" defaultTitle="CAMU IMS" />
       <CssBaseline />
       <ModulesManagerProvider value={modulesManager}>
         <IntlProvider locale={locale} messages={allMessages}>
@@ -109,14 +144,18 @@ const App = (props) => {
                 <Route path={"/login"} render={() => <LoginPage {...others} />} />
                 <Route path={"/forgot_password"} render={() => <ForgotPasswordPage {...others} />} />
                 <Route path={"/set_password"} render={() => <SetPasswordPage {...others} />} />
+                <Route
+                  path={"/verify-user-and-update-password"}
+                  render={() => <VerifyUserAndUpdatePasswordPage {...others} />}
+                />
                 {unauthenticatedRoutes.map((route) => (
                   <Route
                     exact
                     key={route.path}
                     path={"/" + route.path}
                     render={(props) => (
                       <ErrorBoundary>
-                          <route.component modulesManager={modulesManager} {...props} {...others} />
+                        <route.component modulesManager={modulesManager} {...props} {...others} />
                       </ErrorBoundary>
                     )}
                   />

src/components/GedAlertBanner.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { useGedHealthCheck } from "../helpers/hooks/useGedHealthCheck";
+
+export default function GedAlertBanner() {
+  const { isGedDown, isChecking } = useGedHealthCheck();
+
+  if (!isGedDown) return <></>;
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#ffcccc",
+        color: "#900",
+        textAlign: "center",
+        padding: "12px 0",
+        fontWeight: "bold",
+        fontSize: "14px",
+        width: "100%",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+      }}
+    >
+      {`⚠️ Service GED (DMS) est actuellement indisponible. Veuillez contacter l'équipe technique.`}
+    </div>
+  );
+}