diff --git a/web/src/components/molecules/Common/Form/GroupItem/index.tsx b/web/src/components/molecules/Common/Form/GroupItem/index.tsx index ff7463beb..183ce8f8e 100644 --- a/web/src/components/molecules/Common/Form/GroupItem/index.tsx +++ b/web/src/components/molecules/Common/Form/GroupItem/index.tsx @@ -61,7 +61,11 @@ type Props = { disableMoveDown?: boolean; onGetAsset: (assetId: string) => Promise; onGroupGet: (id: string) => Promise; - onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference?: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; }; const GroupItem: React.FC = ({ diff --git a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx index 5e38b6d7b..021a91124 100644 --- a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx +++ b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx @@ -59,7 +59,11 @@ type Props = { setUploadModalVisibility?: (visible: boolean) => void; onGetAsset: (assetId: string) => Promise; onGroupGet: (id: string) => Promise; - onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference?: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; }; const MultiValueGroup: React.FC = ({ diff --git a/web/src/components/molecules/Content/Details/index.tsx b/web/src/components/molecules/Content/Details/index.tsx index d3a1a2e32..8b5c2ca16 100644 --- a/web/src/components/molecules/Content/Details/index.tsx +++ b/web/src/components/molecules/Content/Details/index.tsx @@ -100,7 +100,11 @@ type Props = { onAddItemToRequestModalOpen: () => void; onGetAsset: (assetId: string) => Promise; onGroupGet: (id: string) => Promise; - onCheckItemReference: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; onNavigateToRequest: (id: string) => void; }; diff --git a/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx b/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx index d5cfed8a2..b29493be7 100644 --- a/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx +++ b/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx @@ -6,6 +6,7 @@ import Button from "@reearth-cms/components/atoms/Button"; import Icon from "@reearth-cms/components/atoms/Icon"; import LinkItemModal from "@reearth-cms/components/molecules/Content/LinkItemModal"; import ReferenceItem from "@reearth-cms/components/molecules/Content/ReferenceItem"; +import { CorrespondingField } from "@reearth-cms/components/molecules/Schema/types"; import { useT } from "@reearth-cms/i18n"; import { FormItem } from "../../types"; @@ -15,10 +16,12 @@ type Props = { value?: string; disabled?: boolean; loading?: boolean; - correspondingFieldId: string; + fieldId: string; + itemGroupId?: string; + formItemsData?: FormItem[]; + correspondingField?: CorrespondingField; modelId?: string; titleFieldId?: string | null; - formItemsData?: FormItem[]; linkItemModalTitle?: string; linkItemModalTotalCount?: number; linkItemModalPage?: number; @@ -27,7 +30,11 @@ type Props = { onSearchTerm?: (term?: string) => void; onLinkItemTableReload?: () => void; onLinkItemTableChange?: (page: number, pageSize: number) => void; - onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference?: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; onChange?: (value?: string) => void; }; @@ -36,7 +43,9 @@ const ReferenceFormItem: React.FC = ({ value, disabled, loading, - correspondingFieldId, + fieldId, + itemGroupId, + correspondingField, modelId, titleFieldId, formItemsData, @@ -111,7 +120,9 @@ const ReferenceFormItem: React.FC = ({ void; onGetAsset: (assetId: string) => Promise; onGroupGet: (id: string) => Promise; - onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference?: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; }; const GroupField: React.FC = ({ diff --git a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/ReferenceField.tsx b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/ReferenceField.tsx index 96d87c2f6..cf179e4e2 100644 --- a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/ReferenceField.tsx +++ b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/ReferenceField.tsx @@ -20,7 +20,11 @@ type ReferenceFieldProps = { onSearchTerm?: (term?: string) => void; onLinkItemTableReload?: () => void; onLinkItemTableChange?: (page: number, pageSize: number) => void; - onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference?: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; }; const ReferenceField: React.FC = ({ @@ -55,18 +59,20 @@ const ReferenceField: React.FC = ({ label={}> void; onGetAsset: (assetId: string) => Promise; onGroupGet: (id: string) => Promise; - onCheckItemReference: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; onNavigateToRequest: (id: string) => void; }; diff --git a/web/src/components/molecules/Content/LinkItemModal/index.tsx b/web/src/components/molecules/Content/LinkItemModal/index.tsx index 12a372c7d..76ee255a1 100644 --- a/web/src/components/molecules/Content/LinkItemModal/index.tsx +++ b/web/src/components/molecules/Content/LinkItemModal/index.tsx @@ -11,6 +11,7 @@ import { } from "@reearth-cms/components/atoms/ProTable"; import Search from "@reearth-cms/components/atoms/Search"; import ResizableProTable from "@reearth-cms/components/molecules/Common/ResizableProTable"; +import { CorrespondingField } from "@reearth-cms/components/molecules/Schema/types"; import { useT } from "@reearth-cms/i18n"; import { dateTimeFormat } from "@reearth-cms/utils/format"; @@ -21,7 +22,9 @@ import useHooks from "./hooks"; type Props = { visible: boolean; loading: boolean; - correspondingFieldId: string; + fieldId: string; + itemGroupId?: string; + correspondingField?: CorrespondingField; linkedItemsModalList?: FormItem[]; linkedItem?: string; linkItemModalTitle?: string; @@ -33,13 +36,19 @@ type Props = { onLinkItemTableChange: (page: number, pageSize: number) => void; onLinkItemModalCancel: () => void; onChange?: (value: string) => void; - onCheckItemReference: (value: string, correspondingFieldId: string) => Promise; + onCheckItemReference: ( + itemId: string, + correspondingFieldId: string, + groupId?: string, + ) => Promise; }; const LinkItemModal: React.FC = ({ visible, loading, - correspondingFieldId, + fieldId, + itemGroupId, + correspondingField, linkedItemsModalList, linkedItem, linkItemModalTitle, @@ -69,16 +78,27 @@ const LinkItemModal: React.FC = ({ [onLinkItemTableReload], ); + const handleChange = useCallback( + (value: string) => { + onChange?.(value); + onLinkItemModalCancel(); + }, + [onChange, onLinkItemModalCancel], + ); + const handleClick = useCallback( async (link: boolean, item: FormItem) => { if (!link) { - onChange?.(""); - onLinkItemModalCancel(); + handleChange(""); return; } - const isReferenced = await onCheckItemReference(item.id, correspondingFieldId); + if (!correspondingField) { + handleChange(item.id); + return; + } + const isReferenced = await onCheckItemReference(item.id, fieldId, itemGroupId); if (isReferenced) { confirm({ title: t("This item has been referenced"), @@ -87,16 +107,14 @@ const LinkItemModal: React.FC = ({ ), icon: , onOk() { - onChange?.(item.id); - onLinkItemModalCancel(); + handleChange(item.id); }, }); } else { - onChange?.(item.id); - onLinkItemModalCancel(); + handleChange(item.id); } }, - [confirm, correspondingFieldId, onChange, onCheckItemReference, onLinkItemModalCancel, t], + [confirm, correspondingField, fieldId, handleChange, itemGroupId, onCheckItemReference, t], ); const columns: StretchColumn[] = useMemo( diff --git a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts index e670b5704..47d0fc900 100644 --- a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts +++ b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts @@ -567,13 +567,19 @@ export default () => { }); const handleCheckItemReference = useCallback( - async (value: string, correspondingFieldId: string) => { + async (itemId: string, correspondingFieldId: string, groupId?: string) => { + const initialValue = groupId + ? initialFormValues[groupId][correspondingFieldId] + : initialFormValues[correspondingFieldId]; + if (initialValue === itemId) { + return false; + } const res = await checkIfItemIsReferenced({ - variables: { itemId: value ?? "", correspondingFieldId }, + variables: { itemId, correspondingFieldId }, }); return res.data?.isItemReferenced ?? false; }, - [checkIfItemIsReferenced], + [checkIfItemIsReferenced, initialFormValues], ); const title = useMemo(() => {