@adcops/autocore-react 3.3.9 → 3.3.10

package/src/components/FileList.tsx

@@ -1,390 +1,390 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-04-24 16:01:53
- * -----
- * Last Modified: 2025-09-05 14:53:22
- * -----
- * 
- */
-
-/** @file FileList
- * FileList allows a user to view the contents of a DataStore in the autocore-server.
- * Files can be downloaded, deleted and optionally uploaded (if enabled).
- * 
- * The FileList requires the autocore-server to be the backend, as files are transferred
- * using specific commands via websockets.
- */
-
-import React, { useState, useContext, useEffect } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { Toolbar } from 'primereact/toolbar';
-import { Button } from 'primereact/button';
-import { confirmPopup } from 'primereact/confirmpopup';
-import { FileUpload, type FileUploadHandlerEvent} from 'primereact/fileupload';
-
-import { EventEmitterContext } from '../core/EventEmitterContext';
-import { MessageType } from '../hub/CommandMessage';
-
-
-/**
- * Defines properties for the file list.
- */
-/**
- * Defines properties for the file list.
- */
-type FileListProps = {
-    /// The domain name assigned to the DATASTORE servelet containing the data.
-    /// Default: DATASTORE
-    domain?: string,
-    /// Enable the upload button so that files can be uploaded to the datastore.
-    /// Default: false
-    enableUpload?: boolean,
-
-    /// The subdirectory of the datastore to list.
-    /// If blank, the base directory is listed.
-    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;
-}
-
-/**
- * Defines the information for every row item in the file list.
- */
-type FileItem = {
-    id: number;
-    name: string;
-};
-
-
-/**
- * `FileList` is a React functional component that displays a list of files retrieved from a specified domain
- * in an autocore-server.
- * It allows users to download and delete files. The component also supports file uploads, if enabled.
- *
- * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
- * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
- *
- * Requires 
- * ```tsx
- * <ConfirmPopup />
- * ```
- * somewhere in a top-level page.
- * 
- * Props:
- * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
- *      Default: "DATASTORE"
- * - `enableUpload` (boolean): If true, enables an upload button allowing files to be uploaded to the datastore.
- *      Default: false
- *
- * Example Usage:
- * ```tsx
- * <FileList domain="MyDomain" enableUpload={true} />
- * ```
- *
- * @param {FileListProps} props The properties passed to the component.
- */
-export const FileList: React.FC<FileListProps> = ({
-    domain = "DATASTORE",
-    enableUpload = false,
-    subdir,
-    filter=".json",
-    onSuccess,
-    onError
-}) => {
-
-    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 } : {};
-            let res = await invoke(`${domain}.list_files`, MessageType.Request, args);
-
-            let items = [];
-            for (let i = 0; i < res.data.length; ++i) {
-                const item = res.data[i];
-                items.push({
-                    id: i + 1,
-                    name: item
-                });
-            }
-
-            setFiles(items);
-        }
-        catch (error) {
-
-            if (onError) 
-                onError(`Failed to upload file list: ${error}`);
-        }
-
-
-    }
-
-    /**
-     * Handles when the download button is clicked on a list item.
-     * @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`, MessageType.Request, { file_name: target });
-            if (onSuccess)
-                onSuccess(`Downloaded file: ${file.name}`);
-        } catch (error) {
-
-            if (onError) 
-                onError(`Failed downloading file: ${error}`);
-        }
-
-    };
-
-    /**
-     * Sends the command to the autocore-server domain to delete the file.
-     * @param file_name Name of the file to delete.
-     */
-    const handleDelete = async (file_name: string) => {
-
-        let target = makeTargetName(file_name);
-
-        try {
-            await invoke(`${domain}.delete_file`, MessageType.Request, { file_name: target });
-            if (onSuccess)
-                onSuccess(`Deleted file: ${file_name}`);
-
-            listFiles(); // Refresh the file list after successful upload
-
-        } catch (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`, MessageType.Request, { file_name: target, value: base64String, options: { "base64": true } });
-
-                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>
-            <span style={{ fontWeight: 600 }}>{title}</span>
-        </React.Fragment>
-    );
-
-    const toolbarEndContents = (
-        <React.Fragment>
-            {enableUpload && (
-                <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'
-                    }}
-                />
-
-            )}
-            <Button
-                icon="pi pi-refresh"
-                onClick={() => { listFiles() }}
-                className="p-button-rounded p-mr-2"
-                aria-label="Refresh"
-                size="small"
-                rounded text
-            />
-        </React.Fragment>
-    );
-
-
-    /**
-     * Confirm that the user really wants to delete.
-     * @param event 
-     */
-    const confirmDelete = (file: FileItem, event: React.MouseEvent<HTMLButtonElement>) => {
-
-        confirmPopup({
-            target: event.currentTarget,
-            message: `Are you want to delete file ${file.name}?\nWARNING: This cannot be undone.`,
-            icon: 'pi pi-info-circle',
-            defaultFocus: 'reject',
-            acceptClassName: 'p-button-danger',
-            accept: () => handleDelete(file.name)
-        });
-    };
-
-    useEffect(() => {
-
-        listFiles();
-
-        return () => {
-        }
-    }, [domain, enableUpload]);
-
-    return (
-
-        <div>
-            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />            
-            <DataTable value={files}>
-                <Column field="name" header="Name"></Column>
-
-                <Column body={(rowData: FileItem) => (
-                    <>
-                        <Button
-                            icon="pi pi-download"
-                            onClick={() => handleDownload(rowData)}
-                            className="p-button-rounded p-button-success p-mr-2"
-                            style={{ marginRight: "2mm" }}
-                            size="small"
-                        />
-                        <Button
-                            icon="pi pi-trash"
-                            onClick={(e) => confirmDelete(rowData, e)}
-                            className="p-button-rounded p-button-danger"
-                            size="small"
-                        />
-                    </>
-                )} header="Actions"></Column>
-            </DataTable>
-        </div>
-    );
-};
-
-export default FileList;
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-24 16:01:53
+ * -----
+ * Last Modified: 2025-09-05 14:53:22
+ * -----
+ * 
+ */
+
+/** @file FileList
+ * FileList allows a user to view the contents of a DataStore in the autocore-server.
+ * Files can be downloaded, deleted and optionally uploaded (if enabled).
+ * 
+ * The FileList requires the autocore-server to be the backend, as files are transferred
+ * using specific commands via websockets.
+ */
+
+import React, { useState, useContext, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { confirmPopup } from 'primereact/confirmpopup';
+import { FileUpload, type FileUploadHandlerEvent} from 'primereact/fileupload';
+
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
+
+
+/**
+ * Defines properties for the file list.
+ */
+/**
+ * Defines properties for the file list.
+ */
+type FileListProps = {
+    /// The domain name assigned to the DATASTORE servelet containing the data.
+    /// Default: DATASTORE
+    domain?: string,
+    /// Enable the upload button so that files can be uploaded to the datastore.
+    /// Default: false
+    enableUpload?: boolean,
+
+    /// The subdirectory of the datastore to list.
+    /// If blank, the base directory is listed.
+    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;
+}
+
+/**
+ * Defines the information for every row item in the file list.
+ */
+type FileItem = {
+    id: number;
+    name: string;
+};
+
+
+/**
+ * `FileList` is a React functional component that displays a list of files retrieved from a specified domain
+ * in an autocore-server.
+ * It allows users to download and delete files. The component also supports file uploads, if enabled.
+ *
+ * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
+ * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
+ *
+ * Requires 
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ * 
+ * Props:
+ * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
+ *      Default: "DATASTORE"
+ * - `enableUpload` (boolean): If true, enables an upload button allowing files to be uploaded to the datastore.
+ *      Default: false
+ *
+ * Example Usage:
+ * ```tsx
+ * <FileList domain="MyDomain" enableUpload={true} />
+ * ```
+ *
+ * @param {FileListProps} props The properties passed to the component.
+ */
+export const FileList: React.FC<FileListProps> = ({
+    domain = "DATASTORE",
+    enableUpload = false,
+    subdir,
+    filter=".json",
+    onSuccess,
+    onError
+}) => {
+
+    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 } : {};
+            let res = await invoke(`${domain}.list_files`, MessageType.Request, args);
+
+            let items = [];
+            for (let i = 0; i < res.data.length; ++i) {
+                const item = res.data[i];
+                items.push({
+                    id: i + 1,
+                    name: item
+                });
+            }
+
+            setFiles(items);
+        }
+        catch (error) {
+
+            if (onError) 
+                onError(`Failed to upload file list: ${error}`);
+        }
+
+
+    }
+
+    /**
+     * Handles when the download button is clicked on a list item.
+     * @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`, MessageType.Request, { file_name: target });
+            if (onSuccess)
+                onSuccess(`Downloaded file: ${file.name}`);
+        } catch (error) {
+
+            if (onError) 
+                onError(`Failed downloading file: ${error}`);
+        }
+
+    };
+
+    /**
+     * Sends the command to the autocore-server domain to delete the file.
+     * @param file_name Name of the file to delete.
+     */
+    const handleDelete = async (file_name: string) => {
+
+        let target = makeTargetName(file_name);
+
+        try {
+            await invoke(`${domain}.delete_file`, MessageType.Request, { file_name: target });
+            if (onSuccess)
+                onSuccess(`Deleted file: ${file_name}`);
+
+            listFiles(); // Refresh the file list after successful upload
+
+        } catch (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`, MessageType.Request, { file_name: target, value: base64String, options: { "base64": true } });
+
+                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>
+            <span style={{ fontWeight: 600 }}>{title}</span>
+        </React.Fragment>
+    );
+
+    const toolbarEndContents = (
+        <React.Fragment>
+            {enableUpload && (
+                <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'
+                    }}
+                />
+
+            )}
+            <Button
+                icon="pi pi-refresh"
+                onClick={() => { listFiles() }}
+                className="p-button-rounded p-mr-2"
+                aria-label="Refresh"
+                size="small"
+                rounded text
+            />
+        </React.Fragment>
+    );
+
+
+    /**
+     * Confirm that the user really wants to delete.
+     * @param event 
+     */
+    const confirmDelete = (file: FileItem, event: React.MouseEvent<HTMLButtonElement>) => {
+
+        confirmPopup({
+            target: event.currentTarget,
+            message: `Are you want to delete file ${file.name}?\nWARNING: This cannot be undone.`,
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => handleDelete(file.name)
+        });
+    };
+
+    useEffect(() => {
+
+        listFiles();
+
+        return () => {
+        }
+    }, [domain, enableUpload]);
+
+    return (
+
+        <div>
+            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />            
+            <DataTable value={files}>
+                <Column field="name" header="Name"></Column>
+
+                <Column body={(rowData: FileItem) => (
+                    <>
+                        <Button
+                            icon="pi pi-download"
+                            onClick={() => handleDownload(rowData)}
+                            className="p-button-rounded p-button-success p-mr-2"
+                            style={{ marginRight: "2mm" }}
+                            size="small"
+                        />
+                        <Button
+                            icon="pi pi-trash"
+                            onClick={(e) => confirmDelete(rowData, e)}
+                            className="p-button-rounded p-button-danger"
+                            size="small"
+                        />
+                    </>
+                )} header="Actions"></Column>
+            </DataTable>
+        </div>
+    );
+};
+
+export default FileList;