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),
});
const canSave = formConfig.formState.isValid;
const handleSave = async () => {
const formValues = formConfig.getValues();
const canSave =
formConfig.formState.isValid && !formConfig.formState.isSubmitting;
const handleSave = async (
formValues: SettingsDataModelNewObjectFormValues,
) => {
try {
const { data: response } = await createOneObjectMetadataItem(
settingsCreateObjectInputSchema.parse(formValues),
@ -81,7 +82,7 @@ export const SettingsNewObject = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(settingsObjectsPagePath)}
onSave={handleSave}
onSave={formConfig.handleSubmit(handleSave)}
/>
</SettingsHeaderContainer>
<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;
const { isDirty, isValid } = formConfig.formState;
const canSave = isDirty && isValid;
const { isDirty, isValid, isSubmitting } = formConfig.formState;
const canSave = isDirty && isValid && !isSubmitting;
const handleSave = async () => {
const formValues = formConfig.getValues();
const handleSave = async (
formValues: SettingsDataModelObjectEditFormValues,
) => {
const dirtyFieldKeys = Object.keys(
formConfig.formState.dirtyFields,
) as (keyof SettingsDataModelObjectEditFormValues)[];
@ -121,7 +122,7 @@ export const SettingsObjectEdit = () => {
onCancel={() =>
navigate(`${settingsObjectsPagePath}/${objectSlug}`)
}
onSave={handleSave}
onSave={formConfig.handleSubmit(handleSave)}
/>
)}
</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;
const canSave = formConfig.formState.isValid && formConfig.formState.isDirty;
const canSave =
formConfig.formState.isValid &&
formConfig.formState.isDirty &&
!formConfig.formState.isSubmitting;
const isLabelIdentifier = isLabelIdentifierField({
fieldMetadataItem: activeMetadataField,
objectMetadataItem: activeObjectMetadataItem,
});
const handleSave = async () => {
const formValues = formConfig.getValues();
const handleSave = async (
formValues: SettingsDataModelFieldEditFormValues,
) => {
const { dirtyFields } = formConfig.formState;
try {
@ -166,7 +170,7 @@ export const SettingsObjectFieldEdit = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave}
onSave={formConfig.handleSubmit(handleSave)}
/>
)}
</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;
const canSave = formConfig.formState.isValid;
const handleSave = async () => {
const formValues = formConfig.getValues();
const canSave =
formConfig.formState.isValid && !formConfig.formState.isSubmitting;
const handleSave = async (
formValues: SettingsDataModelNewFieldFormValues,
) => {
try {
if (
formValues.type === FieldMetadataType.Relation &&
@ -294,7 +295,7 @@ export const SettingsObjectNewFieldStep2 = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave}
onSave={formConfig.handleSubmit(handleSave)}
/>
)}
</SettingsHeaderContainer>