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

Fix: UI changes in shifting and resources pages #9437

Merged
merged 5 commits into from
Dec 18, 2024
+95 −71
Merged

Fix: UI changes in shifting and resources pages #9437

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
d0b0be1
Fix TriageForm
SathishAdithiyaaSV Dec 14, 2024
845325a
Fix button size
SathishAdithiyaaSV Dec 15, 2024
93b7d54
Update Shifting and Resource page
SathishAdithiyaaSV Dec 15, 2024
69d26d4
Final commit
SathishAdithiyaaSV Dec 15, 2024
d8c81d7
Update as requested
SathishAdithiyaaSV Dec 15, 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
6 changes: 5 additions & 1 deletion src/components/Resource/ResourceBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,11 @@ export default function BoardView() {
currentTab={boardFilter !== ACTIVE ? 1 : 0}
/>
<div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
<Button variant={"primary"} onClick={onListViewBtnClick}>
<Button
variant={"primary"}
onClick={onListViewBtnClick}
className="h-10.8 px-4 py-2"
>
<CareIcon icon="l-list-ul" className="mr-2" />
{t("list_view")}
</Button>
Expand Down
78 changes: 44 additions & 34 deletions src/components/Resource/ResourceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";

import { ExportButton } from "@/components/Common/Export";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
import PageTitle from "@/components/Common/PageTitle";
import { ResourceModel } from "@/components/Facility/models";
import SearchInput from "@/components/Form/SearchInput";
import BadgesList from "@/components/Resource/ResourceBadges";
Expand Down Expand Up @@ -194,45 +194,55 @@ export default function ListView() {
};

return (
<Page
title={t("resource")}
hideBack
componentRight={
<ExportButton
action={async () => {
const { data } = await request(routes.downloadResourceRequests, {
query: { ...appliedFilters, csv: true },
});
return data ?? null;
}}
filenamePrefix="resource_requests"
/>
}
breadcrumbs={false}
options={
<>
<div className="md:px-4"></div>
<div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="title"
value={qParams.title}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_resource")}
/>
</div>
<div className="flex-col px-2 pb-2">
<div className="flex w-full flex-col items-center justify-between lg:flex-row">
<div className="w-1/3 lg:w-1/4">
<PageTitle
title={t("resource")}
hideBack
className="mx-3 md:mx-5"
componentRight={
<ExportButton
action={async () => {
const { data } = await request(
routes.downloadResourceRequests,
{
query: { ...appliedFilters, csv: true },
},
);
return data ?? null;
}}
filenamePrefix="resource_requests"
/>
}
breadcrumbs={false}
/>
</div>

<div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="title"
value={qParams.title}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_resource")}
className="w-full md:w-60"
/>

<div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<Button variant={"primary"} onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
<div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
<Button
variant={"primary"}
onClick={onBoardViewBtnClick}
className="h-10.8 px-4 py-2"
>
<CareIcon icon="l-list-ul" className="mr-2" />
{t("board_view")}
</Button>
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
</div>
</>
}
>
</div>
</div>
<BadgesList {...{ appliedFilters, FilterBadges }} />

<div className="px-1">
Expand Down Expand Up @@ -282,6 +292,6 @@ export default function ListView() {
showResourceStatus={true}
key={window.location.search}
/>
</Page>
</div>
);
}
6 changes: 5 additions & 1 deletion src/components/Shifting/ShiftingBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,11 @@ export default function BoardView() {
/>

<div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
<Button variant={"primary"} onClick={onListViewBtnClick}>
<Button
variant={"primary"}
onClick={onListViewBtnClick}
className="h-10.8 px-4 py-2"
>
<CareIcon icon="l-list-ul" className="mr-2" />
{t("list_view")}
</Button>
Expand Down
76 changes: 41 additions & 35 deletions src/components/Shifting/ShiftingList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";

import { ExportButton } from "@/components/Common/Export";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
import PageTitle from "@/components/Common/PageTitle";
import SearchInput from "@/components/Form/SearchInput";
import BadgesList from "@/components/Shifting/ShiftingBadges";
import { formatFilter } from "@/components/Shifting/ShiftingCommons";
Expand Down Expand Up @@ -49,46 +49,52 @@ export default function ListView() {
});

return (
<Page
title={t("shifting")}
hideBack
componentRight={
<ExportButton
action={async () => {
const { data } = await request(routes.downloadShiftRequests, {
query: { ...formatFilter(qParams), csv: true },
});
return data ?? null;
}}
filenamePrefix="shift_requests"
/>
}
breadcrumbs={false}
options={
<>
<div className="md:px-4"></div>
<div className="flex-col px-2 pb-2">
<div className="flex w-full flex-col items-center justify-between lg:flex-row">
<div className="w-1/3 lg:w-1/4">
<PageTitle
title={t("shifting")}
className="mx-3 md:mx-5"
hideBack
componentRight={
<ExportButton
action={async () => {
const { data } = await request(routes.downloadShiftRequests, {
query: { ...formatFilter(qParams), csv: true },
});
return data ?? null;
}}
filenamePrefix="shift_requests"
/>
}
breadcrumbs={false}
/>
</div>
<div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="patient_name"
value={qParams.patient_name}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_patient")}
className="w-full md:w-60"
/>

<div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="patient_name"
value={qParams.patient_name}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_patient")}
/>
</div>

<div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<Button variant={"primary"} onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
<div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
<Button
variant={"primary"}
onClick={onBoardViewBtnClick}
className="h-10.8 px-4 py-2"
>
Comment on lines +83 to +87
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Button heights are inconsistent

The AdvancedFilterButton uses ButtonV2 component which has a default height defined by padding (py-2) while the button in ShiftingList uses a fixed height class h-10.8. These different approaches to setting height will likely result in inconsistent heights.

  • src/components/Shifting/ShiftingList.tsx: Uses fixed height h-10.8
  • src/CAREUI/interactive/FiltersSlideover.tsx: Uses ButtonV2 with padding-based height
  • src/style/CAREUI.css: Shows ButtonV2 uses py-2 for default size
🔗 Analysis chain

Verify button height matches Advanced Filters

The button height is set to h-10.8 which should match the Advanced Filters button height as per PR objectives.

Let me check the implementation of the AdvancedFilterButton component to verify its height.

Let me check the ButtonV2 component implementation since AdvancedFilterButton uses it.

Let me check the CSS classes that define the button heights.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify consistent button heights across components
# Search for height classes in Advanced Filters button implementations

rg -A 2 "AdvancedFilterButton"

Length of output: 4835

Script:

#!/bin/bash
# Get the implementation of AdvancedFilterButton to check its height class
ast-grep --pattern 'export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
  $$$
}'

Length of output: 1201

Script:

#!/bin/bash
# Find ButtonV2 component implementation
fd "ButtonV2" --exec cat {}

Length of output: 7084

Script:

#!/bin/bash
# Search for CSS files that might contain button height definitions
fd -e css -e scss | xargs rg "button-size|h-10.8"

Length of output: 262

<CareIcon icon="l-list-ul" className="mr-2" />
{t("board_view")}
</Button>
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
</div>
</>
}
>
</div>
</div>

<BadgesList {...{ qParams, FilterBadges }} />

<div>
Expand Down Expand Up @@ -121,6 +127,6 @@ export default function ListView() {
{...advancedFilter}
key={window.location.search}
/>
</Page>
</div>
);
}
Loading