cloudmr-ux 0.0.3 → 0.1.0

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

@@ -1,101 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,13 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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;