[Closes #136] Layout QR codes for print (#142)

client/src/App.jsx

@@ -135,11 +135,11 @@ function App() {
             />
           }
         >
+          <Route
+            path="/admin/patients/generate"
+            element={<AdminPatientsGenerate />}
+          />
           <Route element={<Layout />}>
-            <Route
-              path="/admin/patients/generate"
-              element={<AdminPatientsGenerate />}
-            />
             <Route path="/patients/:patientId" element={<PatientDetails />} />
             <Route
               path="/patients/register/:patientId"

client/src/components/Sidebar/Sidebar.jsx

@@ -33,6 +33,7 @@ const sections = [
       {
         label: 'QR Code',
         href: '/admin/patients/generate',
+        target: '_blank',
         icon: <IconQrcode stroke={2} />,
       },
     ],

client/src/components/Sidebar/SidebarNavSection.jsx

@@ -48,7 +48,7 @@ export function SidebarNavSection({
       <Collapse in={opened} className={classes.section}>
         {links.map((link) => (
           <div className={classes.sublink} key={link.label}>
-            <SidebarLink icon={link.icon} label={link.label} href={link.href} />
+            <SidebarLink {...link} />
           </div>
         ))}
       </Collapse>
@@ -62,17 +62,18 @@ const SidebarLinkProps = {
   icon: PropTypes.node,
   href: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
+  target: PropTypes.string,
 };
 
 /**
  * Navigation link for sidebar
  * @param {PropTypes.InferProps<typeof SidebarLinkProps>} props
  */
-export function SidebarLink({ icon, href, label }) {
+export function SidebarLink({ icon, href, label, target = '_self' }) {
   return (
     <div className={classes.sublink}>
       <div>{icon}</div>
-      <Text component={Link} className={classes.link} to={href}>
+      <Text component={Link} className={classes.link} to={href} target={target}>
         {label}
       </Text>
     </div>

client/src/pages/admin/patients/AdminPatientsGenerate.jsx

@@ -1,23 +1,84 @@
-import React from 'react';
-import { Container, Loader } from '@mantine/core';
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Group,
+  Loader,
+  NativeSelect,
+  NumberInput,
+} from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { QRCode } from 'react-qrcode-logo';
 
+import classes from './AdminPatientsGenerate.module.css';
+
 /**
  *
  * @returns {React.ReactElement}
  */
 function AdminPatientsGenerate() {
+  const [numPages, setNumPages] = useState(1);
+  const [layout, setLayout] = useState(12);
   const { isLoading, data } = useQuery({
+    queryKey: ['generate', numPages, layout],
     queryFn: () =>
-      fetch('/api/v1/patients/generate?count=12').then((response) =>
-        response.json(),
+      fetch(`/api/v1/patients/generate?count=${numPages * layout}`).then(
+        (response) => response.json(),
       ),
   });
+
+  const pages = [];
+  if (data) {
+    for (let i = 0; i < numPages; i += 1) {
+      pages.push(data.slice(i * layout, (i + 1) * layout));
+    }
+  }
+
   return (
-    <Container>
+    <Container className={classes.container}>
+      <Box className={classes.controls}>
+        <Group mb="1rem">
+          <NumberInput
+            label="Number of pages"
+            min={1}
+            value={numPages}
+            onChange={setNumPages}
+          />
+          <NativeSelect
+            label="Layout"
+            value={layout}
+            onChange={(event) => setLayout(parseInt(event.target.value, 10))}
+            data={[
+              { label: '2" x 2", 12 per 8.5" x 11"', value: '12' },
+              { label: '2" x 2", 20 per 8.5" x 11"', value: '20' },
+            ]}
+          />
+          <Button onClick={() => window.print()} mt="1.625rem">
+            Print
+          </Button>
+        </Group>
+        <Box>Note: set scale to 100% and margins to 0 for proper printing.</Box>
+      </Box>
       {isLoading && <Loader />}
-      {!isLoading && data?.map((url) => <QRCode key={url} value={url} />)}
+      {!isLoading &&
+        pages.map((p) => (
+          <>
+            <Flex
+              wrap="wrap"
+              className={`${classes.codes} ${classes[`codes--${layout}`]}`}
+            >
+              {p.map((url, i) => (
+                <>
+                  <Box className={classes.code}>
+                    <QRCode id={`qrcode-${i}`} key={url} value={url} />
+                  </Box>
+                </>
+              ))}
+            </Flex>
+          </>
+        ))}
     </Container>
   );
 }

client/src/pages/admin/patients/AdminPatientsGenerate.module.css

@@ -0,0 +1,70 @@
+.controls {
+  margin-bottom: 1rem;
+}
+
+.break {
+  flex-shrink: 0;
+  width: 100%;
+  height: 0;
+}
+
+[id^='qrcode-'] {
+  display: block;
+  margin: auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.codes {
+  gap: 0;
+  break-after: page;
+}
+
+.code {
+  flex-shrink: 0;
+}
+
+.codes--12 {
+  width: 8.5in;
+  margin: 0;
+  padding: 0.3in 0.3125in;
+
+  .code {
+    width: 2in;
+    height: 2in;
+    margin: 0.3in 0.3125in;
+  }
+}
+
+.codes--20 {
+  width: 8.5in;
+  margin: 0 0 0.5in;
+  padding: 0.5in 0.25in 0;
+
+  .code {
+    width: 2in;
+    height: 2in;
+    margin: 0;
+  }
+}
+
+@media print {
+  @page {
+    size: letter;
+    margin: 0in;
+  }
+
+  .controls {
+    display: none;
+  }
+
+  .container {
+    margin: 0;
+    margin-inline: 0;
+    max-width: none;
+    padding: 0;
+    padding-inline: 0;
+    width: 8.5in;
+  }
+}

client/src/stories/Layout/layout.css

@@ -38,3 +38,13 @@
     max-width: 18rem;
   }
 }
+
+@media print {
+  .layout {
+    min-height: none;
+  }
+
+  .layout-sidebar {
+    display: none;
+  }
+}