vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

WIP: Make attachment filename editabe

Browse source
This commit is contained in:
Philipp Heckel 2022-03-30 09:57:22 -04:00
parent 402b05a27b
commit c5a1344e8a
1 changed files with 51 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
web/src/components/SendDialog.js
View file

@ -23,6 +23,7 @@ import Box from "@mui/material/Box";
import Icon from "./Icon"; import Icon from "./Icon";
import DialogFooter from "./DialogFooter"; import DialogFooter from "./DialogFooter";
import api from "../app/Api"; import api from "../app/Api";
import Divider from "@mui/material/Divider";
const SendDialog = (props) => { const SendDialog = (props) => {
const [topicUrl, setTopicUrl] = useState(props.topicUrl); const [topicUrl, setTopicUrl] = useState(props.topicUrl);
@ -40,11 +41,12 @@ const SendDialog = (props) => {
const [showTopicUrl, setShowTopicUrl] = useState(props.topicUrl === ""); const [showTopicUrl, setShowTopicUrl] = useState(props.topicUrl === "");
const [showClickUrl, setShowClickUrl] = useState(false); const [showClickUrl, setShowClickUrl] = useState(false);
const [showAttachUrl, setShowAttachUrl] = useState(false); const [showAttachUrl, setShowAttachUrl] = useState(false);
const [showAttachFile, setShowAttachFile] = useState(false);
const [showEmail, setShowEmail] = useState(false); const [showEmail, setShowEmail] = useState(false);
const [showDelay, setShowDelay] = useState(false); const [showDelay, setShowDelay] = useState(false);
const showAttachFile = !!attachFile && !showAttachUrl;
const attachFileInput = useRef(); const attachFileInput = useRef();
const [errorText, setErrorText] = useState(""); const [errorText, setErrorText] = useState("");
const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
@ -93,7 +95,9 @@ const SendDialog = (props) => {
attachFileInput.current.click(); attachFileInput.current.click();
}; };
const handleAttachFileChanged = (ev) => { const handleAttachFileChanged = (ev) => {
setAttachFile(ev.target.files[0]); const file = ev.target.files[0];
setAttachFile(file);
setFilename(file.name);
console.log(ev.target.files[0]); console.log(ev.target.files[0]);
console.log(URL.createObjectURL(ev.target.files[0])); console.log(URL.createObjectURL(ev.target.files[0]));
}; };
@ -165,7 +169,7 @@ const SendDialog = (props) => {
value={priority} value={priority}
onChange={(ev) => setPriority(ev.target.value)} onChange={(ev) => setPriority(ev.target.value)}
> >
{[1,2,3,4,5].map(priority => {[5,4,3,2,1].map(priority =>
<MenuItem value={priority}> <MenuItem value={priority}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<img src={priorities[priority].file} style={{marginRight: "8px"}}/> <img src={priorities[priority].file} style={{marginRight: "8px"}}/>
@ -232,8 +236,13 @@ const SendDialog = (props) => {
onChange={handleAttachFileChanged} onChange={handleAttachFileChanged}
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
{attachFile && <AttachmentBox file={attachFile}/>} {showAttachFile && <AttachmentBox
{(showAttachFile || showAttachUrl) && <TextField file={attachFile}
filename={filename}
onChangeFilename={(f) => setFilename(f)}
onClose={() => setAttachFile(null)}
/>}
{showAttachUrl && <TextField
margin="dense" margin="dense"
label="Attachment Filename" label="Attachment Filename"
value={filename} value={filename}
@ -265,8 +274,8 @@ const SendDialog = (props) => {
<div> <div>
{!showClickUrl && <Chip clickable label="Click URL" onClick={() => setShowClickUrl(true)} sx={{marginRight: 1}}/>} {!showClickUrl && <Chip clickable label="Click URL" onClick={() => setShowClickUrl(true)} sx={{marginRight: 1}}/>}
{!showEmail && <Chip clickable label="Forward to email" onClick={() => setShowEmail(true)} sx={{marginRight: 1}}/>} {!showEmail && <Chip clickable label="Forward to email" onClick={() => setShowEmail(true)} sx={{marginRight: 1}}/>}
{!showAttachUrl && <Chip clickable label="Attach file by URL" onClick={() => setShowAttachUrl(true)} sx={{marginRight: 1}}/>} {!showAttachUrl && !showAttachFile && <Chip clickable label="Attach file by URL" onClick={() => setShowAttachUrl(true)} sx={{marginRight: 1}}/>}
{!showAttachFile && <Chip clickable label="Attach local file" onClick={() => handleAttachFileClick()} sx={{marginRight: 1}}/>} {!showAttachFile && !showAttachUrl && <Chip clickable label="Attach local file" onClick={() => handleAttachFileClick()} sx={{marginRight: 1}}/>}
{!showDelay && <Chip clickable label="Delay delivery" onClick={() => setShowDelay(true)} sx={{marginRight: 1}}/>} {!showDelay && <Chip clickable label="Delay delivery" onClick={() => setShowDelay(true)} sx={{marginRight: 1}}/>}
{!showTopicUrl && <Chip clickable label="Change topic" onClick={() => setShowTopicUrl(true)} sx={{marginRight: 1}}/>} {!showTopicUrl && <Chip clickable label="Change topic" onClick={() => setShowTopicUrl(true)} sx={{marginRight: 1}}/>}
</div> </div>
@ -318,20 +327,43 @@ const DialogIconButton = (props) => {
const AttachmentBox = (props) => { const AttachmentBox = (props) => {
const file = props.file; const file = props.file;
const maybeInfoText = formatBytes(file.size); const maybeInfoText = formatBytes(file.size);
const [editFilename, setEditFilename] = useState(false);
return ( return (
<Box sx={{ <>
display: 'flex', <Divider/>
alignItems: 'center', <Typography variant="body1" sx={{marginTop: 2}}>
marginTop: 2, Attached file:
padding: 1,
borderRadius: '4px',
}}>
<Icon type={file.type}/>
<Typography variant="body2" sx={{ marginLeft: 1, textAlign: 'left', color: 'text.primary' }}>
<b>{file.name}</b>
{maybeInfoText}
</Typography> </Typography>
</Box> <TextField
margin="dense"
label="Attachment Filename"
type="text"
variant="standard"
value={props.filename}
onChange={ev => props.onChangeFilename(ev.target.value)}
fullWidth
/>
<Box sx={{
display: 'flex',
alignItems: 'center',
marginTop: 1,
padding: 1,
borderRadius: '4px',
}}>
<Icon type={file.type}/>
<Typography variant="body2" sx={{ marginLeft: 1, textAlign: 'left', color: 'text.primary' }}>
{editFilename
? <TextField value={props.filename}/>
: <b>{props.filename}</b>
}
<IconButton size="small" onClick={() => setEditFilename(true)}><Close/></IconButton>
<br/>
{maybeInfoText}
</Typography>
<DialogIconButton onClick={props.onClose} sx={{marginLeft: "6px"}}><Close/></DialogIconButton>
</Box>
<Divider/>
</>
); );
}; };