@rchemist/listgrid 0.2.6

package/dist/listgrid/transfer/DataExportProcessor.js

@@ -0,0 +1,102 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getExportFileName, } from '../transfer/Type';
+import { SearchForm } from '../form/SearchForm';
+import { useEffect, useState } from 'react';
+import { getTranslation } from '../utils/i18n';
+import DataExportService from '../transfer/DataExportService';
+import { isBlank } from '../utils/StringUtil';
+import { LinearIndicator } from '../ui';
+import { Button } from '../ui';
+import ExcelDownload from '../transfer/Provider/ExcelProvider';
+import { LoadingOverlay } from '../ui';
+export const DataExportProcessor = ({ process, url, fields, onProcessed, maxCount, countPerPage, searchForm, exportFileName, data: initialData, password, addedFields, overrideFormData, }) => {
+    const restrictCount = maxCount || 100;
+    const perPageCount = countPerPage || 100;
+    const maxLimitCount = restrictCount * perPageCount;
+    const editorFields = getEditorFields();
+    const [exportable, setExportable] = useState(true);
+    const [failedCount, setFailedCount] = useState(0);
+    const [error, setError] = useState('');
+    const [data, setData] = useState();
+    const { t } = getTranslation();
+    const [exportProgress, setExportProgress] = useState(0);
+    const fileName = getExportFileName(exportFileName, t);
+    const [onDownload, setOnDownload] = useState(false);
+    const service = new DataExportService({
+        searchForm: searchForm?.clone() ?? SearchForm.create(),
+        url: url,
+        fields: fields,
+        restrictCount: restrictCount,
+        pagePerCount: perPageCount,
+        setExportable: setExportable,
+        setFailedCount: setFailedCount,
+        setProgress: setExportProgress,
+        setData: setData,
+        data: initialData,
+        setError: setError,
+        editorFields: editorFields,
+        addedFields: addedFields,
+    });
+    useEffect(() => {
+        service.process();
+    }, []);
+    if (!process) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("h1", { className: 'text-xl mb-2', children: (function () {
+                    if (exportProgress < 100) {
+                        return t('form.list.dataTransfer.tab.export.processing');
+                    }
+                    else if (exportProgress >= 100) {
+                        return t('form.list.dataTransfer.tab.export.processed');
+                    }
+                    return t('form.list.dataTransfer.tab.export.processing');
+                })() }), _jsxs("div", { children: [exportable && (_jsxs(_Fragment, { children: [isBlank(error) && (_jsxs(_Fragment, { children: [exportProgress < 100 && (_jsxs("div", { className: 'py-1 mb-3', children: [_jsx("div", { className: 'text-primary', children: t('form.list.dataTransfer.tab.export.onProcessing') }), _jsx(LinearIndicator, { value: exportProgress }, 'progress_indicator_' + exportProgress)] })), exportProgress >= 100 && (_jsx("div", { className: 'py-1 mb-3', children: _jsx("div", { className: 'text-success text-sm', children: t('form.list.dataTransfer.tab.export.fileCreated') }) }))] })), !isBlank(error) && (_jsx("div", { className: 'py-1 mb-3', children: _jsx("span", { className: 'text-danger', children: t(error) }) })), onDownload && (_jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[100px]' })] })), !onDownload && (_jsxs("div", { className: 'flex items-center justify-center space-x-2', children: [_jsx(Button, { variant: 'filled', onClick: () => {
+                                            setOnDownload(true);
+                                            try {
+                                                setTimeout(() => {
+                                                    (async () => {
+                                                        let fileData = [...(data ?? [])];
+                                                        if (overrideFormData !== undefined && data !== undefined) {
+                                                            const overrideFormDataResult = await overrideFormData(data);
+                                                            fileData = Array.isArray(overrideFormDataResult)
+                                                                ? overrideFormDataResult
+                                                                : [overrideFormDataResult];
+                                                        }
+                                                        await ExcelDownload({
+                                                            data: fileData,
+                                                            fileName: fileName,
+                                                            password: password,
+                                                            fields: fields,
+                                                            logOptions: {
+                                                                condition: {
+                                                                    exportUrl: url,
+                                                                    fields: fields.map((f) => f.getName()),
+                                                                },
+                                                            },
+                                                        });
+                                                        onProcessed();
+                                                    })();
+                                                }, 100);
+                                            }
+                                            catch (e) {
+                                                setOnDownload(false);
+                                                setError(t('form.list.dataTransfer.tab.export.error.download'));
+                                            }
+                                        }, disabled: exportProgress < 100 || !isBlank(error), style: { marginRight: 1 }, children: t('form.list.dataTransfer.tab.export.button.download') }), _jsx(Button, { variant: 'outline', onClick: () => {
+                                            setExportProgress(0);
+                                            onProcessed();
+                                        }, children: t('form.list.dataTransfer.tab.export.button.cancel') })] }))] })), !exportable && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h3", { children: t('form.list.dataTransfer.tab.export.error.limit.retry') }), _jsxs("div", { children: [t('form.list.dataTransfer.tab.export.error.limit.cause'), ": ", failedCount] }), _jsxs("div", { children: [t('form.list.dataTransfer.tab.export.error.limit.warning'), ": ", maxLimitCount] })] }), _jsx("div", { className: 'text-center', children: _jsx(Button, { variant: 'outline', color: 'inherit', onClick: () => {
+                                        onProcessed();
+                                    }, children: t('form.list.dataTransfer.tab.export.button.close') }) })] }))] })] }));
+    function getEditorFields() {
+        const editorFields = [];
+        fields.forEach((field) => {
+            if (field.getType() === 'html' || field.getType() === 'markdown') {
+                editorFields.push(field.getName());
+            }
+        });
+        return editorFields;
+    }
+};

