fix: Files field fix (#7376)

## Description

Closes #7324 
Closes #7323

- This PR solves the issue - 
- #7324 
- #7323
- On Enter the rename of the file is saved
- Removed renaming of extension

## After Changes Behaviour


https://github.com/user-attachments/assets/f5c47cd4-883e-473e-9cfa-e277f8f630c2

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Harshit Singh 2024-10-10 14:11:23 +05:30 committed by GitHub
parent 7b7c67fb64
commit 54c328a7e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 10 deletions

View File

@ -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 }) => {
<AttachmentIcon attachmentType={attachment.type} />
{isEditing ? (
<TextInput
value={attachmentName}
value={attachmentFileName}
onChange={handleOnChange}
onBlur={handleOnBlur}
autoFocus
fullWidth
onKeyDown={handleOnKeyDown}
/>
) : (
<StyledLinkContainer>
@ -129,9 +155,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
<AttachmentDropdown
scopeKey={attachment.id}
onDelete={handleDelete}
onDownload={() => {
downloadFile(attachment.fullPath, attachment.name);
}}
onDownload={handleDownload}
onRename={handleRename}
/>
</StyledRightContent>

View File

@ -0,0 +1,8 @@
export const getFileNameAndExtension = (filenameWithExtension: string) => {
const lastDotIndex = filenameWithExtension.lastIndexOf('.');
return {
name: filenameWithExtension.substring(0, lastDotIndex),
extension: filenameWithExtension.substring(lastDotIndex),
};
};