@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/rule/RuleBasedFieldView.js

@@ -0,0 +1,351 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { RuleConditionValue, } from './Type';
+import { isEmpty } from '../../../utils';
+import { IconBox } from '@tabler/icons-react';
+import { SelectBox } from '../../../ui';
+import { isBlank } from '../../../utils/StringUtil';
+import { RuleCondition } from './RuleCondition';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { getQueryConditionValueType, SearchForm } from '../../../form/SearchForm';
+import { getExternalApiDataWithError } from '../../../misc';
+import { ViewHelpText } from '../../form/ui/ViewHelpText';
+import { ViewFieldError } from '../../form/ui/ViewFieldError';
+import { useLoadingStore } from '../../../loading';
+export const RuleBasedFieldsView = (props) => {
+    // 기본적으로 리스트의 필드들은 검색이 가능하다는 뜻이다.
+    const [condition, setCondition] = useState('AND');
+    const [ruleConditions, setRuleConditions] = useState(new Map());
+    const [fieldErrors, setFieldErrors] = useState(new Map());
+    const [submitError, setSubmitError] = useState('');
+    const [targetRuleFieldEntityForm, setTargetRuleFieldEntityForm] = useState();
+    const { openBaseLoading, setOpenBaseLoading } = useLoadingStore();
+    useEffect(() => {
+        // 넘어온 props.value가 Map인지 확인
+        if (props.value instanceof Map) {
+            setRuleConditions(props.value);
+        }
+        else if (typeof props.value === 'object' && props.value !== null) {
+            // 객체인 경우 Map으로 변환 시도
+            const newMap = new Map(Object.entries(props.value).map(([key, value]) => [
+                Number(key),
+                value,
+            ]));
+            setRuleConditions(newMap);
+        }
+        else {
+            // Map이 아니거나 변환이 불가능한 경우 빈 Map으로 설정
+            setRuleConditions(new Map());
+        }
+        // 대상 엔티티폼이 하나 뿐이라면 굳이 바꿀 필요가 없다.
+        if (props.entityForms.length === 1) {
+            setTargetRuleFieldEntityForm(props.entityForms[0]);
+        }
+    }, []);
+    if (props.entityForms.length === 0) {
+        return null;
+    }
+    const hasConditions = ruleConditions !== undefined && ruleConditions.size > 0;
+    const filtered = isFiltered();
+    function getMaxRuleConditionId() {
+        if (ruleConditions === undefined || ruleConditions.size === 0) {
+            return 0;
+        }
+        const maxId = Math.max(...ruleConditions.keys());
+        return maxId + 1;
+    }
+    const isButton = props.viewType !== 'field';
+    function addNewRuleCondition() {
+        if (condition !== undefined && targetRuleFieldEntityForm !== undefined) {
+            const id = getMaxRuleConditionId();
+            const ruleCondition = new RuleConditionValue(id, condition, targetRuleFieldEntityForm.prefix);
+            const newRuleConditions = new Map(ruleConditions);
+            newRuleConditions.set(id, ruleCondition);
+            setRuleConditions(newRuleConditions);
+            if (!isButton) {
+                // viewType 이 field 면 바뀔 때 마다 자동으로 onSubmit 을 처리한다.
+                props.onSubmitField(newRuleConditions);
+            }
+        }
+    }
+    const targetEntityOptions = [];
+    for (const form of props.entityForms) {
+        targetEntityOptions.push({ label: form.label, value: form.prefix });
+    }
+    function getTargetEntityForm(targetEntityPrefix) {
+        for (const form of props.entityForms) {
+            if (form.prefix === targetEntityPrefix) {
+                return form;
+            }
+        }
+        return props.entityForms[0];
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rcm-rule-wrap", children: [_jsxs("div", { className: `rcm-rule-inner ${isButton ? 'rcm-rule-inner-button' : 'rcm-rule-inner-plain'}`, children: [isButton && (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-rule-icon-badge", children: _jsx(IconBox, { className: "rcm-rule-icon-badge-icon" }) }), _jsx("h5", { className: "rcm-rule-title", children: props.label }), props.helpText && _jsx(ViewHelpText, { helpText: props.helpText })] })), _jsxs("div", { className: 'flex gap-3 items-center', children: [props.entityForms.length > 1 && (_jsx("div", { className: 'min-w-[200px]', children: _jsx(SelectBox, { options: targetEntityOptions, value: targetRuleFieldEntityForm?.prefix ?? '', required: true, onChange: (prefix) => {
+                                                for (const form of props.entityForms) {
+                                                    if (form.prefix === prefix) {
+                                                        setTargetRuleFieldEntityForm(form);
+                                                        break;
+                                                    }
+                                                }
+                                            }, name: 'chooseTargetEntityForm' }) })), _jsx("div", { className: 'min-w-[200px]', children: _jsx(SelectBox, { options: [
+                                                { label: 'AND', value: 'AND' },
+                                                { label: 'OR', value: 'OR' },
+                                            ], value: condition ?? 'AND', required: true, onChange: (condition) => {
+                                                setCondition(condition);
+                                            }, name: 'chooseCondition' }) }), _jsx("div", { children: _jsx("button", { className: 'btn btn-secondary h-[36px]', disabled: condition === undefined || targetRuleFieldEntityForm === undefined, onClick: () => {
+                                                addNewRuleCondition();
+                                            }, children: "\uCD94\uAC00" }) })] })] }), !isBlank(submitError) && (_jsx("div", { className: 'px-2 mt-5', children: _jsx(ViewFieldError, { errors: [submitError] }) }))] }), (function () {
+                if (hasConditions) {
+                    const conditionViews = [];
+                    ruleConditions.forEach((c) => {
+                        conditionViews.push(_jsx(RuleCondition, { id: c.id, condition: c.condition, targetEntityForm: getTargetEntityForm(c.targetEntityPrefix), clearError: () => {
+                                clearErrorById(c.id);
+                            }, fieldErrors: fieldErrors.get(c.id) ?? new Map(), setFieldError: (error) => {
+                                addError(c.id, error);
+                            }, fieldValues: c.values, clearCondition: () => {
+                                clearCondition(c.id);
+                            }, addCondition: (value) => {
+                                const newConditions = new Map(ruleConditions);
+                                newConditions.set(c.id, value);
+                                const newFieldErrors = new Map(fieldErrors);
+                                newFieldErrors.delete(c.id);
+                                setSubmitError('');
+                                setFieldErrors(newFieldErrors);
+                                setRuleConditions(newConditions);
+                                if (!isButton) {
+                                    // viewType 이 field 면 바뀔 때 마다 자동으로 onSubmit 을 처리한다.
+                                    props.onSubmitField(newConditions);
+                                }
+                            } }, c.id));
+                    });
+                    return conditionViews;
+                }
+                return null;
+            })(), props.viewType === 'selector' && (_jsxs("div", { className: 'flex gap-3 items-center justify-center mt-5', children: [_jsx("button", { className: 'btn btn-outline-secondary h-[34px]', onClick: () => {
+                            props.onCancel();
+                        }, children: "\uB2EB\uAE30" }), _jsxs("button", { className: 'btn btn-secondary h-[34px]', disabled: !filtered, onClick: () => {
+                            submit();
+                        }, children: ["\uAC80\uC0C9 \uD6C4 ", props.type === 'add' ? '등록' : '제거'] })] }))] }));
+    function clearError() {
+        setSubmitError('');
+        setFieldErrors(new Map());
+    }
+    /**
+     * 각 컨디션 별 ID 제거
+     * @param id
+     */
+    function clearErrorById(id) {
+        setSubmitError('');
+        const newFieldErrors = new Map(fieldErrors);
+        newFieldErrors.delete(id);
+        setFieldErrors(newFieldErrors);
+    }
+    function addError(id, errors) {
+        const newErrors = new Map(fieldErrors);
+        newErrors.set(id, errors);
+        setFieldErrors(newErrors);
+    }
+    function isFiltered() {
+        if (ruleConditions !== undefined && ruleConditions.size > 0) {
+            let filtered = true;
+            ruleConditions.forEach((ruleCondition) => {
+                if (ruleCondition.isEmpty()) {
+                    filtered = false;
+                    return;
+                }
+            });
+            return filtered;
+        }
+        return false;
+    }
+    function clearCondition(id) {
+        if (isEmpty(ruleConditions)) {
+            return;
+        }
+        const newRuleConditions = new Map(ruleConditions);
+        newRuleConditions.delete(id);
+        setRuleConditions(newRuleConditions);
+        if (!isButton) {
+            // viewType 이 field 면 바뀔 때 마다 자동으로 onSubmit 을 처리한다.
+            props.onSubmitField(newRuleConditions);
+        }
+    }
+    function submit(ruleConditionValue) {
+        setOpenBaseLoading(true);
+        // fieldValues 를 조사한다.
+        clearError();
+        const errors = new Map();
+        const conditions = ruleConditionValue ?? ruleConditions;
+        for (const key of conditions.keys()) {
+            const ruleCondition = conditions.get(key);
+            const ruleError = new Map();
+            ruleCondition.values.forEach((fieldValue) => {
+                const field = getField(fieldValue.name);
+                const currentQueryConditionType = fieldValue.queryConditionType;
+                const currentValueType = getQueryConditionValueType(currentQueryConditionType);
+                if (currentValueType !== 'NONE') {
+                    if (fieldValue.values === undefined ||
+                        fieldValue.values.length === 0 ||
+                        isBlank(fieldValue.values[0])) {
+                        ruleError.set(ruleCondition.id, `${field?.getLabel()} 의 검색어를 입력하세요.`);
+                    }
+                    if (currentValueType === 'RANGE') {
+                        if (fieldValue.values === undefined ||
+                            fieldValue.values.length !== 2 ||
+                            isBlank(fieldValue.values[0]) ||
+                            isBlank(fieldValue.values[1])) {
+                            ruleError.set(ruleCondition.id, `${field?.getLabel()} 의 검색 범위를 알맞게 입력하세요.`);
+                        }
+                    }
+                }
+            });
+            if (ruleError.size > 0) {
+                errors.set(ruleCondition.id, ruleError);
+            }
+        }
+        if (errors.size > 0) {
+            setFieldErrors(errors);
+            setSubmitError('검색 정보를 다시 확인해 주세요.');
+            setOpenBaseLoading(false);
+            return;
+        }
+        const searchForm = new SearchForm();
+        const filterMap = new Map();
+        for (const key of conditions.keys()) {
+            const ruleCondition = conditions.get(key);
+            const fieldValues = ruleCondition.values;
+            const filterItems = [];
+            for (const fieldValue of fieldValues) {
+                const queryConditionType = fieldValue.queryConditionType;
+                const field = getField(fieldValue.name);
+                if (field?.type === 'manyToOne') {
+                    // manyToOneField 인 경우에는 두가지 정보를 모두 서버로 보내자.
+                    // @ManyToOne 으로 매핑되었을 수도 있고, 단순 key 만 저장하고 있을 수도 있기 때문이다.
+                    filterItems.push({
+                        name: fieldValue.name,
+                        queryConditionType: queryConditionType,
+                        value: queryConditionType === 'EQUAL' ? fieldValue.values[0] : undefined,
+                        values: queryConditionType !== 'EQUAL' ? fieldValue.values : undefined,
+                    });
+                    if (!fieldValue.name.endsWith('Id')) {
+                        filterItems.push({
+                            name: fieldValue.name + 'Id',
+                            queryConditionType: queryConditionType,
+                            value: getQueryConditionValueType(queryConditionType) === 'SINGLE'
+                                ? fieldValue.values[0]
+                                : undefined,
+                            values: getQueryConditionValueType(queryConditionType) !== 'SINGLE'
+                                ? fieldValue.values
+                                : undefined,
+                        });
+                    }
+                }
+                else {
+                    filterItems.push({
+                        name: fieldValue.name,
+                        queryConditionType: queryConditionType,
+                        value: queryConditionType === 'EQUAL' ? fieldValue.values[0] : undefined,
+                        values: queryConditionType !== 'EQUAL' ? fieldValue.values : undefined,
+                    });
+                }
+            }
+            const condition = ruleCondition.condition;
+            if (filterMap.has(condition)) {
+                const newFilters = [...filterMap.get(condition)];
+                newFilters.push(...filterItems);
+                filterMap.set(condition, newFilters);
+            }
+            else {
+                filterMap.set(condition, filterItems);
+            }
+        }
+        if (filterMap.has('AND')) {
+            searchForm.withFilterIgnoreDuplicate('AND', ...filterMap.get('AND'));
+        }
+        if (filterMap.has('OR')) {
+            searchForm.withFilterIgnoreDuplicate('OR', ...filterMap.get('OR'));
+        }
+        searchForm.withIgnoreCache(true);
+        if (searchForm.hasFilters()) {
+            if (props.viewType === 'selector') {
+                (async () => {
+                    const response = await getExternalApiDataWithError({
+                        url: props.apiUrl,
+                        method: 'POST',
+                        formData: searchForm,
+                    });
+                    if (response.data !== undefined) {
+                        // 결과는 RuleMappingResult 의 형태로 넘어 온다.
+                        const affected = Number(response.data.affected);
+                        if (affected > 0) {
+                            props.onSubmitSelector(affected);
+                        }
+                        else {
+                            if (isTrue(response.data.duplicated)) {
+                                const found = Number(response.data.found);
+                                setSubmitError(found +
+                                    ' 건의 데이터가 검색되었으나 모두 이미 등록되었습니다. 검색 조건을 다시 설정하거나 닫기를 눌러 주세요.');
+                            }
+                            else {
+                                setSubmitError('해당 검색 설정으로 검색된 데이터가 없습니다. 검색 조건을 다시 설정해 주세요.');
+                            }
+                        }
+                    }
+                    else {
+                        setSubmitError(response.error ?? '오류가 발생했습니다.');
+                    }
+                    setOpenBaseLoading(false);
+                })();
+            }
+            else {
+                // RuleConditionMap 을 그대로 리턴한다.
+                props.onSubmitField(conditions);
+                setOpenBaseLoading(false);
+            }
+        }
+        else {
+            setSubmitError('검색 정보를 설정해야 합니다.');
+            setOpenBaseLoading(false);
+        }
+    }
+    function getField(fieldName) {
+        let field = undefined;
+        for (const form of props.entityForms) {
+            if (props.entityForms.length === 1) {
+                if (form.entityForm !== undefined) {
+                    for (const field of form.entityForm.getListFields()) {
+                        if (field.name === fieldName) {
+                            return field;
+                        }
+                    }
+                }
+                if (form.fields !== undefined) {
+                    for (const field of form.fields) {
+                        if (field.name === fieldName) {
+                            return field;
+                        }
+                    }
+                }
+            }
+            else {
+                const prefix = form.prefix;
+                if (form.entityForm !== undefined) {
+                    for (const field of form.entityForm.getListFields()) {
+                        if (prefix + '.' + field.name === fieldName) {
+                            return field;
+                        }
+                    }
+                }
+                if (form.fields !== undefined) {
+                    for (const field of form.fields) {
+                        if (prefix + '.' + field.name === fieldName) {
+                            return field;
+                        }
+                    }
+                }
+            }
+        }
+        return field;
+    }
+};