package/dist/listgrid/transfer/DataExportService.d.ts

@@ -0,0 +1,37 @@
+import { SearchForm } from '../form/SearchForm';
+import { DataExportCount, DataField, DataRow, DataRowSet, SampleDataItem } from '../transfer/Type';
+export interface ExportServiceProps {
+    searchForm?: SearchForm | undefined;
+    url?: string | undefined;
+    fields: DataField[];
+    restrictCount?: number | undefined;
+    pagePerCount?: number | undefined;
+    setExportable?: ((exportable: boolean) => void) | undefined;
+    setFailedCount?: ((count: number) => void) | undefined;
+    setProgress?: ((progress: number) => void) | undefined;
+    data?: SampleDataItem[][] | undefined;
+    setData?: ((data: DataRowSet) => void) | undefined;
+    setError?: ((errorMessage: string) => void) | undefined;
+    editorFields?: string[] | undefined;
+    addedFields?: ((row: DataRow) => Promise<DataRow>) | undefined;
+}
+export declare class DataExportService {
+    searchForm?: SearchForm | undefined;
+    url?: string | undefined;
+    fields: DataField[];
+    restrictCount: number;
+    pagePerCount: number;
+    setExportable: (exportable: boolean) => void;
+    setFailedCount: (count: number) => void;
+    setProgress: (progress: number) => void;
+    data: SampleDataItem[][];
+    setData: (data: DataRowSet) => void;
+    setError: (errorMessage: string) => void;
+    processing: boolean;
+    total?: DataExportCount | undefined;
+    editorFields: string[];
+    addedFields?: ((row: DataRow) => Promise<DataRow>) | undefined;
+    constructor({ searchForm, url, fields, restrictCount, pagePerCount, setExportable, setFailedCount, setProgress, data, setData, setError, editorFields, addedFields, }: ExportServiceProps);
+    process(): (() => void) | undefined;
+}
+export default DataExportService;

package/dist/listgrid/transfer/DataExportService.js

