improve upload UX

This commit is contained in:
Songyi Huang 2020-12-12 18:10:49 -08:00
parent f61f478589
commit e428f228f1
1 changed files with 90 additions and 26 deletions

View File

@ -16,6 +16,10 @@ import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle"; import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent"; import DialogContent from "@material-ui/core/DialogContent";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import DialogActions from "@material-ui/core/DialogActions"; import DialogActions from "@material-ui/core/DialogActions";
import {Message, Upload, Loading} from 'element-react'; import {Message, Upload, Loading} from 'element-react';
@ -24,6 +28,11 @@ import {apiUrl} from "../utils/config";
const drawerWidth = 250; const drawerWidth = 250;
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
formControl: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
minWidth: 120,
},
drawer: { drawer: {
zIndex: 1001, zIndex: 1001,
width: drawerWidth, width: drawerWidth,
@ -94,11 +103,7 @@ function MenuBar (props) {
setUploadDialogOpen(true); setUploadDialogOpen(true);
}; };
const handleUploadDialogClose = () => { const uploadFormInitValue = {name: '', game: 'leduc-holdem'};
setUploadDialogOpen(false);
};
const uploadFormInitValue = {name: '', game: 'leduc-holdem', entry: ''};
const [uploadForm, setUploadForm] = React.useState({...uploadFormInitValue}); const [uploadForm, setUploadForm] = React.useState({...uploadFormInitValue});
const handleUploadFormChange = (e, property) => { const handleUploadFormChange = (e, property) => {
let tempUploadForm = {...uploadForm}; let tempUploadForm = {...uploadForm};
@ -106,12 +111,56 @@ function MenuBar (props) {
setUploadForm(tempUploadForm); setUploadForm(tempUploadForm);
} }
const handleUploadDialogClose = () => {
setUploadForm({...uploadFormInitValue});
setUploadDialogOpen(false);
};
let uploadRef = React.createRef(); let uploadRef = React.createRef();
const handleSubmitUpload = () => { const handleSubmitUpload = () => {
console.log(uploadForm, uploadRef); // check if data to upload is legal
if (uploadRef.current.state.fileList.length !== 1) {
Message({
message: "Please select one zip file to upload",
type: "warning",
showClose: true,
});
return ;
}
if (uploadRef.current.state.fileList[0].raw.type !== "application/zip") {
Message({
message: "Only zip file can be uploaded",
type: "warning",
showClose: true,
});
return ;
}
if (uploadForm.name === '') {
Message({
message: "Model name cannot be blank",
type: "warning",
showClose: true,
});
return ;
}
let flatGameList = [];
Object.keys(props.modelList).forEach(game => {
flatGameList = flatGameList.concat([...props.modelList[game]]);
});
if (flatGameList.includes(uploadForm.name)) {
Message({
message: "Model name exists",
type: "warning",
showClose: true,
});
return ;
}
const bodyFormData = new FormData(); const bodyFormData = new FormData();
bodyFormData.append('name', uploadForm.name); bodyFormData.append('name', uploadForm.name);
bodyFormData.append('entry', uploadForm.entry);
bodyFormData.append('game', uploadForm.game); bodyFormData.append('game', uploadForm.game);
bodyFormData.append('model', uploadRef.current.state.fileList[0].raw); bodyFormData.append('model', uploadRef.current.state.fileList[0].raw);
setUploadDialogLoading(true); setUploadDialogLoading(true);
@ -216,18 +265,20 @@ function MenuBar (props) {
<DialogTitle id="form-dialog-title">Upload Model</DialogTitle> <DialogTitle id="form-dialog-title">Upload Model</DialogTitle>
<DialogContent> <DialogContent>
<Upload <Upload
className="upload-demo" className={classes.formControl}
drag drag
ref={uploadRef} ref={uploadRef}
action="//placeholder/" action="//placeholder/"
multiple multiple
limit={1} limit={1}
autoUpload={false} autoUpload={false}
tip={<div className="el-upload__tip">Only zip file can be uploaded</div>}
> >
<i className="el-icon-upload"/> <i className="el-icon-upload"/>
<div className="el-upload__text">Drag the file here, or <em>Click to upload</em></div> <div className="el-upload__text">Drag the file here, or <em>Click to upload</em></div>
</Upload> </Upload>
<TextField <TextField
className={classes.formControl}
required required
margin="dense" margin="dense"
id="name" id="name"
@ -236,24 +287,37 @@ function MenuBar (props) {
onChange={(e) => handleUploadFormChange(e, 'name')} onChange={(e) => handleUploadFormChange(e, 'name')}
fullWidth fullWidth
/> />
<TextField {/*<TextField*/}
required {/* required*/}
margin="dense" {/* margin="dense"*/}
id="entry" {/* id="entry"*/}
label="Entry" {/* label="Entry"*/}
value={uploadForm.entry} {/* value={uploadForm.entry}*/}
onChange={(e) => handleUploadFormChange(e, 'entry')} {/* onChange={(e) => handleUploadFormChange(e, 'entry')}*/}
fullWidth {/* fullWidth*/}
/> {/*/>*/}
<TextField {/*<TextField*/}
required {/* required*/}
margin="dense" {/* margin="dense"*/}
id="game" {/* id="game"*/}
label="Game" {/* label="Game"*/}
value={uploadForm.game} {/* value={uploadForm.game}*/}
onChange={(e) => handleUploadFormChange(e, 'game')} {/* onChange={(e) => handleUploadFormChange(e, 'game')}*/}
fullWidth {/* fullWidth*/}
/> {/*/>*/}
<FormControl required className={classes.formControl} fullWidth>
<InputLabel id="upload-game-label">Game</InputLabel>
<Select
labelId="upload-game-label"
id="upload-game"
value={uploadForm.game}
onChange={(e) => handleUploadFormChange(e, "game")}
>
{props.gameList.map(game => {
return <MenuItem key={"upload-game-"+game.game} value={game.game}>{game.dispName}</MenuItem>
})}
</Select>
</FormControl>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleUploadDialogClose} variant="contained" disableElevation> <Button onClick={handleUploadDialogClose} variant="contained" disableElevation>