Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avatar in UserAutoComplete #8967

Merged
merged 5 commits into from
Nov 9, 2024
Merged

Avatar in UserAutoComplete #8967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d190c86
Autocomplete User Avatar
Jacobjeevan Oct 30, 2024
c93b3e2
display default/initial avatars for users w/out profile pic
Jacobjeevan Nov 5, 2024
778af6e
switched to using reactnode
Jacobjeevan Nov 5, 2024
6bd7629
Merge branch 'develop' into issues/8869-autocomplete-user
nihal467 Nov 5, 2024
406620a
Merge branch 'develop' into issues/8869-autocomplete-user
Jacobjeevan Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions cypress/e2e/assets_spec/AssetHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
5 changes: 3 additions & 2 deletions cypress/e2e/assets_spec/AssetsCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/assets_spec/AssetsManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { AssetPage } from "../../pageobject/Asset/AssetCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider removing unrelated changes to import statements.

The reordering of imports for AssetFilters and LoginPage appears unrelated to the PR's objective of adding avatar functionality to UserAutocomplete and User list page. To maintain a focused PR scope and reduce the risk of merge conflicts, consider reverting these changes.

Also applies to: 5-5

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();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/facility_spec/FacilityCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
7 changes: 3 additions & 4 deletions cypress/e2e/facility_spec/FacilityHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/facility_spec/FacilityInventory.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
7 changes: 4 additions & 3 deletions cypress/e2e/facility_spec/FacilityManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientBedManagement.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
10 changes: 5 additions & 5 deletions cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
1 change: 1 addition & 0 deletions cypress/e2e/patient_spec/PatientDoctorConnect.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { DoctorConnect } from "pageobject/Patient/PatientDoctorConnect";

import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";

Expand Down
1 change: 1 addition & 0 deletions cypress/e2e/patient_spec/PatientFileUpload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientLogUpdate.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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", () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientPrescription.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/patient_spec/PatientRegistration.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/users_spec/UsersCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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", () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/users_spec/UsersManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
13 changes: 13 additions & 0 deletions src/components/Common/UserAutocompleteFormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
mergeQueryOptions,
} from "@/Utils/utils";

import { Avatar } from "./Avatar";

type BaseProps = FormFieldBaseProps<UserBareMinimum> & {
placeholder?: string;
userType?: UserRole;
Expand Down Expand Up @@ -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
Expand All @@ -83,6 +95,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
)}
optionLabel={formatName}
optionIcon={userOnlineDot}
optionImage={getAvatar}
optionDescription={(option) =>
`${option.user_type} - ${option.username}`
}
Expand Down
47 changes: 27 additions & 20 deletions src/components/Form/FormFields/Autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand All @@ -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}
Expand All @@ -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>;
Expand All @@ -89,7 +92,6 @@ type AutocompleteProps<T, V = T> = {
isLoading?: boolean;
allowRawInput?: boolean;
error?: string;
avatar?: boolean;
} & (
| {
required?: false;
Expand Down Expand Up @@ -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),
};
Expand All @@ -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,
},
Expand Down Expand Up @@ -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>
Expand Down
Loading