From 888f35073c93c4fed6c72a7b3dafba58e42ae02a Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Fri, 21 Mar 2025 14:50:57 +0800
Subject: [PATCH] update scanner

---
 src/components/QrCodeScanner/QrCodeScanner.tsx      | 11 ++++++-----
 src/components/QrCodeScanner/QrCodeScannerModal.tsx | 10 ++++++----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/QrCodeScanner/QrCodeScanner.tsx b/src/components/QrCodeScanner/QrCodeScanner.tsx
index fd285e0..9dfeb69 100644
--- a/src/components/QrCodeScanner/QrCodeScanner.tsx
+++ b/src/components/QrCodeScanner/QrCodeScanner.tsx
@@ -20,6 +20,7 @@ const scannerSx: React.CSSProperties = {
 
 type QrCodeScannerProps = {
     title?: string,
+    contents?: string[],
     onScanSuccess: (result: string) => void,
     onScanError?: (error: string) => void,
     isOpen: boolean,
@@ -28,6 +29,7 @@ type QrCodeScannerProps = {
 
 const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
     title,
+    contents,
     onScanSuccess,
     onScanError,
     isOpen,
@@ -160,14 +162,13 @@ const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
                 {title ? <Typography variant="overline" display="block" marginBlockEnd={1} paddingLeft={2}>
                     {"Title"}
                 </Typography> : null}
-                <Grid container alignItems="center" rowSpacing={2} columns={{ xs: 6, sm: 12 }}>
+                <Grid container alignItems="center" justifyContent="center" rowSpacing={2} columns={{ xs: 6, sm: 12 }}>
                     <Grid item xs={12}>
                         <div style={{ textAlign: "center", margin: "auto", justifyContent: "center" }} id="qr-reader" hidden={isScanned} />
                     </Grid>
                     {cameraList.length > 0 ? <Grid item xs={6} >
                         <Autocomplete
                             disableClearable
-                            disableCloseOnSelect
                             noOptionsText={t("No Options")}
                             options={cameraList}
                             value={cameraList.find((camera) => camera.id === selectedCameraId)}
@@ -184,9 +185,9 @@ const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
                         />
                     </Grid> : null}
                     {
-                        stringList.map((string) => {
-                            return <Grid item xs={7}>{string}</Grid>
-                        })
+                        contents ? contents.map((string) => {
+                            return <Grid item xs={8}>{string}</Grid>
+                        }) : null
                     }
                 </Grid>
                 <Stack direction="row" justifyContent={"flex-end"} spacing={2} sx={{ margin: 2 }}>
diff --git a/src/components/QrCodeScanner/QrCodeScannerModal.tsx b/src/components/QrCodeScanner/QrCodeScannerModal.tsx
index 0a4bac2..fcdf17f 100644
--- a/src/components/QrCodeScanner/QrCodeScannerModal.tsx
+++ b/src/components/QrCodeScanner/QrCodeScannerModal.tsx
@@ -14,6 +14,7 @@ const modalSx: SxProps = {
 
 type QrCodeScannerModalProps = {
     title?: string,
+    contents?: string[],
     isOpen: boolean,
     onClose: () => void,
     onScanSuccess: (result: string) => void,
@@ -22,6 +23,7 @@ type QrCodeScannerModalProps = {
 
 const QrCodeScannerModal: React.FC<QrCodeScannerModalProps> = ({
     title,
+    contents,
     isOpen,
     onClose,
     onScanSuccess,
@@ -45,14 +47,14 @@ const QrCodeScannerModal: React.FC<QrCodeScannerModalProps> = ({
     return (
         <Modal open={isOpen} onClose={onModalClose}>
             <Card sx={modalSx}>
-                <CardContent>
+                <CardContent sx={{ overflow: "auto", maxHeight: "90vh" }} >
                     <Box
                         sx={{
-                            marginInline: -3,
-                            marginBlock: 4,
+                            // marginInline: -1,
+                            // marginBlock: 1,
                         }}
                     >
-                        <QrCodeScanner title={title} onScanSuccess={onScanSuccess} onScanError={onScanError} isOpen={modalOpen} onClose={onClose}/>
+                        <QrCodeScanner title={title} contents={contents} onScanSuccess={onScanSuccess} onScanError={onScanError} isOpen={modalOpen} onClose={onClose} />
                     </Box>
                 </CardContent>
             </Card>