@@ -0,0 +1,225 @@
+import { createFieldMap, } from '../transfer/Type';
+import { PageResult } from '../form/Type';
+import { getPlainText } from '../ui';
+import { isEmpty } from '../utils';
+/**
+ * 중첩 객체에서 dot notation 경로로 값을 가져온다.
+ * 예: getNestedValue(item, 'semester.year') -> item.semester.year
+ */
+function getNestedValue(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    // dot notation이 아니면 직접 접근
+    if (!path.includes('.')) {
+        return obj[path];
+    }
+    // dot notation 경로를 따라 값을 가져옴
+    const keys = path.split('.');
+    let value = obj;
+    for (const key of keys) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        value = value[key];
+    }
+    return value;
+}
+export class DataExportService {
+    constructor({ searchForm, url, fields, restrictCount, pagePerCount, setExportable, setFailedCount, setProgress, data, setData, setError, editorFields, addedFields, }) {
+        this.processing = false;
+        this.editorFields = [];
+        this.searchForm = searchForm;
+        this.url = url;
+        this.fields = fields;
+        this.restrictCount = restrictCount ?? 5000;
+        this.pagePerCount = pagePerCount ?? 20;
+        this.setExportable =
+            setExportable ??
+                function (_exportable) {
+                    // no-op default
+                };
+        this.setFailedCount =
+            setFailedCount ??
+                function (_count) {
+                    // no-op default
+                };
+        this.setProgress =
+            setProgress ??
+                function (_progress) {
+                    // no-op default
+                };
+        this.setData =
+            setData ??
+                function (_data) {
+                    // no-op default
+                };
+        this.setError =
+            setError ??
+                function (_errorMessage) {
+                    // no-op default
+                };
+        this.data = data ?? [];
+        if (data) {
+            this.restrictCount = data.length;
+            this.pagePerCount = data.length;
+        }
+        this.editorFields = editorFields ?? [];
+    }
+    process() {
+        if (this.processing) {
+            return;
+        }
+        this.processing = true;
+        let page = 0;
+        let currentProgress = 0;
+        let data = [];
+        const fieldMap = createFieldMap(...this.fields);
+        let timeoutId = null;
+        const exportData = async () => {
+            if (data.length === 0) {
+                let subject = [];
+                fieldMap.forEach((value, _key) => {
+                    subject.push({ name: _key, value: value.getLabel() });
+                });
+                data.push(subject);
+            }
+            if (this.searchForm && this.url) {
+                if (!this.total) {
+                    // total data 를 fetch 해야 한다. await 으로 처리해야 한다.
+                    const pageResult = await PageResult.fetchListData(this.url, this.searchForm).catch((reason) => {
+                        throw new Error(reason);
+                    });
+                    this.total = { totalPage: pageResult.totalPage || 0 };
+                    if (this.total.totalPage > this.restrictCount) {
+                        this.setExportable(false);
+                        this.setFailedCount(this.total.totalPage * this.pagePerCount);
+                        return 100;
+                    }
+                    else if (this.total.totalPage === 0) {
+                        this.setExportable(false);
+                        this.setFailedCount(0);
+                        return 100;
+                    }
+                }
+                if (currentProgress >= 100) {
+                    return 100;
+                }
+                else {
+                    if (page + 1 > this.total.totalPage) {
+                        return 100;
+                    }
+                    this.searchForm.withPage(page); // page 변경
+                    const pageResult = await PageResult.fetchListData(this.url, this.searchForm).catch((reason) => {
+                        throw new Error(reason);
+                    });
+                    // 실제 데이터 페치 부분
+                    await Promise.all(pageResult.list.map(async (item) => {
+                        const row = [];
+                        await Promise.all(Array.from(fieldMap.entries()).map(async ([key, value]) => {
+                            const fieldValue = getNestedValue(item, key);
+                            if (this.editorFields.includes(key)) {
+                                row.push({ name: key, value: getPlainText(fieldValue) || '' });
+                            }
+                            else {
+                                row.push({ name: key, value: await value.getValueOnExport(fieldValue) });
+                            }
+                        }));
+                        if (this.addedFields !== undefined) {
+                            const addedFields = await this.addedFields(row);
+                            if (addedFields) {
+                                await Promise.all(addedFields.map(async (column) => {
+                                    row.push(column);
+                                }));
+                            }
+                        }
+                        data.push(row);
+                    }));
+                    currentProgress = Math.floor(((page + 1) / this.total.totalPage) * 100);
+                    page++;
+                    return currentProgress;
+                }
+            }
+            else if (this.data && !isEmpty(this.data)) {
+                this.total = { totalPage: 1, totalCount: this.data.length };
+                try {
+                    await Promise.all(this.data.map(async (item) => {
+                        try {
+                            const row = [];
+                            await Promise.all(Array.from(fieldMap.entries()).map(async ([key, value]) => {
+                                let cellValue = {};
+                                for (const cell of item) {
+                                    if (cell.name === key) {
+                                        cellValue = cell.value;
+                                        break;
+                                    }
+                                }
+                                if (this.editorFields.includes(key)) {
+                                    row.push({ name: key, value: getPlainText(cellValue) || '' });
+                                }
+                                else {
+                                    row.push({ name: key, value: await value.getValueOnExport(cellValue) });
+                                }
+                            }));
+                            if (this.addedFields) {
+                                try {
+                                    const addedFields = await this.addedFields(row);
+                                    if (addedFields) {
+                                        await Promise.all(addedFields.map(async (column) => {
+                                            row.push(column);
+                                        }));
+                                    }
+                                }
+                                catch (error) {
+                                    console.error('Error in addedFields:', error);
+                                    throw error;
+                                }
+                            }
+                            data.push(row);
+                        }
+                        catch (error) {
+                            console.error('Error processing item:', error);
+                            throw error;
+                        }
+                    }));
+                    return 100;
+                }
+                catch (error) {
+                    console.error('Error processing data:', error);
+                    throw error;
+                }
+            }
+            else {
+                throw new Error('데이터를 검색할 수 없습니다.');
+            }
+        };
+        // setTimeout 재귀 방식: 이전 작업 완료 후 다음 타이머 설정
+        const processNext = async () => {
+            try {
+                if (currentProgress >= 100) {
+                    return;
+                }
+                const value = await exportData();
+                currentProgress = value;
+                this.setProgress(currentProgress);
+                this.setData(data);
+                // 완료되지 않았으면 다음 작업 예약
+                if (currentProgress < 100) {
+                    timeoutId = setTimeout(processNext, 100);
+                }
+            }
+            catch (e) {
+                console.error(e);
+                this.setProgress(100);
+                this.setError('form.list.dataTransfer.tab.export.error.fetch');
+            }
+        };
+        // 첫 번째 실행
+        processNext();
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }
+}
+export default DataExportService;

