From 4a6c7e0e443726c0153ac3ae8cf23714bb61d2a9 Mon Sep 17 00:00:00 2001 From: wodpachua Date: Fri, 30 Aug 2024 16:34:10 +0300 Subject: [PATCH] (refactor) Move inline styles in print-identifier-sticker-content.component.tsx to print-identifier-sticker-content.scss --- ...t-identifier-sticker-content.component.tsx | 68 +++++++++++++++++ .../print-identifier-sticker-content.scss | 38 ++++++++++ .../print-identifier-sticker.component.tsx | 75 +++++++++++++++++++ .../print-identifier-sticker.modal.tsx | 2 +- .../src/config-schema.ts | 18 +++++ 5 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx create mode 100644 packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss create mode 100644 packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.component.tsx diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx new file mode 100644 index 0000000000..bee5da5e8a --- /dev/null +++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx @@ -0,0 +1,68 @@ +import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; +import { useConfig } from '@openmrs/esm-framework'; +import { type ConfigObject } from '../config-schema'; +import IdentifierSticker from './print-identifier-sticker.component'; +import styles from './print-identifier-sticker-content.scss'; + +interface PrintIdentifierStickerContentProps { + labels: Array<{}>; + numberOfLabelColumns: number; + numberOfLabelRowsPerPage: number; + patient: fhir.Patient; +} + +const PrintIdentifierStickerContent = forwardRef( + ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }, ref) => { + const { printIdentifierStickerWidth, printIdentifierStickerHeight, printIdentifierStickerPaperSize } = + useConfig(); + + const maxLabelsPerPage = numberOfLabelRowsPerPage * numberOfLabelColumns; + const pages: Array = []; + + for (let i = 0; i < labels.length; i += maxLabelsPerPage) { + pages.push(labels.slice(i, i + maxLabelsPerPage)); + } + const divRef = useRef(null); + + useImperativeHandle(ref, () => divRef.current); + + useEffect(() => { + if (divRef.current) { + const style = divRef.current.style; + style.setProperty('--omrs-print-label-paper-size', printIdentifierStickerPaperSize); + style.setProperty('--omrs-print-label-columns', numberOfLabelColumns.toString()); + style.setProperty('--omrs-print-label-rows', numberOfLabelRowsPerPage.toString()); + style.setProperty('--omrs-print-label-sticker-height', printIdentifierStickerHeight); + style.setProperty('--omrs-print-label-sticker-width', printIdentifierStickerWidth); + } + }, [ + numberOfLabelColumns, + numberOfLabelRowsPerPage, + printIdentifierStickerHeight, + printIdentifierStickerPaperSize, + printIdentifierStickerWidth, + ]); + + if (numberOfLabelColumns < 1 || numberOfLabelRowsPerPage < 1 || labels.length < 1) { + return; + } + + return ( +
+ {pages.map((pageLabels, pageIndex) => ( +
+
+ {pageLabels.map((_, index) => ( +
+ +
+ ))} +
+
+ ))} +
+ ); + }, +); + +export default PrintIdentifierStickerContent; diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss new file mode 100644 index 0000000000..dbe9ec4484 --- /dev/null +++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss @@ -0,0 +1,38 @@ +@use '@carbon/layout'; +@use '@carbon/type'; +@use '@openmrs/esm-styleguide/src/vars' as *; + +.printRoot { + @media print { + @page { + size: var(--omrs-print-label-paper-size, auto); + } + + html, + body { + height: initial !important; + overflow: initial !important; + background-color: white; + } + } + + .labelsContainer { + display: grid; + column-gap: 1.3rem; + row-gap: 1rem; + place-items: center; + background-color: white; + grid-template-columns: repeat(var(--omrs-print-label-columns, 1), 1fr); + grid-template-rows: repeat(var(--omrs-print-label-rows, 1), auto); + } + + .printContainer { + height: var(--omrs-print-label-sticker-height, 11rem); + width: var(--omrs-print-label-sticker-width, 13rem); + background-color: $ui-01; + } + + .pageBreak { + page-break-after: always; + } +} diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.component.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.component.tsx new file mode 100644 index 0000000000..ae24657d18 --- /dev/null +++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.component.tsx @@ -0,0 +1,75 @@ +import React, { forwardRef, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { age, getPatientName, useConfig, getCoreTranslation } from '@openmrs/esm-framework'; +import { type ConfigObject } from '../config-schema'; +import styles from './print-identifier-sticker.scss'; + +interface IdentifierStickerProps { + patient: fhir.Patient; +} + +const getGender = (gender: string): string => { + switch (gender) { + case 'male': + return getCoreTranslation('male', 'Male'); + case 'female': + return getCoreTranslation('female', 'Female'); + case 'other': + return getCoreTranslation('other', 'Other'); + case 'unknown': + return getCoreTranslation('unknown', 'Unknown'); + default: + return gender; + } +}; + +const IdentifierSticker = forwardRef(({ patient }, ref) => { + const { t } = useTranslation(); + const { printIdentifierStickerFields, excludePatientIdentifierCodeTypes } = useConfig(); + + const patientDetails = useMemo(() => { + if (!patient) { + return {}; + } + + const identifiers = + patient.identifier?.filter( + (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type.coding[0].code), + ) ?? []; + + return { + address: patient.address, + age: age(patient.birthDate), + dateOfBirth: patient.birthDate, + gender: getGender(patient.gender), + id: patient.id, + identifiers: [...identifiers], + name: patient ? getPatientName(patient) : '', + photo: patient.photo, + }; + }, [excludePatientIdentifierCodeTypes?.uuids, patient]); + + return ( +
+ {printIdentifierStickerFields.includes('name') &&
{patientDetails.name}
} + {patientDetails.identifiers.map((identifier) => { + return ( +

+ {identifier?.type?.text}: {identifier?.value} +

+ ); + })} +

+ {getCoreTranslation('sex', 'Sex')}: {patientDetails.gender} +

+

+ {t('dob', 'DOB')}: {patientDetails.dateOfBirth} +

+

+ {getCoreTranslation('age', 'Age')}: {patientDetails.age} +

+
+ ); +}); + +export default IdentifierSticker; diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx index 47dac29857..1b318c3cfa 100644 --- a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx +++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx @@ -115,7 +115,7 @@ const PrintIdentifierSticker: React.FC = ({ closeMo onAfterPrint: handleAfterPrint, onBeforeGetContent: handleBeforeGetContent, onPrintError: handlePrintError, - }); + } as any); return ( <> diff --git a/packages/esm-patient-banner-app/src/config-schema.ts b/packages/esm-patient-banner-app/src/config-schema.ts index 93c5d5e005..c6620214b8 100644 --- a/packages/esm-patient-banner-app/src/config-schema.ts +++ b/packages/esm-patient-banner-app/src/config-schema.ts @@ -36,6 +36,21 @@ export const configSchema = { 'Specifies the paper size for printing the sticker. You can define the size using units (e.g., mm, in) or named sizes (e.g., "148mm 210mm", "A1", "A2", "A4", "A5").', _default: '4in 6in', }, + printIdentifierStickerWidth: { + _type: Type.String, + _description: 'Specifies the width of the sticker to be printed.', + _default: '4in', + }, + printIdentifierStickerHeight: { + _type: Type.String, + _description: 'Specifies the height of the sticker to be printed.', + _default: '6in', + }, + printIdentifierStickerPaperSize: { + _type: Type.String, + _description: 'Specifies the paper size to be used for printing the sticker.', + _default: 'A4', + }, useRelationshipNameLink: { _type: Type.Boolean, _description: "Whether to use the relationship name as a link to the associated person's patient chart.", @@ -50,4 +65,7 @@ export interface ConfigObject { printIdentifierStickerFields: Array; printIdentifierStickerSize: string; useRelationshipNameLink: boolean; + printIdentifierStickerWidth: string; + printIdentifierStickerHeight: string; + printIdentifierStickerPaperSize: string; }