ui-soxo-bootstrap-core 2.6.40-dev.21 → 2.6.40-dev.22

package/core/lib/components/consent/signature-pad.js

@@ -1,5 +1,5 @@
 // src/components/SignatureCanvas.js
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import SignatureCanvas from 'react-signature-canvas';
 import { Button, message } from 'antd';
 import { useTranslation } from '../../../lib';
@@ -8,12 +8,22 @@ import './signature-pad.scss';
 
 
 
-const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }) => {
+const SignatureCanvasComponent = ({
+    onClear,
+    onSaveAndAddSignature,
+    btnloading,
+    showUpload = true,
+    accept = 'image/png',
+    maxSizeMB = 5,
+}) => {
     const sigCanvas = useRef({});
+    const fileInput = useRef(null);
+    const [uploadedName, setUploadedName] = useState(null);
     const { t, i18n } = useTranslation(); // To Translate to another language
 
     const clear = () => {
         sigCanvas.current.clear()
+        setUploadedName(null);
         if (onClear) onClear();
     };
 
@@ -34,6 +44,102 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
         }
     };
 
+    /**
+     * Open the (hidden) file picker
+     */
+    const selectImage = () => {
+        if (fileInput.current) fileInput.current.click();
+    };
+
+    /**
+     * Draw the picked image on the pad, scaled to fit and centered,
+     * so that Save / Clear keep working exactly as with a drawn signature
+     *
+     * @param {string} dataUrl 
+     */
+    const drawImageOnPad = (dataUrl) => {
+        const image = new Image();
+
+        image.onerror = () => message.error(t('Unable to load the selected image'));
+
+        image.onload = () => {
+            const canvas = sigCanvas.current.getCanvas();
+
+            if (!canvas || !image.naturalWidth || !image.naturalHeight) {
+                message.error(t('Unable to load the selected image'));
+                return;
+            }
+
+            // Size the canvas is drawn with, and its actual (device pixel) resolution
+            const drawWidth = canvas.offsetWidth || canvas.width;
+            const drawHeight = canvas.offsetHeight || canvas.height;
+            const ratio = canvas.width / drawWidth;
+
+            // Fit inside the pad without distorting the image
+            const scale = Math.min(
+                canvas.width / image.naturalWidth,
+                canvas.height / image.naturalHeight
+            );
+            const imageWidth = image.naturalWidth * scale;
+            const imageHeight = image.naturalHeight * scale;
+
+            const offscreen = document.createElement('canvas');
+            offscreen.width = canvas.width;
+            offscreen.height = canvas.height;
+            offscreen.getContext('2d').drawImage(
+                image,
+                (canvas.width - imageWidth) / 2,
+                (canvas.height - imageHeight) / 2,
+                imageWidth,
+                imageHeight
+            );
+
+            sigCanvas.current.clear();
+            sigCanvas.current.fromDataURL(offscreen.toDataURL('image/png'), {
+                width: drawWidth,
+                height: drawHeight,
+                ratio,
+            });
+        };
+
+        image.src = dataUrl;
+    };
+
+    /**
+     * Validate and read the picked image
+     *
+     * @param {Event} event 
+     */
+    const onFileSelect = (event) => {
+        const file = event.target.files && event.target.files[0];
+
+        // Reset so that picking the same file again still fires a change
+        event.target.value = '';
+
+        if (!file) return;
+
+        // Only the types listed in `accept` are allowed, whatever the file dialog let through
+        const allowed = accept.split(',').map((type) => type.trim()).filter(Boolean);
+
+        if (!file.type || allowed.indexOf(file.type) < 0) {
+            message.error(`${t('Please select a valid image file')} (${allowed.join(', ')})`);
+            return;
+        }
+
+        if (file.size > maxSizeMB * 1024 * 1024) {
+            message.error(`${t('Image should be smaller than')} ${maxSizeMB}MB`);
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onerror = () => message.error(t('Unable to read the selected image'));
+        reader.onload = () => {
+            drawImageOnPad(reader.result);
+            setUploadedName(file.name);
+        };
+        reader.readAsDataURL(file);
+    };
+
     return (
         <div className='signature-pad'>
             <SignatureCanvas
@@ -47,9 +153,19 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
             />
 
             <p>
-                <small>Click<strong> Save </strong>to add signature and save the document</small>
+                <small>
+                    {showUpload
+                        ? <>Draw the signature or <strong>Upload Image</strong>, then click<strong> Save </strong>to add signature and save the document</>
+                        : <>Click<strong> Save </strong>to add signature and save the document</>}
+                </small>
             </p>
 
+            {showUpload && uploadedName && (
+                <p className='signature-file-name'>
+                    <small>{uploadedName}</small>
+                </p>
+            )}
+
             <div className='signature-actions'>
                 <div className='left'>
                     <Button
@@ -61,6 +177,16 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     >
                         {t('Save')}
                     </Button>
+                    {showUpload && (
+                        <Button
+                            style={{ borderRadius: '2px' }}
+                            type="secondary"
+                            size="medium"
+                            onClick={selectImage}
+                        >
+                            {t('Upload Image')}
+                        </Button>
+                    )}
                     <Button
                         style={{ borderRadius: '2px' }}
                         type="secondary"
@@ -82,9 +208,20 @@ const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }
                     {t('Add Signature')}
                 </Button> */}
             </div>
