OH2-264 | Sort table component date fields by date time (#546)

* update(OH2-264): Sort table component date fields by date time

* fix(OH2-264): Fix blanc screeen occuring when a table row date value is undefined

* update: Show date fields with time in table row detaitls

* update(i18n): Rename 'Date (d/m/y)' to 'Date'

* fix: Fix table collapse, remove duplicate date in clinic table

* update: Update data fields display order and fix some lint warnings

* update: Update table to display row details in the labels keys order

* update: Add code in clinic data and also display empty fields

* update: Restore showEmptyCells to false in clinic

---------

Co-authored-by: SteveGT96 <steve.tsala@intesys.it>

Author: SteveGT96

src/components/accessories/admission/admissionTable/AdmissionTable.tsx

@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { IState } from "../../../../types";
 import { AdmissionDTO } from "../../../../generated";
 import { getPatientAdmissions } from "../../../../state/admissions/actions";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 
 interface IOwnProps {
@@ -26,6 +26,7 @@ const PatientAdmissionTable: FunctionComponent<IOwnProps> = ({
   const dateFields = ["admDate", "disDate"];
 
   const label = {
+    id: t("admission.code"),
     admDate: t("admission.admDate"),
     disDate: t("admission.disDate"),
     admType: t("admission.admType"),
@@ -69,8 +70,8 @@ const PatientAdmissionTable: FunctionComponent<IOwnProps> = ({
     return data.map((item) => {
       return {
         id: item.id ?? "",
-        admDate: item.admDate ? renderDate(item.admDate) : "",
-        disDate: item.disDate ? renderDate(item.disDate) : "",
+        admDate: item.admDate ? renderDateTime(item.admDate) : "",
+        disDate: item.disDate ? renderDateTime(item.disDate) : "",
         admType: item.admType?.description ?? "",
         diseaseIn: item.diseaseIn?.description ?? "",
         transUnit: item.transUnit,

src/components/accessories/currentAdmission/CurrentAdmission.tsx

@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
-import { AdmissionDTO, OpdDTO, PatientDTO } from "../../../generated";
+import { AdmissionDTO, OpdDTO } from "../../../generated";
 import { updateAdmission } from "../../../state/admissions/actions";
 import { IState } from "../../../types";
 import { useFields } from "../admission/useFields";
@@ -52,7 +51,7 @@ export const CurrentAdmission: FunctionComponent<IOwnProps> = ({
     if (onEditChange) {
       onEditChange(editionMode);
     }
-  }, [editionMode]);
+  }, [editionMode, onEditChange]);
 
   return (
     <div className="currentAdmission">

src/components/accessories/currentAdmission/currentAdmissionData/CurrentAdmissionData.tsx

@@ -28,6 +28,12 @@ export const CurrentAdmissionData: FunctionComponent<IOwnProps> = ({
         )}
       </div>
       <div className="currentAdmissionData__content">
+        {!isEmpty(admission?.admDate) && (
+          <div className="currentAdmissionData__item">
+            <span className="item_label">{t("admission.admDate")}</span>
+            <p className="item_content">{renderDate(admission?.admDate)}</p>
+          </div>
+        )}
         {!isEmpty(admission?.ward?.description) && (
           <div className="currentAdmissionData__item">
             <span className="item_label">{t("admission.ward")}</span>
@@ -40,12 +46,6 @@ export const CurrentAdmissionData: FunctionComponent<IOwnProps> = ({
             <p className="item_content">{admission?.fhu}</p>
           </div>
         )}
-        {!isEmpty(admission?.admDate) && (
-          <div className="currentAdmissionData__item">
-            <span className="item_label">{t("admission.admDate")}</span>
-            <p className="item_content">{renderDate(admission?.admDate)}</p>
-          </div>
-        )}
         {!isEmpty(admission?.admType?.description) && (
           <div className="currentAdmissionData__item">
             <span className="item_label">{t("admission.admType")}</span>

src/components/accessories/laboratory/table/ExamTable.tsx

@@ -4,7 +4,7 @@ import { CustomModal } from "../../customModal/CustomModal";
 import Table from "../../table/Table";
 import { IExamTableProps, multipleResultsLabel } from "./types";
 import "./styles.scss";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { LaboratoryDetails } from "../LaboratoryDetails";
 import { useDispatch, useSelector } from "react-redux";
 import { getLabWithRowsByCode } from "../../../../state/laboratories/actions";
@@ -69,7 +69,7 @@ export const ExamTable: FC<IExamTableProps> = ({
       results = data.map((e) => {
         return {
           id: e.laboratoryDTO?.code ?? "",
-          date: renderDate(e.laboratoryDTO?.labDate ?? ""),
+          date: renderDateTime(e.laboratoryDTO?.labDate ?? ""),
           patName: e.laboratoryDTO?.patName ?? "",
           exam:
             e.laboratoryDTO?.exam?.description ?? e.laboratoryDTO?.exam ?? "", //The second case should be removed when the api is ready

src/components/accessories/opds/table/OpdTable.tsx

@@ -6,7 +6,7 @@ import SkeletonLoader from "../../skeletonLoader/SkeletonLoader";
 import Table from "../../table/Table";
 import { IOpdTableProps } from "./types";
 import "./styles.scss";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 
 export const OpdTable: FC<IOpdTableProps> = ({ data }) => {
   const { t } = useTranslation();
@@ -25,6 +25,7 @@ export const OpdTable: FC<IOpdTableProps> = ({ data }) => {
   const label = {
     id: t("opd.code"),
     date: t("opd.date"),
+    nextVisitDate: t("opd.nextvisitdate"),
     patientCode: t("opd.patientcode"),
     patientName: t("opd.patient"),
     sex: t("opd.sex"),
@@ -36,7 +37,6 @@ export const OpdTable: FC<IOpdTableProps> = ({ data }) => {
     note: t("opd.note"),
     referralFrom: t("opd.referralfrom"),
     referralTo: t("opd.referralto"),
-    nextVisitDate: t("opd.nextvisitdate"),
     age: t("opd.age"),
     ward: t("opd.ward"),
   };
@@ -49,16 +49,15 @@ export const OpdTable: FC<IOpdTableProps> = ({ data }) => {
     "age",
     "disease",
   ];
-  const [opd, setOpd] = useState({} as OpdDTO);
 
   const formatDataToDisplay = (data: OpdDTO[]) => {
     let results: any = [];
     if (data)
       results = data.map((e) => {
         return {
           id: e.code ?? "",
-          date: renderDate(e.date ?? ""),
-          nextVisitDate: renderDate(e.nextVisitDate ?? ""),
+          date: renderDateTime(e.date ?? ""),
+          nextVisitDate: renderDateTime(e.nextVisitDate ?? ""),
           patientCode: e.patientCode ?? "",
           patientName: e.patientName ?? "",
           sex: e.sex ?? "",
@@ -82,9 +81,6 @@ export const OpdTable: FC<IOpdTableProps> = ({ data }) => {
   const formattedData: any[] = formatDataToDisplay(data);
 
   const [open, setOpen] = useState(false);
-  const handleOpen = () => {
-    setOpen(true);
-  };
 
   const handleClose = () => {
     setOpen(false);

src/components/accessories/patientExams/patientExamRequestsTable/PatientExamRequestsTable.tsx

@@ -1,13 +1,13 @@
 import React, { FunctionComponent, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { LaboratoryDTO, LaboratoryDTOStatusEnum } from "../../../../generated";
+import { LaboratoryDTO } from "../../../../generated";
 import { IState } from "../../../../types";
 import Table from "../../table/Table";
 import { useTranslation } from "react-i18next";
 import { CircularProgress } from "@material-ui/core";
 import InfoBox from "../../infoBox/InfoBox";
 import { getLabsRequestByPatientId } from "../../../../state/laboratories/actions";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 import { statusLabel } from "../../laboratory/table/ExamTable";
 
@@ -60,7 +60,7 @@ const PatientExamRequestsTable: FunctionComponent<IOwnProps> = ({
     return data.map((item) => {
       return {
         code: item.code,
-        date: item.labDate ? renderDate(item.labDate) : "",
+        date: item.labDate ? renderDateTime(item.labDate) : "",
         status: item.status ? statusLabel(item.status) : "",
         exam: item.exam?.description ?? "",
         //material: item.material ? t(item.material) : "",

src/components/accessories/patientExams/patientExamsTable/PatientExamsTable.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { CircularProgress } from "@material-ui/core";
 import InfoBox from "../../infoBox/InfoBox";
 import { getLabsByPatientId } from "../../../../state/laboratories/actions";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 import { statusLabel } from "../../laboratory/table/ExamTable";
 
@@ -32,7 +32,7 @@ const PatientExamsTable: FunctionComponent<IOwnProps> = ({
 
   const label = {
     code: t("common.code"),
-    labDate: t("lab.date"),
+    date: t("lab.date"),
     exam: t("lab.exam"),
     result: t("lab.result"),
     note: t("lab.note"),
@@ -63,7 +63,7 @@ const PatientExamsTable: FunctionComponent<IOwnProps> = ({
       return {
         code: item.laboratoryDTO?.code,
         date: item.laboratoryDTO?.labDate
-          ? renderDate(item.laboratoryDTO?.labDate)
+          ? renderDateTime(item.laboratoryDTO?.labDate)
           : "",
         exam: item.laboratoryDTO?.exam?.description ?? "",
         result:

src/components/accessories/patientOPD/patientOPDTable/PatientOPDTable.tsx

@@ -1,16 +1,13 @@
 import React, { FunctionComponent, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { OpdDTO, OpdWithOperationRowDTO } from "../../../../generated";
-import {
-  getOpds,
-  getOpdsWithOperationRows,
-} from "../../../../state/opds/actions";
+import { getOpdsWithOperationRows } from "../../../../state/opds/actions";
 import { IState } from "../../../../types";
 import Table from "../../table/Table";
 import { CircularProgress } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import InfoBox from "../../infoBox/InfoBox";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 interface IOwnProps {
   shouldUpdateTable: boolean;
@@ -61,7 +58,7 @@ const PatientOPDTable: FunctionComponent<IOwnProps> = ({
       results = data.map((item) => {
         return {
           code: item.opdDTO?.code,
-          date: item.opdDTO?.date ? renderDate(item.opdDTO.date) : "",
+          date: item.opdDTO?.date ? renderDateTime(item.opdDTO.date) : "",
           disease: item.opdDTO?.disease?.description || "",
           ward: item.opdDTO?.ward.description,
           disease2: item.opdDTO?.disease2?.description || "",

src/components/accessories/patientOperation/operationTable/OperationRowTable.tsx

@@ -6,7 +6,7 @@ import { CircularProgress } from "@material-ui/core";
 import { useDispatch, useSelector } from "react-redux";
 import { IState } from "../../../../types";
 import { OperationRowDTO } from "../../../../generated";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { getOperationsByAdmissionId } from "../../../../state/operations/actions";
 import { usePermission } from "../../../../libraries/permissionUtils/usePermission";
 
@@ -59,7 +59,7 @@ const PatientOperationRowTable: FunctionComponent<IOwnProps> = ({
     return data.map((item) => {
       return {
         id: item.id,
-        opDate: item.opDate ? renderDate(item.opDate) : "",
+        opDate: item.opDate ? renderDateTime(item.opDate) : "",
         opResult: t("operation.result." + item.opResult ?? "unknown"),
         remarks: item.remarks ?? "",
         operation: item.operation?.description ?? "",

src/components/accessories/patientSummary/patientSummaryByDate/PatientSummaryByDate.tsx

@@ -43,6 +43,7 @@ const PatientSummaryByDate: FunctionComponent<TProps> = ({
             rowsPerPage={ORDER_BY_DATE_PAGE_SIZE}
             isCollapsabile={true}
             showEmptyCell={false}
+            detailsExcludedFields={["date"]}
           />
         ) : (
           <CircularProgress

src/components/accessories/patientSummary/patientSummaryByType/PatientSummaryByType.tsx

@@ -60,6 +60,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -84,6 +85,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -107,6 +109,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -131,6 +134,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -153,6 +157,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -175,6 +180,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}
@@ -198,6 +204,7 @@ const PatientSummaryByType: FunctionComponent<TProps> = ({
                 rowsPerPage={ORDER_BY_TYPE_PAGE_SIZE}
                 isCollapsabile={true}
                 showEmptyCell={false}
+                detailsExcludedFields={["date"]}
               />
             </div>
           )}

src/components/accessories/patientSummary/useSummaryMetaData.tsx

@@ -3,15 +3,23 @@ import { useTranslation } from "react-i18next";
 const useSummaryMetaData = () => {
   const { t } = useTranslation();
   const labels = {
+    id: t("common.code"),
+    code: t("common.code"),
+    pex_ID: t("common.code"),
+    therapyID: t("common.code"),
     date: t("common.date"),
     visitDate: t("opd.date"),
-    type: t("common.type"),
+    labDate: t("lab.date"),
+    opdDate: t("opd.date"),
+    startDate: t("therapy.startDate"),
+    endDate: t("therapy.endDate"),
     opDate: t("operation.opDate"),
-    ward: t("admission.ward"),
     admDate: t("admission.admDate"),
+    disDate: t("admission.disDate"),
+    type: t("common.type"),
     admType: t("admission.admType"),
     disType: t("admission.disType"),
-    disDate: t("admission.disDate"),
+    ward: t("admission.ward"),
     diseaseIn: t("admission.diseaseIn"),
     diseaseOut1: t("admission.diseaseOut1"),
     diseaseOut2: t("admission.diseaseOut2"),
@@ -40,9 +48,6 @@ const useSummaryMetaData = () => {
     pex_note: t("examination.note"),
     exam: t("lab.exam"),
     //material: t("lab.material"),
-    labDate: t("lab.date"),
-    startDate: t("therapy.startDate"),
-    endDate: t("therapy.endDate"),
     qty: t("therapy.quantity"),
     freqInDay: t("therapy.frequencyInDay"),
     freqInPeriod: t("therapy.frequencyInPeriod"),

src/components/accessories/patientTherapy/patientTherapyTable/PatientTherapyTable.tsx

@@ -7,7 +7,7 @@ import { getTherapiesByPatientId } from "../../../../state/therapies/actions";
 import { useTranslation } from "react-i18next";
 import { CircularProgress } from "@material-ui/core";
 import InfoBox from "../../infoBox/InfoBox";
-import { renderDate } from "../../../../libraries/formatUtils/dataFormatting";
+import { renderDateTime } from "../../../../libraries/formatUtils/dataFormatting";
 import { getMedicals } from "../../../../state/medicals/actions";
 import { formatDateDiff } from "../../../../libraries/formatUtils/formatDateDiff";
 import moment from "moment";
@@ -86,8 +86,8 @@ const PatientTherapyTable: FunctionComponent<IOwnProps> = ({
       return {
         therapyID: item.therapyID,
         medicalId: medical ? medical.description : item.medicalId,
-        startDate: item.startDate ? renderDate(item.startDate) : "",
-        endDate: item.endDate ? renderDate(item.endDate) : "",
+        startDate: item.startDate ? renderDateTime(item.startDate) : "",
+        endDate: item.endDate ? renderDateTime(item.endDate) : "",
         qty: item.qty,
         freqInDay: item.freqInDay,
         freqInPeriod: item.freqInPeriod,