Skip to content

Commit

Permalink
fix(web): update the item with a new group field (#1037)
Browse files Browse the repository at this point in the history 
* fix: id bug

* fix: styled warning

* fix: check if value changed

* fix: adding new group field

* fix handling multiple value and refactor

* add: useCallback

* undo: styled-component warning
  • Loading branch information
@caichi-t @yk-eukarya
caichi-t authored and yk-eukarya committed Oct 1, 2024
1 parent 0dd9526 commit c1f4ff7
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 122 deletions.
22 changes: 11 additions & 11 deletions web/src/components/molecules/Common/Form/GroupItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const GroupItem: React.FC<Props> = ({
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 }}>
Expand Down Expand Up @@ -154,7 +154,7 @@ const GroupItem: React.FC<Props> = ({
message: t("Please input field!"),
},
]}
name={[field.id, itemGroupId ?? ""]}
name={[field.id, itemGroupId]}
label={
<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
}>
Expand All @@ -179,7 +179,7 @@ const GroupItem: React.FC<Props> = ({
message: t("Please input field!"),
},
]}
name={[field.id, itemGroupId ?? ""]}
name={[field.id, itemGroupId]}
label={
<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
}>
Expand All @@ -202,7 +202,7 @@ const GroupItem: React.FC<Props> = ({
message: t("Please input field!"),
},
]}
name={[field.id, itemGroupId ?? ""]}
name={[field.id, itemGroupId]}
label={
<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
}>
Expand Down Expand Up @@ -231,7 +231,7 @@ const GroupItem: React.FC<Props> = ({
message: t("Please input field!"),
},
]}
name={[field.id, itemGroupId ?? ""]}
name={[field.id, itemGroupId]}
label={
<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
}>
Expand Down Expand Up @@ -288,7 +288,7 @@ const GroupItem: React.FC<Props> = ({
<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} />
}
Expand All @@ -314,7 +314,7 @@ const GroupItem: React.FC<Props> = ({
<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} />
}
Expand All @@ -334,7 +334,7 @@ const GroupItem: React.FC<Props> = ({
<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} />
Expand All @@ -345,7 +345,7 @@ const GroupItem: React.FC<Props> = ({
<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}
Expand All @@ -364,7 +364,7 @@ const GroupItem: React.FC<Props> = ({
<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} />
}
Expand Down Expand Up @@ -411,7 +411,7 @@ const GroupItem: React.FC<Props> = ({
message: t("Please input field!"),
},
]}
name={[field.id, itemGroupId ?? ""]}
name={[field.id, itemGroupId]}
label={
<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />
}>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/molecules/Content/Details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export type Props = {
setUploadType: (type: UploadType) => void;
onItemCreate: (data: {
schemaId: string;
metaSchemaId: string;
metaSchemaId?: string;
fields: ItemField[];
metaFields: ItemField[];
}) => Promise<void>;
Expand Down
144 changes: 89 additions & 55 deletions web/src/components/molecules/Content/Form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,14 @@ import ContentSidebarWrapper from "@reearth-cms/components/molecules/Content/For
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,
Expand Down Expand Up @@ -96,7 +101,7 @@ export interface Props {
setUploadType: (type: UploadType) => void;
onItemCreate: (data: {
schemaId: string;
metaSchemaId: string;
metaSchemaId?: string;
fields: ItemField[];
metaFields: ItemField[];
}) => Promise<void>;
Expand Down Expand Up @@ -201,10 +206,32 @@ const ContentForm: React.FC<Props> = ({
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])
) {
Expand All @@ -215,7 +242,7 @@ const ContentForm: React.FC<Props> = ({
changedKeys.current.add(key);
}
},
[initialFormValues],
[checkIfSingleGroupField, initialFormValues],
);

useEffect(() => {
Expand Down Expand Up @@ -287,75 +314,81 @@ const ContentForm: React.FC<Props> = ({
[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,
});
}
Expand All @@ -371,8 +404,9 @@ const ContentForm: React.FC<Props> = ({
form,
metaForm,
itemId,
onItemCreate,
inputValueGet,
onItemUpdate,
onItemCreate,
]);

const handleMetaUpdate = useCallback(async () => {
Expand Down
Loading

0 comments on commit c1f4ff7

Please sign in to comment.