@adcops/autocore-react 3.0.18 → 3.0.20

package/src/components/FileSelect.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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
+ * -----
+ * 
+ */
+
+
+import React, { useState, useContext, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+
+import { EventEmitterContext } from "../core/EventEmitterContext";
+
+type FileSelectProps = {
+    domain?: string,
+    subdir?: string,
+    onFileSelected?: (fileName: string) => void,
+    onAccept?: (fileName: string) => void,
+    onCancel?: () => void
+}
+
+type FileItem = {
+    id: number;
+    name: string;
+};
+
+export const FileSelect: React.FC<FileSelectProps> = ({
+    domain = "DATASTORE",
+    subdir,
+    onFileSelected,
+    onAccept,
+    onCancel
+}) => {
+    const { invoke } = useContext(EventEmitterContext);
+    const [files, setFiles] = useState<FileItem[]>([]);
+    const [selectedFile, setSelectedFile] = useState<FileItem | null>(null);
+
+    const listFiles = async () => {
+        try {
+            const args = subdir ? { "subdir": subdir } : {};
+            const res = await invoke(domain, "list_files", args);
+            const items = res.data.map((item: string, index: number) => ({
+                id: index + 1,
+                name: item
+            }));
+            setFiles(items);
+        } catch (error) {
+            console.error("Failed to list files:", error);
+        }
+    };
+
+    const handleSelect = (file: FileItem) => {
+        setSelectedFile(file);
+        if (onFileSelected) onFileSelected(file.name);
+    };
+
+    const makeReturnFileName = () => {
+        if (selectedFile !== null) {
+            if (subdir !== undefined) {
+                return `${subdir}/${selectedFile.name}`;
+            }
+            else {
+                return selectedFile.name;
+            }
+        }
+        else {
+            return "";
+        }
+    }
+
+    useEffect(() => {
+        listFiles();
+    }, [domain, subdir]);
+
+    return (
+        <div>
+            <DataTable 
+                value={files} 
+                selectionMode="single" 
+                selection={selectedFile} 
+                onSelectionChange={e => handleSelect(e.value as FileItem)}
+            >
+                <Column field="name" header="File Name" />
+                <Column body={(rowData: FileItem) => (
+                    <Button
+                        label={selectedFile?.name === rowData.name ? "Selected" : "Select"}
+                        icon={selectedFile?.name === rowData.name ? "pi pi-check-circle" : "pi pi-circle-off"}
+                        onClick={() => handleSelect(rowData)}
+                        className={`p-button-rounded ${selectedFile?.name === rowData.name ? "p-button-success" : "p-button-outlined"}`}
+                        aria-label="Select"
+                        size="small"
+                    />
+                )} header="Select" />
+            </DataTable>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
+                <Button label="Cancel" icon="pi pi-times" className="p-button-text" onClick={onCancel} />
+                <Button
+                    label="Accept"
+                    icon="pi pi-check"
+                    className="p-button"
+                    onClick={() => { if (onAccept !== undefined && selectedFile !== null) onAccept(makeReturnFileName()) }}
+                    disabled={!selectedFile}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default FileSelect;
+
+

package/src/components/ProgressBarWithValue.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:35
+ * -----
+ * Last Modified: 2024-04-27 13:10:43
+ * -----
+ * 
+ */
+
+
+
+ .custom-progress-bar {
+    position: relative;
+    width: 100%; /* Ensure the progress bar fills the container */
+  }
+  
+  .centered-value {
+    position: absolute;
+    width: 100%; 
+    text-align: center;
+    font-weight: 600;   
+    z-index: 10; 
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centering magic */
+  }
+

package/src/components/ProgressBarWithValue.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:15
+ * -----
+ * Last Modified: 2024-04-27 13:25:56
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import './ProgressBarWithValue.css'; // Import your custom CSS
+
+interface ProgressBarWithValueProps {
+    value: number;
+    max?: number;
+    label? : string;
+}
+
+export const ProgressBarWithValue: React.FC<ProgressBarWithValueProps> = ({ value, max, label }) => {
+    let progressValue = value;
+    let indeterminate = false;
+
+    if (max !== undefined) {
+        if (max > 0) {
+            progressValue = (value / max) * 100; // Calculate percentage
+        } 
+        else { // max === 0
+            progressValue = 0;
+            indeterminate = true;
+        }
+    }
+
+    return (
+        <div className="custom-progress-bar">
+            <ProgressBar
+                showValue={false}
+                value={progressValue}
+                mode={indeterminate ? 'indeterminate' : 'determinate'}
+            />
+            <div className="centered-value">
+                {label ? `${label} ` : ''} {value} {max ? `of ${max}` : ''}
+            </div>
+        </div>
+    );
+};
+
+export default ProgressBarWithValue;

package/src/components/TextInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-21 08:35:18
+ * Last Modified: 2024-04-27 17:33:46
  * -----
  * 
  */
@@ -143,6 +143,16 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
     componentDidMount() {        
     }    
 
+
+    componentDidUpdate(prevProps: TextInputProps) {
+        // Check if the value prop has changed
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                entryValue: this.props.value,
+                editing: false 
+            });
+        }
+    }        
     
 
     /**

package/src/components/ToggleGroup.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 10:14:48
  * -----
- * Last Modified: 2024-04-16 09:16:59
+ * Last Modified: 2024-04-29 10:43:49
  * -----
  * 
  */
@@ -33,6 +33,7 @@ export interface ToggleGroupProps extends SelectButtonProps {
     invisibleTopic?: string;
     actionMode?: ActionMode;
     invert?: boolean;
+    onValueChanged? : (value: boolean | number) => void;
 }
 
 export const ToggleGroup: React.FC<ToggleGroupProps> = ({
@@ -47,6 +48,7 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
     invisibleTopic,
     actionMode,
     invert,
+    onValueChanged: onValueChange,
     ...restProps
 }) => {
 
@@ -239,6 +241,40 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
 
     const toggleGroupName = `${uniqueId}-togglegroup-selectbutton-container`;
 
+
+    const handleValueChange = (label : string) => {
+
+        if (onValueChange !== undefined && onValueChange !== null) {
+
+
+            if (restProps.options === undefined || restProps.options === null || restProps.options.length === 0) {
+                if (isMultiple)
+                    onValueChange(0);
+                else
+                    onValueChange(false);
+            }
+            else {
+                let index = 0;
+                for (let i=0;i<restProps.options.length;++i) {
+                    if (label === restProps.options[i] ) {
+                        index = i;
+                        break;
+                    }
+                }             
+
+                if (isMultiple)
+                    onValueChange(index);
+                else
+                    onValueChange(index > 0);            
+                
+            }
+
+            
+        }
+
+
+    }
+
     return (
         <div className="flex">
             {
@@ -275,6 +311,7 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
                         onTouchStart={handleOnPressed}
                         onMouseUp={handleOnReleased}
                         onTouchEnd={handleOnReleased}
+                        onChange={(e) => handleValueChange(e.value)}
                     />
                 </div>
             </div>