fix(web): toggle ok button on modal for updating field (#1252)

* toggle save button * refactor and fix * Update web/src/components/molecules/Schema/FieldModal/hooks.ts Co-authored-by: Nour Balaha <nourbalaha0@gmail.com> --------- Co-authored-by: Nour Balaha <nourbalaha0@gmail.com>
reearth · Oct 17, 2024 · bd13729 · bd13729
1 parent cde9840
commit bd13729
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 deletions.
diff --git 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<Props> = ({
                 : [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
@@ -50,8 +50,9 @@ const MultiValueGeometry: React.FC<Props> = ({
           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
@@ -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<string>());
+  const defaultValueRef = useRef<Partial<FormTypes>>();
+
   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,14 +240,36 @@ export default (
       } else {
         form
           .validateFields()
-          .then(() => setButtonDisabled(false))
+          .then(() => setButtonDisabled(changedKeys.current.size === 0))
           .catch(() => setButtonDisabled(true));
       }
     } else {
       setButtonDisabled(true);
     }
   }, [form, values]);
 
+  const handleValuesChange = useCallback(async (changedValues: Record<string, unknown>) => {
+      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<HTMLInputElement>) => {
       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
@@ -128,6 +128,7 @@ const FieldModal: React.FC<Props> = ({
     multipleValue,
     handleMultipleChange,
     handleTabChange,
+    handleValuesChange,
     handleNameChange,
     handleKeyChange,
     handleSubmit,
@@ -176,7 +177,12 @@ const FieldModal: React.FC<Props> = ({
           {t("OK")}
         </Button>,
       ]}>
-      <Form form={form} layout="vertical" initialValues={initialValues} requiredMark={requiredMark}>
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={initialValues}
+        requiredMark={requiredMark}
+        onValuesChange={handleValuesChange}>
         <Tabs activeKey={activeTab} onChange={handleTabChange}>
           <TabPane tab={t("Settings")} key="settings" forceRender>
             <Form.Item

diff --git a/web/src/components/molecules/Schema/types.ts b/web/src/components/molecules/Schema/types.ts
@@ -100,7 +100,7 @@ export type FieldTypePropertyInput = {
   select?: { defaultValue: string; values: string[] };
   tag?: {
     defaultValue?: string;
-    tags: { color: string; id?: string; name: string }[];
+    tags: Tag[];
   };
   checkbox?: { defaultValue?: boolean };
   integer?: { defaultValue: number | ""; min: number | null; max: number | null };
@@ -162,9 +162,9 @@ export type FormTypes = FormValues & {
   values?: string[];
   min?: number;
   max?: number;
-  tags?: { color: string; id: string; name: string }[];
+  tags?: Tag[];
   group: string;
-  supportedTypes?: string[] | string;
+  supportedTypes?: ObjectSupportedType[] | EditorSupportedType;
 };
 
 export type Tab = "fields" | "meta-data";