From 7752c71ac699a92e8661cdef8c0bde711bc76203 Mon Sep 17 00:00:00 2001 From: Amos Machora Date: Sat, 17 Aug 2024 14:32:17 +0300 Subject: [PATCH] (Refactor) : Removed patient bills filter and fixed patient search css issue (#309) * initial work on patient bills * fix: override button height for patient search extension * refactor: use carbon spacing for tile padding * fix: applied changes from code-review --- .../bill-manager/bill-manager.component.tsx | 18 ++--- .../src/bills-table/bills-table.scss | 2 +- .../esm-billing-app/src/helpers/functions.ts | 20 ++--- .../patient-bills-dashboard.scss | 9 +++ .../patient-bills-dashboard.tsx | 79 ++++++++++++++++--- ...ponent.tsx => patient-bills.component.tsx} | 61 +++++--------- 6 files changed, 111 insertions(+), 78 deletions(-) rename packages/esm-billing-app/src/past-patient-bills/{filtered-patient-bills.component.tsx => patient-bills.component.tsx} (59%) diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.component.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.component.tsx index a86d1d00..be47e59c 100644 --- a/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.component.tsx +++ b/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.component.tsx @@ -5,7 +5,7 @@ import styles from './bill-manager.scss'; import billTableStyles from '../../bills-table/bills-table.scss'; import { useBills } from '../../billing.resource'; import { DataTableSkeleton, Layer, Tile } from '@carbon/react'; -import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib'; +import { EmptyDataIllustration, EmptyState } from '@openmrs/esm-patient-common-lib'; import { useTranslation } from 'react-i18next'; type BillManagerProps = {}; @@ -36,18 +36,10 @@ const BillManager: React.FC = () => { }} /> {!patientUuid ? ( -
- - -
- -
-

- {t('notSearchedState', 'Please search for a patient in the input above')} -

- - -
+ ) : isLoading ? ( { * @returns {string} The substring found after the first colon in the input string. */ export function extractString(input: string): string { - const parts = input.split(':'); - return removeUUID(parts.length < 2 ? input : parts[1]); -} + const parts = input + .split(' ') + .map((s) => s.split(':')[1]) + .filter((s) => Boolean(s)); + + const firstTwoBillableServices = parts.slice(0, 2); -function removeUUID(str) { - // Regular expression to match a UUID - const uuidPattern = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/i; + if (parts.length <= 2) { + return firstTwoBillableServices.join(', '); + } - // Replace the UUID with an empty string - return str.replace(uuidPattern, ''); + return `${firstTwoBillableServices.join(', ')} & ${parts.length - 2} other services`; } // cleans the provider display name -export function extractNameString(formattedString) { +export function extractNameString(formattedString: string) { if (!formattedString) { return ''; } diff --git a/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.scss b/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.scss index b3010f48..6c9390e6 100644 --- a/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.scss +++ b/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.scss @@ -4,8 +4,17 @@ .container { height: calc(100vh - 3rem); + button { + height: auto !important; + } } .billsTableContainer { margin: layout.$spacing-03 layout.$spacing-01; } + +.loadingContainer, +.errorStateContainer, +.emptyStateContainer { + margin-top: layout.$spacing-05; +} diff --git a/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.tsx b/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.tsx index ecbca8b9..6ce0d683 100644 --- a/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.tsx +++ b/packages/esm-billing-app/src/past-patient-bills/patient-bills-dashboard/patient-bills-dashboard.tsx @@ -1,34 +1,87 @@ import React, { useState } from 'react'; import styles from './patient-bills-dashboard.scss'; -import { ExtensionSlot } from '@openmrs/esm-framework'; -import PastPatientBills from '../filtered-patient-bills.component'; +import { ErrorState, ExtensionSlot } from '@openmrs/esm-framework'; import { useBills } from '../../billing.resource'; -import { Dropdown } from '@carbon/react'; - -const filterItems = [ - { id: 'PENDING', text: 'Pending bills' }, - { id: 'POSTED', text: 'Posted bills' }, -]; +import { useTranslation } from 'react-i18next'; +import { DataTableSkeleton } from '@carbon/react'; +import { patientBillsHeaders, PatientBills } from '../patient-bills.component'; +import { EmptyState } from '@openmrs/esm-patient-common-lib'; const PatientBillsScreen: React.FC = () => { - const [patientUuid, setPatientUuid] = React.useState(''); - const { bills } = useBills(patientUuid); - const filterBills = bills.filter((bill) => bill.status !== 'PAID' && patientUuid === bill.patientUuid) ?? []; + const [patientUuid, setPatientUuid] = useState(); return (
setPatientUuid(patientUuid), + selectPatientAction: (patientUuid: string) => setPatientUuid(patientUuid), buttonProps: { kind: 'primary', }, }} /> - +
); }; +const PatientBillsWrapper = ({ patientUUID }: { patientUUID?: string }) => { + const { bills, isLoading, error } = useBills(patientUUID); + + const { t } = useTranslation(); + + if (!patientUUID) { + return ( +
+ +
+ ); + } + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error) { + return ( +
+ +
+ ); + } + + if (bills.length === 0) { + return ( +
+ +
+ ); + } + + return ; +}; + export default PatientBillsScreen; diff --git a/packages/esm-billing-app/src/past-patient-bills/filtered-patient-bills.component.tsx b/packages/esm-billing-app/src/past-patient-bills/patient-bills.component.tsx similarity index 59% rename from packages/esm-billing-app/src/past-patient-bills/filtered-patient-bills.component.tsx rename to packages/esm-billing-app/src/past-patient-bills/patient-bills.component.tsx index 716e4a05..21b4aa61 100644 --- a/packages/esm-billing-app/src/past-patient-bills/filtered-patient-bills.component.tsx +++ b/packages/esm-billing-app/src/past-patient-bills/patient-bills.component.tsx @@ -17,26 +17,20 @@ import { useTranslation } from 'react-i18next'; import { MappedBill } from '../types'; import styles from '../bills-table/bills-table.scss'; import { ConfigurableLink } from '@openmrs/esm-framework'; -import { EmptyState } from '@openmrs/esm-patient-common-lib'; type PatientBillsProps = { - patientUuid: string; bills: Array; - setPatientUuid: (patientUuid: string) => void; }; -const PastPatientBills: React.FC = ({ patientUuid, bills, setPatientUuid }) => { - const { t } = useTranslation(); - - if (!patientUuid) { -

Missing patient information

; - } +export const patientBillsHeaders = [ + { header: 'Date', key: 'date' }, + { header: 'Billable Service (s)', key: 'billableService' }, + { header: 'Total Amount', key: 'totalAmount' }, + { header: 'status', key: 'status' }, +]; - const tableHeaders = [ - { header: 'Date', key: 'date' }, - { header: 'Billable Service', key: 'billableService' }, - { header: 'Total Amount', key: 'totalAmount' }, - ]; +export const PatientBills: React.FC = ({ bills }) => { + const { t } = useTranslation(); const billingUrl = '${openmrsSpaBase}/home/billing/patient/${patientUuid}/${uuid}'; @@ -52,29 +46,17 @@ const PastPatientBills: React.FC = ({ patientUuid, bills, set ), billableService: extractString(bill.billingService), totalAmount: convertToCurrency(bill.totalAmount), + status: bill.status, })); - if (bills.length === 0 && patientUuid !== '') { - ; - } - return (
( + render={({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => ( = ({ patientUuid, bills, set - {headers.map((header, i) => ( = ({ patientUuid, bills, set {rows.map((row, index) => ( - - - {row.cells.map((cell) => ( - {cell.value} - ))} - - + + {row.cells.map((cell) => ( + {cell.value} + ))} + ))}
@@ -115,5 +94,3 @@ const PastPatientBills: React.FC = ({ patientUuid, bills, set
); }; - -export default PastPatientBills;