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 24a54e677ac5..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,7 +63,12 @@ const StyledLinkContainer = styled.div` export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { const theme = useTheme(); const [isEditing, setIsEditing] = useState(false); - const [attachmentName, setAttachmentName] = useState(attachment.name); + + const { name: originalFileName, extension: attachmentFileExtension } = + getFileNameAndExtension(attachment.name); + + const [attachmentFileName, setAttachmentFileName] = + useState(originalFileName); const fieldContext = useMemo( () => ({ recoilScopeId: attachment?.id ?? '' }), @@ -85,16 +91,36 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { setIsEditing(true); }; - const handleOnBlur = () => { + const saveAttachmentName = () => { setIsEditing(false); + + const newFileName = `${attachmentFileName}${attachmentFileExtension}`; + updateOneAttachment({ idToUpdate: attachment.id, - updateOneRecordInput: { name: attachmentName }, + updateOneRecordInput: { name: newFileName }, }); }; - const handleOnChange = (newName: string) => { - setAttachmentName(newName); + const handleOnBlur = () => { + saveAttachmentName(); + }; + + const handleOnChange = (newFileName: string) => { + setAttachmentFileName(newFileName); + }; + + const handleOnKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + saveAttachmentName(); + } + }; + + const handleDownload = () => { + downloadFile( + attachment.fullPath, + `${attachmentFileName}${attachmentFileExtension}`, + ); }; return ( @@ -104,11 +130,11 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { {isEditing ? ( ) : ( @@ -129,9 +155,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { { - downloadFile(attachment.fullPath, attachment.name); - }} + 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), + }; +};