package/dist/listgrid/components/fields/rule/RuleBasedSelector.d.ts

@@ -0,0 +1,13 @@
+import { ResultByCount, RuleBasedFieldProps, RuleFieldType } from './Type';
+import { HelpTextType, LabelType } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+interface RuleBasedSelectorProps extends RuleBasedFieldProps {
+    type: RuleFieldType;
+    helpText?: HelpTextType;
+    label?: LabelType;
+    onSubmit?: ResultByCount;
+    entityForm: EntityForm;
+    apiUrl?: string;
+}
+export declare const RuleBasedSelector: ({ ...props }: RuleBasedSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/rule/RuleBasedSelector.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Paper } from '../../../ui';
+import { Modal } from '../../../ui';
+import { getConditionalReactNode } from '../../../config/Config';
+import { RuleBasedFieldsView } from './RuleBasedFieldView';
+import { useSession } from '../../../auth';
+export const RuleBasedSelector = ({ ...props }) => {
+    const entityForm = props.entityForm;
+    const apiUrl = getApiUrl(props.apiUrl ?? entityForm.getUrl(), props.type, props.parentId ?? '');
+    const [open, setOpen] = useState(false);
+    const [label, setLabel] = useState();
+    const [helpText, setHelpText] = useState();
+    const session = useSession();
+    /**
+     * RuleBasedSelector 를 FormField 의 render 에서 사용할 수 있도록 label 과 helpText 를 맞춘다.
+     */
+    useEffect(() => {
+        if (props.label === undefined) {
+            if (props.fieldName !== undefined) {
+                const label = entityForm.getLabel(props.fieldName);
+                setLabel(label);
+            }
+            else {
+                setLabel(props.type === 'add' ? '검색 후 등록' : '검색 후 제거');
+            }
+        }
+        else {
+            //
+            if (typeof props.label === 'boolean') {
+                setLabel(props.type === 'add' ? '검색 후 등록' : '검색 후 제거');
+            }
+            else {
+                setLabel(props.label);
+            }
+        }
+        if (props.helpText === undefined) {
+            if (props.fieldName !== undefined) {
+                (async () => {
+                    const label = await entityForm.getHelpText(props.fieldName);
+                    setHelpText(label);
+                })();
+            }
+            else {
+                setHelpText('');
+            }
+        }
+        else {
+            //
+            (async () => {
+                const helpText = await getConditionalReactNode({ entityForm, renderType: entityForm?.getRenderType(), session: session }, props.helpText);
+                setHelpText(helpText);
+            })();
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: 'btn btn-outline-secondary h-[34px]', onClick: () => {
+                    setOpen(true);
+                }, children: label }), _jsx(Modal, { opened: open, size: '5xl', onClose: () => {
+                    setOpen(false);
+                }, children: _jsx(Paper, { children: _jsx(RuleBasedFieldsView, { ...props, label: label, entityForms: [{ label: '', prefix: '', entityForm: entityForm }], helpText: helpText, apiUrl: apiUrl, viewType: 'selector', onSubmitSelector: props.onSubmit !== undefined
+                            ? props.onSubmit
+                            : (count) => {
+                                setOpen(false);
+                                props.setNotifications?.([
+                                    `${count} 건의 데이터가 ${props.type === 'add' ? '등록' : '제거'} 되었습니다.`,
+                                ]);
+                                props.onRefresh?.();
+                            }, onCancel: () => {
+                            setOpen(false);
+                        } }) }) })] }));
+};
+function getApiUrl(apiUrl, type, parentId) {
+    return `${apiUrl}/${type}/${parentId}`;
+}

