diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx index 884c43c81..7dc80b171 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx @@ -1,4 +1,9 @@ -import { IconDotsVertical, IconDownload, IconTrash } from 'twenty-ui'; +import { + IconDotsVertical, + IconDownload, + IconPencil, + IconTrash, +} from 'twenty-ui'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; @@ -10,12 +15,14 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type AttachmentDropdownProps = { onDownload: () => void; onDelete: () => void; + onRename: () => void; scopeKey: string; }; export const AttachmentDropdown = ({ onDownload, onDelete, + onRename, scopeKey, }: AttachmentDropdownProps) => { const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`; @@ -32,6 +39,11 @@ export const AttachmentDropdown = ({ closeDropdown(); }; + const handleRename = () => { + onRename(); + closeDropdown(); + }; + return ( + theme.font.color.primary}; display: flex; justify-content: space-between; - padding: ${({ theme }) => theme.spacing(2)}; + height: 32px; `; const StyledLeftContent = styled.div` @@ -57,6 +59,9 @@ 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 fieldContext = useMemo( () => ({ recoilScopeId: attachment?.id ?? '' }), [attachment?.id], @@ -70,17 +75,47 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { deleteOneAttachment(attachment.id); }; + const { updateOneRecord: updateOneAttachment } = useUpdateOneRecord({ + objectNameSingular: CoreObjectNameSingular.Attachment, + }); + + const handleRename = () => { + setIsEditing(true); + }; + + const handleOnBlur = () => { + setIsEditing(false); + updateOneAttachment({ + idToUpdate: attachment.id, + updateOneRecordInput: { name: attachmentName }, + }); + }; + + const handleOnChange = (newName: string) => { + setAttachmentName(newName); + }; + return ( - - {attachment.name} - + {isEditing ? ( + + ) : ( + + {attachment.name} + + )} @@ -93,6 +128,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { onDownload={() => { downloadFile(attachment.fullPath, attachment.name); }} + onRename={handleRename} />