Skip to content

Commit

Permalink
(clean) save work done on attemptinng to render an svg
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnsereko
jnsereko committed Nov 27, 2024
1 parent 78afca8 commit 7aefebd
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 240 deletions.
6 changes: 6 additions & 0 deletions packages/esm-patient-banner-app/src/config-schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@ export const configSchema = {
_type: Type.UUID,
},
},
autoPrint: {
_type: Type.Boolean,
_description: 'Whether to print the patient sticker by default',
_default: false,
},
},
useRelationshipNameLink: {
_type: Type.Boolean,
Expand Down Expand Up @@ -150,6 +155,7 @@ export interface ConfigObject {
width: string;
};
identifiersToDisplay: Array<string>;
autoPrint: boolean;
};
useRelationshipNameLink: boolean;
}
137 changes: 9 additions & 128 deletions ...sm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Barcode from 'react-barcode';
import { useTranslation } from 'react-i18next';
import { useConfig } from '@openmrs/esm-framework';
import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
import { defaultBarcodeParams, getPatientField } from './print-identifier-sticker.resource';
import { type AllowedPatientFields, type ConfigObject } from '../config-schema';
import styles from './print-identifier-sticker.scss';
Expand All @@ -24,92 +24,20 @@ const PrintComponent: React.FC<PrintComponentProps> = ({ patient }) => {
<div className={styles.stickerContainer}>
<Grid className={styles.gridHeaderContainer}>
{printPatientSticker?.header?.showBarcode && (
<Column lg={12} md={6} sm={4}>
<Barcode value={primaryIdentifierValue} {...defaultBarcodeParams} />
</Column>
<div className={`${styles.stickerBarcodeContainer}`}>
<div className={styles.stickerBarcode}>
<Barcode value={primaryIdentifierValue} {...defaultBarcodeParams} />
</div>
</div>
)}
{printPatientSticker?.header?.showLogo && (
<Column lg={4} md={2} sm={4}>
<div className={`${styles.logoContainer}`}>
<div className={styles.implementationLogo}>
<ImplementationLogo />
</div>
</Column>
</div>
)}
</Grid>

{/* <FlexGrid>
<Row>
<Grid className={styles.gridHeaderContainer}>
{printPatientSticker?.header?.showBarcode && (
<Column lg={12} md={6} sm={4}>
<Barcode value={primaryIdentifierValue} {...defaultBarcodeParams} />
</Column>
)}
{printPatientSticker?.header?.showLogo && (
<Column lg={4} md={2} sm={4}>
<div className={styles.implementationLogo}>
<ImplementationLogo />
</div>
</Column>
)}
</Grid>
</Row>
<div>
{individualFields.map((field) => {
const Component = getPatientField(field);
return (
<Component patient={patient} showFieldSeparator={showFieldSeparator} />
);
})}
{fieldsTableGroups.length > 0
? fieldsTableGroups.map((group, index) => (
<Row>
<table key={`group-${index}`}>
<tbody>
<tr>
{group.map((field) => {
const Component = getPatientField(field);
return (
<td key={field}>
<Component patient={patient} showFieldSeparator={showFieldSeparator} />
</td>
);
})}
</tr>
</tbody>
</table>
</Row>
))
: null}
</div>
</FlexGrid> */}

{/*
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 700 500">
<rect fill="#f0f0f0" height="150" width="700" y="0" x="0"></rect>
<text fill="#333" font-size="40" y="90" x="20">
Barcode
</text>
<text fill="#333" font-size="40" y="90" x="510">
logo
</text>
<text fill="#555" font-size="20" y="210" x="20">Patient ID</text>
<text font-size="40" y="250" x="20">100008E</text>
<text fill="#555" font-size="20" y="310" x="20">Patient Name</text>
<text font-size="40" y="350" x="20">Joshua Johnson</text>
<text fill="#555" font-size="20" y="410" x="20">Gender</text>
<text font-size="40" y="450" x="20">Male</text>
<text fill="#555" font-size="20" y="410" x="240">Date of Birth</text>
<text font-size="40" y="450" x="240"></text>
<text fill="#555" font-size="20" y="410" x="510">Age</text>
<text font-size="40" y="450" x="510">25-Sept-2019</text>
</svg> */}

<div
className={styles.fieldsContainer}
style={printPatientSticker?.printStickerFields?.fieldsContainerStyleOverrides}
Expand Down Expand Up @@ -141,53 +69,6 @@ const PrintComponent: React.FC<PrintComponentProps> = ({ patient }) => {
</table>
))
: null}

{/* <Grid className={styles.gridHeaderContainer}>
{printPatientSticker?.header?.showBarcode && (
<Column lg={12} md={6} sm={4}>
<Barcode value={primaryIdentifierValue} {...defaultBarcodeParams} />
</Column>
)}
{printPatientSticker?.header?.showLogo && (
<Column lg={4} md={2} sm={4}>
<div className={styles.implementationLogo}>
<ImplementationLogo />
</div>
</Column>
)}
</Grid> */}

{/* <div
className={styles.fieldsContainer}
style={printPatientSticker?.printStickerFields?.fieldsContainerStyleOverrides}
>
{individualFields.map((field) => {
const Component = getPatientField(field);
return (
<div key={field} className={styles.fieldRow}>
<Component patient={patient} showFieldSeparator={showFieldSeparator} />
</div>
);
})}
</div>
{fieldsTableGroups.length > 0
? fieldsTableGroups.map((group, index) => (
<table key={`group-${index}`} className={styles.fieldsTable}>
<tbody>
<tr>
{group.map((field) => {
const Component = getPatientField(field);
return (
<td key={field} className={styles.fieldsTableCell}>
<Component patient={patient} showFieldSeparator={showFieldSeparator} />
</td>
);
})}
</tr>
</tbody>
</table>
))
: null} */}
</div>
);
};
Expand All @@ -197,7 +78,7 @@ const ImplementationLogo: React.FC = () => {
const { printPatientSticker } = useConfig<ConfigObject>();

return printPatientSticker?.header?.logo ? (
<img alt={t('implementationLogo', 'Implementation logo')} src={printPatientSticker?.header?.logo} />
<img alt={t('implementationLogo', 'Implementation logo')} src={interpolateUrl(printPatientSticker?.header?.logo)} />
) : (
// TODO: Figure out why #omrs-logo-full-mono sprite is not working
<svg
Expand Down
Loading

0 comments on commit 7aefebd

Please sign in to comment.