diff --git a/web/src/components/molecules/Common/Form/GeometryItem/index.tsx b/web/src/components/molecules/Common/Form/GeometryItem/index.tsx index a256efa423..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,12 @@ const GeometryItem: React.FC = ({ : [GEO_TYPE_MAP[supportedTypes]]; if (convertedTypes.includes(valueJson.type)) { handleErrorDelete(); - } else { - handleErrorAdd(); + return; } } + throw new Error(); } catch (_) { - return; + handleErrorAdd(); } } else { handleErrorDelete(); 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 ( diff --git a/web/src/components/molecules/Schema/FieldModal/hooks.ts b/web/src/components/molecules/Schema/FieldModal/hooks.ts index fc0b8aa5bd..b214c7402e 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,28 @@ export default ( } }, [form, values]); + const handleValuesChange = useCallback(async (changedValues: Record) => { + 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 +389,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 e3472415e0..4d08298eef 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")} , ]}> -
+