@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/view/TreeSelectView.js

@@ -0,0 +1,118 @@
+'use client';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Tree } from '../../../ui';
+import { LoadingOverlay } from '../../../ui';
+import { getExternalApiDataWithError } from '../../../misc';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { Tooltip } from '../../../ui';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+export const TreeSelectView = ({ readonly = false, ...props }) => {
+    const [treeData, setTreeData] = useState([]);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(true);
+    const selectable = isTrue(props.selectable, true);
+    const config = props.tree;
+    useEffect(() => {
+        if (props.tree.treeData !== undefined) {
+            setTreeData(props.tree.treeData);
+            setLoading(false);
+        }
+        else {
+            fetchTreeData();
+        }
+    }, []);
+    if (loading)
+        return (_jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[200px]' })] }));
+    if (isEmpty(treeData)) {
+        return _jsx("div", { children: "\uB4F1\uB85D\uB41C \uB370\uC774\uD130\uAC00 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." });
+    }
+    return (_jsxs("div", { children: [_jsx("div", { className: 'text-danger text-sm pb-2', children: error }), _jsx("div", { className: 'flex items-start min-h-[200px] w-full', children: _jsx(Tree, { data: treeData, className: 'w-full', levelOffset: 20, expandOnClick: false, selectOnClick: selectable, maxHeight: "60vh" // Enable auto scroll for long trees
+                    , enhancedRendering: true, levelStyles: {
+                        fontWeight: true, // Apply font weight differentiation by level
+                    }, renderNode: selectable
+                        ? ({ level, node, tree, expanded, hasChildren, elementProps, }) => {
+                            // Only customize rendering when selection is needed
+                            // 선택이 필요한 경우에만 렌더링 커스터마이징
+                            return (_createElement("div", { ...elementProps, key: `${node.value}-${level}`, className: "rcm-tree-node", style: { paddingLeft: `${(level - 1) * 20}px` } },
+                                _jsx("div", { className: "rcm-tree-node-icon-wrap", children: hasChildren ? (_jsx("button", { className: "rcm-tree-node-toggle", onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            tree.toggleExpanded(node.value);
+                                        }, "aria-label": expanded ? 'Collapse' : 'Expand', children: expanded ? (_jsx(IconChevronDown, { size: 14 })) : (_jsx(IconChevronRight, { size: 14 })) })) : (_jsx("div", { className: "rcm-tree-node-leaf", children: _jsx("div", { className: "rcm-tree-node-leaf-dot" }) })) }),
+                                (isTrue(config.rootSelectable, true) || level !== 1) &&
+                                    (isTrue(config.leafSelectable, true) || hasChildren) ? (_jsx(Tooltip, { label: `${node.label} 선택`, zIndex: 10000, children: _jsx("button", { className: "rcm-tree-node-btn", onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            if (readonly)
+                                                return;
+                                            let disabled = config.exceptId !== undefined && config.exceptId === node.value;
+                                            if (!disabled) {
+                                                if (isNodeInExceptTree(node, config.exceptId)) {
+                                                    disabled = true;
+                                                }
+                                            }
+                                            if (disabled) {
+                                                setError('자기 자신 또는 자기 자신의 하위 데이터는 선택할 수 없습니다.');
+                                                return;
+                                            }
+                                            setError('');
+                                            props.onSelect({ id: node.value, name: node.label });
+                                        }, children: node.label }) })) : (_jsx("span", { className: "rcm-tree-node-span", children: node.label }))));
+                        }
+                        : undefined }) })] }));
+    function fetchTreeData() {
+        if (config.treeData !== undefined) {
+            setTreeData(config.treeData);
+        }
+        else {
+            const fetchConfig = config.fetch;
+            const url = fetchConfig.url;
+            const method = fetchConfig.method ?? 'GET';
+            const requestBody = fetchConfig.requestBody;
+            const convert = fetchConfig.convert;
+            (async () => {
+                const response = await getExternalApiDataWithError({
+                    url: url,
+                    method: method,
+                    formData: method === 'GET' ? undefined : requestBody,
+                });
+                if (response.data) {
+                    if (convert !== undefined) {
+                        response.data = convert(response.data);
+                    }
+                    setTreeData(response.data);
+                    setLoading(false);
+                }
+                else {
+                    setError(response.error ?? '데이터를 조회할 수 없습니다.');
+                    setLoading(false);
+                }
+            })();
+        }
+    }
+    function isNodeInExceptTree(node, exceptId) {
+        if (!exceptId)
+            return false;
+        // Define a recursive function to search for exceptId in the tree
+        const searchTree = (currentNode) => {
+            if (!currentNode)
+                return false;
+            if (currentNode.value === exceptId)
+                return true;
+            if (currentNode.children) {
+                for (const child of currentNode.children) {
+                    if (searchTree(child)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        return searchTree(node);
+    }
+    function isEmpty(data) {
+        return data.length === 0;
+    }
+};

package/dist/listgrid/components/fields/view/XrefAvailableDateMappingView.d.ts

@@ -0,0 +1,19 @@
+import { InputRendererProps } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+import { FilterItem } from '../../../form/SearchForm';
+interface XrefAvailableDateMappingViewProps extends InputRendererProps {
+    entityForm: EntityForm;
+    requiredAvailable?: boolean;
+    parentEntityForm?: EntityForm;
+    filters?: FilterItem[] | ((entityForm: EntityForm, parentEntityForm?: EntityForm) => Promise<FilterItem[]>);
+}
+export interface XrefAvailableDateMappingValue {
+    mapped?: XrefAvailableDateValue[];
+}
+export interface XrefAvailableDateValue {
+    id: string;
+    availableAt?: string;
+    availableUntil?: string;
+}
+export declare const XrefAvailableDateMappingView: ({ entityForm, ...props }: XrefAvailableDateMappingViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/view/XrefAvailableDateMappingView.js

@@ -0,0 +1,305 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EntityForm } from '../../../config/EntityForm';
+import { useEffect, useState } from 'react';
+import { LoadingOverlay } from '../../../ui';
+import { useModalManagerStore } from '../../../store';
+import { ViewListGrid } from '../../list/ViewListGrid';
+import { ListGrid } from '../../../config/ListGrid';
+import { SearchForm } from '../../../form/SearchForm';
+import { isEmpty } from '../../../utils';
+import { ManyToOneField } from '../ManyToOneField';
+import { DatetimeField } from '../DatetimeField';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+import { StringField } from '../StringField';
+import { EntityFormButton } from '../../../config/EntityFormButton';
+import { fDate, fDateTime } from '../../../misc';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { Tooltip } from '../../../ui';
+import { Paper } from '../../../ui';
+const AvailableMappingEntityForm = (mapping) => {
+    const mappingField = new ManyToOneField(mapping.name, 100, mapping.config)
+        .withLabel(mapping.label)
+        .withRequired(true);
+    if (mapping.value !== undefined) {
+        const exceptIds = [];
+        mapping.value.forEach((value) => {
+            exceptIds.push(value.id);
+        });
+        if (exceptIds.length > 0) {
+            if (mappingField.config.filter === undefined) {
+                mappingField.config.filter = [];
+            }
+            mappingField.config.filter.push(async (entityForm) => {
+                const filterItems = [];
+                if (!isEmpty(exceptIds)) {
+                    filterItems.push({ name: 'id', queryConditionType: 'NOT_IN', values: exceptIds });
+                }
+                if (mapping.filter !== undefined) {
+                    if (typeof mapping.filter === 'function') {
+                        const filterItems = await mapping.filter(entityForm, mapping.parentEntityForm);
+                        filterItems.push(...filterItems);
+                    }
+                    else {
+                        filterItems.push(...mapping.filter);
+                    }
+                }
+                return Promise.resolve(filterItems);
+            });
+        }
+    }
+    return new EntityForm('유효기간', '').addFields({
+        items: [
+            mappingField,
+            new DatetimeField('available', 200, undefined, true)
+                .withLabel('유효기간')
+                .withRequired(mapping.requiredAvailable),
+        ],
+    });
+};
+function getDatetimeFromMappingValue(value) {
+    const available = [];
+    if (value) {
+        const availableArrays = value.split(' ~ ');
+        available.push(new Date(availableArrays[0]));
+        available.push(new Date(availableArrays[1]));
+    }
+    return available;
+}
+function getCroppedDate(value) {
+    const available = getDatetimeFromMappingValue(value);
+    return fDate(available[0]) + ' ~ ' + fDate(available[1]);
+}
+export const XrefAvailableDateMappingView = ({ entityForm, ...props }) => {
+    const requiredAvailable = isTrue(props.requiredAvailable);
+    const readonly = props.readonly ?? false;
+    const label = props.label;
+    let labelText;
+    if (label) {
+        if (typeof label === 'string') {
+            labelText = label ?? '유효기간 관리';
+        }
+        else {
+            labelText = '유효기간 관리';
+        }
+    }
+    const { openModal, closeModal } = useModalManagerStore();
+    const [value, setValue] = useState(props.value);
+    const [listKey, setListKey] = useState('init');
+    const [onEditEntityForm, setOnEditEntityForm] = useState();
+    const [filters, setFilters] = useState([]);
+    useEffect(() => {
+        if (props.filters) {
+            (async () => {
+                if (typeof props.filters === 'function') {
+                    const filters = await props.filters(entityForm, props.parentEntityForm);
+                    setFilters(filters);
+                }
+                else {
+                    setFilters(props.filters ?? []);
+                }
+            })();
+        }
+    }, [props.filters]);
+    const mappingValue = {};
+    function setValueAndReload(val) {
+        setValue(val);
+        setOnEditEntityForm(undefined);
+        setListKey(new Date().getTime().toString());
+        props.onChange(val, false);
+    }
+    if (value !== undefined) {
+        mappingValue.mapped = value.mapped ?? [];
+    }
+    const viewSearchForm = new SearchForm().withPageSize(1000);
+    if (mappingValue.mapped !== undefined && mappingValue.mapped.length > 0) {
+        const idList = [];
+        // 이미 매핑된 정보는 확인할 수 없게 한다.
+        idList.push(...mappingValue.mapped.map((mapped) => mapped.id).filter(Boolean));
+        // viewSearchForm 에서는 이미 매핑된 정보만 표시되도록 한다.
+        viewSearchForm.withFilter('AND', { name: 'id', queryConditionType: 'IN', values: idList });
+    }
+    else {
+        // viewSearchForm 은 반드시 empty 를 리턴하게 한다.
+        viewSearchForm.withShouldReturnEmpty(true);
+    }
+    if (filters.length > 0) {
+        viewSearchForm.withFilter('AND', ...filters);
+    }
+    const xrefEntityForm = AvailableMappingEntityForm({
+        value: mappingValue.mapped,
+        config: {
+            entityForm: entityForm,
+        },
+        name: 'mapping',
+        label: labelText,
+        requiredAvailable: requiredAvailable,
+    }).withOnSave(async (entityForm) => {
+        const form = entityForm.clone(true);
+        const fieldErrors = await entityForm.validate();
+        if (!isEmpty(fieldErrors)) {
+            return { entityForm: form.withErrors(fieldErrors), errors: ['입력 값이 올바르지 않습니다.'] };
+        }
+        const formData = await form.getSubmitFormData();
+        const target = formData.data['mapping'];
+        if (!isEmpty(mappingValue.mapped)) {
+            let duplicated = false;
+            for (const item of mappingValue.mapped) {
+                if (item.id === target) {
+                    // 같은 값이 있으면 오류로 인식한다.
+                    duplicated = true;
+                    break;
+                }
+            }
+            if (duplicated) {
+                // 에러를 내야 한다.
+                return {
+                    entityForm: form.withErrors([
+                        {
+                            name: 'mapping',
+                            label: labelText,
+                            errors: ['이미 등록된 정보입니다.'],
+                        },
+                    ]),
+                    errors: ['이미 등록된 정보입니다.'],
+                };
+            }
+        }
+        const availableValue = await entityForm.getValue('available');
+        if (requiredAvailable &&
+            (availableValue === undefined ||
+                !Array.isArray(availableValue) ||
+                availableValue.length !== 2)) {
+            // 값이 잘못 들어왔다.
+            return {
+                entityForm: form.withErrors([
+                    {
+                        name: 'available',
+                        label: labelText,
+                        errors: ['시작일과 종료일을 정확히 선택하세요.'],
+                    },
+                ]),
+                errors: ['유효기간을 잘못 입력했습니다.'],
+            };
+        }
+        return Promise.resolve({ entityForm });
+    });
+    if (viewSearchForm === undefined) {
+        return (_jsx("div", { className: 'relative', children: _jsxs("div", { className: `panel p-4 flex-1 gap-2.5 mt-5 border dark:border-[#17263c] rounded-xl shadow-none space-y-2`, children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] }) }));
+    }
+    return (_jsx("div", { className: 'w-full', children: _jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(viewSearchForm), options: {
+                hideTitle: true,
+                filterable: false,
+                sortable: false,
+                onSelect: (item) => {
+                    const available = getDatetimeFromMappingValue(item['mapping-available']);
+                    xrefEntityForm.id = item['id'];
+                    xrefEntityForm.setValue('mapping', item); // mapping 에 item 을 통째로 넣는다.
+                    xrefEntityForm.setValue('available', available);
+                    setOnEditEntityForm(xrefEntityForm);
+                    handleOpenModal(xrefEntityForm);
+                },
+                fields: [
+                    new StringField('mapping-available', 10000)
+                        .withLabel('유효기간')
+                        .withListConfig({
+                        support: true,
+                        filterable: false,
+                        sortable: false,
+                        align: 'center',
+                    })
+                        .withOverrideRenderListItem(async (props) => {
+                        return {
+                            result: (_jsx("div", { className: 'w-full flex items-center justify-center', children: props.item['mapping-available'] === undefined ? ('항상') : (_jsx(Tooltip, { label: `${props.item['mapping-available']}`, children: _jsx("div", { children: getCroppedDate(props.item['mapping-available']) }) })) })),
+                        };
+                    }),
+                ],
+                onFetched: async (result) => {
+                    // 필드의 값을 추가한다.
+                    if (mappingValue.mapped && mappingValue.mapped.length > 0) {
+                        result.list.forEach((item) => {
+                            for (const mapped of mappingValue.mapped) {
+                                if (item['id'] === mapped.id) {
+                                    if (mapped.availableAt !== undefined && mapped.availableUntil !== undefined) {
+                                        item['mapping-available'] =
+                                            `${fDateTime(mapped.availableAt)} ~ ${fDateTime(mapped.availableUntil)}`;
+                                    }
+                                }
+                            }
+                        });
+                    }
+                    return result;
+                },
+                delete: {
+                    onDelete: async (_entityForm, _rows, checkedItems) => {
+                        if (!isEmpty(checkedItems)) {
+                            onDelete(checkedItems);
+                        }
+                        return Promise.resolve({ entityForm: _entityForm });
+                    },
+                },
+                subCollection: {
+                    add: false,
+                    delete: true,
+                    modifyOnView: false,
+                    buttons: [
+                        () => (_jsx("button", { type: "button", className: `btn btn-outline-secondary h-[34px]`, disabled: readonly, onClick: () => {
+                                handleOpenModal();
+                            }, children: "\uB4F1\uB85D" })),
+                    ],
+                },
+            } }, listKey) }));
+    function onDelete(idList) {
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        mappingValue.mapped = mappingValue.mapped.filter((x) => !idList.includes(x.id));
+        setValue({ ...mappingValue });
+        setOnEditEntityForm(undefined);
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+    function handleOpenModal(editEntityForm) {
+        const modalId = `xref-available-date-mapping-${props.name}`;
+        const currentEntityForm = editEntityForm ?? xrefEntityForm;
+        openModal({
+            modalId,
+            title: String(label || '유효기간 관리'),
+            size: '2xl',
+            content: (_jsx(Paper, { children: _jsx(ViewEntityForm, { entityForm: currentEntityForm, hideTitle: true, readonly: editEntityForm !== undefined, excludeButtons: editEntityForm !== undefined ? ['delete', 'save'] : ['delete'], buttons: [
+                        new EntityFormButton('list')
+                            .withLabel('닫기')
+                            .withClassName('btn btn-outline-primary gap-2')
+                            .withOnClick(async (props) => {
+                            closeModal(modalId);
+                            setOnEditEntityForm(undefined);
+                            return props.entityForm;
+                        }),
+                    ], postSave: async (entityForm) => {
+                        const mappedValue = await entityForm.getValue('mapping');
+                        const availableValue = await entityForm.getValue('available');
+                        mappingValue.mapped = mappingValue.mapped ?? [];
+                        if (mappedValue.id) {
+                            if (availableValue !== undefined &&
+                                Array.isArray(availableValue) &&
+                                availableValue.length === 2) {
+                                mappingValue.mapped.push({
+                                    id: mappedValue.id,
+                                    availableAt: availableValue[0],
+                                    availableUntil: availableValue[1],
+                                });
+                            }
+                            else {
+                                mappingValue.mapped.push({ id: mappedValue.id });
+                            }
+                        }
+                        setValueAndReload({ ...mappingValue });
+                        closeModal(modalId);
+                        return entityForm;
+                    } }) }, listKey)),
+            onClose: () => {
+                setOnEditEntityForm(undefined);
+            },
+        });
+    }
+};

package/dist/listgrid/components/fields/view/XrefMappingView.d.ts

@@ -0,0 +1,16 @@
+import { InputRendererProps } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+import { FilterItem } from '../../../form/SearchForm';
+interface XrefMappingViewProps extends InputRendererProps {
+    entityForm: EntityForm;
+    excludeId?: string | undefined;
+    add?: boolean | undefined;
+    parentEntityForm?: EntityForm | undefined;
+    filters?: FilterItem[] | ((entityForm: EntityForm, parentEntityForm?: EntityForm) => Promise<FilterItem[]>) | undefined;
+}
+export interface XrefMappingValue {
+    mapped?: string[];
+    deleted?: string[];
+}
+export declare const XrefMappingView: ({ entityForm, excludeId, add, parentEntityForm, ...props }: XrefMappingViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/view/XrefMappingView.js

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Paper } from '../../../ui';
+import { ViewListGrid } from '../../list/ViewListGrid';
+import { ListGrid } from '../../../config/ListGrid';
+import { SearchForm } from '../../../form/SearchForm';
+import { isEmpty } from '../../../utils';
+import { isTrue } from '../../../utils/BooleanUtil';
+// TODO: Fix this import - should use ui package component
+// import Loading from "@/app/loading";
+import { LoadingOverlay as Loading } from '../../../ui';
+import { useModalManagerStore } from '../../../store';
+export const XrefMappingView = ({ entityForm, excludeId, add, parentEntityForm, ...props }) => {
+    const readonly = props.readonly ?? false;
+    const label = props.label;
+    const [loading, setLoading] = useState(true);
+    const { openModal, closeModal } = useModalManagerStore();
+    const [value, setValue] = useState(props.value);
+    const [listKey, setListKey] = useState('init');
+    const mappingValue = {};
+    if (value !== undefined) {
+        mappingValue.mapped = value.mapped ?? [];
+        mappingValue.deleted = value.deleted ?? [];
+    }
+    const [filters, setFilters] = useState([]);
+    useEffect(() => {
+        if (props.filters) {
+            (async () => {
+                if (typeof props.filters === 'function') {
+                    const filters = await props.filters(entityForm, parentEntityForm);
+                    setFilters(filters);
+                }
+                else {
+                    setFilters(props.filters ?? []);
+                }
+                setLoading(false);
+            })();
+        }
+        else {
+            setLoading(false);
+        }
+    }, [props.filters]);
+    // lookup 버튼을 눌렀을 때 선택할 수 있는 그리드를 표시할 때 사용한다.
+    const searchForm = new SearchForm();
+    if (excludeId) {
+        // excludeId 값이 있다면 해당 조건을 추가한다.
+        searchForm.withFilter('AND', { name: 'id', queryConditionType: 'NOT_EQUAL', value: excludeId });
+    }
+    // 현재 선택된 값을 리스트로 보여 주는 용도로 사용된다.
+    const viewSearchForm = new SearchForm().withPageSize(1000);
+    if (mappingValue.mapped !== undefined && mappingValue.mapped.length > 0) {
+        // 이미 매핑된 정보는 확인할 수 없게 한다.
+        searchForm.withFilter('AND', {
+            name: 'id',
+            queryConditionType: 'NOT_IN',
+            values: mappingValue.mapped,
+        });
+        // viewSearchForm 에서는 이미 매핑된 정보만 표시되도록 한다.
+        viewSearchForm.withFilter('AND', {
+            name: 'id',
+            queryConditionType: 'IN',
+            values: mappingValue.mapped,
+        });
+    }
+    else {
+        // viewSearchForm 은 반드시 empty 를 리턴하게 한다.
+        viewSearchForm.withShouldReturnEmpty(true);
+    }
+    if (filters.length > 0) {
+        searchForm.withFilter('AND', ...filters);
+        viewSearchForm.withFilter('AND', ...filters);
+    }
+    if (loading) {
+        return (_jsx("div", { className: 'w-full', children: _jsx(Loading, {}) }));
+    }
+    return (_jsx("div", { className: 'w-full', children: _jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(viewSearchForm), options: {
+                hideTitle: true,
+                filterable: false,
+                sortable: false,
+                delete: {
+                    onDelete: async (_entityForm, _rows, checkedItems) => {
+                        if (!isEmpty(checkedItems)) {
+                            onDelete(checkedItems);
+                        }
+                        return Promise.resolve({ entityForm: _entityForm });
+                    },
+                },
+                subCollection: {
+                    add: readonly ? false : isTrue(add),
+                    delete: !readonly,
+                    modifyOnView: false,
+                    buttons: [
+                        () => readonly ? null : (_jsx("button", { type: "button", className: `btn btn-outline-secondary h-[34px]`, disabled: readonly, onClick: () => {
+                                const modalId = `xref-mapping-${props.name}`;
+                                openModal({
+                                    modalId,
+                                    title: String(label || '선택'),
+                                    size: '2xl',
+                                    content: (_jsx(Paper, { children: _jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(searchForm), options: {
+                                                readonly: true,
+                                                popup: true,
+                                                hideTitle: true,
+                                                onSelect: (item) => {
+                                                    // Single row click: add one item and close modal
+                                                    onChange(item.id);
+                                                    closeModal(modalId);
+                                                },
+                                                selection: {
+                                                    enabled: true,
+                                                    actions: [
+                                                        {
+                                                            label: '선택 완료',
+                                                            onClick: async (_entityForm, checkedItems) => {
+                                                                onChangeMultiple(checkedItems);
+                                                                closeModal(modalId);
+                                                            },
+                                                            color: 'primary',
+                                                        },
+                                                    ],
+                                                    deleteButton: false,
+                                                },
+                                            } }, `${listKey}-modal`) })),
+                                });
+                            }, children: "\uC120\uD0DD" })),
+                    ],
+                },
+            } }, listKey) }));
+    function onChange(id) {
+        if (mappingValue.deleted === undefined) {
+            mappingValue.deleted = [];
+        }
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        mappingValue.mapped = mappingValue.mapped.filter((x) => x !== id);
+        mappingValue.deleted = mappingValue.deleted.filter((x) => x !== id);
+        mappingValue.mapped = [...mappingValue.mapped, id];
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+    function onChangeMultiple(ids) {
+        if (mappingValue.deleted === undefined) {
+            mappingValue.deleted = [];
+        }
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        for (const id of ids) {
+            mappingValue.mapped = mappingValue.mapped.filter((x) => x !== id);
+            mappingValue.deleted = mappingValue.deleted.filter((x) => x !== id);
+            mappingValue.mapped = [...mappingValue.mapped, id];
+        }
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+    function onDelete(idList) {
+        if (mappingValue.deleted === undefined) {
+            mappingValue.deleted = [];
+        }
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        mappingValue.mapped = mappingValue.mapped.filter((x) => !idList.includes(x));
+        mappingValue.deleted = mappingValue.deleted.filter((x) => !idList.includes(x));
+        mappingValue.deleted = [...mappingValue.deleted, ...idList];
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+};

package/dist/listgrid/components/fields/view/XrefPiceMappingView.d.ts

@@ -0,0 +1,19 @@
+import { InputRendererProps } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+import { FilterItem } from '../../../form/SearchForm';
+interface XrefPriceMappingViewProps extends InputRendererProps {
+    entityForm: EntityForm;
+    parentEntityForm?: EntityForm | undefined;
+    initPrice: (entityForm: EntityForm, rowValue: any) => Promise<void>;
+    priceHelpText?: string | undefined;
+    filters?: FilterItem[] | ((entityForm: EntityForm, parentEntityForm?: EntityForm) => Promise<FilterItem[]>) | undefined;
+}
+export interface XrefPriceMappingValue {
+    mapped?: XrefPriceValue[] | undefined;
+}
+interface XrefPriceValue {
+    id: string;
+    price?: number | undefined;
+}
+export declare const XrefPriceMappingView: ({ entityForm, parentEntityForm, ...props }: XrefPriceMappingViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};