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

Use shadcn Tooltip Components across FacilityCard #9317

Merged
merged 26 commits into from
Dec 23, 2024
+94 −47
Merged

Use shadcn Tooltip Components across FacilityCard #9317

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
4989af2
add tooltip for small screen
rajku-dev Dec 1, 2024
5e0c835
Merge branch 'ohcnetwork:develop' into tooltip-facility
rajku-dev Dec 6, 2024
72b3bff
edit en.json
rajku-dev Dec 6, 2024
a796de0
switch to Button
rajku-dev Dec 7, 2024
abcdbf9
edit outline
rajku-dev Dec 7, 2024
9eed329
fix breakpoint
rajku-dev Dec 7, 2024
27c9a40
remove ButtonV2 import
rajku-dev Dec 7, 2024
6033772
fixed the lint
nihal467 Dec 10, 2024
458de15
wrap Link with button
rajku-dev Dec 13, 2024
ac3d465
fix button
rajku-dev Dec 13, 2024
39deb1f
use shadcn tooltip
rajku-dev Dec 14, 2024
adcd8d4
increase tootltip font size and decrease delayDuration
rajku-dev Dec 14, 2024
a1780a1
format with prettier
rajku-dev Dec 16, 2024
7d949cb
correct facility spelling
rajku-dev Dec 16, 2024
bc220c9
Merge branch 'develop' into issue/9315/facilitycard-tooltip
rajku-dev Dec 17, 2024
6d34778
use TooltipComponent throughout
rajku-dev Dec 18, 2024
367c512
Merge branch 'develop' into issue/9315/facilitycard-tooltip
nihal467 Dec 18, 2024
65f9a29
Merge branch 'develop' into issue/9315/facilitycard-tooltip
rajku-dev Dec 19, 2024
2e716d5
Merge branch 'develop' into issue/9315/facilitycard-tooltip
nihal467 Dec 19, 2024
1ef0c1b
Merge branch 'develop' into issue/9315/facilitycard-tooltip
nihal467 Dec 20, 2024
1e16c1b
Merge branch 'develop' into issue/9315/facilitycard-tooltip
rajku-dev Dec 21, 2024
8c8684c
Merge branch 'develop' into issue/9315/facilitycard-tooltip
rajku-dev Dec 21, 2024
263dda9
Merge branch 'develop' into issue/9315/facilitycard-tooltip
nihal467 Dec 23, 2024
5c7d36f
Merge branch 'develop' into issue/9315/facilitycard-tooltip
nihal467 Dec 23, 2024
8123404
revert the view cns button id
nihal467 Dec 23, 2024
827b1ca
fixed the icon and text gap
nihal467 Dec 23, 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
3 changes: 2 additions & 1 deletion public/locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1046,6 +1046,7 @@
"notification_cancelled": "Notification cancelled",
"notification_permission_denied": "Notification permission denied",
"notification_permission_granted": "Notification permission granted",
"notify": "Notify",
"number_of_aged_dependents": "Number of Aged Dependents (Above 60)",
"number_of_beds": "Number of beds",
"number_of_beds_out_of_range_error": "Number of beds cannot be greater than 100",
Expand Down Expand Up @@ -1541,7 +1542,7 @@
"view_cns": "View CNS",
"view_consultation_and_log_updates": "View Consultation / Log Updates",
"view_details": "View Details",
"view_faciliy": "View Facility",
"view_facility": "View Facility",
rajku-dev marked this conversation as resolved.
Show resolved Hide resolved
"view_files": "View Files",
"view_patients": "View Patients",
"view_update_patient_files": "View/Update patient files",
Expand Down
2 changes: 1 addition & 1 deletion public/locale/hi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@
"view_abdm_records": "ABDM रिकॉर्ड देखें",
"view_asset": "संपत्तियां देखें",
"view_details": "विवरण देखें",
"view_faciliy": "सुविधा देखें",
"view_facility": "सुविधा देखें",
"view_patients": "मरीज़ देखें",
"view_users": "उपयोगकर्ता देखें",
"virtual_nursing_assistant": "वर्चुअल नर्सिंग सहायक",
Expand Down
2 changes: 1 addition & 1 deletion public/locale/kn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -796,7 +796,7 @@
"view_abdm_records": "ABDM ದಾಖಲೆಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
"view_asset": "ಸ್ವತ್ತುಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
"view_details": "ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
"view_faciliy": "ವೀಕ್ಷಣೆ ಸೌಲಭ್ಯ",
"view_facility": "ವೀಕ್ಷಣೆ ಸೌಲಭ್ಯ",
"view_patients": "ರೋಗಿಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
"view_users": "ಬಳಕೆದಾರರನ್ನು ವೀಕ್ಷಿಸಿ",
"virtual_nursing_assistant": "ವರ್ಚುವಲ್ ನರ್ಸಿಂಗ್ ಸಹಾಯಕ",
Expand Down
2 changes: 1 addition & 1 deletion public/locale/ml.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -796,7 +796,7 @@
"view_abdm_records": "ABDM റെക്കോർഡുകൾ കാണുക",
"view_asset": "അസറ്റുകൾ കാണുക",
"view_details": "വിശദാംശങ്ങൾ കാണുക",
"view_faciliy": "സൗകര്യം കാണുക",
"view_facility": "സൗകര്യം കാണുക",
"view_patients": "രോഗികളെ കാണുക",
"view_users": "ഉപയോക്താക്കളെ കാണുക",
"virtual_nursing_assistant": "വെർച്വൽ നഴ്സിംഗ് അസിസ്റ്റൻ്റ്",
Expand Down
2 changes: 1 addition & 1 deletion public/locale/ta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@
"view_abdm_records": "ABDM பதிவுகளைப் பார்க்கவும்",
"view_asset": "சொத்துக்களைப் பார்க்கவும்",
"view_details": "விவரங்களைக் காண்க",
"view_faciliy": "பார்வை வசதி",
"view_facility": "பார்வை வசதி",
"view_patients": "நோயாளிகளைப் பார்க்கவும்",
"view_users": "பயனர்களைக் காண்க",
"virtual_nursing_assistant": "மெய்நிகர் நர்சிங் உதவியாளர்",
Expand Down
125 changes: 82 additions & 43 deletions src/components/Facility/FacilityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import { useTranslation } from "react-i18next";
import Chip from "@/CAREUI/display/Chip";
import CareIcon from "@/CAREUI/icons/CareIcon";

