fix(web): update the item with a new group field

web/src/components/molecules/Common/Form/GroupItem/index.tsx

@@ -118,7 +118,7 @@
   const t = useT();
 
   const fields = useMemo(() => group?.schema.fields, [group?.schema.fields]);
-  const itemGroupId = useMemo(() => value, [value]);
+  const itemGroupId = useMemo(() => value ?? "", [value]);
 
   return (
     <Collapse collapsible="header" defaultActiveKey={["1"]} style={{ width: 500 }}>
@@ -154,7 +154,7 @@
                     message: t("Please input field!"),
                   },
                 ]}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }>
@@ -179,7 +179,7 @@
                     message: t("Please input field!"),
                   },
                 ]}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }>
@@ -202,7 +202,7 @@
                     message: t("Please input field!"),
                   },
                 ]}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }>
@@ -231,7 +231,7 @@
                     message: t("Please input field!"),
                   },
                 ]}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }>
@@ -288,7 +288,7 @@
               <StyledFormItem
                 key={field.id}
                 extra={field.description}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }
@@ -314,7 +314,7 @@
               <StyledFormItem
                 key={field.id}
                 extra={field.description}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }
@@ -334,7 +334,7 @@
               <StyledFormItem
                 key={field.id}
                 extra={field.description}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 valuePropName="checked"
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
@@ -345,7 +345,7 @@
               <StyledFormItem
                 key={field.id}
                 extra={field.description}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={false} />}>
                 <ReferenceFormItem
                   key={field.id}
@@ -364,7 +364,7 @@
               <StyledFormItem
                 key={field.id}
                 extra={field.description}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }
@@ -411,7 +411,7 @@
                     message: t("Please input field!"),
                   },
                 ]}
-                name={[field.id, itemGroupId ?? ""]}
+                name={[field.id, itemGroupId]}
                 label={
                   <FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
                 }>

web/src/components/molecules/Content/Details/index.tsx

@@ -71,7 +71,7 @@
   setUploadType: (type: UploadType) => void;
   onItemCreate: (data: {
     schemaId: string;
-    metaSchemaId: string;
+    metaSchemaId?: string;
     fields: ItemField[];
     metaFields: ItemField[];
   }) => Promise<void>;

web/src/components/molecules/Content/Form/index.tsx

@@ -35,9 +35,14 @@
 import LinkItemRequestModal from "@reearth-cms/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal";
 import PublishItemModal from "@reearth-cms/components/molecules/Content/PublishItemModal";
 import RequestCreationModal from "@reearth-cms/components/molecules/Content/RequestCreationModal";
-import { Item, FormItem, ItemField } from "@reearth-cms/components/molecules/Content/types";
+import {
+  Item,
+  FormItem,
+  ItemField,
+  ItemValue,
+} from "@reearth-cms/components/molecules/Content/types";
 import { Request, RequestState } from "@reearth-cms/components/molecules/Request/types";
-import { FieldType, Group, Model } from "@reearth-cms/components/molecules/Schema/types";
+import { FieldType, Group, Model, Field } from "@reearth-cms/components/molecules/Schema/types";
 import { Member } from "@reearth-cms/components/molecules/Workspace/types";
 import {
   AssetSortType,
@@ -96,7 +101,7 @@
   setUploadType: (type: UploadType) => void;
   onItemCreate: (data: {
     schemaId: string;
-    metaSchemaId: string;
+    metaSchemaId?: string;
     fields: ItemField[];
     metaFields: ItemField[];
   }) => Promise<void>;
@@ -201,10 +206,32 @@
       currentLocation.pathname !== nextLocation.pathname && changedKeys.current.size > 0,
   );
 