package/dist/listgrid/transfer/DataExporter.d.ts

@@ -0,0 +1,10 @@
+import { ExportTransferConfig } from '../transfer/Type';
+import { SearchForm } from '../form/SearchForm';
+interface ExporterProps {
+    config?: ExportTransferConfig;
+    fileName: string;
+    searchForm: SearchForm;
+    onClose: () => void;
+}
+export declare const DataExporter: ({ config, searchForm, fileName, onClose }: ExporterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/transfer/DataExporter.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal } from '../ui';
+import { getTranslation } from '../utils/i18n';
+import { useEffect, useState } from 'react';
+import { SimpleGrid } from '../ui';
+import { DataExportProcessor } from '../transfer/DataExportProcessor';
+import { Button } from '../ui';
+import { ExcelPasswordField } from '../transfer/ExcelPasswordField';
+export const DataExporter = ({ config, searchForm, fileName, onClose }) => {
+    const { t } = getTranslation();
+    const fields = config?.fields ?? [];
+    const [dataFields, setDataFields] = useState([...fields]);
+    const [ableToExport, setAbleToExport] = useState(true);
+    const [processing, setProcessing] = useState(false);
+    const [exportKey, setExportKey] = useState(Date.now());
+    const [mounted, setMounted] = useState(false);
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (config === undefined || !mounted)
+        return null;
+    const title = t('form.list.dataTransfer.tab.export.title') ?? '다운로드';
+    const instruction = t('form.list.dataTransfer.tab.export.message');
+    const description = config?.description ?? '';
+    const url = config.url;
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { size: '5xl', title: title, animation: 'none', closeOnClickOutside: false, closeOnEscape: false, opened: true, onClose: () => {
+                    onClose();
+                }, children: _jsxs("div", { className: "rcm-dialog-body", children: [_jsxs("div", { className: "rcm-stack", children: [_jsx("div", { className: "rcm-notice", "data-tone": "info", style: { wordBreak: 'break-word', overflowWrap: 'break-word', whiteSpace: 'normal' }, children: _jsx("label", { className: "rcm-text-sm rcm-text-info rcm-text-emphasis", children: instruction }) }), _jsxs("div", { className: "rcm-panel", children: [_jsx("h3", { className: "rcm-heading-sm", children: "\uB2E4\uC6B4\uB85C\uB4DC\uD560 \uD544\uB4DC \uC120\uD0DD" }), _jsx(SimpleGrid, { cols: { base: 2, xs: 2, sm: 3, md: 4, lg: 5 }, spacing: "md", children: (function () {
+                                                const forms = [];
+                                                fields.forEach((field) => {
+                                                    const fieldName = field.getName();
+                                                    if (fieldName === 'id') {
+                                                        return;
+                                                    }
+                                                    forms.push(_jsxs("div", { className: "rcm-checkbox-row", children: [_jsx("input", { type: "checkbox", id: fieldName, name: fieldName, defaultChecked: dataFields.some((item) => item.equals(field)), value: field.getName(), onChange: (event) => {
+                                                                    handleTargetFieldChange(field, event);
+                                                                } }, fieldName), _jsx("label", { htmlFor: `${fieldName}`, className: "rcm-checkbox-label", children: field.getLabel() })] }, `fields_${fieldName}`));
+                                                });
+                                                return forms;
+                                            })() })] })] }), _jsx(ExcelPasswordField, { password: password, onPasswordChange: setPassword, error: error, onErrorChange: setError }), description && (_jsx("div", { className: "rcm-notice", "data-tone": "warning", children: _jsx("div", { className: "rcm-text-sm rcm-text-warning", children: description }) })), _jsx("div", { className: "rcm-action-bar", children: _jsx(Button, { variant: "filled", disabled: !ableToExport, className: "rcm-button", "data-variant": "primary", onClick: () => {
+                                    handleExport();
+                                }, children: t('form.list.dataTransfer.tab.export.button.download') }) })] }) }), processing && (_jsx(Modal, { size: 'lg', title: `${title}`, opened: processing, closeOnClickOutside: false, closeOnEscape: false, onClose: () => {
+                    setProcessing(false);
+                }, children: _jsx(DataExportProcessor, { url: url, fields: dataFields, searchForm: searchForm, exportFileName: fileName, addedFields: config?.addedFields, overrideFormData: config?.overrideFormData, process: processing, password: password, onProcessed: () => {
+                        setExportKey(Date.now());
+                        setProcessing(false);
+                    } }, 'data_export_' + exportKey) }))] }));
+    function handleExport() {
+        setError('');
+        setProcessing(true);
+    }
+    function handleTargetFieldChange(targetField, event) {
+        const isChecked = event.target.checked;
+        const fieldExists = dataFields.some((item) => item.equals(targetField));
+        if (isChecked && !fieldExists) {
+            addExportField(targetField);
+            updateAbleToExport(true);
+        }
+        else if (!isChecked) {
+            removeExportField(targetField);
+            updateAbleToExportIfEmpty();
+        }
+    }
+    function addExportField(targetField) {
+        const newExportFields = [...dataFields, targetField];
+        setDataFields(newExportFields);
+    }
+    function removeExportField(targetField) {
+        const newExportFields = dataFields.filter((item) => !item.equals(targetField));
+        setDataFields(newExportFields);
+    }
+    function updateAbleToExport(value) {
+        if (!ableToExport) {
+            setAbleToExport(value);
+        }
+    }
+    function updateAbleToExportIfEmpty() {
+        if (dataFields.length === 1) {
+            setAbleToExport(false);
+        }
+    }
+};

