Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

66 lines
1.7 KiB

import { Box, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { styled } from '@mui/material/styles';
import EventEmitter from 'events';
import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
import { Panel } from '../Panels';
import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import Spinner from '../Spinner';
import { HeaderText } from '../Text';
import FileList from './FileList';
import FileUploadInfo from './FileUploadInfo';
const PREFIX = 'Files';
const classes = {
addFileButton: `${PREFIX}-addFileButton`,
addFileInput: `${PREFIX}-addFileInput`,
};
const StyledDiv = styled('div')(() => ({
[`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE,
[`& .${classes.addFileInput}`]: {
display: 'none',
},
}));
const Files = (): JSX.Element => {
const openFilePickerEventEmitter: EventEmitter = new EventEmitter();
const { data: fileList, isLoading } = PeriodicFetch(
`${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`,
);
const onAddFileButtonClick = () => {
openFilePickerEventEmitter.emit('open');
};
return (
<Panel>
<StyledDiv>
<Box style={{ display: 'flex', width: '100%' }}>
<Box style={{ flexGrow: 1 }}>
<HeaderText text="Files" />
</Box>
<Box>
<IconButton
className={classes.addFileButton}
onClick={onAddFileButtonClick}
>
<AddIcon />
</IconButton>
</Box>
</Box>
<FileUploadInfo
openFilePickerEventEmitter={openFilePickerEventEmitter}
/>
{isLoading ? <Spinner /> : <FileList list={fileList} />}
</StyledDiv>
</Panel>
);
};
export default Files;