Skip to content

Commit

Permalink
prescription, freeze columns and shrink discontinued (#6389)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rithviknishad
rithviknishad authored Oct 5, 2023
1 parent 8473f35 commit 64c0b24
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 42 deletions.
123 changes: 82 additions & 41 deletions src/Components/Medicine/PrescriptionAdministrationsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export default function PrescriptionAdministrationsTable({
const { t } = useTranslation();

const [state, setState] = useState<State>();
const [showDiscontinued, setShowDiscontinued] = useState(false);
const [discontinuedCount, setDiscontinuedCount] = useState<number>();
const pagination = useRangePagination({
bounds: state?.administrationsTimeBounds ?? {
start: new Date(),
Expand All @@ -65,8 +67,13 @@ export default function PrescriptionAdministrationsTable({
);

const refetch = useCallback(async () => {
const filters = {
is_prn: prn,
prescription_type: "REGULAR",
};

const res = await dispatch(
list({ is_prn: prn, prescription_type: "REGULAR" })
list(showDiscontinued ? filters : { ...filters, discontinued: false })
);

setState({
Expand All @@ -75,7 +82,14 @@ export default function PrescriptionAdministrationsTable({
),
administrationsTimeBounds: getAdministrationBounds(res.data.results),
});
}, [consultation_id, dispatch]);

if (showDiscontinued === false) {
const discontinuedRes = await dispatch(
list({ ...filters, discontinued: true, limit: 0 })
);
setDiscontinuedCount(discontinuedRes.data.count);
}
}, [consultation_id, showDiscontinued, dispatch]);

useEffect(() => {
refetch();
Expand Down Expand Up @@ -142,17 +156,22 @@ export default function PrescriptionAdministrationsTable({
}
/>

<div className="overflow-x-auto rounded border border-white shadow">
<table className="w-full overflow-x-scroll whitespace-nowrap rounded">
<div className="relative overflow-x-auto rounded border border-white shadow">
<table className="w-full whitespace-nowrap rounded">
<thead className="bg-white text-xs font-medium text-black">
<tr>
<th className="py-3 pl-4 text-left text-sm">{t("medicine")}</th>

<th className="px-2 text-center leading-none">
<p>Dosage &</p>
<p>
{!state?.prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}
</p>
<th className="sticky left-0 z-10 bg-white py-3 pl-4 text-left">
<div className="flex justify-between gap-2">
<span className="text-sm">{t("medicine")}</span>
<span className="hidden px-2 text-center text-xs leading-none lg:block">
<p>Dosage &</p>
<p>
{!state?.prescriptions[0]?.is_prn
? "Frequency"
: "Indicator"}
</p>
</span>
</div>
</th>

<th>
Expand All @@ -165,6 +184,8 @@ export default function PrescriptionAdministrationsTable({
variant="secondary"
disabled={!pagination.hasPrevious}
onClick={pagination.previous}
tooltip="Previous 24 hours"
tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
>
<CareIcon icon="l-angle-left-b" className="text-base" />
</ButtonV2>
Expand Down Expand Up @@ -206,6 +227,8 @@ export default function PrescriptionAdministrationsTable({
variant="secondary"
disabled={!pagination.hasNext}
onClick={pagination.next}
tooltip="Next 24 hours"
tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
>
<CareIcon icon="l-angle-right-b" className="text-base" />
</ButtonV2>
Expand All @@ -228,6 +251,23 @@ export default function PrescriptionAdministrationsTable({
</tbody>
</table>

{showDiscontinued === false && !!discontinuedCount && (
<ButtonV2
variant="secondary"
className="sticky left-0 z-10 w-full"
ghost
onClick={() => setShowDiscontinued(true)}
>
<span className="flex w-full justify-start gap-1 text-sm">
<CareIcon icon="l-eye" className="text-lg" />
<span>
Show <strong>{discontinuedCount}</strong> other discontinued
prescription(s)
</span>
</span>
</ButtonV2>
)}

{state?.prescriptions.length === 0 && (
<div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
<CareIcon className="care-l-tablets text-5xl" />
Expand Down Expand Up @@ -287,8 +327,7 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
return (
<tr
className={classNames(
"border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
// prescription.discontinued && "opacity-60"
"group border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
)}
>
{showDiscontinue && (
Expand Down Expand Up @@ -402,42 +441,44 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
</DialogModal>
)}
<td
className="cursor-pointer py-3 pl-4 text-left"
className="sticky left-0 z-10 cursor-pointer bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
onClick={() => setShowDetails(true)}
>
<div className="flex items-center gap-2">
<span
className={classNames(
"text-sm font-semibold",
prescription.discontinued ? "text-gray-700" : "text-gray-900"
<div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
<div className="flex items-center gap-2">
<span
className={classNames(
"text-sm font-semibold",
prescription.discontinued ? "text-gray-700" : "text-gray-900"
)}
>
{prescription.medicine_object?.name ?? prescription.medicine_old}
</span>

{prescription.discontinued && (
<span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
{t("discontinued")}
</span>
)}
>
{prescription.medicine_object?.name ?? prescription.medicine_old}
</span>

{prescription.discontinued && (
<span className="rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700">
{t("discontinued")}
</span>
)}
{prescription.route && (
<span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
{t(prescription.route)}
</span>
)}
</div>

{prescription.route && (
<span className="rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700">
{t(prescription.route)}
</span>
)}
<div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
<p>{prescription.dosage}</p>
<p>
{!prescription.is_prn
? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
: prescription.indicator}
</p>
</div>
</div>
</td>

<td className="text-center text-xs font-semibold text-gray-900">
<p>{prescription.dosage}</p>
<p>
{!prescription.is_prn
? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
: prescription.indicator}
</p>
</td>

<td />
{/* Administration Cells */}
{props.intervals.map(({ start, end }, index) => (
Expand Down
2 changes: 1 addition & 1 deletion src/Redux/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1003,7 +1003,7 @@ export const PrescriptionActions = (consultation_external_id: string) => {
const pathParams = { consultation_external_id };

return {
list: (query?: Partial<Prescription>) => {
list: (query?: Record<string, any>) => {
let altKey;
if (query?.is_prn !== undefined) {
altKey = query?.is_prn
Expand Down

0 comments on commit 64c0b24

Please sign in to comment.