From c5a1344e8aa06d80e20d442695615d8519df6533 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Wed, 30 Mar 2022 09:57:22 -0400 Subject: [PATCH] WIP: Make attachment filename editabe --- web/src/components/SendDialog.js | 70 +++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 19 deletions(-) diff --git a/web/src/components/SendDialog.js b/web/src/components/SendDialog.js index cfd78a72..90824b35 100644 --- a/web/src/components/SendDialog.js +++ b/web/src/components/SendDialog.js @@ -23,6 +23,7 @@ import Box from "@mui/material/Box"; import Icon from "./Icon"; import DialogFooter from "./DialogFooter"; import api from "../app/Api"; +import Divider from "@mui/material/Divider"; const SendDialog = (props) => { const [topicUrl, setTopicUrl] = useState(props.topicUrl); @@ -40,11 +41,12 @@ const SendDialog = (props) => { const [showTopicUrl, setShowTopicUrl] = useState(props.topicUrl === ""); const [showClickUrl, setShowClickUrl] = useState(false); const [showAttachUrl, setShowAttachUrl] = useState(false); - const [showAttachFile, setShowAttachFile] = useState(false); const [showEmail, setShowEmail] = useState(false); const [showDelay, setShowDelay] = useState(false); + const showAttachFile = !!attachFile && !showAttachUrl; const attachFileInput = useRef(); + const [errorText, setErrorText] = useState(""); const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); @@ -93,7 +95,9 @@ const SendDialog = (props) => { attachFileInput.current.click(); }; 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(URL.createObjectURL(ev.target.files[0])); }; @@ -165,7 +169,7 @@ const SendDialog = (props) => { value={priority} onChange={(ev) => setPriority(ev.target.value)} > - {[1,2,3,4,5].map(priority => + {[5,4,3,2,1].map(priority =>
@@ -232,8 +236,13 @@ const SendDialog = (props) => { onChange={handleAttachFileChanged} style={{ display: 'none' }} /> - {attachFile && } - {(showAttachFile || showAttachUrl) && setFilename(f)} + onClose={() => setAttachFile(null)} + />} + {showAttachUrl && {
{!showClickUrl && setShowClickUrl(true)} sx={{marginRight: 1}}/>} {!showEmail && setShowEmail(true)} sx={{marginRight: 1}}/>} - {!showAttachUrl && setShowAttachUrl(true)} sx={{marginRight: 1}}/>} - {!showAttachFile && handleAttachFileClick()} sx={{marginRight: 1}}/>} + {!showAttachUrl && !showAttachFile && setShowAttachUrl(true)} sx={{marginRight: 1}}/>} + {!showAttachFile && !showAttachUrl && handleAttachFileClick()} sx={{marginRight: 1}}/>} {!showDelay && setShowDelay(true)} sx={{marginRight: 1}}/>} {!showTopicUrl && setShowTopicUrl(true)} sx={{marginRight: 1}}/>}
@@ -318,20 +327,43 @@ const DialogIconButton = (props) => { const AttachmentBox = (props) => { const file = props.file; const maybeInfoText = formatBytes(file.size); + const [editFilename, setEditFilename] = useState(false); return ( - - - - {file.name} - {maybeInfoText} + <> + + + Attached file: - + props.onChangeFilename(ev.target.value)} + fullWidth + /> + + + + {editFilename + ? + : {props.filename} + } + setEditFilename(true)}> +
+ {maybeInfoText} +
+ +
+ + ); };