From 4b2d18c1d770fd02dd56430e231c24420531a2eb Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 22 Nov 2023 12:27:58 +0100 Subject: [PATCH] Fixed record inline cell fields on activity editor (#2634) Created a generic useFieldContext hook to wrap RecordInlineCell anywhere in the app easily --- .../activities/components/ActivityEditor.tsx | 43 ++++++---- .../object-record/hooks/useFieldContext.tsx | 78 +++++++++++++++++++ 2 files changed, 107 insertions(+), 14 deletions(-) create mode 100644 front/src/modules/object-record/hooks/useFieldContext.tsx diff --git a/front/src/modules/activities/components/ActivityEditor.tsx b/front/src/modules/activities/components/ActivityEditor.tsx index d51cfd72a..a3b76ab54 100644 --- a/front/src/modules/activities/components/ActivityEditor.tsx +++ b/front/src/modules/activities/components/ActivityEditor.tsx @@ -7,7 +7,9 @@ import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdo import { Activity } from '@/activities/types/Activity'; import { ActivityTarget } from '@/activities/types/ActivityTarget'; import { Comment } from '@/activities/types/Comment'; +import { useFieldContext } from '@/object-record/hooks/useFieldContext'; import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord'; +import { RecordInlineCell } from '@/ui/object/record-inline-cell/components/RecordInlineCell'; import { PropertyBox } from '@/ui/object/record-inline-cell/property-box/components/PropertyBox'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; @@ -73,10 +75,6 @@ export const ActivityEditor = ({ const [hasUserManuallySetTitle, setHasUserManuallySetTitle] = useState(false); - console.log({ - activity, - }); - const [title, setTitle] = useState(activity.title ?? ''); const [completedAt, setCompletedAt] = useState( activity.completedAt ?? '', @@ -86,6 +84,21 @@ export const ActivityEditor = ({ objectNameSingular: 'activity', }); + const { FieldContextProvider: DueAtFieldContextProvider } = useFieldContext({ + objectNameSingular: 'activity', + objectRecordId: activity.id, + fieldMetadataName: 'dueAt', + fieldPosition: 0, + }); + + const { FieldContextProvider: AssigneeFieldContextProvider } = + useFieldContext({ + objectNameSingular: 'activity', + objectRecordId: activity.id, + fieldMetadataName: 'assignee', + fieldPosition: 1, + }); + const updateTitle = useCallback( (newTitle: string) => { updateOneObject?.({ @@ -141,16 +154,18 @@ export const ActivityEditor = ({ onCompletionChange={handleActivityCompletionChange} /> - {activity.type === 'Task' && ( - <> - {/* - - - - - */} - - )} + {activity.type === 'Task' && + DueAtFieldContextProvider && + AssigneeFieldContextProvider && ( + <> + + + + + + + + )} {/* */} diff --git a/front/src/modules/object-record/hooks/useFieldContext.tsx b/front/src/modules/object-record/hooks/useFieldContext.tsx new file mode 100644 index 000000000..475aa6ffb --- /dev/null +++ b/front/src/modules/object-record/hooks/useFieldContext.tsx @@ -0,0 +1,78 @@ +import { ReactNode } from 'react'; + +import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition'; +import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord'; +import { FieldContext } from '@/ui/object/field/contexts/FieldContext'; +import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope'; + +export const useFieldContext = ({ + objectNameSingular, + fieldMetadataName, + objectRecordId, + fieldPosition, +}: { + objectNameSingular: string; + objectRecordId: string; + fieldMetadataName: string; + fieldPosition: number; +}) => { + const { objectMetadataItem } = useObjectMetadataItem({ + objectNameSingular, + }); + + const fieldMetadataItem = objectMetadataItem?.fields.find( + (field) => field.name === fieldMetadataName, + ); + + const useUpdateOneObjectMutation: () => [(params: any) => any, any] = () => { + const { updateOneObject } = useUpdateOneObjectRecord({ + objectNameSingular, + }); + + const updateEntity = ({ + variables, + }: { + variables: { + where: { id: string }; + data: { + [fieldName: string]: any; + }; + }; + }) => { + updateOneObject?.({ + idToUpdate: variables.where.id, + input: variables.data, + }); + }; + + return [updateEntity, { loading: false }]; + }; + + const FieldContextProvider = + fieldMetadataItem && objectMetadataItem + ? ({ children }: { children: ReactNode }) => ( + + {children} + + ) + : undefined; + + return { + FieldContextProvider, + }; +};