fix: default value bug

reearth · Mar 18, 2024 · 3592302 · 3592302
1 parent 58875c4
commit 3592302
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 98 deletions.
diff --git a/web/e2e/project/item/fields/group.spec.ts b/web/e2e/project/item/fields/group.spec.ts
@@ -116,6 +116,7 @@ test("Group field creating and updating has succeeded", async ({ page }) => {
   await expect(page.getByRole("alert").last()).toContainText("Successfully updated field!");
   await closeNotification(page);
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("link", { name: "edit", exact: true }).click();
   await expect(page.getByRole("main")).toContainText("new text1(unique)");
   await expect(page.getByRole("main")).toContainText("new text1 description");
@@ -304,6 +305,7 @@ test("Group field editing has succeeded", async ({ page }) => {
   await closeNotification(page);
 
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await page.getByRole("button", { name: "plus New" }).click();
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("text1");

diff --git a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import moment from "moment";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import { FormInstance } from "@reearth-cms/components/atoms/Form";
@@ -26,7 +26,6 @@ type Props = {
   onChange?: (value: string[]) => void;
   parentField: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   fields?: Field[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
@@ -65,12 +64,12 @@ type Props = {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const MultiValueGroup: React.FC<Props> = ({
   className,
   parentField,
-  groups,
   form,
   fields,
   value = [],
@@ -108,6 +107,7 @@ const MultiValueGroup: React.FC<Props> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   const t = useT();
 
@@ -126,12 +126,7 @@ const MultiValueGroup: React.FC<Props> = ({
     [onChange, value],
   );
 
-  const group = useMemo<Group | undefined>(
-    () => groups?.find(g => g.id === parentField.typeProperty?.groupId),
-    [groups, parentField.typeProperty?.groupId],
-  );
-
-  const handleAdd = useCallback(() => {
+  const handleAdd = useCallback(async () => {
     const currentValues = value || [];
     const itemGroupId = newID();
 
@@ -143,6 +138,8 @@ const MultiValueGroup: React.FC<Props> = ({
 
     // set default value
     const newValues = { ...form?.getFieldsValue() };
+    if (!parentField.typeProperty?.groupId) return;
+    const group = await onGroupGet(parentField.typeProperty.groupId);
     group?.schema.fields.forEach((field: Field) => {
       const defaultValue = field.typeProperty?.defaultValue;
       const setValue = (value: any) => {
@@ -177,7 +174,7 @@ const MultiValueGroup: React.FC<Props> = ({
           break;
       }
     });
-  }, [form, group?.schema.fields, onChange, value]);
+  }, [form, onChange, onGroupGet, parentField.typeProperty?.groupId, value]);
 
   return (
     <div className={className}>

diff --git a/web/src/components/molecules/Content/Details/index.tsx b/web/src/components/molecules/Content/Details/index.tsx
@@ -16,7 +16,7 @@ import {
   SortDirection,
 } from "@reearth-cms/components/organisms/Project/Asset/AssetList/hooks";
 
-export type Props = {
+type Props = {
   linkedItemsModalList?: FormItem[];
   showPublishAction?: boolean;
   requests: Request[];
@@ -40,7 +40,6 @@ export type Props = {
   commentsPanel?: JSX.Element;
   requestModalShown: boolean;
   addItemToRequestModalShown: boolean;
-  groups?: Group[];
   workspaceUserMembers: UserMember[];
   totalCount: number;
   page: number;
@@ -102,6 +101,7 @@ export type Props = {
   onAddItemToRequestModalClose: () => void;
   onAddItemToRequestModalOpen: () => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const ContentDetailsMolecule: React.FC<Props> = ({
@@ -129,7 +129,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   requestModalShown,
   addItemToRequestModalShown,
   workspaceUserMembers,
-  groups,
   totalCount,
   page,
   pageSize,
@@ -173,6 +172,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   onAddItemToRequestModalOpen,
   onAssetTableChange,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <ComplexInnerContents
@@ -192,7 +192,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
         ) : (
           <ContentForm
             item={item}
-            groups={groups}
             linkItemModalTitle={linkItemModalTitle}
             linkItemModalTotalCount={linkItemModalTotalCount}
             linkItemModalPage={linkItemModalPage}
@@ -254,6 +253,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
             onAddItemToRequestModalClose={onAddItemToRequestModalClose}
             workspaceUserMembers={workspaceUserMembers}
             onGetAsset={onGetAsset}
+            onGroupGet={onGroupGet}
           />
         )
       }

diff --git a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
@@ -15,7 +15,6 @@ import {
 interface GroupFieldProps {
   field: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
   formItemsData: FormItem[];
@@ -53,12 +52,12 @@ interface GroupFieldProps {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 }
 
 const GroupField: React.FC<GroupFieldProps> = ({
   field,
   form,
-  groups,
   linkedItemsModalList,
   linkItemModalTitle,
   formItemsData,
@@ -92,6 +91,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <Form.Item
@@ -102,7 +102,6 @@ const GroupField: React.FC<GroupFieldProps> = ({
         <MultiValueGroup
           parentField={field}
           form={form}
-          groups={groups}
           linkedItemsModalList={linkedItemsModalList}
           linkItemModalTitle={linkItemModalTitle}
           onSearchTerm={onSearchTerm}
@@ -136,6 +135,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
           setFileList={setFileList}
           setUploadModalVisibility={setUploadModalVisibility}
           onGetAsset={onGetAsset}
+          onGroupGet={onGroupGet}
         />
       ) : (
         <GroupItem

diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx
@@ -38,9 +38,8 @@ import { AssetField, GroupField, ReferenceField } from "./fields/ComplexFieldCom
 import { DefaultField } from "./fields/FieldComponents";
 import { FIELD_TYPE_COMPONENT_MAP } from "./fields/FieldTypesMap";
 
-export interface Props {
+interface Props {
   item?: Item;
-  groups?: Group[];
   linkedItemsModalList?: FormItem[];
   showPublishAction?: boolean;
   requests: Request[];
@@ -119,11 +118,11 @@ export interface Props {
   onAddItemToRequestModalClose: () => void;
   onAddItemToRequestModalOpen: () => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 }
 
 const ContentForm: React.FC<Props> = ({
   item,
-  groups,
   linkedItemsModalList,
   showPublishAction,
   requests,
@@ -185,6 +184,7 @@ const ContentForm: React.FC<Props> = ({
   onAddItemToRequestModalClose,
   onAddItemToRequestModalOpen,
   onGetAsset,
+  onGroupGet,
 }) => {
   const t = useT();
   const [form] = Form.useForm();
@@ -328,16 +328,18 @@ const ContentForm: React.FC<Props> = ({
   const handleSubmit = useCallback(async () => {
     try {
       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 groupFields = new Map<string, Field>();
-      groups
-        ?.filter(group => groupIdsInCurrentModel.has(group.id))
-        .forEach(group => {
-          group?.schema.fields?.forEach(field => groupFields.set(field.id, field));
-        });
+      if (model) {
+        await Promise.all(
+          model.schema.fields.map(async field => {
+            if (field.typeProperty?.groupId) {
+              const group = await onGroupGet(field.typeProperty.groupId);
+              group?.schema.fields?.forEach(field => groupFields.set(field.id, field));
+            }
+          }),
+        );
+      }
+
       const values = await form.validateFields();
       const fields: ItemField[] = [];
       for (const [key, value] of Object.entries(values)) {
@@ -394,19 +396,7 @@ const ContentForm: React.FC<Props> = ({
     } catch (info) {
       console.log("Validate Failed:", info);
     }
-  }, [
-    model?.schema.fields,
-    model?.schema.id,
-    model?.metadataSchema?.fields,
-    model?.metadataSchema?.id,
-    groups,
-    form,
-    metaForm,
-    itemId,
-    inputValueGet,
-    onItemUpdate,
-    onItemCreate,
-  ]);
+  }, [model, form, metaForm, itemId, onGroupGet, inputValueGet, onItemUpdate, onItemCreate]);
 
   const handleMetaUpdate = useCallback(async () => {
     if (!itemId || !item?.metadata?.id) return;
@@ -573,7 +563,6 @@ const ContentForm: React.FC<Props> = ({
                   <GroupField
                     field={field}
                     form={form}
-                    groups={groups}
                     linkedItemsModalList={linkedItemsModalList}
                     linkItemModalTitle={linkItemModalTitle}
                     formItemsData={formItemsData}
@@ -607,6 +596,7 @@ const ContentForm: React.FC<Props> = ({
                     setFileList={setFileList}
                     setUploadModalVisibility={setUploadModalVisibility}
                     onGetAsset={onGetAsset}
+                    onGroupGet={onGroupGet}
                   />
                 </StyledFormItemWrapper>
               );