-
Notifications
You must be signed in to change notification settings - Fork 199
/
medications-list.component.tsx
98 lines (96 loc) · 4.46 KB
/
medications-list.component.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React from 'react';
import classNames from 'classnames';
import capitalize from 'lodash-es/capitalize';
import { useTranslation } from 'react-i18next';
import { Tile } from '@carbon/react';
import { formatDate } from '@openmrs/esm-framework';
import { getDosage } from '../past-visit.resource';
import { type OrderItem } from '../../types/index';
import styles from './past-visit-summary.scss';
interface MedicationProps {
medications: Array<OrderItem>;
}
const Medications: React.FC<MedicationProps> = ({ medications }) => {
const { t } = useTranslation();
return (
<div>
{medications.length > 0 ? (
medications.map(
(medication: OrderItem, ind) =>
medication.order?.dose &&
medication.order?.orderType?.display === 'Drug Order' && (
<div className={styles.medicationContainer}>
<Tile className={styles.medicationTile}>
<p className={styles.medicationRecord}>
<strong>{capitalize(medication.order.drug?.name)}</strong> —{' '}
{medication.order.drug?.strength?.toLowerCase()}
— {medication.order.doseUnits?.display?.toLowerCase()} —{' '}
<span>
<span className={styles.label01}> {t('dose', 'Dose').toUpperCase()} </span>{' '}
</span>
<span className={styles.dosage}>
{getDosage(medication.order.drug?.strength, medication.order?.dose)?.toLowerCase()}
</span>{' '}
— {medication.order.route?.display?.toLowerCase()} —{' '}
{medication.order.frequency?.display?.toLowerCase()} —{' '}
{!medication.order.duration
? t('orderIndefiniteDuration', 'Indefinite duration')
: t('orderDurationAndUnit', 'for {{duration}} {{durationUnit}}', {
duration: medication.order.duration,
durationUnit: medication.order.durationUnits?.display?.toLowerCase(),
})}
{medication.order?.numRefills !== 0 && (
<span>
<span className={styles.label01}> — {t('refills', 'Refills').toUpperCase()}</span>{' '}
{medication.order.numRefills}
{''}
</span>
)}
{medication.order?.dosingInstructions && (
<span> — {medication.order?.dosingInstructions.toLocaleLowerCase()}</span>
)}
{medication.order?.orderReasonNonCoded ? (
<span>
— <span className={styles.label01}>{t('indication', 'Indication').toUpperCase()}</span>{' '}
{medication.order?.orderReasonNonCoded}
</span>
) : null}
{medication.order?.quantity ? (
<span>
<span className={styles.label01}> — {t('quantity', 'Quantity').toUpperCase()}</span>{' '}
{medication.order?.quantity}
</span>
) : null}
{medication.order?.dateStopped ? (
<span className={styles.bodyShort01}>
<span className={styles.label01}>
{medication.order?.quantity ? ` — ` : ''} {t('endDate', 'End date').toUpperCase()}
</span>{' '}
{formatDate(new Date(medication.order?.dateStopped))}
</span>
) : null}
</p>
</Tile>
<p className={styles.metadata}>
{medication.time} ·{' '}
{medication.provider.name ? (
<span>
{' '}
{medication.provider && medication.provider.name},{' '}
{medication.provider && medication.provider.role}{' '}
</span>
) : null}{' '}
·{' '}
</p>
</div>
),
)
) : (
<p className={classNames(styles.bodyLong01, styles.text02)}>
{t('noMedicationsFound', 'No medications found')}
</p>
)}
</div>
);
};
export default Medications;