@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/MonthField.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListableFormField } from './abstract';
+import { TextInput } from '../../ui';
+import { getInputRendererParameters } from '../helper/FieldRendererHelper';
+import { ValidateResult } from '../../validations/Validation';
+import { isBlank } from '../../utils/StringUtil';
+export class MonthField extends ListableFormField {
+    constructor(name, order, limit) {
+        super(name, order, 'month');
+        this.limit = limit;
+    }
+    /**
+     * MonthField 핵심 렌더링 로직
+     */
+    renderInstance(params) {
+        return (async () => {
+            return (_jsx(TextInput, { type: 'month', min: this.limit?.min, max: this.limit?.max, ...await getInputRendererParameters(this, params) }));
+        })();
+    }
+    /**
+     * MonthField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new MonthField(name, order, this.limit);
+    }
+    withLimit(limit) {
+        this.limit = limit;
+        return this;
+    }
+    async validate(entityForm) {
+        const result = await super.validate(entityForm);
+        let errored = false;
+        if (Array.isArray(result)) {
+            if (result.length > 0) {
+                for (const validateResult of result) {
+                    if (validateResult.error) {
+                        errored = true;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            // 단수일 때
+            errored = result.error;
+        }
+        if (!errored) {
+            // 에러가 안 난 경우에만 limit 에 의한 validation 처리를 시작한다.
+            if (this.limit !== undefined) {
+                const value = await this.getCurrentValue(entityForm.getRenderType());
+                if (!isBlank(value)) {
+                    // value 에 값이 있을 때만 비교한다.
+                    // YYYY-MM 값이기 때문에 단순 비교해도 된다.
+                    if (this.limit.min !== undefined && this.limit.min > value) {
+                        return ValidateResult.fail(`최소 ${this.limit.min} 이상의 값을 선택해야 합니다.`);
+                    }
+                    else if (this.limit.max !== undefined && this.limit.max < value) {
+                        return ValidateResult.fail(`최대 ${this.limit.max} 이하의 값을 선택해야 합니다.`);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    static create(props) {
+        return new MonthField(props.name, props.order, props.limit).copyFields(props, true);
+    }
+}

package/dist/listgrid/components/fields/MultiSelectField.d.ts

@@ -0,0 +1,59 @@
+import { MultipleOptionalField, MultipleOptionalFieldProps, ViewListProps, ViewListResult } from './abstract';
+import React from 'react';
+import { MinMaxLimit, SelectOption } from '../../form/Type';
+import { FieldRenderParameters } from '../../config/EntityField';
+import { StatusChangeReason, StatusChangeValidation } from './SelectField';
+export interface MultiSelectFieldProps extends MultipleOptionalFieldProps {
+    /**
+     * 즉시 변경 기능 활성화 여부.
+     * true로 설정하면 옵션 선택 즉시 API를 호출하여 상태를 변경합니다.
+     */
+    enableImmediateChange?: boolean | undefined;
+    /**
+     * 상태 변경 시 사유 입력 설정.
+     * 특정 상태로 변경 시 사유 입력을 요구할 수 있습니다.
+     */
+    reason?: StatusChangeReason[] | undefined;
+    /**
+     * 상태 변경 시 검증 로직 설정.
+     * 상태 변경 전에 추가적인 검증을 수행할 수 있습니다.
+     */
+    validateStatusChange?: StatusChangeValidation | undefined;
+}
+export declare class MultiSelectField extends MultipleOptionalField<MultiSelectField> {
+    /** 즉시 변경 기능 활성화 여부 */
+    enableImmediateChange?: boolean | undefined;
+    /** 상태 변경 시 사유 입력 설정 */
+    reason?: StatusChangeReason[] | undefined;
+    /** 상태 변경 시 검증 로직 */
+    validateStatusChange?: StatusChangeValidation | undefined;
+    constructor(name: string, order: number, options: SelectOption[], limit?: MinMaxLimit, reason?: StatusChangeReason[], validateStatusChange?: StatusChangeValidation);
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * MultiSelectField 핵심 리스트 아이템 렌더링 로직
+     */
+    protected renderListItemInstance(props: ViewListProps): Promise<ViewListResult>;
+    /**
+     * MultiSelectField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): MultiSelectField;
+    static create(props: MultiSelectFieldProps): MultiSelectField;
+    /**
+     * 즉시 변경 기능 활성화.
+     * 옵션을 선택하면 즉시 API를 호출하여 상태를 변경합니다.
+     * @param enable 활성화 여부 (기본값: true)
+     */
+    withImmediateChange(enable?: boolean): this;
+    /**
+     * 상태 변경 시 사유 입력 설정.
+     * 특정 상태로 변경할 때 사유 입력을 요구합니다.
+     * @param reason 사유 입력 설정 배열
+     */
+    withReason(reason?: StatusChangeReason[]): this;
+    /**
+     * 상태 변경 시 검증 로직 설정.
+     * 상태 변경 전에 추가적인 검증을 수행합니다.
+     * @param validateStatusChange 검증 로직 설정
+     */
+    withValidateStatusChange(validateStatusChange?: StatusChangeValidation): this;
+}