+  const checkIfSingleGroupField = useCallback(
+    (key: string, value: any) => {
+      return (
+        initialFormValues[key] &&
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        value !== null
+      );
+    },
+    [initialFormValues],
+  );
+
   const handleValuesChange = useCallback(
     (changedValues: any) => {
       const [key, value] = Object.entries(changedValues)[0];
-      if (
+      if (checkIfSingleGroupField(key, value)) {
+        const [groupFieldKey, groupFieldValue] = Object.entries(initialFormValues[key])[0];
+        const changedFieldValue = (value as any)[groupFieldKey];
+        if (changedFieldValue && groupFieldValue !== null) {
+          if (JSON.stringify(changedFieldValue) === JSON.stringify(groupFieldValue)) {
+            changedKeys.current.delete(key);
+          } else {
+            changedKeys.current.add(key);
+          }
+        }
+      } else if (
         (!value && !initialFormValues[key]) ||
         JSON.stringify(value) === JSON.stringify(initialFormValues[key])
       ) {
@@ -215,7 +242,7 @@
         changedKeys.current.add(key);
       }
     },
-    [initialFormValues],
+    [checkIfSingleGroupField, initialFormValues],
   );
 
   useEffect(() => {
@@ -287,75 +314,81 @@
     [formItemsData],
   );
 
+  const inputValueGet = useCallback((value: ItemValue, multiple: boolean) => {
+    if (multiple) {
+      if (Array.isArray(value)) {
+        return value.map(v => (moment.isMoment(v) ? transformMomentToString(v) : v));
+      } else {
+        return [];
+      }
+    } else {
+      return moment.isMoment(value) ? transformMomentToString(value) : value ?? "";
+    }
+  }, []);
+
   const handleSubmit = useCallback(async () => {
     try {
-      const modelFieldTypes = new Map(
-        (model?.schema.fields || []).map(field => [field.id, field.type]),
-      );
+      const modelFields = new Map((model?.schema.fields || []).map(field => [field.id, field]));
       const groupIdsInCurrentModel = new Set();
       model?.schema.fields?.forEach(field => {
         if (field.type === "Group") groupIdsInCurrentModel.add(field.typeProperty?.groupId);
       });
-      const groupFieldTypes = new Map();
+      const groupFields = new Map<string, Field>();
       groups
         ?.filter(group => groupIdsInCurrentModel.has(group.id))
         .forEach(group => {
-          group?.schema.fields?.forEach(field => groupFieldTypes.set(field.id, field.type));
+          group?.schema.fields?.forEach(field => groupFields.set(field.id, field));
         });
       const values = await form.validateFields();
-      const metaValues = await metaForm.validateFields();
-      const fields: {
-        schemaFieldId: string;
-        itemGroupId?: string;
-        type: FieldType;
-        value: string;
-      }[] = [];
-      const metaFields: { schemaFieldId: string; type: FieldType; value: string }[] = [];
-      // TODO: improve performance
+      const fields: ItemField[] = [];
       for (const [key, value] of Object.entries(values)) {
-        const isGroup =
-          typeof value === "object" && !Array.isArray(value) && !moment.isMoment(value);
-        // group fields
-        if (value && isGroup) {
-          for (const [key1, value1] of Object.entries(value)) {
-            const type1 = groupFieldTypes.get(key) || "";
-            fields.push({
-              value: (moment.isMoment(value1)
-                ? transformMomentToString(value1)
-                : value1 ?? "") as string,
-              schemaFieldId: key,
-              itemGroupId: key1,
-              type: type1 as FieldType,
-            });
+        const modelField = modelFields.get(key);
+        if (modelField) {
+          fields.push({
+            value: inputValueGet(value as ItemValue, modelField.multiple),
+            schemaFieldId: key,
+            type: modelField.type,
+          });
+        } else if (typeof value === "object" && value !== null) {
+          for (const [groupFieldKey, groupFieldValue] of Object.entries(value)) {
+            const groupField = groupFields.get(key);
+            if (groupField) {
+              fields.push({
+                value: inputValueGet(groupFieldValue, groupField.multiple),
+                schemaFieldId: key,
+                itemGroupId: groupFieldKey,
+                type: groupField.type,
+              });
+            }
           }
-          continue;
         }
-        // model fields
-        const type = modelFieldTypes.get(key) || "";
-        fields.push({
-          value: (moment.isMoment(value) ? transformMomentToString(value) : value ?? "") as string,
-          schemaFieldId: key,
-          type: type as FieldType,
-        });
       }
+
+      const metaValues = await metaForm.validateFields();
+      const metaFields: ItemField[] = [];
       for (const [key, value] of Object.entries(metaValues)) {
-        metaFields.push({
-          value: (moment.isMoment(value) ? transformMomentToString(value) : value ?? "") as string,
-          schemaFieldId: key,
-          type: model?.metadataSchema?.fields?.find(field => field.id === key)?.type as FieldType,
-        });
+        const type = model?.metadataSchema?.fields?.find(field => field.id === key)?.type;
+        if (type) {
+          metaFields.push({
+            value: moment.isMoment(value) ? transformMomentToString(value) : value ?? "",
+            schemaFieldId: key,
+            type,
+          });
+        }
       }
+
       changedKeys.current.clear();
-      if (!itemId) {
-        await onItemCreate?.({
-          schemaId: model?.schema.id as string,
-          metaSchemaId: model?.metadataSchema?.id as string,
-          metaFields,
+
+      if (itemId) {
+        await onItemUpdate?.({
+          itemId: itemId,
           fields,
         });
-      } else {
-        await onItemUpdate?.({
-          itemId: itemId as string,
+      } else if (model?.schema.id) {
+        await onItemCreate?.({
+          schemaId: model?.schema.id,
+          metaSchemaId: model?.metadataSchema?.id,
+          metaFields,
           fields,
         });
       }
@@ -371,8 +404,9 @@
     form,
     metaForm,
     itemId,
-    onItemCreate,
+    inputValueGet,
     onItemUpdate,
+    onItemCreate,
   ]);
 
   const handleMetaUpdate = useCallback(async () => {