diff --git a/web/src/components/molecules/Common/MultiValueField/index.tsx b/web/src/components/molecules/Common/MultiValueField/index.tsx index 43de23d37..221601bcb 100644 --- a/web/src/components/molecules/Common/MultiValueField/index.tsx +++ b/web/src/components/molecules/Common/MultiValueField/index.tsx @@ -115,7 +115,7 @@ const MultiValueField: React.FC = ({ type="primary" onClick={() => { const currentValues = value || []; - const defaultValue = props.type === "date" ? dayjs() : ""; + const defaultValue = ""; if (Array.isArray(currentValues)) { onChange?.([...currentValues, defaultValue]); } else { diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx index a83cd8935..ca4518644 100644 --- a/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx +++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/BoolField.tsx @@ -8,11 +8,10 @@ import FieldTitle from "../../FieldTitle"; type BoolFieldProps = { field: Field; itemGroupId?: string; - onMetaUpdate?: () => void; disabled: boolean; }; -const BoolField: React.FC = ({ field, itemGroupId, onMetaUpdate, disabled }) => { +const BoolField: React.FC = ({ field, itemGroupId, disabled }) => { return ( = ({ field, itemGroupId, onMetaUpdate, valuePropName="checked" label={}> {field.multiple ? ( - + ) : ( - + )} ); diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx index d3f2bbf9d..e2d97b153 100644 --- a/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx +++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/CheckboxField.tsx @@ -7,11 +7,10 @@ import FieldTitle from "../../FieldTitle"; type CheckboxFieldProps = { field: Field; - onMetaUpdate?: () => void; disabled: boolean; }; -const CheckboxField: React.FC = ({ field, onMetaUpdate, disabled }) => { +const CheckboxField: React.FC = ({ field, disabled }) => { return ( = ({ field, onMetaUpdate, disa valuePropName="checked" label={}> {field.multiple ? ( - + ) : ( - + )} ); diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx index ad4504613..328a886c1 100644 --- a/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx +++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/DateField.tsx @@ -12,11 +12,10 @@ import { requiredValidator } from "../utils"; type DateFieldProps = { field: Field; itemGroupId?: string; - onMetaUpdate?: () => void; disabled: boolean; }; -const DateField: React.FC = ({ field, itemGroupId, onMetaUpdate, disabled }) => { +const DateField: React.FC = ({ field, itemGroupId, disabled }) => { const t = useT(); return ( @@ -32,14 +31,9 @@ const DateField: React.FC = ({ field, itemGroupId, onMetaUpdate, name={itemGroupId ? [field.id, itemGroupId] : field.id} label={}> {field.multiple ? ( - + ) : ( - + )} ); diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx index b0de42cce..2a51babc2 100644 --- a/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx +++ b/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx @@ -10,11 +10,10 @@ import FieldTitle from "../../FieldTitle"; type TagFieldProps = { field: Field; - onMetaUpdate?: () => void; disabled: boolean; }; -const TagField: React.FC = ({ field, onMetaUpdate, disabled }) => { +const TagField: React.FC = ({ field, disabled }) => { const t = useT(); return ( @@ -30,7 +29,6 @@ const TagField: React.FC = ({ field, onMetaUpdate, disabled }) => label={}> {field.multiple ? ( <>{props.label}} allowClear @@ -42,7 +40,7 @@ const TagField: React.FC = ({ field, onMetaUpdate, disabled }) => ))} ) : ( - {field.typeProperty?.tags?.map((tag: { id: string; name: string; color: string }) => ( diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx index ff7f7e216..0d65ec242 100644 --- a/web/src/components/molecules/Content/Form/index.tsx +++ b/web/src/components/molecules/Content/Form/index.tsx @@ -451,7 +451,6 @@ const ContentForm: React.FC = ({ ]); const handleMetaUpdate = useCallback(async () => { - if (!itemId) return; try { const metaFields = await metaFieldsGet(); await onMetaItemUpdate({ @@ -461,20 +460,48 @@ const ContentForm: React.FC = ({ } catch (info) { console.log("Validate Failed:", info); } - }, [itemId, metaFieldsGet, onMetaItemUpdate, item?.metadata?.id]); + }, [metaFieldsGet, onMetaItemUpdate, item?.metadata?.id]); - const handleMetaValuesChange = useCallback(async () => { - if (itemId) return; - try { - await metaForm.validateFields(); - } catch (e) { - if ((e as ValidateErrorEntity).errorFields.length > 0) { - setIsDisabled(true); - return; + const timeout = useRef | null>(null); + + const handleMetaValuesChange = useCallback( + async (changedValues: Record) => { + if (itemId) { + if (timeout.current) { + clearTimeout(timeout.current); + timeout.current = null; + } + const [key, value] = Object.entries(changedValues)[0]; + const initialValue = initialMetaFormValues[key]; + if (Array.isArray(value)) { + // use checkIfEmpty + const noEmptyValuesLength = value.filter( + v => !(v === undefined || v === null || v === ""), + ).length; + if ( + noEmptyValuesLength === value.length || + (noEmptyValuesLength && !initialValue) || + (Array.isArray(initialValue) && noEmptyValuesLength !== initialValue.length) + ) { + timeout.current = setTimeout(handleMetaUpdate, 800); + } + } else if (value !== initialValue) { + timeout.current = setTimeout(handleMetaUpdate, 800); + } + } else { + try { + await metaForm.validateFields(); + } catch (e) { + if ((e as ValidateErrorEntity).errorFields.length > 0) { + setIsDisabled(true); + return; + } + } + setIsDisabled(false); } - } - setIsDisabled(false); - }, [itemId, metaForm]); + }, + [handleMetaUpdate, initialMetaFormValues, itemId, metaForm], + ); const items: MenuProps["items"] = useMemo(() => { const menuItems = [ @@ -702,11 +729,7 @@ const ContentForm: React.FC = ({ const FieldComponent = FIELD_TYPE_COMPONENT_MAP[field.type]; return ( - + ); })}