ui-soxo-bootstrap-core 2.6.54 → 2.6.55-dev.1

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,6 +208,17 @@ 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>
 
     );

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

@@ -1,6 +1,15 @@
 .signature-pad {
     padding: 20px;
 
+    .signature-file-input {
+        display: none;
+    }
+
+    .signature-file-name {
+        margin-bottom: 4px;
+        color: rgba(0, 0, 0, 0.45);
+    }
+
     .signature-actions {
         display: flex;
         justify-content: space-between;

package/core/lib/models/forms/components/form-creator/form-creator.js

@@ -211,7 +211,9 @@ function FormCreator({
         // Keep the same value preparation path for normal submit and search reset.
         fields.forEach((field) => {
 
-            if (field.field && field.field.includes('date')) {
+            // Only actual date inputs are converted , a field can be named with date
+            // and still hold a plain value ( eg : date_filter_type select )
+            if (field.field && field.field.includes('date') && ['date', 'datetime'].indexOf(field.type) !== -1) {
 
                 nextValues[field.field] = moment(nextValues[field.field]).valueOf();
 
@@ -530,7 +532,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onSearchRes
                     return (
                         <Select defaultValue={defaultValue}
                             required={field.required}
-                            style={{ width: '120' }}
+                            style={{ minWidth: '160px' }}
                             onChange={(value) => onChange(field, value)}
                         >
                             {field.options.map((option, key) => (

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

@@ -15,6 +15,9 @@ import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboar
 
 import ReportingTable from './reporting-table';
 
+// Input parameter that decides which date column the report is filtered by
+const DATE_FILTER_FIELD = 'date_filter_type';
+
 /**
  * ReportingDashboard component renders the dashboard and handles patient details,
  * configuration, and form layout for generating reports.
@@ -174,6 +177,9 @@ export default function ReportingDashboard({
       if (urlParams[record.field]) {
         if (record.type === 'date') {
           formContent[record.field] = moment.utc(urlParams[record.field]);
+        } else if (record.type !== 'search') {
+          // Restore plain values ( eg : select filters ) back from the url
+          formContent[record.field] = urlParams[record.field];
         }
 
         // return formContent;
@@ -201,6 +207,10 @@ export default function ReportingDashboard({
             break;
 
           default:
+            // Any other default is taken as the value itself ( eg : select filters )
+            if (record.default !== undefined && record.default !== null && record.type !== 'date') {
+              formContent[record.field] = record.default;
+            }
             break;
         }
       }
@@ -209,6 +219,11 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
+
+      // For a static select with no value yet , preselect the first option
+      if (record.type === 'select' && Array.isArray(record.options) && formContent[record.field] === undefined) {
+        formContent[record.field] = record.options[0]?.valueMember;
+      }
       if (record.type === 'search') {
         if (!formContent[record.field]) formContent[record.field] = [];
         return {
@@ -248,8 +263,19 @@ export default function ReportingDashboard({
       // If enabled, clear the details array
       setDetails([]);
     } else {
+      // The date filter input is shown only when the filter is enabled in otherDetails .
+      // Otherwise it stays hidden holding its default value , so the report keeps filtering
+      // on the default date
+      const filterKey = otherDetails ? Object.keys(otherDetails).find((key) => key.toLowerCase().trim() === 'enableuserfilter') : null;
+
+      const isFilterEnabled = filterKey ? otherDetails[filterKey] === true || otherDetails[filterKey] === 'true' : false;
+
       // Keep all parameters with a type (including search) to render in FormCreator
-      setDetails([...parameters.filter((ele) => ele.type)]);
+      setDetails([
+        ...parameters
+          .filter((ele) => ele.type)
+          .map((ele) => (ele.field === DATE_FILTER_FIELD ? { ...ele, visible: isFilterEnabled } : ele)),
+      ]);
     }
   }
 

package/package.json

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