From fa3ecceb979b9441bad0ceb50045df80866246e4 Mon Sep 17 00:00:00 2001 From: Kazuma Tsuchiya Date: Mon, 9 Sep 2024 19:35:40 +0900 Subject: [PATCH 1/3] toggle save button --- .../Common/Form/GeometryItem/index.tsx | 6 ++- .../molecules/Schema/FieldModal/hooks.ts | 43 +++++++++++++++++-- .../molecules/Schema/FieldModal/index.tsx | 8 +++- web/src/components/molecules/Schema/types.ts | 6 +-- 4 files changed, 53 insertions(+), 10 deletions(-) diff --git a/web/src/components/molecules/Common/Form/GeometryItem/index.tsx b/web/src/components/molecules/Common/Form/GeometryItem/index.tsx index a256efa423..4b225cfb10 100644 --- a/web/src/components/molecules/Common/Form/GeometryItem/index.tsx +++ b/web/src/components/molecules/Common/Form/GeometryItem/index.tsx @@ -226,11 +226,13 @@ const GeometryItem: React.FC = ({ if (convertedTypes.includes(valueJson.type)) { handleErrorDelete(); } else { - handleErrorAdd(); + throw new Error(); } + } else { + throw new Error(); } } catch (_) { - return; + handleErrorAdd(); } } else { handleErrorDelete(); diff --git a/web/src/components/molecules/Schema/FieldModal/hooks.ts b/web/src/components/molecules/Schema/FieldModal/hooks.ts index fc0b8aa5bd..cdacba0f88 100644 --- a/web/src/components/molecules/Schema/FieldModal/hooks.ts +++ b/web/src/components/molecules/Schema/FieldModal/hooks.ts @@ -3,7 +3,11 @@ import dayjs from "dayjs"; import { useCallback, useEffect, useMemo, useState, useRef } from "react"; import Form from "@reearth-cms/components/atoms/Form"; -import { keyAutoFill, keyReplace } from "@reearth-cms/components/molecules/Common/Form/utils"; +import { + keyAutoFill, + keyReplace, + emptyConvert, +} from "@reearth-cms/components/molecules/Common/Form/utils"; import { Field, FieldModalTabs, @@ -118,9 +122,12 @@ export default ( } }, []); + const changedKeys = useRef(new Set()); + const defaultValueRef = useRef>(); + useEffect(() => { setMultipleValue(!!selectedField?.multiple); - form.setFieldsValue({ + const defaultValue = { fieldId: selectedField?.id, title: selectedField?.title, description: selectedField?.description, @@ -139,7 +146,10 @@ export default ( supportedTypes: selectedField?.typeProperty?.objectSupportedTypes || selectedField?.typeProperty?.editorSupportedTypes?.[0], - }); + }; + form.setFieldsValue(defaultValue); + defaultValueRef.current = defaultValue; + changedKeys.current.clear(); }, [defaultValueGet, form, selectedField]); const typePropertyGet = useCallback((values: FormTypes) => { @@ -230,7 +240,7 @@ export default ( } else { form .validateFields() - .then(() => setButtonDisabled(false)) + .then(() => setButtonDisabled(changedKeys.current.size === 0)) .catch(() => setButtonDisabled(true)); } } else { @@ -238,6 +248,30 @@ export default ( } }, [form, values]); + const handleValuesChange = useCallback( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + async (changedValues: any) => { + const [key, value] = Object.entries(changedValues)[0]; + let changedValue = value; + let defaultValue = defaultValueRef.current?.[key as keyof FormTypes]; + if (Array.isArray(value)) { + changedValue = [...value].sort(); + } + if (Array.isArray(defaultValue)) { + defaultValue = [...defaultValue].sort(); + } + + if ( + JSON.stringify(emptyConvert(changedValue)) === JSON.stringify(emptyConvert(defaultValue)) + ) { + changedKeys.current.delete(key); + } else { + changedKeys.current.add(key); + } + }, + [], + ); + const handleNameChange = useCallback( (e: React.ChangeEvent) => { if (selectedField) return; @@ -357,6 +391,7 @@ export default ( multipleValue, handleMultipleChange, handleTabChange, + handleValuesChange, handleNameChange, handleKeyChange, handleSubmit, diff --git a/web/src/components/molecules/Schema/FieldModal/index.tsx b/web/src/components/molecules/Schema/FieldModal/index.tsx index 3eafac4695..7e5d44cb4f 100644 --- a/web/src/components/molecules/Schema/FieldModal/index.tsx +++ b/web/src/components/molecules/Schema/FieldModal/index.tsx @@ -128,6 +128,7 @@ const FieldModal: React.FC = ({ multipleValue, handleMultipleChange, handleTabChange, + handleValuesChange, handleNameChange, handleKeyChange, handleSubmit, @@ -176,7 +177,12 @@ const FieldModal: React.FC = ({ {t("OK")} , ]}> -
+ Date: Tue, 8 Oct 2024 17:11:33 +0900 Subject: [PATCH 2/3] refactor and fix --- .../components/molecules/Common/Form/GeometryItem/index.tsx | 6 ++---- .../Common/MultiValueField/MultiValueGeometry/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/web/src/components/molecules/Common/Form/GeometryItem/index.tsx b/web/src/components/molecules/Common/Form/GeometryItem/index.tsx index 4b225cfb10..7d7c7edbee 100644 --- a/web/src/components/molecules/Common/Form/GeometryItem/index.tsx +++ b/web/src/components/molecules/Common/Form/GeometryItem/index.tsx @@ -225,12 +225,10 @@ const GeometryItem: React.FC = ({ : [GEO_TYPE_MAP[supportedTypes]]; if (convertedTypes.includes(valueJson.type)) { handleErrorDelete(); - } else { - throw new Error(); + return; } - } else { - throw new Error(); } + throw new Error(); } catch (_) { handleErrorAdd(); } diff --git a/web/src/components/molecules/Common/MultiValueField/MultiValueGeometry/index.tsx b/web/src/components/molecules/Common/MultiValueField/MultiValueGeometry/index.tsx index 6397c3968b..d62d1ae01b 100644 --- a/web/src/components/molecules/Common/MultiValueField/MultiValueGeometry/index.tsx +++ b/web/src/components/molecules/Common/MultiValueField/MultiValueGeometry/index.tsx @@ -50,8 +50,9 @@ const MultiValueGeometry: React.FC = ({ return index !== key; }), ); + errorDelete?.(key); }, - [onChange, value], + [errorDelete, onChange, value], ); return ( From 47012c6572c8c239824116825b4844ae905b32d7 Mon Sep 17 00:00:00 2001 From: caichi <54824604+caichi-t@users.noreply.github.com> Date: Wed, 16 Oct 2024 18:39:04 +0900 Subject: [PATCH 3/3] Update web/src/components/molecules/Schema/FieldModal/hooks.ts Co-authored-by: Nour Balaha --- web/src/components/molecules/Schema/FieldModal/hooks.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web/src/components/molecules/Schema/FieldModal/hooks.ts b/web/src/components/molecules/Schema/FieldModal/hooks.ts index cdacba0f88..b214c7402e 100644 --- a/web/src/components/molecules/Schema/FieldModal/hooks.ts +++ b/web/src/components/molecules/Schema/FieldModal/hooks.ts @@ -248,9 +248,7 @@ export default ( } }, [form, values]); - const handleValuesChange = useCallback( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - async (changedValues: any) => { + const handleValuesChange = useCallback(async (changedValues: Record) => { const [key, value] = Object.entries(changedValues)[0]; let changedValue = value; let defaultValue = defaultValueRef.current?.[key as keyof FormTypes];