Skip to content

Commit

Permalink
made a reusable component for table in routine and nursing care proce…
Browse files Browse the repository at this point in the history 
…dures
  • Loading branch information
Sahil Sinha authored and Sahil Sinha committed Sep 24, 2024
1 parent 7a82416 commit 9cc2eb2
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 100 deletions.
68 changes: 8 additions & 60 deletions src/Components/Facility/ConsultationDetails/ConsultationNursingTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import request from "../../../Utils/request/request";
import routes from "../../../Redux/api";
import { RoutineAnalysisRes, RoutineFields } from "../models";
import Loading from "../../Common/Loading";
import { classNames, formatDate, formatTime } from "../../../Utils/utils";
import Pagination from "../../Common/Pagination";
import { PAGINATION_LIMIT } from "../../../Common/constants";
import SharedSectionTable from "../Consultations/components/SharedTable";

const PageTitle = lazy(() => import("../../Common/PageTitle"));

Expand Down Expand Up @@ -153,65 +153,13 @@ const RoutineSection = ({ consultationId }: ConsultationTabProps) => {

return (
<div className="pb-8 pt-4">
<div className="m-2 w-full overflow-hidden overflow-x-auto rounded-lg border border-black shadow md:w-fit">
<table className="border-collapse overflow-hidden rounded-lg border bg-secondary-100">
<thead className="bg-white shadow">
<tr>
<th className="w-48 border-b-2 border-r-2 border-black" />
{Object.keys(results).map((date) => (
<th
key={date}
className="border border-b-2 border-secondary-500 border-b-black p-1 text-sm font-semibold"
>
<p>{formatDate(date)}</p>
<p>{formatTime(date)}</p>
</th>
))}
</tr>
</thead>
<tbody className="bg-secondary-200">
{ROUTINE_ROWS.map((row) => (
<tr
key={row.field ?? row.title}
className={classNames(
row.title && "border-t-2 border-t-secondary-600",
)}
>
<td
className={classNames(
"border border-r-2 border-secondary-500 border-r-black bg-white p-2",
row.subField ? "pl-4 font-medium" : "font-bold",
)}
>
{row.title ?? t(`LOG_UPDATE_FIELD_LABEL__${row.field!}`)}
</td>
{row.field &&
Object.values(results).map((obj, idx) => (
<td
key={`${row.field}-${idx}`}
className={classNames(
"border border-secondary-500 bg-secondary-100 p-2 text-center font-medium",
)}
>
{(() => {
const value = obj[row.field];
if (value == null) {
return "-";
}
if (typeof value === "boolean") {
return t(value ? "yes" : "no");
}
const choices = REVERSE_CHOICES[row.field];
const choice = `${row.field.toUpperCase()}__${choices[value as keyof typeof choices]}`;
return t(choice);
})()}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<SharedSectionTable
data={results}
rows={ROUTINE_ROWS}
choices={REVERSE_CHOICES}
translateKey="LOG_UPDATE_FIELD_LABEL"
t={t}
/>

{totalCount != null && totalCount > PAGINATION_LIMIT && (
<div className="mt-4 flex w-full justify-center">
Expand Down
72 changes: 32 additions & 40 deletions src/Components/Facility/Consultations/NursingPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
NURSING_CARE_PROCEDURES,
PAGINATION_LIMIT,
} from "../../../Common/constants";

import SharedSectionTable from "./components/SharedTable";
import Pagination from "../../Common/Pagination";
import { formatDateTime } from "../../../Utils/utils";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -71,50 +71,42 @@ export const NursingPlot = ({ consultationId }: any) => {
else return false;
};

const rows = NURSING_CARE_PROCEDURES.filter((f) => filterEmpty(f)).map(
(procedure) => ({
field: procedure,
title: t(`NURSING_CARE_PROCEDURE__${procedure}`),
}),
);

const mappedData = dataToDisplay.reduce(
(acc: Record<string, any>, item: any) => {
if (!acc[item.date]) acc[item.date] = {};
acc[item.date][item.procedure] = item.description;
return acc;
},
{},
);

return (
<div>
<div className="">
<div>
<div className="flex flex-row overflow-x-scroll">
{areFieldsEmpty() && (
<div className="mt-1 w-full rounded-lg border bg-white p-4 shadow">
<div className="flex items-center justify-center text-2xl font-bold text-secondary-500">
{t("no_data_found")}
</div>
{areFieldsEmpty() && (
<div className="mt-1 w-full rounded-lg border bg-white p-4 shadow">
<div className="flex items-center justify-center text-2xl font-bold text-secondary-500">
{t("no_data_found")}
</div>
)}
{NURSING_CARE_PROCEDURES.map(
(f) =>
filterEmpty(f) && (
<div key={f} className="m-2 w-3/4">
<div className="sticky top-0 z-10 rounded pt-2">
<div className="mx-2 flex items-center justify-between rounded border bg-secondary-200 p-4">
<h3 className="flex h-8 items-center text-sm">
{t(`NURSING_CARE_PROCEDURE__${f}`)}
</h3>
</div>
</div>
<div className="m-2">
{dataToDisplay
.filter((i: any) => i.procedure === f)
.map((care: any, index: number) => (
<div
key={index}
className="my-2 w-full divide-y rounded-lg border bg-white p-4 shadow"
>
<div className="text-xs font-semibold">
{care.date}
</div>
<div className="py-2 text-sm">
{care.description}
</div>
</div>
))}
</div>
</div>
),
)}
</div>
</div>
)}

{!areFieldsEmpty() && (
<SharedSectionTable
data={mappedData}
rows={rows}
translateKey="NURSING_CARE_PROCEDURE"
t={t}
/>
)}
</div>
</div>

Expand Down
73 changes: 73 additions & 0 deletions src/Components/Facility/Consultations/components/SharedTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from "react";
import { formatDate, formatTime } from "../../../../Utils/utils";
import { classNames } from "../../../../Utils/utils";

interface SharedSectionTableProps {
data: Record<string, any>;
rows: Array<{ title?: string; field?: string; subField?: boolean }>;
choices?: Record<string, Record<number | string, string>>;
translateKey: string;
t: (key: string) => string;
}

const SharedSectionTable: React.FC<SharedSectionTableProps> = ({
data,
rows,
choices = {},
translateKey,
t,
}) => {
return (
<div className="m-2 w-full overflow-hidden overflow-x-auto rounded-lg border border-black shadow md:w-fit">
<table className="border-collapse overflow-hidden rounded-lg border bg-secondary-100">
<thead className="bg-white shadow">
<tr>
<th className="border-b-2 border-r-2 border-black" />
{Object.keys(data).map((date) => (
<th
key={date}
className="w-40 border border-b-2 border-secondary-500 border-b-black p-1 text-sm font-semibold"
>
<p>{formatDate(date)}</p>
<p>{formatTime(date)}</p>
</th>
))}
</tr>
</thead>
<tbody className="bg-secondary-200">
{rows.map((row) => (
<tr
key={row.field ?? row.title}
className={classNames(
row.title && "border-t-2 border-t-secondary-600",
)}
>
<td
className={classNames(
"border border-r-2 border-secondary-500 border-r-black bg-white p-2",
row.subField ? "pl-4 font-medium" : "font-bold",
)}
>
{row.title ?? t(`${translateKey}__${row.field}`)}
</td>
{Object.values(data).map((obj, idx) => (
<td
key={`${row.field}-${idx}`}
className="border border-secondary-500 bg-secondary-100 p-2 text-center font-medium"
>
{row.field
? choices[row.field]
? (choices[row.field][obj[row.field]] ?? "-")
: (obj[row.field] ?? "-")
: "-"}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};

export default SharedSectionTable;

0 comments on commit 9cc2eb2

Please sign in to comment.