Avatar in UserAutoComplete (ohcnetwork#8967)

AdityaJ2305 · Nov 9, 2024 · cc368a9 · cc368a9
1 parent 6bd2aa8
commit cc368a9
Show file tree

Hide file tree

Showing 19 changed files with 78 additions and 54 deletions.
diff --git a/cypress/e2e/assets_spec/AssetHomepage.cy.ts b/cypress/e2e/assets_spec/AssetHomepage.cy.ts
@@ -1,10 +1,11 @@
-import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
-import { AssetQRScanPage } from "../../pageobject/Asset/AssetQRScan";
-import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
-import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
+import { v4 as uuidv4 } from "uuid";
+
 import { AssetPage } from "../../pageobject/Asset/AssetCreation";
+import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
+import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+import { AssetQRScanPage } from "../../pageobject/Asset/AssetQRScan";
+import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
 import LoginPage from "../../pageobject/Login/LoginPage";
-import { v4 as uuidv4 } from "uuid";
 
 describe("Asset Tab", () => {
   const assetSearchPage = new AssetSearchPage();

diff --git a/cypress/e2e/assets_spec/AssetsCreation.cy.ts b/cypress/e2e/assets_spec/AssetsCreation.cy.ts
@@ -1,7 +1,8 @@
-import { AssetPage } from "../../pageobject/Asset/AssetCreation";
 import { v4 as uuidv4 } from "uuid";
-import LoginPage from "../../pageobject/Login/LoginPage";
+
+import { AssetPage } from "../../pageobject/Asset/AssetCreation";
 import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
+import LoginPage from "../../pageobject/Login/LoginPage";
 
 describe("Asset", () => {
   const assetPage = new AssetPage();

diff --git a/cypress/e2e/assets_spec/AssetsManage.cy.ts b/cypress/e2e/assets_spec/AssetsManage.cy.ts
@@ -1,8 +1,8 @@
 import { AssetPage } from "../../pageobject/Asset/AssetCreation";
-import LoginPage from "../../pageobject/Login/LoginPage";
+import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
 import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
+import LoginPage from "../../pageobject/Login/LoginPage";
 
 function addDaysToDate(numberOfDays: number) {
   const inputDate = new Date();

diff --git a/cypress/e2e/facility_spec/FacilityCreation.cy.ts b/cypress/e2e/facility_spec/FacilityCreation.cy.ts
@@ -1,6 +1,6 @@
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import LoginPage from "../../pageobject/Login/LoginPage";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
+import LoginPage from "../../pageobject/Login/LoginPage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
 import { UserCreationPage } from "../../pageobject/Users/UserCreation";
 

diff --git a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
@@ -1,11 +1,10 @@
 // FacilityCreation
-
-import LoginPage from "../../pageobject/Login/LoginPage";
+import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
+import LoginPage from "../../pageobject/Login/LoginPage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import { UserPage } from "../../pageobject/Users/UserSearch";
-import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
 
 describe("Facility Homepage Function", () => {
   const loginPage = new LoginPage();

diff --git a/cypress/e2e/facility_spec/FacilityInventory.cy.ts b/cypress/e2e/facility_spec/FacilityInventory.cy.ts
@@ -1,6 +1,6 @@
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import LoginPage from "../../pageobject/Login/LoginPage";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
+import LoginPage from "../../pageobject/Login/LoginPage";
 
 describe("Inventory Management Section", () => {
   const facilityPage = new FacilityPage();

diff --git a/cypress/e2e/facility_spec/FacilityManage.cy.ts b/cypress/e2e/facility_spec/FacilityManage.cy.ts
@@ -1,8 +1,9 @@
-import LoginPage from "../../pageobject/Login/LoginPage";
-import FacilityManage from "../../pageobject/Facility/FacilityManage";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import { v4 as uuidv4 } from "uuid";
 
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
+import FacilityManage from "../../pageobject/Facility/FacilityManage";
+import LoginPage from "../../pageobject/Login/LoginPage";
+
 describe("Facility Manage Functions", () => {
   const loginPage = new LoginPage();
   const facilityManage = new FacilityManage();

diff --git a/cypress/e2e/patient_spec/PatientBedManagement.cy.ts b/cypress/e2e/patient_spec/PatientBedManagement.cy.ts
@@ -1,7 +1,7 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
+import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
-import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
 
 describe("Patient swtich bed functionality", () => {
   const loginPage = new LoginPage();

diff --git a/cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts b/cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts
@@ -1,12 +1,12 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
-import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
-import PatientPredefined from "../../pageobject/Patient/PatientPredefined";
-import ShiftCreation from "../../pageobject/Shift/ShiftCreation";
-import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
-import PatientTreatmentPlan from "../../pageobject/Patient/PatientTreatmentPlan";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import PatientDeathReport from "../../pageobject/Patient/PatientDeathReport";
+import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
+import PatientPredefined from "../../pageobject/Patient/PatientPredefined";
 import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
+import PatientTreatmentPlan from "../../pageobject/Patient/PatientTreatmentPlan";
+import ShiftCreation from "../../pageobject/Shift/ShiftCreation";
 
 describe("Patient Consultation in multiple combination", () => {
   const patientConsultationPage = new PatientConsultationPage();

diff --git a/cypress/e2e/patient_spec/PatientDoctorConnect.cy.ts b/cypress/e2e/patient_spec/PatientDoctorConnect.cy.ts
@@ -1,4 +1,5 @@
 import { DoctorConnect } from "pageobject/Patient/PatientDoctorConnect";
+
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 

diff --git a/cypress/e2e/patient_spec/PatientFileUpload.ts b/cypress/e2e/patient_spec/PatientFileUpload.ts
@@ -1,6 +1,7 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import { PatientFileUpload } from "../../pageobject/Patient/PatientFileupload";
+
 const loginPage = new LoginPage();
 const patientPage = new PatientPage();
 const patientFileUpload = new PatientFileUpload();

diff --git a/cypress/e2e/patient_spec/PatientLogUpdate.cy.ts b/cypress/e2e/patient_spec/PatientLogUpdate.cy.ts
@@ -1,8 +1,8 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
-import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
 import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
+import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
 import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
 
 describe("Patient Log Update in Normal, Critical and TeleIcu", () => {

diff --git a/cypress/e2e/patient_spec/PatientPrescription.cy.ts b/cypress/e2e/patient_spec/PatientPrescription.cy.ts
@@ -1,6 +1,6 @@
-import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
+import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
 
 const patientPrescription = new PatientPrescription();
 const loginPage = new LoginPage();

diff --git a/cypress/e2e/patient_spec/PatientRegistration.cy.ts b/cypress/e2e/patient_spec/PatientRegistration.cy.ts
@@ -1,10 +1,10 @@
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { PatientPage } from "../../pageobject/Patient/PatientCreation";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import { generatePhoneNumber } from "../../pageobject/utils/constants";
-import PatientTransfer from "../../pageobject/Patient/PatientTransfer";
 import PatientInsurance from "../../pageobject/Patient/PatientInsurance";
 import PatientMedicalHistory from "../../pageobject/Patient/PatientMedicalHistory";
+import PatientTransfer from "../../pageobject/Patient/PatientTransfer";
+import { generatePhoneNumber } from "../../pageobject/utils/constants";
 
 const yearOfBirth = "2001";
 const isHCXEnabled = Cypress.env("ENABLE_HCX");

diff --git a/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts b/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
@@ -1,6 +1,6 @@
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import ResourcePage from "../../pageobject/Resource/ResourcePage";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 
 describe("Resource Page", () => {
   let createdResource: string;

diff --git a/cypress/e2e/users_spec/UsersCreation.cy.ts b/cypress/e2e/users_spec/UsersCreation.cy.ts
@@ -1,11 +1,11 @@
-import LoginPage from "../../pageobject/Login/LoginPage";
 import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import { UserPage } from "../../pageobject/Users/UserSearch";
+import LoginPage from "../../pageobject/Login/LoginPage";
 import { UserCreationPage } from "../../pageobject/Users/UserCreation";
+import { UserPage } from "../../pageobject/Users/UserSearch";
 import {
-  generatePhoneNumber,
   generateEmergencyPhoneNumber,
+  generatePhoneNumber,
 } from "../../pageobject/utils/constants";
 
 describe("User Creation", () => {

diff --git a/cypress/e2e/users_spec/UsersManage.cy.ts b/cypress/e2e/users_spec/UsersManage.cy.ts
@@ -1,7 +1,7 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
-import { UserPage } from "../../pageobject/Users/UserSearch";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
 import { UserCreationPage } from "../../pageobject/Users/UserCreation";
+import { UserPage } from "../../pageobject/Users/UserSearch";
 
 describe("Manage User", () => {
   const loginPage = new LoginPage();

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>