+
+            {showUpload && (
+                <input
+                    ref={fileInput}
+                    type="file"
+                    accept={accept}
+                    className='signature-file-input'
+                    style={{ display: 'none' }}
+                    onChange={onFileSelect}
+                />
+            )}
         </div>
 
     );
 };
 
-export default SignatureCanvasComponent;
+export default SignatureCanvasComponent;

package/core/modules/reporting/components/reporting-dashboard/reporting-table.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
 import { QrcodeOutlined } from '@ant-design/icons';
-import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner, GlobalContext, safeJSON } from './../../../../lib/';
 import moment from 'moment-timezone';
 import { CoreScripts } from './../../../../models/';
 import Button from '../../../../lib/elements/basic/button/button';
@@ -93,9 +93,22 @@ export default function ReportingTable({
   const [internalConfig, setInternalConfig] = useState({});
   const [internalPagination, setInternalPagination] = useState({ current: 1, pageSize: 20, total: 0 });
 
+  const { role = {} } = useContext(GlobalContext);
+  // When any of the logged in user's roles has `enableUserFilter: true` in its other details,
+  // reports receive `enableUserFilter: true` so they can restrict rows to the user's own records.
+  // `role` may be a single role object or an array of roles.
+  const roles = Array.isArray(role) ? role : role ? [role] : [];
+  const isUserFilterEnabled = roles.some((r) => {
+    const details = r?.other_details;
+    // Some records store other_details with single quotes, e.g. "{'enableUserFilter':true}"
+    const parsed = safeJSON(details) || (typeof details === 'string' ? safeJSON(details.replace(/'/g, '"')) : null) || {};
+    return parsed.enableUserFilter === true;
+  });
+  const userFilter = isUserFilterEnabled ? { enableUserFilter: true } : {};
+
   // Independent mode is enabled when enough identifiers are present for the
   // table to load its own schema and data instead of relying on parent props.
-  const shouldFetchData = !!(requestId || reportId || replacements.submode || replacements.mode);
+  const shouldFetchData = !!(requestId || reportId || replacements?.submode || replacements?.mode);
   const requestPayloadKey = JSON.stringify(requestPayload || {});
 
   const propValues = (attributes && JSON.parse(attributes)) || {};
@@ -189,6 +202,7 @@ export default function ReportingTable({
           page: currentPager.current,
           limit: currentPager.pageSize,
           ...(requestPayload?.body ? {} : { mode, submode }),
+          ...userFilter,
         },
       };
       // if (!isNuradesk) {
@@ -199,6 +213,7 @@ export default function ReportingTable({
             ...replacements,
             page: currentPager.current,
             limit: currentPager.pageSize,
+            ...userFilter,
           },
         };
       }
@@ -270,10 +285,28 @@ export default function ReportingTable({
     }
   };
 
+  const filtered = useMemo(() => {
+    if (!patients || !query) return patients;
+
+    return patients.filter((record) => {
+      let keys = Object.keys(record);
+      let flag = false;
+      keys.forEach((key) => {
+        let ele = record[key];
+        if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+          flag = true;
+        }
+      });
+      return flag;
+    });
+  }, [patients, query]);
+
   useEffect(() => {
-    if (patients) {
+    if (filtered) {
       // Export uses the visible display column structure and appends the same
       // summary row that appears in the table when summary columns are enabled.
+      // Uses `filtered` (not the raw `patients`) so the exported file matches
+      // whatever the search box currently shows on screen.
       const exportCols = cols.map((col) => {
         if (col.title && typeof col.title === 'object' && col.title.props) {
           return { ...col, title: col.title.props.title };
@@ -281,10 +314,10 @@ export default function ReportingTable({
         return col;
       });
       const summaryCols = columns.filter((col) => col.enable_summary);
-      let dataToExport = [...patients];
+      let dataToExport = [...filtered];
 
       if (summaryCols.length > 0) {
-        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryValues = calculateSummaryValues(summaryCols, filtered);
         const summaryRow = { isSummaryRow: true };
 
         cols.forEach((col) => {
@@ -310,22 +343,7 @@ export default function ReportingTable({
         setExportData({ exportDatas });
       }
     }
-  }, [patients, columns]);
-
-  let filtered = patients;
-  if (patients && query) {
-    filtered = patients.filter((record) => {
-      let keys = Object.keys(record);
-      let flag = false;
-      keys.forEach((key) => {
-        let ele = record[key];
-        if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
-          flag = true;
-        }
-      });
-      return flag;
-    });
-  }
+  }, [filtered, columns]);
 
   /**
    * Handles successful QR scans by looking up a matching record and navigating
@@ -449,9 +467,11 @@ export default function ReportingTable({
             {exportData.exportDatas && !isNuradesk && (
               <ExportReactCSV
                 title={config.caption}
-                fileName={`${(config.caption || 'Report').trim().replace(/\s+/g, '_')}_${moment().format('YYYY-MM-DD-HH-mm-ss-SSS')}.xlsx`}
                 headers={exportData.exportDatas.exportDataHeaders}
                 csvData={exportData.exportDatas.exportDataColumns}
+                fileName={`${config.caption || 'Report'}.xlsx`}
+                pdfFileName={`${config.caption || 'Report'}.pdf`}
+                dropdown
               />
             )}
           </div>
@@ -464,14 +484,12 @@ export default function ReportingTable({
           ) : (
             <TableComponent
               size="small"
-              // Change x to '100%' or true to make it responsive to the container width
-              // Your vertical logic (adjust '10' based on how many rows fit on your screen)
-              scroll={{ x: 'max-content', y: (filtered?.length || 0) > 11 ? 400 : undefined }}
+              scroll={{ x: 'max-content', y: '60vh' }}
               rowKey={(record) => record.OpNo}
               dataSource={filtered}
               columns={cols}
               sticky
-              pagination={false}
+              pagination={true}
               summary={(pageData) => {
                 const summaryCols = columns.filter((col) => col.enable_summary);
                 if (!summaryCols.length) return null;
@@ -502,14 +520,14 @@ export default function ReportingTable({
             />
           )}
           <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
-            <Pagination
+            {/* <Pagination
               showSizeChanger
               current={pagination?.current}
               pageSize={pagination?.pageSize}
               total={pagination?.total}
               pageSizeOptions={[20, 30, 50, 100]}
-              onChange={(page, pageSize) => handlePaginationInternal({ current: page, pageSize })}
-            />
+              onChange={(page, pageSize) => handlePaginationInternal({ current: page, pageSize })} */}
+            {/* /> */}
           </div>
           <p className="size-hint">{patients ? patients.length : 0} records.</p>
         </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.40-dev.21",
+  "version": "2.6.40-dev.22",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"