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

resolved Appointments select practitioner options Bug: popover inconsistent spacing between options within the popover content #10636

Merged
merged 3 commits into from
Feb 17, 2025
Merged

resolved Appointments select practitioner options Bug: popover inconsistent spacing between options within the popover content #10636

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b8b031
resolved Appointments select practitioner options popover inconsisten…
hrit2773 Feb 16, 2025
8d67b1a
Merge branch 'ohcnetwork:develop' into develop4
hrit2773 Feb 17, 2025
73e6351
fixed the bug
hrit2773 Feb 17, 2025
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
62 changes: 32 additions & 30 deletions src/pages/Appointments/AppointmentsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,36 +417,38 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
)}
</CommandItem>
</PopoverClose>
{schedulableUsersQuery.data?.users.map((user) => (
<PopoverClose className="w-full" key={user.id}>
<CommandItem
value={formatName(user)}
onSelect={() =>
setQParams({
...qParams,
practitioner: user.username,
slot: null,
})
}
className="cursor-pointer"
>
<div className="flex items-center gap-2">
<Avatar
imageUrl={user.profile_picture_url}
name={formatName(user)}
className="size-6 rounded-full"
/>
<span>{formatName(user)}</span>
<span className="text-xs text-gray-500 font-medium">
{user.user_type}
</span>
</div>
{qParams.practitioner === user.username && (
<CheckIcon className="ml-auto" />
)}
</CommandItem>
</PopoverClose>
))}
<div className="flex flex-col align-top">
Copy link
Member

@rithviknishad rithviknishad Feb 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

what you've done is just a hack around instead of solving the root cause. the right way to solve this is to compose in this way without needing any extra div's or classes

<CommandItem key={...}>
  <PopoverClose className="flex items-center gap-2">
    ...
  </PopoverClose>
</CommandItem>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@rithviknishad ohh you're right that will be better will change it

{schedulableUsersQuery.data?.users.map((user) => (
<PopoverClose className="w-full" key={user.id}>
<CommandItem
value={formatName(user)}
onSelect={() =>
setQParams({
...qParams,
practitioner: user.username,
slot: null,
})
}
className="cursor-pointer"
>
<div className="flex items-center gap-2">
<Avatar
imageUrl={user.profile_picture_url}
name={formatName(user)}
className="size-6 rounded-full"
/>
<span>{formatName(user)}</span>
<span className="text-xs text-gray-500 font-medium">
{user.user_type}
</span>
</div>
{qParams.practitioner === user.username && (
<CheckIcon className="ml-auto" />
)}
</CommandItem>
</PopoverClose>
))}
</div>
</CommandGroup>
</CommandList>
</Command>
Expand Down
Loading