package/dist/listgrid/components/fields/MultiSelectField.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MultipleOptionalField, renderListMultipleOptionalField, } from './abstract';
+import { CheckBoxChip } from '../../ui';
+import { getInputRendererParameters } from '../helper/FieldRendererHelper';
+import { MultiSelectBox } from '../../ui';
+export class MultiSelectField extends MultipleOptionalField {
+    constructor(name, order, options, limit, reason, validateStatusChange) {
+        super(name, order, 'multiselect', options, limit);
+        this.reason = reason;
+        this.validateStatusChange = validateStatusChange;
+    }
+    renderInstance(params) {
+        const cacheKey = this.createCacheKey();
+        return (async () => {
+            // combo 설정이 있으면 CheckBoxChip 우선 (다중 선택 전용)
+            // NOTE: MultiSelectField 는 값 타입이 배열이므로 RadioInput(단일 선택) 대신
+            //       CheckBoxChip 을 사용해야 선택 상태가 정상적으로 표시된다.
+            if (this.combo !== undefined && this.combo.direction !== undefined) {
+                return (_jsx(CheckBoxChip, { options: this.options, limit: this.limit, combo: this.combo, ...await getInputRendererParameters(this, params) }, cacheKey));
+            }
+            // Chip UI 조건 충족 시 CheckBoxChip 사용
+            if (this.shouldRenderAsChip()) {
+                return (_jsx(CheckBoxChip, { options: this.options, limit: this.limit, combo: { direction: 'row' }, ...await getInputRendererParameters(this, params) }, cacheKey));
+            }
+            return (_jsx(MultiSelectBox, { limit: this.limit, options: this.options, ...await getInputRendererParameters(this, params) }, cacheKey));
+        })();
+    }
+    /**
+     * MultiSelectField 핵심 리스트 아이템 렌더링 로직
+     */
+    renderListItemInstance(props) {
+        return renderListMultipleOptionalField(this, props);
+    }
+    /**
+     * MultiSelectField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        const instance = new MultiSelectField(name, order, this.options, this.limit, this.reason, this.validateStatusChange);
+        instance.enableImmediateChange = this.enableImmediateChange;
+        return instance;
+    }
+    static create(props) {
+        const field = new MultiSelectField(props.name, props.order, props.options, props.limit, props.reason, props.validateStatusChange);
+        field.enableImmediateChange = props.enableImmediateChange;
+        return field.copyFields(props, true);
+    }
+    /**
+     * 즉시 변경 기능 활성화.
+     * 옵션을 선택하면 즉시 API를 호출하여 상태를 변경합니다.
+     * @param enable 활성화 여부 (기본값: true)
+     */
+    withImmediateChange(enable = true) {
+        this.enableImmediateChange = enable;
+        return this;
+    }
+    /**
+     * 상태 변경 시 사유 입력 설정.
+     * 특정 상태로 변경할 때 사유 입력을 요구합니다.
+     * @param reason 사유 입력 설정 배열
+     */
+    withReason(reason) {
+        this.reason = reason;
+        return this;
+    }
+    /**
+     * 상태 변경 시 검증 로직 설정.
+     * 상태 변경 전에 추가적인 검증을 수행합니다.
+     * @param validateStatusChange 검증 로직 설정
+     */
+    withValidateStatusChange(validateStatusChange) {
+        this.validateStatusChange = validateStatusChange;
+        return this;
+    }
+}

package/dist/listgrid/components/fields/MultipleAssetField.d.ts

