Merge branch 'develop' into remove-clickElementById/ohcnetwork#8929

AnveshNalimela · Nov 9, 2024 · 7aaa96a · 7aaa96a
2 parents b7950cd + 84fdffe
commit 7aaa96a
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 35 deletions.
diff --git a/cypress/e2e/facility_spec/FacilityLocation.cy.ts b/cypress/e2e/facility_spec/FacilityLocation.cy.ts
@@ -1,10 +1,11 @@
+import { v4 as uuidv4 } from "uuid";
+
 import { AssetPage } from "../../pageobject/Asset/AssetCreation";
-import { UserCreationPage } from "../../pageobject/Users/UserCreation";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import FacilityLocation from "../../pageobject/Facility/FacilityLocation";
 import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
-import { v4 as uuidv4 } from "uuid";
+import FacilityLocation from "../../pageobject/Facility/FacilityLocation";
+import { UserCreationPage } from "../../pageobject/Users/UserCreation";
 
 describe("Location Management Section", () => {
   const assetPage = new AssetPage();

diff --git a/cypress/e2e/users_spec/UsersProfile.cy.ts b/cypress/e2e/users_spec/UsersProfile.cy.ts
@@ -1,6 +1,6 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
-import UserProfilePage from "../../pageobject/Users/UserProfilePage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
+import UserProfilePage from "../../pageobject/Users/UserProfilePage";
 
 describe("Manage User Profile", () => {
   const loginPage = new LoginPage();

diff --git a/cypress/pageobject/Patient/PatientPredefined.ts b/cypress/pageobject/Patient/PatientPredefined.ts
@@ -1,11 +1,10 @@
 // PatientPredefined.js
-
-import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import PatientMedicalHistory from "../../pageobject/Patient/PatientMedicalHistory";
 import {
-  generatePhoneNumber,
   generateEmergencyPhoneNumber,
+  generatePhoneNumber,
 } from "../utils/constants";
 
 class PatientPredefined {

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -2,9 +2,18 @@
   "compilerOptions": {
     "baseUrl": "./",
     "target": "es5",
-    "lib": ["es5", "dom", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020"],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015",
+      "es2016",
+      "es2017",
+      "es2018",
+      "es2019",
+      "es2020"
+    ],
     "typeRoots": ["./support"],
     "resolveJsonModule": true
   },
-  "include": ["**/*.cy.ts", "support/commands.ts","**/*.ts"],
-}
+  "include": ["**/*.cy.ts", "support/commands.ts", "**/*.ts"]
+}
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "prepare": "husky",
     "lint": "eslint ./src",
     "lint-fix": "eslint ./src --fix",
-    "format": "prettier ./src --write",
+    "format": "prettier ./src ./cypress --write",
     "sort-locales": "node ./scripts/sort-locales.js"
   },
   "dependencies": {
@@ -166,12 +166,12 @@
       "eslint --fix",
       "git update-index --again"
     ],
-    "src/Locale/*.json": [
+    "public/locale/*.json": [
       "npm run sort-locales"
     ]
   },
   "engines": {
     "node": ">=22.11.0"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/scripts/sort-locales.js b/scripts/sort-locales.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require("fs");
 
-const file = "src/Locale/en.json";
+const file = "public/locale/en.json";
 
 const data = JSON.parse(fs.readFileSync(file, "utf8"));
 

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
@@ -19,6 +19,8 @@ import {
   mergeQueryOptions,
 } from "@/Utils/utils";
 
+import { Avatar } from "./Avatar";
+
 type BaseProps = FormFieldBaseProps<UserBareMinimum> & {
   placeholder?: string;
   userType?: UserRole;
@@ -67,6 +69,16 @@ export default function UserAutocomplete(props: UserSearchProps) {
     }
   }, [loading, field.required, data?.results, props.noResultsError]);
 
+  const getAvatar = (option: UserBareMinimum) => {
+    return (
+      <Avatar
+        className="h-11 w-11 rounded-full"
+        name={formatName(option)}
+        imageUrl={option.read_profile_picture_url}
+      />
+    );
+  };
+
   return (
     <FormField field={field}>
       <Autocomplete
@@ -83,6 +95,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
         )}
         optionLabel={formatName}
         optionIcon={userOnlineDot}
+        optionImage={getAvatar}
         optionDescription={(option) =>
           `${option.user_type} - ${option.username}`
         }

diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
@@ -5,7 +5,7 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -29,6 +29,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, ReactNode | undefined>;
   optionDisabled?: OptionCallback<T, boolean>;
   minQueryLength?: number;
   onQuery?: (query: string) => void;
@@ -55,6 +56,7 @@ const AutocompleteFormField = <T, V>(
         placeholder={props.placeholder}
         optionLabel={props.optionLabel}
         optionIcon={props.optionIcon}
+        optionImage={props.optionImage}
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
@@ -79,6 +81,7 @@ type AutocompleteProps<T, V = T> = {
   placeholder?: string;
   optionLabel: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, ReactNode | undefined>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
@@ -89,7 +92,6 @@ type AutocompleteProps<T, V = T> = {
   isLoading?: boolean;
   allowRawInput?: boolean;
   error?: string;
-  avatar?: boolean;
 } & (
   | {
       required?: false;
@@ -124,6 +126,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       description,
       search: label.toLowerCase(),
       icon: props.optionIcon?.(option),
+      image: props.optionImage?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
       disabled: props.optionDisabled?.(option),
     };
@@ -143,6 +146,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         description: undefined,
         search: query.toLowerCase(),
         icon: <CareIcon icon="l-plus" />,
+        image: undefined,
         value: query,
         disabled: undefined,
       },
@@ -241,25 +245,28 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                     disabled={option.disabled}
                   >
                     {({ focus }) => (
-                      <div className="flex flex-col">
-                        <div className="flex justify-between">
-                          <span>{option.label}</span>
-                          <span>{option.icon}</span>
-                        </div>
-                        {option.description && (
-                          <div
-                            className={classNames(
-                              "text-sm font-normal",
-                              option.disabled
-                                ? "text-secondary-700"
-                                : focus
-                                  ? "text-primary-200"
-                                  : "text-secondary-700",
-                            )}
-                          >
-                            {option.description}
+                      <div className="flex flex-row gap-2">
+                        {option?.image}
+                        <div className="flex flex-grow flex-col">
+                          <div className="flex justify-between">
+                            <span>{option.label}</span>
+                            <span>{option.icon}</span>
                           </div>
-                        )}
+                          {option.description && (
+                            <div
+                              className={classNames(
+                                "text-sm font-normal",
+                                option.disabled
+                                  ? "text-secondary-700"
+                                  : focus
+                                    ? "text-primary-200"
+                                    : "text-secondary-700",
+                              )}
+                            >
+                              {option.description}
+                            </div>
+                          )}
+                        </div>
                       </div>
                     )}
                   </ComboboxOption>