@adcops/autocore-react 3.0.19 → 3.0.21

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-04-29 11:01:41
+ * Last Modified: 2024-05-02 11:18:50
  * -----
  * 
  */
@@ -21,10 +21,14 @@ import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
 import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
-import { MessageSeverity } from 'primereact/api';
+import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
 
+
+/**
+ * Defines properties for the file list.
+ */
 /**
  * Defines properties for the file list.
  */
@@ -38,7 +42,40 @@ type FileListProps = {
 
     /// The subdirectory of the datastore to list.
     /// If blank, the base directory is listed.
-    subdir? : string
+    subdir?: string
+
+    /**
+     * A comma-separated list of file MIME types or file extensions.
+     * Default: .json
+     * 
+     * ### Example: Filter by Extension:
+     * ```
+     * accept=".jpg,.png,.pdf"  // Restricts uploads to JPG, PNG, and PDF files only
+     * ```
+     * 
+     * ### Example: Filter by mime type.
+     * ```
+     * accept="image/*,application/pdf"  // Allows any image type and PDF files
+     * ```
+     * 
+     * ### Example: All files
+     * ```
+     * accept="/*"  
+     * ```
+     * 
+     */
+    filter?: string,
+
+    /**
+     * Callback when an operation completes successfully.
+     * @returns void
+     */
+    onSuccess? : (message:string) => void;
+
+    /***
+     * Callback when an operation results in an error.
+     */
+    onError? : (message:string) => void;
 }
 
 /**
@@ -74,19 +111,37 @@ type FileItem = {
 export const FileList: React.FC<FileListProps> = ({
     domain = "DATASTORE",
     enableUpload = false,
-    subdir
+    subdir,
+    filter=".json",
+    onSuccess,
+    onError
 }) => {
 
-    const { invoke, dispatch } = useContext(EventEmitterContext);
+    const [uploadKey, setUploadKey] = useState(0);
+    const { invoke } = useContext(EventEmitterContext);
 
     const [files, setFiles] = useState<FileItem[]>();
 
+    const makeTargetName = (s : string) => {
+        if (s !== null) {
+            if (subdir !== undefined) {
+                return `${subdir}/${s}`;
+            }
+            else {
+                return s;
+            }
+        }
+        else {
+            return "";
+        }
+    }    
+
     /**
      * Retrieve a list of files from an autocore-server DataStoreServelet.
      */
     const listFiles = async () => {
         try {
-            const args = subdir !== undefined ? {"subdir" : subdir} : {};
+            const args = subdir !== undefined ? { "subdir": subdir } : {};
             let res = await invoke(domain, "list_files", args);
 
             let items = [];
@@ -101,17 +156,9 @@ export const FileList: React.FC<FileListProps> = ({
             setFiles(items);
         }
         catch (error) {
-            console.error("Failed to upload file list: " + error);
-
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed to upload file list: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
 
+            if (onError) 
+                onError(`Failed to upload file list: ${error}`);
         }
 
 
@@ -122,18 +169,17 @@ export const FileList: React.FC<FileListProps> = ({
      * @param file The file item selected in the DataTable
      */
     const handleDownload = async (file: FileItem) => {
+        
+        let target = makeTargetName(file.name);
+
         try {
-            await invoke(domain, "download_file", { file_name: file.name });
+            await invoke(domain, "download_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Downloaded file: ${file.name}`);
         } catch (error) {
-            console.error("Failed downloading file: " + error);
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed to downloading file: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
+
+            if (onError) 
+                onError(`Failed downloading file: ${error}`);
         }
 
     };
@@ -144,25 +190,105 @@ export const FileList: React.FC<FileListProps> = ({
      */
     const handleDelete = async (file_name: string) => {
 
+        let target = makeTargetName(file_name);
+
         try {
-            await invoke(domain, "delete_file", { file_name: file_name });
+            await invoke(domain, "delete_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Deleted file: ${file_name}`);
+
+            listFiles(); // Refresh the file list after successful upload
+
         } catch (error) {
-            console.error("Failed deleting file: " + error);
-
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed deleting file: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
+            if (onError) 
+                onError(`Failed to delete file: ${error}`);
         }
 
 
         listFiles();
     };
 
+    /**
+     * Handles the upload of files selected through the PrimeReact FileUpload component.
+     * This function is triggered when a user selects files for upload and it processes each file asynchronously.
+     * 
+     * The function reads the selected file as an ArrayBuffer, converts it to a Base64-encoded string, and then
+     * sends it to the server using a custom function `invoke` which interacts with the server via API calls.
+     * Upon successful upload, a success message is dispatched to the application's notification system. If the
+     * upload fails, an error message is similarly dispatched.
+     *
+     * Usage of this function requires that it be attached to a FileUpload component's event handler in the React component.
+     * 
+     * @param {FileUploadSelectEvent} event - The event object provided by the FileUpload component, containing the files selected by the user.
+     * 
+     * The `FileUploadSelectEvent` type should include:
+     * - `files`: An array of `File` objects that the user has selected for upload.
+     * 
+     * This function utilizes the `FileReader` API to read the contents of the file. It checks if the read result
+     * is an instance of `ArrayBuffer` before proceeding to convert it to a Base64 string. Errors during file reading
+     * or uploading are caught and appropriate actions are taken (e.g., logging the error, dispatching error notifications).
+     * 
+     * Note:
+     * - Ensure that the `invoke` function is properly implemented to handle the API request for file uploading.
+     * - Adjust the maximum file size and the types of files accepted by the FileUpload component according to your application's requirements.
+     * - This handler assumes a single file handling scenario. If multiple file uploads are needed, modifications to the iteration over `event.files` may be required.
+     */
+    const handleUpload = async (event: FileUploadHandlerEvent) => {
+        const files = event.files;
+        const file = files[0]; // Assuming single file upload
+   
+        let target = makeTargetName(file.name);
+
+        const reader = new FileReader();
+        reader.onload = async (e: ProgressEvent<FileReader>) => {
+
+            // Convert array buffer to base64
+            const arrayBuffer = e.target?.result as ArrayBuffer;
+            const base64String = arrayBufferToBase64(arrayBuffer);            
+    
+            try {
+                await invoke(domain, "write_file", { file_name: target, value: base64String });
+
+                if (onSuccess)
+                    onSuccess(`Uploaded file ${file.name}`);
+
+                // Refresh the file list after successful upload
+                listFiles(); 
+
+            } catch (error: any) {
+                if (onError) 
+                    onError(`Failed to upload file: ${error}`);
+            }
+
+            // Reset upload state of button so it show the file upload dialog again.
+            resetUpload();
+        };
+    
+        reader.onerror = (error) => {            
+            if (onError) 
+                onError(`Error reading file: ${error}`);            
+        };
+    
+
+        reader.readAsArrayBuffer(file);
+    };
+    
+    function arrayBufferToBase64(buffer: ArrayBuffer): string {
+        let binary = '';
+        let bytes = new Uint8Array(buffer);
+        let len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+    
+
+    const resetUpload = () => {
+        setUploadKey(prevKey => prevKey + 1); // Increment key to force re-render
+    };    
+
+
     const title = `File Listing [/${subdir !== undefined ? subdir : ''}]`;
     const toolbarStartContents = (
         <React.Fragment>
@@ -173,12 +299,19 @@ export const FileList: React.FC<FileListProps> = ({
     const toolbarEndContents = (
         <React.Fragment>
             {enableUpload && (
-                <Button
-                    icon="pi pi-upload"
-                    className="p-button-rounded p-mr-2"
-                    aria-label="Upload"
-                    size="small"
-                    rounded text
+                <FileUpload
+                    key={uploadKey}
+                    customUpload={true}
+                    auto
+                    uploadHandler={handleUpload}
+                    accept={filter}
+                    maxFileSize={25000} // Set maximum file size as needed
+                    mode="basic"
+                    chooseLabel=""
+                    chooseOptions={{
+                        icon: 'pi pi-upload',
+                        className: 'p-button-icon-only p-button-text p-button-rounded p-mr-2'
+                    }}
                 />
 
             )}

package/src/components/FileSelect.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-28 16:06:59
  * -----
- * Last Modified: 2024-04-28 20:05:41
+ * Last Modified: 2024-05-01 07:30:49
  * -----
  * 
  */

package/src/components/ValueDisplay.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-03-08 07:48:42
+ * Last Modified: 2024-05-01 12:14:27
  * Modified By: ADC
  * -----
  * 
@@ -10,13 +10,13 @@
 
 
 
-import {Component} from 'react';
+import { Component } from 'react';
 //import useFitText from 'use-fit-text';
 import { format as numerableFormat } from 'numerable';
 import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType} from '../core/EventEmitterContext';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
 
-import {IPositionContext} from '../core/PositionContext';
+import { IPositionContext } from '../core/PositionContext';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
 
 /**
@@ -84,23 +84,69 @@ interface State {
 
 
 /**
- * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
- * This component adjusts its display based on the provided properties, including positioning and styling adjustments
- * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ * `ValueDisplay` is a React component designed to display a value which can be a string, number, or null.
+ * It supports formatting numeric values using the `numerableFormat` function, and is capable of dynamic positioning
+ * and sizing within its parent container. The component integrates with an `EventEmitterContext` to listen for
+ * updates to its value based on a specified topic, making it ideal for real-time data display scenarios.
+ *
+ * The component can be absolutely positioned based on `x` and `y` props, and its size can be adjusted using
+ * `width` and `height` props. If `useAbsolutePositioning` is true, it will position itself based on the provided
+ * coordinates; otherwise, it will position relatively.
+ *
+ * ### Props:
+ * - `value`: The initial value to display, which can be updated via props or context events.
+ * - `x`, `y`: Coordinates for absolute positioning within the parent container.
+ * - `width`, `height`: Dimensions of the component. If height is not provided, it defaults to the width.
+ * - `format`: A string specifying the format for numeric values (see numerable.js documentation for format strings).
+ * - `formatOptions`: Additional formatting options as per numerable.js.
+ * - `className`: Custom class for CSS styling.
+ * - `useAbsolutePositioning`: Boolean to toggle absolute positioning.
+ * - `topic`: Optional string to subscribe to context updates for dynamic value changes.
+ *
+ * ### Usage Example:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { ValueDisplay } from './components/ValueDisplay';
+ *
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <ValueDisplay
+ *         value={1234.56}
+ *         x={100}
+ *         y={200}
+ *         width={150}
+ *         height={50}
+ *         format="0,0.00"
+ *         className="numeric-display"
+ *         useAbsolutePositioning={true}
+ *         topic="priceUpdate"
+ *       />
+ *     </div>
+ *   );
+ * };
+ *
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * In this example, `ValueDisplay` is used to show a numeric value formatted as a string with two decimal places.
+ * It is positioned absolutely at coordinates (100, 200) with a specified width and height. The component listens
+ * for updates on the "priceUpdate" topic to dynamically update its displayed value.
  */
 class ValueDisplay extends Component<Props, State> {
-    
+
     /** Defines the context type to subscribe to changes using EventEmitter. */
     static contextType = EventEmitterContext;
 
-   
+
     /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
     protected unsubscribeTopicId: number | null = null;
 
     /**
      * The constructor initializes the component state and binds the initial value.
      * @param props The properties passed to the component, including initial value and other display options.
-     */    
+     */
     constructor(props: Props) {
         super(props);
         this.state = {
@@ -112,7 +158,7 @@ class ValueDisplay extends Component<Props, State> {
     /**
      * Upon mounting, the component subscribes to updates on the specified topic if it exists,
      * updating its state with the new value when the topic publishes updates.
-     */    
+     */
     componentDidMount() {
         const { topic } = this.props;
         if (topic) {
@@ -127,19 +173,19 @@ class ValueDisplay extends Component<Props, State> {
      * If the value prop changes, the component updates its state with the new value.
      * This ensures that the component remains in sync with its props.
      * @param prevProps The previous properties for comparison to detect changes.
-     */    
+     */
     componentDidUpdate(prevProps: Props) {
         // Check if the value prop has changed
         if (this.props.value !== prevProps.value) {
             // Update the state with the new value
             this.setState({ subscribedValue: this.props.value });
         }
-    }    
+    }
 
     /**
      * Before the component is unmounted, it unsubscribes from the topic to prevent memory leaks
      * and unnecessary updates from occurring.
-     */    
+     */
     componentWillUnmount() {
         if (this.unsubscribeTopicId) {
             const { unsubscribe } = this.context as EventEmitterContextType;
@@ -151,13 +197,13 @@ class ValueDisplay extends Component<Props, State> {
      * Renders the component with styling and formatting based on the provided properties and state.
      * Supports absolute or relative positioning and scales the display based on the context's dimensions.
      * @returns A styled `div` element displaying the formatted value.
-     */    
+     */
     render() {
         const { x, y, width, height, format, formatOptions, className, useAbsolutePositioning } = this.props;
         const { subscribedValue, fontSize } = this.state;
         const { scale, xOffset, yOffset } = this.context as IPositionContext;
 
-        const style : React.CSSProperties = {
+        const style: React.CSSProperties = {
             position: useAbsolutePositioning ? 'absolute' : 'relative',
             display: useAbsolutePositioning ? "" : "inline-block",
             verticalAlign: 'middle',
@@ -170,12 +216,21 @@ class ValueDisplay extends Component<Props, State> {
             whiteSpace: 'nowrap',
         };
 
+        // Determine how to display the value
+        let displayValue;
+        if (typeof subscribedValue === 'number' || (typeof subscribedValue === 'string' && !isNaN(Number(subscribedValue)))) {
+            displayValue = numerableFormat(subscribedValue, format, formatOptions);
+        } else {
+            displayValue = subscribedValue;  // Directly use the string if it's not numeric
+        }
+
         return (
             <div className={clsx(className)} style={style}>
-                {numerableFormat(subscribedValue, format, formatOptions)}
+                {displayValue}
             </div>
         );
     }
+
 }
 
 export { ValueDisplay, NumerableFormatOptions };