@@ -0,0 +1,31 @@
+import { FormField, FormFieldProps } from './abstract';
+import { FieldRenderParameters } from '../../config/EntityField';
+import React from 'react';
+interface MultipleAssetFieldProps extends FormFieldProps {
+    tags?: string[] | undefined;
+    fileTypes?: string[] | undefined;
+}
+export declare class MultipleAssetField extends FormField<MultipleAssetField> {
+    tags?: string[] | undefined;
+    fileTypes?: string[] | undefined;
+    constructor(name: string, order: number, tags?: string[], fileTypes?: string[]);
+    /**
+     * MultipleAssetField 핵심 렌더링 로직
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * MultipleAssetField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): MultipleAssetField;
+    static create(props: MultipleAssetFieldProps): MultipleAssetField;
+}
+export interface MultipleAssetForm {
+    assets?: AssetItem[] | undefined;
+    preferred?: string | undefined;
+}
+export interface AssetItem {
+    name?: string | undefined;
+    description?: string | undefined;
+    url: string;
+}
+export {};

package/dist/listgrid/components/fields/MultipleAssetField.js

@@ -0,0 +1,200 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormField } from './abstract';
+import React, { useEffect, useState } from 'react';
+import { getInputRendererParameters } from '../helper/FieldRendererHelper';
+import { Modal } from '../../ui';
+import { Paper } from '../../ui';
+import { Button } from '../../ui';
+import { TextInput } from '../../ui';
+import { defaultString, isBlank } from '../../utils/StringUtil';
+import { IconPhotoPlus, IconTrash } from '@tabler/icons-react';
+import { MultipleAssetUpload } from './view/MultipleAssetUpload';
+import { getAccessableAssetUrl } from '../../misc';
+import { RegexLowerEnglishNumber } from '../../misc';
+import { isTrue } from '../../utils/BooleanUtil';
+import { ViewHelpText } from '../form/ui/ViewHelpText';
+import { Tooltip } from '../../ui';
+export class MultipleAssetField extends FormField {
+    constructor(name, order, tags, fileTypes) {
+        super(name, order, 'custom');
+        this.tags = tags;
+        this.fileTypes = fileTypes;
+    }
+    /**
+     * MultipleAssetField 핵심 렌더링 로직
+     */
+    renderInstance(params) {
+        return (async () => {
+            const inputParams = await getInputRendererParameters(this, params);
+            return (_jsx(MultipleAssetFieldView, { fileTypes: this.fileTypes, tags: this.tags, ...inputParams }));
+        })();
+    }
+    /**
+     * MultipleAssetField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new MultipleAssetField(name, order, this.tags, this.fileTypes);
+    }
+    static create(props) {
+        return new MultipleAssetField(props.name, props.order, props.tags, props.fileTypes).copyFields(props, true);
+    }
+}
+function deepCopy(value) {
+    const newValue = {
+        ...(value?.preferred !== undefined ? { preferred: value.preferred } : {}),
+    };
+    if (value?.assets !== undefined && value.assets.length > 0) {
+        const newAssets = [];
+        value.assets.forEach((asset) => {
+            newAssets.push({ ...asset });
+        });
+        newValue.assets = newAssets;
+    }
+    return newValue;
+}
+const MultipleAssetFieldView = (props) => {
+    const [value, setValue] = useState();
+    const [openAdd, setOpenAdd] = useState(false);
+    const [error, setError] = useState('');
+    const [currentIndex, setCurrentIndex] = useState();
+    const [currentEdit, setCurrentEdit] = useState({ url: '' });
+    const [tags, setTags] = useState(props.tags ?? []);
+    useEffect(() => {
+        if (props.value) {
+            setValue(props.value);
+            const tags = props.tags ?? [];
+            if (props.value.assets) {
+                props.value?.assets.forEach((asset) => {
+                    if (!tags.includes(asset.name ?? '')) {
+                        tags.push(asset.name ?? '');
+                    }
+                });
+            }
+            setTags(tags);
+        }
+        else {
+            // new value
+            const newValue = { assets: [] };
+            if (props.tags) {
+                props.tags.forEach((tag) => {
+                    newValue.assets?.push({ name: tag, url: '' });
+                });
+                setValue(newValue);
+                setTags(props.tags);
+            }
+        }
+    }, [props.value]);
+    function openImageForm(currentIndex) {
+        setError('');
+        setCurrentIndex(currentIndex);
+        setOpenAdd(true);
+        if (currentIndex === undefined) {
+            setCurrentEdit({ url: '' });
+        }
+        else {
+            setCurrentEdit(value?.assets?.[currentIndex] ?? { url: '' });
+        }
+    }
+    function closeUpload() {
+        setCurrentEdit({ url: '' });
+        setCurrentIndex(undefined);
+        setOpenAdd(false);
+    }
+    const readonly = isTrue(props.readonly);
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: "rcm-asset-outer", children: _jsx("div", { className: "rcm-asset-table-responsive", children: _jsxs("div", { className: "rcm-asset-grid", children: [tags.map((tag, index) => {
+                                const asset = value?.assets?.find((asset) => asset.name === tag);
+                                if (!asset) {
+                                    return null;
+                                }
+                                const isPrimary = tag === 'Primary';
+                                return (_jsx("div", { children: _jsxs("table", { className: "rcm-asset-table", children: [_jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: "rcm-asset-th", children: _jsxs("div", { className: "rcm-asset-th-row", children: [_jsx("div", { className: `rcm-asset-th-name${!isPrimary ? ' rcm-asset-th-name-compact' : ''}`, children: _jsx(Tooltip, { label: `${asset.name}`, children: _jsx("div", { className: "rcm-truncate", children: asset.name }) }) }), !isPrimary && (_jsx("div", { className: "rcm-asset-th-remove", children: !readonly && (_jsx("button", { type: 'button', className: "rcm-asset-th-remove-btn", onClick: () => {
+                                                                            const newValues = { assets: [] };
+                                                                            value.assets?.forEach((asset, deleteIndex) => {
+                                                                                if (index !== deleteIndex) {
+                                                                                    newValues.assets?.push(asset);
+                                                                                }
+                                                                            });
+                                                                            if (props.tags?.includes(asset.name)) {
+                                                                                setTags(tags.filter((tag) => tag !== asset.name));
+                                                                            }
+                                                                            setValue(newValues);
+                                                                            props.onChange(newValues, false);
+                                                                        }, children: _jsx(IconTrash, { className: "rcm-icon", "data-color": "error" }) })) }))] }) }, `th-${index}`) }) }), _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "rcm-asset-td", children: _jsx("div", { className: "rcm-asset-td-inner", onClick: () => {
+                                                                openImageForm(index);
+                                                            }, children: _jsx("button", { className: "rcm-asset-btn-fill", children: (function () {
+                                                                    if (isBlank(value?.assets?.[index]?.url)) {
+                                                                        // 데이터 없음
+                                                                        if (readonly) {
+                                                                            return null;
+                                                                        }
+                                                                        else {
+                                                                            return (_jsx(IconPhotoPlus, { className: "rcm-icon rcm-asset-placeholder-icon" }));
+                                                                        }
+                                                                    }
+                                                                    else {
+                                                                        const imgUrl = getAccessableAssetUrl(value.assets[index].url);
+                                                                        return (_jsx("img", { className: "rcm-asset-img", alt: `${value?.assets?.[index]?.description ?? ''}`, onError: (event) => {
+                                                                                event.currentTarget.src = '/assets/images/no-image.png';
+                                                                            }, src: `${imgUrl}` }));
+                                                                    }
+                                                                })() }) }) }, `td-${index}`) }) })] }) }, `asset${index}`));
+                            }), !readonly && (_jsx("div", { className: "rcm-asset-add-col", children: _jsx("table", { className: "rcm-asset-add-table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "rcm-asset-add-td", children: _jsx("button", { type: "button", className: "rcm-asset-add-btn", onClick: () => {
+                                                        openImageForm();
+                                                    }, children: "+ \uCD94\uAC00" }) }) }) }) }) }))] }) }) }), openAdd && (_jsx(Modal, { title: currentIndex === undefined ? '새 이미지 추가' : '이미지 수정', size: '5xl', position: 'center', opened: openAdd, onClose: () => {
+                    closeUpload();
+                }, children: _jsxs(Paper, { className: "rcm-asset-modal-body", children: [_jsxs("div", { children: [_jsx("div", { className: "rcm-asset-modal-label", children: _jsx("div", { children: "\uC774\uBBF8\uC9C0 \uC720\uD615" }) }), _jsx(TextInput, { placeHolder: '이미지 유형', value: currentIndex === undefined
+                                        ? ''
+                                        : defaultString(value?.assets?.[currentIndex]?.name), readonly: currentIndex !== undefined &&
+                                        tags.includes(defaultString(value?.assets?.[currentIndex ?? 0]?.name)), onChange: (value) => {
+                                        setError('');
+                                        if (isBlank(value)) {
+                                            setError('이미지의 이름을 영문/숫자로 입력하세요.');
+                                        }
+                                        else {
+                                            if (tags.includes(value)) {
+                                                setError('중복된 이미지 이름이 존재합니다. 다른 이름을 입력해야 합니다.');
+                                            }
+                                            else {
+                                                if (!RegexLowerEnglishNumber.test(value)) {
+                                                    setError('영문 소문자/숫자만 입력할 수 있습니다');
+                                                    return;
+                                                }
+                                                const currentItem = { ...currentEdit };
+                                                currentItem.name = value;
+                                                setCurrentEdit(currentItem);
+                                            }
+                                        }
+                                    }, name: `item` }), currentIndex === undefined && (_jsx(ViewHelpText, { helpText: 'Front 에서 이 이미지를 식별하기 위한 Key입니다. 영문 소문자/숫자만 입력할 수 있습니다.' }))] }), _jsxs("div", { children: [_jsx("div", { className: "rcm-asset-modal-label", children: _jsx("div", { children: "Alt Tag" }) }), _jsx(TextInput, { placeHolder: 'Alt tag', tooltip: {
+                                        label: '이미지가 표시될 때 <img> 태그에 alt 속성값을 정의할 수 있습니다.',
+                                    }, value: defaultString(value?.assets?.[currentIndex ?? 0]?.description), onChange: (value) => {
+                                        const currentItem = { ...currentEdit };
+                                        currentItem.description = value;
+                                        setCurrentEdit(currentItem);
+                                    }, name: `description` })] }), _jsxs("div", { children: [_jsx("div", { className: "rcm-asset-modal-label", children: _jsx("div", { children: "Image" }) }), _jsx(MultipleAssetUpload, { fileTypes: props.fileTypes, url: currentEdit.url, onChange: (url) => {
+                                        const currentItem = { ...currentEdit };
+                                        currentItem.url = url;
+                                        setCurrentEdit(currentItem);
+                                    } })] }), _jsxs("div", { className: "rcm-asset-modal-footer", children: [!isBlank(error) && _jsx("div", { className: "rcm-asset-modal-error", children: error }), _jsx(Button, { style: { marginLeft: 0.5 }, color: 'info', disabled: isBlank(currentEdit.name) || isBlank(currentEdit.url), variant: "filled", onClick: () => {
+                                        if (isBlank(currentEdit.name)) {
+                                            setError('이미지 유형의 이름을 입력해야 합니다.');
+                                        }
+                                        else if (isBlank(currentEdit.url)) {
+                                            setError('이미지를 업로드해 주세요.');
+                                        }
+                                        else {
+                                            const values = deepCopy(value);
+                                            if (currentIndex === undefined) {
+                                                values.assets?.push(currentEdit);
+                                                setTags([...tags, currentEdit.name]);
+                                            }
+                                            else {
+                                                values.assets[currentIndex] = currentEdit;
+                                            }
+                                            setValue(values);
+                                            setOpenAdd(false);
+                                            props.onChange(values, currentEdit.name === 'Primary');
+                                            closeUpload();
+                                        }
+                                    }, children: currentIndex === undefined ? '이미지 등록' : '이미지 수정' })] })] }, `image-upload${currentIndex}`) }))] }));
+};

package/dist/listgrid/components/fields/NumberField.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ListableFormField, ListableFormFieldProps, ViewListProps, ViewListResult, ViewRenderProps, ViewRenderResult } from './abstract';
+import { MinMaxLimit } from '../../form/Type';
+import { Currency, Double } from '../../ui';
+import { FieldRenderParameters, FilterRenderParameters } from '../../config/EntityField';
+import { EntityForm } from '../../config/EntityForm';
+import { Session } from '../../auth/types';
+import { ValidateResult } from '../../validations/Validation';
+interface NumberFieldProps extends ListableFormFieldProps {
+    currency?: Currency;
+    double?: Double;
+    limit?: MinMaxLimit;
+}
+export declare class NumberField extends ListableFormField<NumberField> {
+    currency?: Currency;
+    double?: Double;
+    limit?: MinMaxLimit;
+    withMin(min?: number): this;
+    withMax(max?: number): this;
+    withLimit(limit?: MinMaxLimit): this;
+    withCurrency(currency?: Currency): this;
+    withDouble(double?: Double): this;
+    constructor(name: string, order: number, props?: {
+        limit?: MinMaxLimit;
+        currency?: Currency;
+        double?: Double;
+    });
+    /**
+     * NumberField 핵심 렌더링 로직
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * NumberField 핵심 리스트 필터 렌더링 로직
+     */
+    protected renderListFilterInstance(params: FilterRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * NumberField 핵심 리스트 아이템 렌더링 로직
+     */
+    protected renderListItemInstance(props: ViewListProps): Promise<ViewListResult>;
+    /**
+     * NumberField View 모드 렌더링 - 숫자 포맷팅
+     * compact 모드: 아이콘 없이 깔끔한 텍스트만 표시
+     * 일반 모드: 아이콘 + 포맷된 숫자 표시
+     */
+    protected renderViewInstance(props: ViewRenderProps): Promise<ViewRenderResult>;
+    /**
+     * NumberField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): NumberField;
+    static create(props: NumberFieldProps): NumberField;
+    validate(entityForm: EntityForm, session?: Session): Promise<ValidateResult | ValidateResult[]>;
+    private hasError;
+}
+export {};