made a reusable component for table in routine and nursing care procedures #8608
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import React from "react"; | ||
| import { formatDate, formatTime } from "../../../Utils/utils"; | ||
| import { classNames } from "../../../Utils/utils"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| interface SharedSectionTableProps { | ||
| data: Record<string, any>; | ||
| rows: Array<{ title?: string; field?: string; subField?: boolean }>; | ||
| choices?: Record<string, Record<number | string, string>>; | ||
| } | ||
|
|
||
| const LogUpdateAnalayseTable: React.FC<SharedSectionTableProps> = ({ | ||
| data, | ||
| rows, | ||
| choices = {}, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| // Helper function to get the display value | ||
| const getDisplayValue = ( | ||
| value: string | boolean | null | undefined, | ||
| field?: string, | ||
| ): string => { | ||
| if (value == null) { | ||
| return " "; | ||
| } | ||
|
|
||
| if (typeof value === "boolean") { | ||
| return t(value ? "yes" : "no"); | ||
| } | ||
| if (field && choices[field]) { | ||
| const choice = | ||
| choices[field][value as keyof (typeof choices)[typeof field]]; | ||
| return choice ? t(`${field.toUpperCase()}__${choice}`) : "-"; | ||
| } | ||
| if (value && typeof value == "string") return value; | ||
|
|
||
| return "-"; | ||
| }; | ||
|
|
||
| const isValidDate = (str: string) => { | ||
| let ct = 0; | ||
| for (let i = 0; i < str.length; i++) { | ||
| if (str[i] == "/") ct++; | ||
| } | ||
|
|
||
| if (ct == 2) return true; | ||
| return false; | ||
| }; | ||
|
|
||
| const dateConversion = (str: string) => { | ||
| const time = str.split(";")[0].trim(); | ||
|
|
||
| const date = str.split(";")[1].trim(); | ||
|
|
||
| const dd = date.split("/")[0]; | ||
| const mm = date.split("/")[1]; | ||
|
|
||
| const yyyy = date.split("/")[2]; | ||
|
|
||
| return time + ";" + mm + "/" + dd + "/" + yyyy; | ||
| }; | ||
|
There was a problem hiding this comment. we can use There was a problem hiding this comment. @rithviknishad actually formatDateTime uses days.js that expects date in format mm/dd/yyyy but the date format passed in nursingtab was different so I had to convert the format and then pass it to formatDateTime function There was a problem hiding this comment. Whats the format of time received? I am pretty sure you can transform a format to other super easily. There was a problem hiding this comment. From ChatGPT In this case, you can utilize
Here’s a sample implementation for transforming the date format: import dayjs from 'dayjs';
const dateConversion = (str: string) => {
const [time, date] = str.split(';').map(s => s.trim());
// Assuming the incoming date is in "dd/mm/yyyy" format
const parsedDate = dayjs(date, 'DD/MM/YYYY');
// Format the date to the required "mm/dd/yyyy" format for formatDateTime
const formattedDate = parsedDate.format('MM/DD/YYYY');
return `${time}; ${formattedDate}`;
};In this implementation:
You can now pass the result to There was a problem hiding this comment. backend is giving the data in standard format @Sahil-Sinha-11 
However you are already formatting it when sending the data to the component after receiving it from the backend, and then deconstructing the formatted back to unformatted, just for format it again? 
There was a problem hiding this comment. @rithviknishad I am not able to run the application it shows a file does not exist( pluginMap). I even tried on devlop branch. There was a problem hiding this comment. There was a problem hiding this comment. Hey @rithviknishad , I resolved it . |
||
|
|
||
| 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 rounded-lg border bg-secondary-100"> | ||
| <thead className="sticky top-0 bg-white shadow"> | ||
| <tr> | ||
| <th className="sticky left-0 border-b-2 border-r-2 border-black bg-white"></th> | ||
| {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" | ||
| > | ||
| {/* DD/MM/YYYY -> MM/DD/YYYY */} | ||
| <p> | ||
| {isValidDate(date) | ||
| ? formatDate(dateConversion(date)) | ||
| : formatDate(date)} | ||
| </p> | ||
| <p> | ||
| {isValidDate(date) | ||
| ? formatTime(dateConversion(date)) | ||
| : 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", | ||
| )} | ||
| > | ||
| <th | ||
| className={classNames( | ||
| "sticky left-0 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!}`)} | ||
| </th> | ||
| {Object.values(data).map((obj, idx) => { | ||
| const value = obj[row.field!]; | ||
| return ( | ||
| <td | ||
| key={`${row.field}-${idx}`} | ||
| className="w-80 border border-l-2 border-secondary-500 bg-secondary-100 p-2 text-center font-medium" | ||
| > | ||
| {getDisplayValue(value, row.field)} | ||
| </td> | ||
| ); | ||
| })} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LogUpdateAnalayseTable; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
try to avoid any as much as possible, please add a valid type here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Sahil-Sinha-11 the changes look good, just this, can you please replace this
anywith respective type