package/dist/listgrid/transfer/DataImportDescription.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { DataField } from '../transfer/Type';
+interface DataImportDescriptionProps {
+    title?: ReactNode;
+    data: DataField[];
+}
+export declare const DataImportDescription: ({ title, data }: DataImportDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/transfer/DataImportDescription.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table } from '../ui';
+import { SafePerfectScrollbar } from '../ui';
+import { Box } from '../ui';
+import { Flex } from '../ui';
+import { defaultString } from '../utils/StringUtil';
+// CSS module removed in Stage 8 (host app supplies styling)
+const styles = {};
+import clsx from 'clsx';
+import { Tooltip } from '../ui';
+export const DataImportDescription = ({ title, data }) => {
+    return (_jsxs(Box, { style: { marginTop: `1rem`, paddingTop: `1.5rem` }, children: [_jsx(Flex, { align: 'center', justify: 'flex-end', children: title ? (title) : (_jsxs(Box, { children: [_jsx("span", { style: { color: `#f00`, marginRight: `4px` }, children: "*" }), " \uD45C\uC2DC\uAC00 \uB41C \uD544\uB4DC\uB294 \uD544\uC218\uAC12\uC785\uB2C8\uB2E4."] })) }), _jsx(SafePerfectScrollbar, { style: { height: '350px' }, children: _jsxs(Table, { stickyHeader: true, striped: 'odd', withColumnBorders: true, highlightOnHover: true, children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { w: `30%`, className: clsx(styles.header, styles.headerLeft), children: "\uD544\uB4DC" }), _jsx(Table.Th, { w: `70%`, className: clsx(styles.header, styles.headerRight), children: "\uC124\uBA85" })] }) }), _jsx(Table.Tbody, { children: data.map((field) => {
+                                if (defaultString(field.getDescription()) === '') {
+                                    return null;
+                                }
+                                return (_jsxs(Table.Tr, { children: [_jsxs(Table.Td, { className: clsx(styles.body, styles.bodyLeft), children: [field.getLabel(), field.isRequired() && (_jsx(Tooltip, { label: '필수', children: _jsx("span", { style: { color: `#f00`, marginRight: `4px` }, children: " *" }) }))] }), _jsx(Table.Td, { className: clsx(styles.body, styles.bodyRight), children: field.getDescription() })] }, field.getName()));
+                            }) })] }) })] }));
+};

