From da50b379cbb2b01ba9ef814f9b6ac39e88eff66e Mon Sep 17 00:00:00 2001 From: harshit078 Date: Wed, 2 Oct 2024 02:31:20 +0530 Subject: [PATCH 1/3] Fixed onEnter in file --- .../files/components/AttachmentRow.tsx | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 478cacc723e4..58e82f4e0abc 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -60,7 +60,17 @@ const StyledLink = styled.a` export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { const theme = useTheme(); const [isEditing, setIsEditing] = useState(false); - const [attachmentName, setAttachmentName] = useState(attachment.name); + const getFileNameAndExtension = (filename: string) => { + const lastDotIndex = filename.lastIndexOf('.'); + return { + name: filename.substring(0, lastDotIndex), + extension: filename.substring(lastDotIndex), + }; + }; + + const { name: originalName, extension: fileExtension } = + getFileNameAndExtension(attachment.name); + const [attachmentName, setAttachmentName] = useState(originalName); const fieldContext = useMemo( () => ({ recoilScopeId: attachment?.id ?? '' }), @@ -82,19 +92,29 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { const handleRename = () => { setIsEditing(true); }; - - const handleOnBlur = () => { + const saveAttachmentName = () => { setIsEditing(false); + const newFileName = `${attachmentName}${fileExtension}`; updateOneAttachment({ idToUpdate: attachment.id, - updateOneRecordInput: { name: attachmentName }, + updateOneRecordInput: { name: newFileName }, }); }; + const handleOnBlur = () => { + saveAttachmentName(); + }; + const handleOnChange = (newName: string) => { setAttachmentName(newName); }; + const handleOnKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + saveAttachmentName(); + } + }; + return ( @@ -106,7 +126,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { onChange={handleOnChange} onBlur={handleOnBlur} autoFocus - fullWidth + onKeyDown={handleOnKeyDown} /> ) : ( Date: Wed, 2 Oct 2024 02:34:49 +0530 Subject: [PATCH 2/3] minor fix --- .../modules/activities/files/components/AttachmentRow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 58e82f4e0abc..e642e460092d 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -146,7 +146,10 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { scopeKey={attachment.id} onDelete={handleDelete} onDownload={() => { - downloadFile(attachment.fullPath, attachment.name); + downloadFile( + attachment.fullPath, + `${attachmentName}${fileExtension}`, + ); }} onRename={handleRename} /> From ced5e6960f19e161df14765b649a73a1bf2ec36c Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Thu, 10 Oct 2024 10:23:36 +0200 Subject: [PATCH 3/3] Minor fix --- .../files/components/AttachmentRow.tsx | 39 ++++++++++--------- .../src/utils/file/getFileNameAndExtension.ts | 8 ++++ 2 files changed, 28 insertions(+), 19 deletions(-) create mode 100644 packages/twenty-front/src/utils/file/getFileNameAndExtension.ts diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 09f7f1ea4a09..f0eca529d762 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -18,6 +18,7 @@ import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui'; import { formatToHumanReadableDate } from '~/utils/date-utils'; import { getFileAbsoluteURI } from '~/utils/file/getFileAbsoluteURI'; +import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension'; const StyledLeftContent = styled.div` align-items: center; @@ -62,17 +63,12 @@ const StyledLinkContainer = styled.div` export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { const theme = useTheme(); const [isEditing, setIsEditing] = useState(false); - const getFileNameAndExtension = (filename: string) => { - const lastDotIndex = filename.lastIndexOf('.'); - return { - name: filename.substring(0, lastDotIndex), - extension: filename.substring(lastDotIndex), - }; - }; - const { name: originalName, extension: fileExtension } = + const { name: originalFileName, extension: attachmentFileExtension } = getFileNameAndExtension(attachment.name); - const [attachmentName, setAttachmentName] = useState(originalName); + + const [attachmentFileName, setAttachmentFileName] = + useState(originalFileName); const fieldContext = useMemo( () => ({ recoilScopeId: attachment?.id ?? '' }), @@ -94,9 +90,12 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { const handleRename = () => { setIsEditing(true); }; + const saveAttachmentName = () => { setIsEditing(false); - const newFileName = `${attachmentName}${fileExtension}`; + + const newFileName = `${attachmentFileName}${attachmentFileExtension}`; + updateOneAttachment({ idToUpdate: attachment.id, updateOneRecordInput: { name: newFileName }, @@ -107,8 +106,8 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { saveAttachmentName(); }; - const handleOnChange = (newName: string) => { - setAttachmentName(newName); + const handleOnChange = (newFileName: string) => { + setAttachmentFileName(newFileName); }; const handleOnKeyDown = (e: React.KeyboardEvent) => { @@ -117,6 +116,13 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { } }; + const handleDownload = () => { + downloadFile( + attachment.fullPath, + `${attachmentFileName}${attachmentFileExtension}`, + ); + }; + return ( @@ -124,7 +130,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { {isEditing ? ( { { - downloadFile( - attachment.fullPath, - `${attachmentName}${fileExtension}`, - ); - }} + onDownload={handleDownload} onRename={handleRename} /> diff --git a/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts b/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts new file mode 100644 index 000000000000..231648cd5c93 --- /dev/null +++ b/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts @@ -0,0 +1,8 @@ +export const getFileNameAndExtension = (filenameWithExtension: string) => { + const lastDotIndex = filenameWithExtension.lastIndexOf('.'); + + return { + name: filenameWithExtension.substring(0, lastDotIndex), + extension: filenameWithExtension.substring(lastDotIndex), + }; +};