cloudmr-ux 0.0.1

package/src/common/components/Cmr-components/header/Header.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import './Header.scss';
+import { Link, useNavigate } from 'react-router-dom';
+
+interface MenuItem{
+    path: string
+    title: string
+}
+
+const Header = ({siteTitle, authentication,handleLogout,menuList}:{
+    siteTitle:string,
+    authentication: {email:string, accessToken: string}
+    menuList: MenuItem[],
+    handleLogout: ()=>void
+}) => {
+    const navigate = useNavigate();
+    const currPath = navigate.name;
+    const [menuSelect, setMenuSelect] = useState(siteTitle);
+    const { email, accessToken } = authentication;
+    console.log(authentication);
+
+    useEffect(() => {
+        for (let item of menuList) {
+            console.log(item.path);
+            console.log(currPath);
+            if (item.path === currPath) setMenuSelect(item.title);
+        }
+    }, [currPath]);
+
+    const handleMenuChange = (info: MenuItem,navigate:any) => {
+        if (currPath === info.path) return;
+        navigate(info.path);
+        for (let item of menuList) {
+            if (item.path === info.path){
+                setMenuSelect(item.title);
+            }
+        }
+        return false;
+    };
+
+    return (
+        <nav className="navbar navbar-expand-md navbar-dark bg-dark shadow-sm" style={{background: '#000000'}}>
+            {/*add small-margin to className to align header content to the ends*/}
+            <div className="container-xl">
+                <Link to="/" className="navbar-brand">
+                    {siteTitle}
+                </Link>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+
+                <div className="collapse navbar-collapse" id="navbarToggleExternalContent">
+                    {/* Left Side Of Navbar */}
+                    <ul className="navbar-nav">
+                        {menuList.map((menuItem)=>{
+                            return <li className={`nav-item${(menuItem.title==menuSelect)?' active':''}`} key={menuItem.path}>
+                                <a className='nav-link' style={{cursor:'pointer'}} onClick={(event)=>{
+                                    switch(menuItem.title) {
+                                        case 'Bug Report':
+                                            window.open('https://github.com/cloudmrhub-com/mroptimum/issues')
+                                            // window.location.href='https://github.com/cloudmrhub-com/mroptimum/issues';
+                                            return;
+                                    }
+                                    event.preventDefault();
+                                    handleMenuChange(menuItem, navigate)
+                                }} >
+                                    {menuItem.title}
+                                </a>
+                            </li>;
+                        })}
+                    </ul>
+
+                    {/**Right Side Of Navbar **/}
+                    {authentication.accessToken!='' &&(
+                        <ul className="navbar-nav ms-auto">
+                            {/** Authentication Links **/}
+                            <li className="nav-item dropdown">
+                                <button className="nav-link  dropdown-toggle" type="button"
+                                        id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+                                    {email} <span className="caret"></span>
+                                </button>
+                                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                    <li><button className="dropdown-item"
+                                                onClick={(event)=>{event.preventDefault();
+                                                    handleLogout();}}>
+                                        Logout
+                                    </button></li>
+                                </ul>
+                            </li>
+                        </ul>)}
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Header;
+export type { MenuItem };
+

package/src/common/components/Cmr-components/input/Input.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import './Input.scss';
+import { Input } from 'antd';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import { LiteralUnion } from 'antd/lib/_util/type';
+
+interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    defaultValue?: string;
+    id?: string;
+    maxLength?: number;
+    size?: SizeType;
+    value?: string;
+    type?: any;
+    prefix?: React.ReactNode;
+    bordered?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export const CmrInput = (props: CmrInputProps) => {
+    const { defaultValue, id, maxLength, size, value, type, prefix, bordered, onChange, onPressEnter, ...rest } = props;
+
+    return (
+        <Input
+            defaultValue={defaultValue}
+            id={id}
+            maxLength={maxLength}
+            size={size}
+            value={value}
+            type={type}
+            prefix={prefix}
+            bordered={bordered}
+            onChange={onChange}
+            onPressEnter={onPressEnter}
+            {...rest}
+        />
+    );
+};
+

package/src/common/components/Cmr-components/input-number/InputNumber.tsx

@@ -0,0 +1,29 @@
+import React, {CSSProperties} from 'react';
+import './InputNumber.scss';
+import { InputNumber } from 'antd';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+
+interface CmrInputNumberProps {
+    defaultValue?: number;
+    disabled?: boolean;
+    keyboard?: boolean;
+    max?: number;
+    min?: number;
+    size?: SizeType;
+    value?: number;
+    onChange?: (value: number|null) => void;
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}
+
+const CmrInputNumber = (props: CmrInputNumberProps) => {
+    const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
+
+    return (
+        <InputNumber defaultValue={defaultValue} max={max} style={style} min={min} value={value} onChange={onChange} {...rest}>
+            {children}
+        </InputNumber>
+    );
+};
+
+export default CmrInputNumber;

package/src/common/components/Cmr-components/label/Label.scss

@@ -0,0 +1,13 @@
+.cmr-label {
+    display: flex;
+    align-items: center;
+    font-style: normal;
+    font-weight: 500;
+    color: #707683;
+    padding-right: 10px;
+}
+
+.asterik {
+    color: red !important;
+    margin-left: 4px;
+}

package/src/common/components/Cmr-components/label/Label.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Label.scss';
+
+interface CmrLabelProps  extends React.HTMLAttributes<HTMLDivElement>{
+    required?: boolean;
+    children?: any;
+}
+
+const CmrLabel = (props: CmrLabelProps) => {
+    const { children, required = false } = props;
+
+    return (
+        <label className="cmr-label" style={{fontSize:'16px', ...props.style}}>
+            {children}
+            {required && <span className="asterik">*</span>}
+        </label>
+    );
+};
+
+export default CmrLabel;

package/src/common/components/Cmr-components/option/Option.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Select } from 'antd';
+import './Option.scss';
+
+const { Option } = Select;
+
+interface CmrOptionProps {
+    title?: string;
+    value: string | number;
+    disabled?: boolean;
+    children?: any;
+}
+
+const CmrOption = (props: CmrOptionProps) => {
+    const { title, value, disabled, children, ...rest } = props;
+
+    return (
+        <Option title={title} value={value} disabled={disabled} {...rest}>
+            {children}
+        </Option>
+    );
+};
+
+export default CmrOption;

package/src/common/components/Cmr-components/panel/Panel.tsx

@@ -0,0 +1,54 @@
+import React, {ReactNode, useState} from 'react';
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement>{
+    activeKey?: string|string[];
+    header: string|undefined;
+    children: ReactNode;
+    panelKey?: number;
+    onToggle?: (key: number|undefined) => void;
+    expanded?: boolean;
+    cardProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+const CmrPanel = function(props:CmrPanelProps){
+    let {expanded, onToggle} = props;
+    const toggle = ()=>{
+        if(onToggle)
+            onToggle(props.panelKey);
+    };
+    return <div className={`card ${props.className}`}>
+        <div className="card-header" style={{background: "white", display:props.header==undefined?'none':undefined}}>
+            <div className="row align-items-center">
+                <div className="col">{props.header}
+                </div>
+                {onToggle&&<div className="col text-end">
+                    <span className="react-collapse float-end btn"
+                          onClick={(e) => {
+                              toggle();
+                          }}>
+                        {(!expanded)?
+                            <ArrowDropDownIcon/>:
+                            <ArrowDropUpIcon/>
+                        }
+                    </span>
+                </div>}
+            </div>
+        </div>
+        {
+            (!expanded)?
+                <div className={`card-body m-0 ${props.cardProps?.className}`} style={
+                    {maxHeight:'0',padding:'0', opacity:'0',overflow:'hidden',
+                        visibility:'collapse',transition:'all 0.5s'}}>
+                    {props.children}
+                </div>
+                :
+                <div className={`card-body m-5 ${props.cardProps?.className}`} style={
+                    {maxHeight:undefined,padding:undefined, opacity:'1',
+                        visibility:'visible',transition:'all 0.5s'}}>
+                    {props.children}
+                </div>}
+    </div>;
+}
+
+export default CmrPanel;

package/src/common/components/Cmr-components/progress/Progress.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import './Progress.scss';
+import { Progress } from 'antd';
+import { ProgressGradient, ProgressType, SuccessProps } from 'antd/lib/progress/progress';
+
+declare const ProgressStatuses: ['normal', 'exception', 'active', 'success'];
+
+interface CmrProgressProps {
+    percent?: number;
+    showInfo?: boolean;
+    status?: typeof ProgressStatuses[number];
+    strokeColor?: string | ProgressGradient;
+    strokeLinecap?: 'butt' | 'square' | 'round';
+    success?: SuccessProps;
+    trailColor?: string;
+    type?: ProgressType;
+}
+
+const CmrProgress = (props: CmrProgressProps) => {
+    const { percent, showInfo, status, strokeColor, strokeLinecap, success, trailColor, type, ...rest } = props;
+
+    return (
+        <Progress
+            percent={percent}
+            showInfo={showInfo}
+            status={status}
+            strokeColor={strokeColor}
+            strokeLinecap={strokeLinecap}
+            success={success}
+            trailColor={trailColor}
+            type={type}
+            style={{marginBottom: '5pt'}}
+            {...rest}
+        />
+    );
+};
+
+export default CmrProgress;

package/src/common/components/Cmr-components/radio/Radio.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './Radio.scss';
+import { Radio } from 'antd';
+
+interface CmrRadioProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    value?: any;
+    children?: any;
+}
+
+const CmrRadio = (props: CmrRadioProps) => {
+    const { checked, defaultChecked, disabled, value, children, ...rest } = props;
+
+    return (
+        <Radio checked={checked} defaultChecked={defaultChecked} disabled={disabled} value={value} {...rest}>
+            {children}
+        </Radio>
+    );
+};
+
+export default CmrRadio;

package/src/common/components/Cmr-components/radio-group/RadioGroup.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import './RadioGroup.scss';
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib/radio/interface';
+
+interface CmrRadioGroupProps {
+    defaultValue?: any;
+    disabled?: boolean;
+    name?: string;
+    value?: any;
+    onChange?: (e: RadioChangeEvent) => void;
+    children?: React.ReactNode;
+}
+
+const CmrRadioGroup = (props: CmrRadioGroupProps) => {
+    const { defaultValue, disabled, name, value, onChange, children, ...rest } = props;
+
+    return (
+        <Radio.Group
+            defaultValue={defaultValue}
+            disabled={disabled}
+            name={name}
+            value={value}
+            onChange={onChange}
+            {...rest}
+        >
+            {children}
+        </Radio.Group>
+    );
+};
+
+export default CmrRadioGroup;

package/src/common/components/Cmr-components/rename/edit.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import CmrButton from "../button/Button";
+import {useEffect} from "react";
+
+export default function CmrNameDialog(props: {originalName: string; renamingCallback:(alias:string)=>Promise<boolean>, open:boolean, setOpen:(open:boolean)=>void}) {
+    let {originalName,open, setOpen} = props;
+    const [helperText, setHelperText] = React.useState('');
+    const [text, setText] = React.useState(originalName);
+    const [error, setError] = React.useState(false);
+
+    const renamingCallback = props.renamingCallback;
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        checkError(originalName);
+    }, [originalName]);
+
+    const handleConfirm = async () => {
+        // if(!error)
+        if(await renamingCallback(text))
+            handleClose();
+    };
+
+    const handleTextFieldChange=(e: { target: { value: string; }; })=>{
+        setText( e.target.value);
+        checkError(e.target.value);
+    }
+    const checkError=(text: string)=>{
+        const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
+        let newExtension = text.split('.').pop();
+        let orgExtension = (originalName.indexOf('.')>=0)? originalName.split('.').pop(): '?';
+        if(!fileNameRegex.test(text)){
+            setError(true);
+            if(text.indexOf('.')<0){
+                setHelperText('Invalid file name, needs a valid extension.');
+            }else{
+                setHelperText('Invalid file name, please check.');
+            }
+        }else if(newExtension!==orgExtension){
+            setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
+            setError(false);
+        }else{
+            setError(false);
+            setHelperText('');
+        }
+    }
+
+    return (
+        <div>
+            <Dialog open={open} onClose={handleClose}  fullWidth
+                    maxWidth="xs">
+                <DialogTitle>
+                    Renaming file {originalName} to:
+                </DialogTitle>
+                <DialogContent>
+                    {/*<DialogContentText>*/}
+                    {/*    Renaming file {originalName} to:*/}
+                    {/*</DialogContentText>*/}
+
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        // type="file"
+                        defaultValue = {originalName}
+                        onFocus={event => {
+                            event.target.select();
+                        }}
+                        fullWidth
+                        inputProps={{style: {fontSize: "16pt"}}}
+                        variant="standard"
+                        onChange={handleTextFieldChange}
+                        error={error}
+                        helperText={helperText}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <CmrButton variant={"outlined"} color={'inherit'} sx={{color:'#333'}} onClick={handleClose}>Cancel</CmrButton>
+                    <CmrButton variant={"contained"} color={'primary'} onClick={handleConfirm}>Confirm</CmrButton>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

package/src/common/components/Cmr-components/select/Select.scss

@@ -0,0 +1,3 @@
+.ant-select {
+  width: 120px;
+}

package/src/common/components/Cmr-components/select/Select.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Select.scss';
+import { Select } from 'antd';
+
+interface CmrSelectProps {
+    id?: string;
+    className?: string;
+    value?: Array<string | number> | string | number;
+    defaultValue?: Array<string | number> | string | number;
+    disabled?: boolean;
+    onChange?: (value: any) => void;
+    children?: any;
+}
+
+const CmrSelect = (props: CmrSelectProps) => {
+    const { id, className, value, defaultValue, disabled, onChange, children, ...rest } = props;
+
+    return (
+        <Select
+            id={id}
+            className={className}
+            value={value}
+            defaultValue={defaultValue}
+            disabled={disabled}
+            onChange={onChange}
+            {...rest}
+        >
+            {children}
+        </Select>
+    );
+};
+
+export default CmrSelect;

package/src/common/components/Cmr-components/select-upload/SelectUpload.tsx

@@ -0,0 +1,133 @@
+import React, {Fragment, useState} from "react";
+import CMRUpload, {CMRUploadProps, LambdaFile} from '../upload/Upload';
+import {Alert, AlertTitle, Button, Collapse, InputLabel, MenuItem} from "@mui/material";
+import Select, {SelectChangeEvent} from "@mui/material/Select";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import CmrTooltip from "../tooltip/Tooltip";
+import Box from "@mui/material/Box";
+import {uploadData} from "../../../../features/data/dataActionCreation";
+import {useAppDispatch, useAppSelector} from "../../../../features/hooks";
+import {AxiosResponse} from "axios";
+
+interface CMRSelectUploadProps extends CMRUploadProps{
+    /**
+     * A selection of currently uploaded files
+     */
+    fileSelection: UploadedFile[];
+    onSelected: (file?: UploadedFile)=>void;
+    chosenFile?: string;
+    buttonText?: string;
+    /**
+     * Enforces the extension of selected files
+     */
+    fileExtension?:string;
+}
+
+interface UploadedFile {
+    id: number;
+    fileName: string;
+    link: string;
+    md5?: string;
+    size: string;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+    database: string;
+    location: string;
+}
+
+/**
+ * Select from a set of uploaded files or upload new
+ */
+const CMRSelectUpload = (props: CMRSelectUploadProps) => {
+
+    let [open, setOpen] = React.useState(false);
+    let [fileIndex, selectFileIndex] = React.useState(-1);
+    let [uploading, setUploading] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    const handleClickOpen = () => {
+        selectFileIndex(-1);
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleChange = (event: SelectChangeEvent<number>) => {
+        //@ts-ignore
+        selectFileIndex(event.target.value);
+    };
+
+    const onSet = ()=>{
+        props.onSelected(props.fileSelection[fileIndex]);
+        setOpen(false);
+    }
+    const selectionDialog =  <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Upload or select</DialogTitle>
+        <DialogContent sx={{width: 520}}>
+            <DialogContentText sx={{pl:1, pr:1, pb:0}}>
+                {(uploading)?"Please wait for the upload to finish.":"Upload a new file or select from previously uploaded files:"}
+            </DialogContentText>
+                <DialogContent sx={{p:1}}>
+                <Select
+                    value={fileIndex}
+                    onChange={handleChange}
+                    disabled={uploading}
+                    inputProps={{ 'aria-label': 'Without label' }}
+                    sx={{width: '100%'}}
+                >
+                    <MenuItem value={-1}>
+                        <em>Select or upload a new file to proceed</em>
+                    </MenuItem>
+                    {((props.fileSelection!=undefined? props.fileSelection: [])).map((option,index) => (
+                        <MenuItem key={index} value={index}>
+                            {option.fileName}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </DialogContent>
+                <Box sx={{pt:2, justifyContent:'center',display:'flex', padding:'8px'}}>
+                    {(!uploading)&&<Button fullWidth sx={{marginRight:'8px'}} variant="contained"  color="success" onClick={onSet}>
+                        Select
+                    </Button>}
+                    {fileIndex==-1&& <CMRUpload {...props} color="info" fullWidth onUploaded={(res, file)=>{
+                        console.log("calling Setup level on uploaded");
+                        console.log(props.onUploaded);
+                        selectFileIndex(props.fileSelection.length);
+                        props.onUploaded(res, file);
+                        setOpen(false);
+                    }} fileExtension = {props.fileExtension}
+                                                uploadHandler={props.uploadHandler}
+                                                uploadStarted={()=>{
+                                                    setUploading(true);
+                                                    props.onSelected(undefined);
+                                                }}
+                                                uploadProgressed={(progress)=>{
+                                                    setOpen(false);
+                                                    setProgress(progress);
+                                                }}
+                                                uploadEnded={()=>setUploading(false)}
+                    ></CMRUpload>}
+                    <Button fullWidth variant="outlined"   color="inherit" sx={{color:'#333', marginLeft:'8px'}} onClick={handleClose}> Cancel</Button>
+                </Box>
+        </DialogContent>
+    </Dialog>;
+    return <Fragment>
+        {uploading?<Button variant={"contained"} style={{...props.style, textTransform:'none'}} sx={{overflowWrap:'inherit'}} color={'primary'} disabled={uploading}>
+            Uploading {progress}%
+        </Button>:<Button variant={(props.chosenFile==undefined)?"contained":"outlined"} color="info" onClick={handleClickOpen} sx={{marginRight:'10pt'}}
+                          style={{...props.style, textTransform:'none'}}>
+            {(props.chosenFile==undefined)?
+                (props.buttonText?props.buttonText:"Choose")
+                :props.chosenFile}
+        </Button>}
+        {selectionDialog}
+    </Fragment>;
+};
+
+export default CMRSelectUpload;