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

Add edit button to immunisation section; replaced buttons with shadcn buttons across PatientsDetail section #9245

Merged
merged 11 commits into from
Nov 30, 2024
Merged

Add edit button to immunisation section; replaced buttons with shadcn buttons across PatientsDetail section #9245

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
60ea574
Edit button invisible on immunisation section
DonXavierdev Nov 29, 2024
e011d88
Merge branch 'develop' into issues/9243/button-invisible
DonXavierdev Nov 29, 2024
6021458
Merge branch 'ohcnetwork:develop' into issues/9243/button-invisible
DonXavierdev Nov 29, 2024
1a81b0f
Updated Existing buttons with shadcn at 3 sections
DonXavierdev Nov 29, 2024
cbf420f
replacement of ButtonV2 with Shadcn Button
DonXavierdev Nov 29, 2024
bbcffab
removal of group-hover in variant
DonXavierdev Nov 29, 2024
7854989
Merge branch 'develop' into issues/9243/button-invisible
DonXavierdev Nov 29, 2024
59df3d2
re-use outline variant
rithviknishad Nov 29, 2024
327e187
replace for add insurance details
rithviknishad Nov 29, 2024
4bbeea4
replace other usages and fix alignment
rithviknishad Nov 29, 2024
df3d26c
Merge branch 'develop' into issues/9243/button-invisible
DonXavierdev Nov 29, 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
54 changes: 27 additions & 27 deletions src/components/Patient/PatientDetailsTab/Demography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { useTranslation } from "react-i18next";

import Chip from "@/CAREUI/display/Chip";
import CareIcon from "@/CAREUI/icons/CareIcon";
import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";

import ButtonV2 from "@/components/Common/ButtonV2";
import { Button } from "@/components/ui/button";

import useAuthUser from "@/hooks/useAuthUser";

Expand Down Expand Up @@ -312,18 +313,17 @@ export const Demography = (props: PatientProps) => {
{t("no_data_found")}
</div>
)}
<ButtonV2
border
<Button
variant="outline_primary"
className="mt-4"
ghost
disabled={!patientData.is_active}
onClick={withPermissionCheck(() =>
handleEditClick("insurance-details"),
)}
>
<CareIcon icon="l-plus" className="" />
{t("add_insurance_details")}
</ButtonV2>
</Button>
</div>,
],
},
Expand Down Expand Up @@ -373,21 +373,24 @@ export const Demography = (props: PatientProps) => {
</div>
</div>
<div>
<ButtonV2
id="update-patient-details"
variant="secondary"
className="mt-4 text-green-800 "
disabled={!patientData.is_active}
authorizeFor={NonReadOnlyUsers}
onClick={withPermissionCheck(() =>
navigate(
`/facility/${patientData?.facility}/patient/${id}/update`,
),
<AuthorizedChild authorizeFor={NonReadOnlyUsers}>
rithviknishad marked this conversation as resolved.
Show resolved Hide resolved
{({ isAuthorized }) => (
<Button
id="update-patient-details"
variant="outline"
className="mt-4"
disabled={!patientData.is_active || !isAuthorized}
onClick={withPermissionCheck(() =>
navigate(
`/facility/${patientData?.facility}/patient/${id}/update`,
),
)}
>
<CareIcon icon="l-edit-alt" className="text-lg pr-1" />
{t("edit_profile")}
</Button>
)}
>
<CareIcon icon="l-edit-alt" className="text-lg" />
{t("edit_profile")}
</ButtonV2>
</AuthorizedChild>
</div>
</div>
{/* <div className="mt-4 rounded-md border border-blue-400 bg-blue-50 p-5 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-2">
Expand Down Expand Up @@ -415,22 +418,19 @@ export const Demography = (props: PatientProps) => {
className="group mt-4 rounded-md bg-white pb-2 pl-5 pt-5 shadow"
>
<hr className="mb-1 mr-5 h-1 w-5 border-0 bg-blue-500" />
<div className="flex flex-row gap-x-4 mb-4">
<div className="flex flex-row items-center justify-between gap-x-4 mb-4 mr-4">
<h1 className="text-xl">{t(`patient__${subtab.id}`)}</h1>
{subtab.allowEdit && (
<button
className="flex rounded border border-secondary-400 bg-white px-2 py-1 text-sm font-semibold text-green-800 hover:bg-secondary-200"
<Button
variant="outline"
disabled={!patientData.is_active}
onClick={withPermissionCheck(() =>
handleEditClick(subtab.id),
)}
>
<CareIcon
icon="l-edit-alt"
className="text-md mr-1 mt-1"
/>
<CareIcon icon="l-edit-alt" className="text-md pr-1" />
{t("edit")}
</button>
</Button>
)}
</div>
<div className="mb-8 mt-2 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-2">
Expand Down
12 changes: 7 additions & 5 deletions src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";

import { Button } from "@/components/ui/button";

import { UserModel } from "@/components/Users/models";

import useAuthUser from "@/hooks/useAuthUser";
Expand Down Expand Up @@ -56,12 +58,12 @@ export const HealthProfileSummary = (props: PatientProps) => {
<div className="group my-2 w-full rounded bg-white p-4 shadow">
<hr className="mb-1 mr-5 h-1 w-5 border-0 bg-blue-500" />
<div className="h-full space-y-2">
<div className="flex flex-row">
<div className="flex flex-row items-center justify-between">
<div className="mr-4 text-xl font-bold text-secondary-900">
{t("medical")}
</div>
<button
className="flex rounded border border-secondary-400 bg-white px-1 py-1 text-sm font-semibold text-green-800 hover:bg-secondary-200"
<Button
variant="outline"
disabled={!patientData.is_active}
aria-label="Edit medical history"
onClick={() => {
Expand All @@ -74,9 +76,9 @@ export const HealthProfileSummary = (props: PatientProps) => {
}
}}
>
<CareIcon icon="l-edit-alt" className="text-md mr-1 mt-1" />
<CareIcon icon="l-edit-alt" className="text-md pr-1" />
{t("edit")}
</button>
</Button>
</div>

<div className="mt-2 grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-y-8">
Expand Down
12 changes: 7 additions & 5 deletions src/components/Patient/PatientDetailsTab/ImmunisationRecords.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";

import { Button } from "@/components/ui/button";

import { UserModel } from "@/components/Users/models";

import useAuthUser from "@/hooks/useAuthUser";
Expand Down Expand Up @@ -40,10 +42,10 @@ export const ImmunisationRecords = (props: PatientProps) => {
<div className="w-full rounded-md bg-white p-4 shadow-md">
<hr className="mb-1 mr-5 h-1 w-5 border-0 bg-blue-500" />
<div>
<div className="flex flex-row gap-x-4">
<div className="flex flex-row justify-between items-center gap-x-4">
<h1 className="text-xl">{t("covid_details")}</h1>
<button
className="hidden rounded border border-secondary-400 bg-white px-1 py-1 text-sm font-semibold text-green-800 hover:bg-secondary-200 group-hover:flex"
<Button
variant="outline"
disabled={!patientData.is_active}
onClick={() => {
if (!canEditPatient(authUser, patientData)) {
Expand All @@ -55,9 +57,9 @@ export const ImmunisationRecords = (props: PatientProps) => {
}
}}
>
<CareIcon icon="l-edit-alt" className="text-md mr-1 mt-1" />
<CareIcon icon="l-edit-alt" className="text-md pr-1" />
{t("edit")}
</button>
</Button>
</div>

<div className="mb-8 mt-2 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-2">
Expand Down
Loading