import { Button } from "@/components/ui/button";
import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";

import { Avatar } from "@/components/Common/Avatar";
import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
import { Cancel, Submit } from "@/components/Common/ButtonV2";
import DialogModal from "@/components/Common/Dialog";
import { FacilityModel } from "@/components/Facility/models";
import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
Expand Down Expand Up @@ -103,6 +104,7 @@ export const FacilityCard = (props: {
<TooltipProvider>
<TooltipComponent
content={t("live_patients_total_beds")}
className="text-sm px-3 py-3 max-w-[300px]"
>
<div
data-test-id="occupancy-badge"
Expand All @@ -123,19 +125,19 @@ export const FacilityCard = (props: {
</TooltipComponent>
</TooltipProvider>
</div>
<ButtonV2
id="view-cns-button"
href={`/facility/${facility.id}/cns`}
border
ghost
<Button
asChild
className="mt-2 sm:mt-0"
variant={"outline_primary"}
>
<CareIcon
icon="l-monitor-heart-rate"
className="text-lg"
/>
<span>{t("view_cns")}</span>
</ButtonV2>
<Link href={`/facility/${facility.id}/cns`}>
<CareIcon
icon="l-monitor-heart-rate"
className="text-lg"
/>
<span>{t("view_cns")}</span>
</Link>
</Button>
</div>

<div className="mt-2 flex flex-wrap gap-1">
Expand Down Expand Up @@ -233,38 +235,75 @@ export const FacilityCard = (props: {
</div>
<div className="flex flex-wrap gap-2">
{["DistrictAdmin", "StateAdmin"].includes(userType) && (
<ButtonV2
id="facility-notify"
ghost
border
className="h-[38px]"
onClick={(_) => setNotifyModalFor(facility.id)}
>
<CareIcon icon="l-megaphone" className="text-lg" />
<span className="hidden md:block">Notify</span>
</ButtonV2>
<TooltipProvider>
<TooltipComponent
content={t("notify")}
side="top"
className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
>
<Button
id="facility-notify"
variant={"outline_primary"}
className="h-[38px]"
onClick={(_) => setNotifyModalFor(facility.id)}
aria-label={t("notify")}
role="button"
>
<CareIcon icon="l-megaphone" className="text-lg" />
<span className="hidden sm:inline">
{t("notify")}
</span>
</Button>
</TooltipComponent>
</TooltipProvider>
rithviknishad marked this conversation as resolved.
Show resolved Hide resolved
)}
<ButtonV2
href={`/facility/${facility.id}`}
id="facility-details"
border
ghost
className="h-[38px]"
>
<CareIcon icon="l-hospital" className="text-lg" />
<span className="hidden md:inline">
{t("view_faciliy")}
</span>
</ButtonV2>
<ButtonV2
href={`/patients?facility=${facility.id}`}
id="facility-patients"
border
ghost
>
<CareIcon icon="l-user-injured" className="text-lg" />
{t("view_patients")}
</ButtonV2>
<TooltipProvider>
<TooltipComponent
content={t("view_facility")}
side="top"
className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
>
<Button
id="facility-details"
variant={"outline_primary"}
className="tooltip h-[38px]"
aria-label={t("view_facility")}
asChild
>
<Link href={`/facility/${facility.id}`}>
<CareIcon icon="l-hospital" className="text-lg" />
<span className="hidden sm:inline">
{t("view_facility")}
</span>
</Link>
</Button>
</TooltipComponent>
</TooltipProvider>
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

Consistent improvements needed for View Facility and View Patients buttons

Both buttons have similar issues that need to be addressed:

  1. Remove duplicate tooltip className
  2. Fix variant syntax
  3. Use consistent class naming for hidden text
// For both buttons:
-className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
+className="tooltip-common-style"

-variant={"outline_primary"}
+variant="outline-primary"

-className="tooltip h-[38px]"
+className="h-[38px]"

-<span className="hidden sm:inline">
+<span className="hidden sm:inline-block">

Also applies to: 283-307

<TooltipProvider>
<TooltipComponent
content={t("view_patients")}
side="top"
className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
>
<Button
id="facility-patients"
variant={"outline_primary"}
aria-label={t("view_patients")}
asChild
className="tooltip h-[38px]"
>
<Link href={`/patients?facility=${facility.id}`}>
<CareIcon
icon="l-user-injured"
className="text-lg"
/>
<span className="hidden sm:inline">
{t("view_patients")}
</span>
</Link>
</Button>
</TooltipComponent>
</TooltipProvider>
{/* </div> */}
</div>
</div>
Expand Down
Loading