package/dist/listgrid/components/fields/rule/RuleCondition.d.ts

@@ -0,0 +1,14 @@
+import { RuleConditionValue, RuleFieldEntityForm, RuleFieldValue } from './Type';
+interface RuleConditionProps {
+    id: number;
+    condition: 'AND' | 'OR';
+    fieldValues: RuleFieldValue[];
+    targetEntityForm: RuleFieldEntityForm;
+    clearError: () => void;
+    clearCondition: () => void;
+    addCondition: (value: RuleConditionValue) => void;
+    fieldErrors: Map<number, string>;
+    setFieldError: (error: Map<number, string>) => void;
+}
+export declare const RuleCondition: (props: RuleConditionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/rule/RuleCondition.js

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbstractDateField } from '../abstract';
+import { useEffect, useState } from 'react';
+import { getQueryConditionHelpText, getQueryConditionTypes, getQueryConditionValueType, } from '../../../form/SearchForm';
+import { SelectBox } from '../../../ui';
+import { isBlank } from '../../../utils/StringUtil';
+import { TagsInput } from '../../../ui';
+import { IconCircleX } from '@tabler/icons-react';
+import { getConfiguredFields, RuleConditionValue, } from './Type';
+import { isEmpty } from '../../../utils';
+import { RuleFieldRenderer } from './RuleFieldRenderer';
+import { ViewFieldError } from '../../form/ui/ViewFieldError';
+import { ViewHelpText } from '../../form/ui/ViewHelpText';
+export const RuleCondition = (props) => {
+    const { id, targetEntityForm, clearError, clearCondition } = props;
+    const [fieldValues, setFieldValues] = useState(props.fieldValues);
+    const [fieldErrors, setFieldErrors] = useState();
+    const [selected, setSelected] = useState();
+    useEffect(() => {
+        setFieldErrors(props.fieldErrors);
+    }, [props.fieldErrors]);
+    function changeValue(index, value) {
+        setFieldValues((prevFieldValues) => {
+            const newFieldValues = [...prevFieldValues];
+            newFieldValues[index].values = value;
+            changeFilterValues(newFieldValues);
+            return newFieldValues;
+        });
+    }
+    /*
+    function changeValue(index: number, value: any) {
+      const newFieldValues = [...fieldValues];
+      newFieldValues[index].values = value;
+      changeFilterValues(newFieldValues);
+    }*/
+    function changeFilterValues(newFieldValues) {
+        clearError();
+        setFieldValues(newFieldValues);
+        const ruleCondition = new RuleConditionValue(id, props.condition, props.targetEntityForm.prefix).withValues(newFieldValues);
+        props.addCondition(ruleCondition);
+    }
+    function changeQueryConditionType(index, type) {
+        const newFieldValues = [...fieldValues];
+        newFieldValues[index].queryConditionType = type;
+        newFieldValues[index].values = [];
+        changeFilterValues(newFieldValues);
+    }
+    function getMaxConditionId() {
+        if (isEmpty(fieldValues)) {
+            return 0;
+        }
+        let maxId = 0;
+        for (const filter of fieldValues) {
+            if (filter.id > maxId) {
+                maxId = filter.id;
+            }
+        }
+        return maxId + 1;
+    }
+    if ((targetEntityForm.fields === undefined || targetEntityForm.fields.length === 0) &&
+        targetEntityForm.entityForm === undefined) {
+        // 아무 것도 할 수 있는게 없다.
+        return _jsx("div", { children: "Rule \uC744 \uCC98\uB9AC\uD558\uB824\uBA74 EntityForm \uC774\uB098 \uB300\uC0C1 \uD544\uB4DC\uB97C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4." });
+    }
+    const fields = getConfiguredFields(targetEntityForm);
+    const fieldOptions = [];
+    for (const field of fields) {
+        fieldOptions.push({
+            label: field.label + '',
+            value: field.name,
+        });
+    }
+    return (_jsx("div", { className: "rcm-rule-wrap", children: _jsxs("div", { className: "rcm-rule-condition-box", children: [_jsxs("div", { className: 'form-input w-fit flex relative mt-[-20px] space-x-2 items-center', children: [_jsx("div", { children: props.condition }), _jsx("div", { children: "\uC870\uAC74" }), _jsx("div", { children: _jsx("button", { className: 'mt-1', onClick: () => {
+                                    clearCondition();
+                                }, children: _jsx(IconCircleX, { className: "max-w-4" }) }) })] }), _jsxs("div", { className: 'flex gap-3 items-center mt-3', children: [_jsx("div", { className: 'min-w-[200px]', children: _jsx(SelectBox, { options: fieldOptions, required: true, onChange: (fieldName) => {
+                                    const field = fields.find((f) => f.name === fieldName);
+                                    setSelected(field?.name);
+                                }, name: 'targetField' }) }), _jsx("div", { className: 'flex gap-3 items-center', children: _jsx("button", { className: 'btn btn-secondary h-[36px]', disabled: !selected, onClick: () => {
+                                    const newFieldValues = [...fieldValues];
+                                    const field = fields.find((f) => f.name === selected);
+                                    const queryConditionTypes = getQueryConditionTypes(field);
+                                    newFieldValues.push({
+                                        id: getMaxConditionId(),
+                                        name: selected,
+                                        queryConditionType: queryConditionTypes[0].value,
+                                        values: [],
+                                    });
+                                    setFieldValues(newFieldValues);
+                                }, children: "\uC120\uD0DD" }) })] }), (function () {
+                    return fieldValues.map((fieldValue, index) => {
+                        const field = fields.find((f) => f.name === fieldValue.name);
+                        if (!field) {
+                            return null;
+                        }
+                        const currentQueryConditionType = fieldValue.queryConditionType;
+                        const currentValueType = getQueryConditionValueType(currentQueryConditionType);
+                        const helpText = getQueryConditionHelpText(field.getLabel(), currentQueryConditionType);
+                        return (_jsxs("div", { children: [_jsx("div", { className: 'font-bold mt-5', children: field?.label }), _jsxs("div", { className: 'flex gap-3 items-center', children: [_jsx("div", { className: 'min-w-[200px] max-w-[200px]', children: _jsx(SelectBox, { options: getQueryConditionTypes(field), value: fieldValue.queryConditionType, required: true, onChange: (type) => {
+                                                    changeQueryConditionType(index, type);
+                                                }, name: `queryConditionType${index}` }) }), _jsx("div", { className: 'w-full flex', children: (function () {
+                                                const fields = [];
+                                                if (field.type === 'manyToOne') {
+                                                    // manyToOneField 라면 required 를 제외해야 한다.
+                                                    // 이게 required 가 되면 필드 clear 가 안 된다.
+                                                    field.withRequired(false);
+                                                }
+                                                else {
+                                                    field.withRequired(true);
+                                                }
+                                                if (currentValueType === 'SINGLE') {
+                                                    const currentValue = fieldValue.values !== undefined && fieldValue.values.length > 0
+                                                        ? fieldValue.values[0]
+                                                        : '';
+                                                    fields.push(_jsx("div", { className: 'w-full', children: _jsx(RuleFieldRenderer, { field: field
+                                                                .clone()
+                                                                // required 를 넣어서 optional field 의 선택안함 옵션을 제거한다.
+                                                                .withValue(currentValue), onChange: (value) => {
+                                                                if (field.type === 'manyToOne') {
+                                                                    changeValue(index, isBlank(value) ? [] : [value.id]);
+                                                                }
+                                                                else {
+                                                                    changeValue(index, [value]);
+                                                                }
+                                                            } }) }, `${fieldValue.name}_${index}`));
+                                                }
+                                                else if (currentValueType === 'RANGE') {
+                                                    // 단일 필드로 Range 를 지원하는 필드 타입은 날짜 뿐이다.
+                                                    if (field instanceof AbstractDateField) {
+                                                        const cloned = field
+                                                            .clone(true)
+                                                            .withRange(true)
+                                                            .withValue(fieldValue.values);
+                                                        return (_jsx("div", { className: 'w-full', children: _jsx(RuleFieldRenderer, { field: cloned, onChange: (value) => {
+                                                                    if (Array.isArray(value) && value.length === 2) {
+                                                                        changeValue(index, [...value]);
+                                                                    }
+                                                                } }) }));
+                                                    }
+                                                    else {
+                                                        const currentValue1 = fieldValue.values !== undefined && fieldValue.values.length > 0
+                                                            ? fieldValue.values[0]
+                                                            : '';
+                                                        const currentValue2 = fieldValue.values !== undefined && fieldValue.values.length > 1
+                                                            ? fieldValue.values[1]
+                                                            : '';
+                                                        const field1 = field.clone(true).withRange(true).withValue(currentValue1);
+                                                        const field2 = field.clone(true).withRange(true).withValue(currentValue2);
+                                                        return (_jsxs("div", { className: 'flex justify-between', children: [_jsx(RuleFieldRenderer, { field: field1, onChange: (value) => {
+                                                                        changeValue(index, [...value]);
+                                                                    } }), ' ', "~", _jsx(RuleFieldRenderer, { field: field2, onChange: (value) => {
+                                                                        changeValue(index, [...value]);
+                                                                    } })] }, `${fieldValue.name}_${index}`));
+                                                    }
+                                                }
+                                                else if (currentValueType === 'MULTIPLE') {
+                                                    // multiple field 는 tags 뿐이다.
+                                                    const currentValue = fieldValue.values !== undefined && fieldValue.values.length > 0
+                                                        ? fieldValue.values
+                                                        : [];
+                                                    fields.push(_jsx(TagsInput, { size: 'md', value: currentValue, clearable: true, onChange: (value) => {
+                                                            changeValue(index, [...value]);
+                                                        } }, `${fieldValue.name}_${index}`));
+                                                }
+                                                return fields;
+                                            })() }), _jsx("button", { onClick: () => {
+                                                const newFieldValues = [...fieldValues];
+                                                newFieldValues.splice(index, 1);
+                                                changeFilterValues(newFieldValues);
+                                            }, children: _jsx(IconCircleX, { className: "max-w-4" }) })] }), fieldErrors?.has(index) && (_jsx("div", { className: 'px-2', children: _jsx(ViewFieldError, { errors: [fieldErrors.get(index)] }) })), _jsx("div", { className: 'px-2', children: _jsx(ViewHelpText, { helpText: `${helpText}` }) })] }, index));
+                    });
+                })()] }) }));
+};

package/dist/listgrid/components/fields/rule/RuleFieldRenderer.d.ts

@@ -0,0 +1,7 @@
+import { FormField } from '../abstract';
+interface RuleFieldRendererProps {
+    field: FormField<any>;
+    onChange: (value: any) => void;
+}
+export declare const RuleFieldRenderer: (props: RuleFieldRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/rule/RuleFieldRenderer.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { useSession } from '../../../auth';
+export const RuleFieldRenderer = (props) => {
+    const field = props.field;
+    const [view, setView] = useState();
+    const session = useSession();
+    useEffect(() => {
+        (async () => {
+            const viewParams = {
+                entityForm: new EntityForm('temp', ''),
+                onChange: props.onChange,
+                required: await field.isRequired({ session }),
+            };
+            setView(await field.render(viewParams));
+        })();
+    }, []);
+    return (_jsx("div", { children: _jsx("div", { className: 'flex items-center', children: view }) }));
+};