admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Disable save button while submitting form in settings (#5352)

Browse Source 
as per title
This commit is contained in:
Marie
2024-05-10 18:18:39 +02:00
committed by GitHub
parent ae0e31abc7
commit 72521d5554
4 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -39,11 +39,12 @@ export const SettingsNewObject = () => {
resolver: zodResolver(newObjectFormSchema), resolver: zodResolver(newObjectFormSchema),
}); });
const canSave = formConfig.formState.isValid; const canSave =
formConfig.formState.isValid && !formConfig.formState.isSubmitting;
const handleSave = async () => {
const formValues = formConfig.getValues();
const handleSave = async (
formValues: SettingsDataModelNewObjectFormValues,
) => {
try { try {
const { data: response } = await createOneObjectMetadataItem( const { data: response } = await createOneObjectMetadataItem(
settingsCreateObjectInputSchema.parse(formValues), settingsCreateObjectInputSchema.parse(formValues),
@ -81,7 +82,7 @@ export const SettingsNewObject = () => {
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled={!canSave} isSaveDisabled={!canSave}
onCancel={() => navigate(settingsObjectsPagePath)} onCancel={() => navigate(settingsObjectsPagePath)}
onSave={handleSave} onSave={formConfig.handleSubmit(handleSave)}
/> />
</SettingsHeaderContainer> </SettingsHeaderContainer>
<Section> <Section>

11
packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -63,11 +63,12 @@ export const SettingsObjectEdit = () => {
if (!activeObjectMetadataItem) return null; if (!activeObjectMetadataItem) return null;
const { isDirty, isValid } = formConfig.formState; const { isDirty, isValid, isSubmitting } = formConfig.formState;
const canSave = isDirty && isValid; const canSave = isDirty && isValid && !isSubmitting;
const handleSave = async () => { const handleSave = async (
const formValues = formConfig.getValues(); formValues: SettingsDataModelObjectEditFormValues,
) => {
const dirtyFieldKeys = Object.keys( const dirtyFieldKeys = Object.keys(
formConfig.formState.dirtyFields, formConfig.formState.dirtyFields,
) as (keyof SettingsDataModelObjectEditFormValues)[]; ) as (keyof SettingsDataModelObjectEditFormValues)[];
@ -121,7 +122,7 @@ export const SettingsObjectEdit = () => {
onCancel={() => onCancel={() =>
navigate(`${settingsObjectsPagePath}/${objectSlug}`) navigate(`${settingsObjectsPagePath}/${objectSlug}`)
} }
onSave={handleSave} onSave={formConfig.handleSubmit(handleSave)}
/> />
)} )}
</SettingsHeaderContainer> </SettingsHeaderContainer>

12
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -86,15 +86,19 @@ export const SettingsObjectFieldEdit = () => {
if (!activeObjectMetadataItem || !activeMetadataField) return null; if (!activeObjectMetadataItem || !activeMetadataField) return null;
const canSave = formConfig.formState.isValid && formConfig.formState.isDirty; const canSave =
formConfig.formState.isValid &&
formConfig.formState.isDirty &&
!formConfig.formState.isSubmitting;
const isLabelIdentifier = isLabelIdentifierField({ const isLabelIdentifier = isLabelIdentifierField({
fieldMetadataItem: activeMetadataField, fieldMetadataItem: activeMetadataField,
objectMetadataItem: activeObjectMetadataItem, objectMetadataItem: activeObjectMetadataItem,
}); });
const handleSave = async () => { const handleSave = async (
const formValues = formConfig.getValues(); formValues: SettingsDataModelFieldEditFormValues,
) => {
const { dirtyFields } = formConfig.formState; const { dirtyFields } = formConfig.formState;
try { try {
@ -166,7 +170,7 @@ export const SettingsObjectFieldEdit = () => {
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled={!canSave} isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)} onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave} onSave={formConfig.handleSubmit(handleSave)}
/> />
)} )}
</SettingsHeaderContainer> </SettingsHeaderContainer>

11
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -112,11 +112,12 @@ export const SettingsObjectNewFieldStep2 = () => {
if (!activeObjectMetadataItem) return null; if (!activeObjectMetadataItem) return null;
const canSave = formConfig.formState.isValid; const canSave =
formConfig.formState.isValid && !formConfig.formState.isSubmitting;
const handleSave = async () => {
const formValues = formConfig.getValues();
const handleSave = async (
formValues: SettingsDataModelNewFieldFormValues,
) => {
try { try {
if ( if (
formValues.type === FieldMetadataType.Relation && formValues.type === FieldMetadataType.Relation &&
@ -294,7 +295,7 @@ export const SettingsObjectNewFieldStep2 = () => {
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled={!canSave} isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)} onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave} onSave={formConfig.handleSubmit(handleSave)}
/> />
)} )}
</SettingsHeaderContainer> </SettingsHeaderContainer>