package/dist/listgrid/transfer/DataImportProcessor.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { DataField, DataTransferResult } from '../transfer/Type';
+import { DataRowSet } from './Type';
+interface DataImportPreviewViewerProps {
+    resultView: boolean;
+    data: DataRowSet;
+    fields: DataField[];
+    onSubmit: () => void;
+    cancelImport: () => void;
+    onImportSuccess?: (() => void) | undefined;
+    importResult?: DataTransferResult | undefined;
+    preview: boolean;
+    importError?: string | undefined;
+    errorMessage?: string | undefined;
+    viewError: boolean;
+    importErrorView?: ReactNode | undefined;
+}
+export declare const DataImportProcessor: ({ resultView, data, importResult, onSubmit, cancelImport, onImportSuccess, viewError, importErrorView, importError, errorMessage, preview, ...props }: DataImportPreviewViewerProps) => import("react/jsx-runtime").JSX.Element;
+export interface DataImportPreviewProps {
+    fields: DataField[];
+    data: DataRowSet;
+}
+export declare const DataImportPreview: FC<DataImportPreviewProps>;
+export {};

package/dist/listgrid/transfer/DataImportProcessor.js

@@ -0,0 +1,59 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table } from '../ui';
+import { SafePerfectScrollbar } from '../ui';
+import { Box } from '../ui';
+import { Flex } from '../ui';
+import { Grid } from '../ui';
+import { Paper } from '../ui';
+import { useEffect, useState } from 'react';
+// CSS module removed in Stage 8 (host app supplies styling)
+const classes = {};
+import { DataImportResultView, ImportErrorView } from '../transfer/DataImportResultView';
+import { defaultString } from '../utils/StringUtil';
+import { isEmpty } from '../utils';
+export const DataImportProcessor = ({ resultView, data, importResult, onSubmit, cancelImport, onImportSuccess, viewError, importErrorView, importError, errorMessage, preview, ...props }) => {
+    const [fields, setFields] = useState([]);
+    useEffect(() => {
+        if (data && !isEmpty(data) && props.fields && !isEmpty(props.fields)) {
+            const fields = props.fields.filter((field) => {
+                // 첫줄은 헤더로 {id: '아이디', name: '이름', ...} 형식으로 데이터가 들어 온다.
+                const header = data[0];
+                return header[field.getName()] !== undefined;
+            });
+            setFields(fields);
+        }
+    }, [props.fields, data]);
+    if (isEmpty(fields)) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(_Fragment, { children: _jsxs(Box, { children: [resultView && (_jsxs(Box, { children: [_jsx(Box, { style: { padding: `2rem` }, children: _jsx(DataImportResultView, { result: importResult, fields: fields }) }), _jsx(Flex, { align: 'center', style: { width: '100%', paddingTop: 2 }, justify: 'center', children: _jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", onClick: () => {
+                                    cancelImport();
+                                    onImportSuccess?.call(this);
+                                }, children: "\uD655\uC778" }) })] })), !resultView && (_jsxs(Box, { children: [viewError && (_jsxs(Box, { style: { padding: `2rem` }, children: [_jsx(ImportErrorView, { importError: importError, importErrorView: importErrorView, errorMessage: errorMessage }), _jsx(Flex, { align: 'center', style: { width: '100%', marginTop: `2rem` }, justify: 'center', children: _jsx("button", { type: "button", className: "rcm-button", "data-variant": "ghost", onClick: () => {
+                                            cancelImport();
+                                        }, children: "\uB2EB\uAE30" }) })] })), preview && (_jsxs(Box, { style: { padding: `2rem` }, children: [_jsx(DataImportPreview, { data: data, fields: fields }), _jsxs(Flex, { gap: 10, align: 'center', style: { width: '100%', marginTop: `2rem` }, justify: 'center', children: [_jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => {
+                                                onSubmit();
+                                            }, children: "\uC5C5\uB85C\uB4DC" }), _jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", onClick: () => {
+                                                cancelImport();
+                                            }, children: "\uCDE8\uC18C" })] })] }))] }))] }) }));
+};
+export const DataImportPreview = ({ fields, data }) => {
+    function showRows() {
+        let rowFields = [];
+        data?.forEach((row, index) => {
+            if (index > 0) {
+                rowFields.push(_jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: classes.row, children: index }, 'cell_index_' + index), (function () {
+                            const cells = [];
+                            fields.map((field, index) => {
+                                const fieldName = field.getName();
+                                cells.push(_jsx(Table.Td, { className: classes.row, children: defaultString(row.find((r) => r.name === fieldName)?.value) }, 'cell_' + fieldName + '_' + index));
+                            });
+                            return cells;
+                        })()] }, 'row_' + index));
+            }
+        });
+        return rowFields;
+    }
+    return (_jsx(Grid, { children: _jsx(Grid.Col, { span: 12, children: _jsx(Paper, { style: { padding: 2, width: '100%' }, children: _jsx(SafePerfectScrollbar, { children: _jsxs(Table, { border: 1, borderColor: '#ff0', children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { className: classes.header, children: "#" }, 'body_header_index'), fields.map((field, index) => (_jsx("th", { className: classes.header, children: _jsxs("div", { children: [_jsxs("div", { children: ["[", field.getName(), "]"] }), field.getLabel()] }) }, 'body_' + field + '_' + index)))] }) }), _jsx(Table.Tbody, { children: _jsx(_Fragment, { children: showRows() }) })] }) }) }) }) }));
+};

package/dist/listgrid/transfer/DataImportResultView.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+import { DataField, DataTransferResult } from '../transfer/Type';
+export interface DataImportResultViewProps {
+    result: DataTransferResult;
+    fields: DataField[];
+}
+export declare const DataImportResultView: FC<DataImportResultViewProps>;
+export interface ImportErrorViewProps {
+    importError?: string | undefined;
+    errorMessage?: string | undefined;
+    importErrorView?: ReactNode | undefined;
+}
+export declare const ImportErrorView: FC<ImportErrorViewProps>;