From e488a87ce453f121a3feb952cf03bb7abacb726c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Fri, 27 Oct 2023 18:06:31 +0200 Subject: [PATCH] feat: save edited custom field (#2245) Closes #2161 Co-authored-by: Lucas Bordeau --- front/src/generated-metadata/graphql.ts | 1 + .../metadata/hooks/useMetadataField.ts | 10 +++ .../hooks/useUpdateOneMetadataField.ts | 2 +- .../utils/formatMetadataFieldInput.ts | 6 +- .../SettingsObjectFieldFormSection.tsx | 1 + .../data-model/SettingsObjectEdit.tsx | 2 +- .../data-model/SettingsObjectFieldEdit.tsx | 73 ++++++++++++++++--- .../field-metadata/dtos/update-field.input.ts | 5 ++ 8 files changed, 84 insertions(+), 16 deletions(-) diff --git a/front/src/generated-metadata/graphql.ts b/front/src/generated-metadata/graphql.ts index 404cc3c7d..446dbd496 100644 --- a/front/src/generated-metadata/graphql.ts +++ b/front/src/generated-metadata/graphql.ts @@ -636,6 +636,7 @@ export type UpdateFieldInput = { icon?: InputMaybe; isActive?: InputMaybe; label?: InputMaybe; + name?: InputMaybe; }; export type UpdateObjectInput = { diff --git a/front/src/modules/metadata/hooks/useMetadataField.ts b/front/src/modules/metadata/hooks/useMetadataField.ts index 593d9b2dd..bb898d3e9 100644 --- a/front/src/modules/metadata/hooks/useMetadataField.ts +++ b/front/src/modules/metadata/hooks/useMetadataField.ts @@ -21,6 +21,15 @@ export const useMetadataField = () => { createOneMetadataField({ ...formatMetadataFieldInput(input), objectId: input.objectId, + type: input.type, + }); + + const editMetadataField = ( + input: Pick, + ) => + updateOneMetadataField({ + fieldIdToUpdate: input.id, + updatePayload: formatMetadataFieldInput(input), }); const activateMetadataField = (metadataField: Field) => @@ -43,5 +52,6 @@ export const useMetadataField = () => { createMetadataField, disableMetadataField, eraseMetadataField, + editMetadataField, }; }; diff --git a/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts b/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts index 27f003ae0..43506b9ba 100644 --- a/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts +++ b/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts @@ -28,7 +28,7 @@ export const useUpdateOneMetadataField = () => { fieldIdToUpdate: UpdateOneMetadataFieldMutationVariables['idToUpdate']; updatePayload: Pick< UpdateOneMetadataFieldMutationVariables['updatePayload'], - 'description' | 'icon' | 'isActive' | 'label' + 'description' | 'icon' | 'isActive' | 'label' | 'name' >; }) => { return await mutate({ diff --git a/front/src/modules/metadata/utils/formatMetadataFieldInput.ts b/front/src/modules/metadata/utils/formatMetadataFieldInput.ts index 53678e82e..58986c9d9 100644 --- a/front/src/modules/metadata/utils/formatMetadataFieldInput.ts +++ b/front/src/modules/metadata/utils/formatMetadataFieldInput.ts @@ -1,16 +1,12 @@ import toCamelCase from 'lodash.camelcase'; -import { MetadataFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType'; import { Field } from '~/generated-metadata/graphql'; export const formatMetadataFieldInput = ( - input: Pick & { - type: MetadataFieldDataType; - }, + input: Pick, ) => ({ description: input.description?.trim() ?? null, icon: input.icon, label: input.label.trim(), name: toCamelCase(input.label.trim()), - type: input.type, }); diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx index 9d13b73b9..246d22a07 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx @@ -42,6 +42,7 @@ export const SettingsObjectFieldFormSection = ({ /> onChange?.({ icon: value.iconKey })} variant="primary" diff --git a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx index c61b80516..69e9aa53b 100644 --- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx @@ -96,7 +96,7 @@ export const SettingsObjectEdit = () => { { children: 'Edit' }, ]} /> - {!!activeMetadataObject.isCustom && ( + {activeMetadataObject.isCustom && ( navigate(`/settings/objects/${objectSlug}`)} diff --git a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index f97a8ad29..5a4254aae 100644 --- a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -1,9 +1,10 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useMetadataField } from '@/metadata/hooks/useMetadataField'; import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings'; import { getFieldSlug } from '@/metadata/utils/getFieldSlug'; +import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons'; import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection'; @@ -26,22 +27,64 @@ export const SettingsObjectFieldEdit = () => { const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug); - const { disableMetadataField: disableField } = useMetadataField(); + const { disableMetadataField, editMetadataField } = useMetadataField(); const activeMetadataField = activeMetadataObject?.fields.find( (metadataField) => metadataField.isActive && getFieldSlug(metadataField) === fieldSlug, ); + const [formValues, setFormValues] = useState< + Partial<{ + icon: string; + label: string; + description: string; + }> + >({}); + useEffect(() => { if (loading) return; - if (!activeMetadataObject || !activeMetadataField) + + if (!activeMetadataObject || !activeMetadataField) { navigate(AppPath.NotFound); - }, [activeMetadataField, activeMetadataObject, loading, navigate]); + return; + } + + if (!Object.keys(formValues).length) { + setFormValues({ + icon: activeMetadataField.icon ?? undefined, + label: activeMetadataField.label, + description: activeMetadataField.description ?? undefined, + }); + } + }, [ + activeMetadataField, + activeMetadataObject, + formValues, + loading, + navigate, + ]); if (!activeMetadataObject || !activeMetadataField) return null; + const areRequiredFieldsFilled = !!formValues.label; + + const hasChanges = + formValues.description !== activeMetadataField.description || + formValues.icon !== activeMetadataField.icon || + formValues.label !== activeMetadataField.label; + + const canSave = areRequiredFieldsFilled && hasChanges; + + const handleSave = async () => { + const editedField = { ...activeMetadataField, ...formValues }; + + await editMetadataField(editedField); + + navigate(`/settings/objects/${objectSlug}`); + }; + const handleDisable = async () => { - await disableField(activeMetadataField); + await disableMetadataField(activeMetadataField); navigate(`/settings/objects/${objectSlug}`); }; @@ -59,13 +102,25 @@ export const SettingsObjectFieldEdit = () => { { children: activeMetadataField.label }, ]} /> + {activeMetadataField.isCustom && ( + navigate(`/settings/objects/${objectSlug}`)} + onSave={handleSave} + /> + )} undefined} + name={formValues.label} + description={formValues.description} + iconKey={formValues.icon} + onChange={(values) => + setFormValues((previousFormValues) => ({ + ...previousFormValues, + ...values, + })) + } />