@rchemist/listgrid 0.2.6

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

@@ -0,0 +1,7 @@
+import { ResultByRuleCondition, RuleBasedFieldProps, RuleFieldEntityForm } from './Type';
+interface RuleFieldViewProps extends RuleBasedFieldProps {
+    onSubmit: ResultByRuleCondition;
+    entityForms: RuleFieldEntityForm[];
+}
+export declare const RuleFieldView: (props: RuleFieldViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RuleBasedFieldsView } from './RuleBasedFieldView';
+import { RuleConditionValue, } from './Type';
+export const RuleFieldView = (props) => {
+    const value = getValue(props.value);
+    function getValue(v) {
+        if (v === undefined) {
+            return undefined;
+        }
+        if (v instanceof Map) {
+            return v;
+        }
+        else if (typeof v === 'object' && v !== null) {
+            // 객체인 경우 Map으로 변환 시도
+            const newMap = new Map();
+            Object.entries(v).map(([key, value]) => {
+                const ruleCondition = RuleConditionValue.create(value);
+                newMap.set(ruleCondition.id, ruleCondition);
+            });
+            return newMap;
+        }
+        else {
+            // Map이 아니거나 변환이 불가능한 경우 빈 Map으로 설정
+            return undefined;
+        }
+    }
+    return (_jsx("div", { className: 'border rounded-md p-4', children: _jsx(RuleBasedFieldsView, { ...props, value: value, viewType: 'field', onSubmitField: props.onSubmit, onCancel: () => { } }) }));
+};

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

@@ -0,0 +1,54 @@
+import { QueryConditionType } from '../../../form/SearchForm';
+import { FormField } from '../abstract';
+import { EntityForm } from '../../../config/EntityForm';
+export interface RuleFieldValue {
+    id: number;
+    name: string;
+    queryConditionType: QueryConditionType;
+    values?: any[];
+    subConditions?: Map<'AND' | 'OR', RuleFieldValue[]>;
+}
+export type RuleFieldType = 'add' | 'remove';
+export declare class RuleConditionValue {
+    id: number;
+    condition: 'AND' | 'OR';
+    targetEntityPrefix: string;
+    values: RuleFieldValue[];
+    constructor(id: number, condition: 'AND' | 'OR', targetEntityPrefix: string);
+    static create(data: unknown): RuleConditionValue;
+    addValues(...values: RuleFieldValue[]): void;
+    withValues(values: RuleFieldValue[]): this;
+    isEmpty(): boolean;
+}
+export type ResultByCount = (count: number) => void;
+export type ResultByRuleCondition = (result: Map<number, RuleConditionValue>) => void;
+export interface RuleBasedFieldProps {
+    value?: Map<number, RuleConditionValue> | undefined;
+    onRefresh?: (() => void) | undefined;
+    setNotifications?: ((notifications: string[]) => void) | undefined;
+    parentId?: string | undefined;
+    fieldName?: string | undefined;
+}
+/**
+ * Rule 이 항상 동일한 엔티티를 대상으로 적용되지는 않는다.
+ * 예를 들어 주문 상품 오퍼라면
+ * 상품에 대한 Rule 이 있을 수도 있고
+ * 주문에 대한 Rule 이 있을 수도 있다.
+ * 또 Category 에 대한 Rule 이 있을 수도 있다.
+ * 따라서 여러 엔티티폼을 전달할 수 있어야 한다.
+ * 또 각 엔티티폼에 대해 prefix 와 name 을 지정해 어떤 필드의 값인지 구분할 수 있어야 한다.
+ * 엔티티폼을 통째로 넘기거나 필요한 필드를 지정해 넘길 수 있다.
+ */
+export type RuleFieldEntityForm = {
+    prefix: string;
+    label: string;
+    entityForm?: EntityForm;
+    fields?: FormField<any>[];
+};
+export declare function getConfiguredFields(targetEntityForm: RuleFieldEntityForm): FormField<any>[];
+/**
+ * 엔티티폼에서 Rule 필드를 자동으로 추출할 때 무조건 제거해야 할 대상 필드를 지정한다.
+ * 여러 조건이 있을 수 있으니 함수로 따로 뺀다.
+ * @param field
+ */
+export declare function isIgnoreField(field: FormField<any>): boolean;

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

@@ -0,0 +1,72 @@
+import { parse, stringify } from '../../../utils/jsonUtils';
+export class RuleConditionValue {
+    constructor(id, condition, targetEntityPrefix) {
+        this.id = id;
+        this.condition = condition;
+        this.values = [];
+        this.targetEntityPrefix = targetEntityPrefix;
+    }
+    static create(data) {
+        if (typeof data === 'string') {
+            const result = parse(data);
+            const value = new RuleConditionValue(result.id, result.condition, result.targetEntityPrefix);
+            if (result.values) {
+                value.addValues(...result.values);
+            }
+            return value;
+        }
+        else {
+            return RuleConditionValue.create(stringify(data));
+        }
+    }
+    addValues(...values) {
+        values.forEach((newValue) => {
+            const existingValueIndex = this.values.findIndex((v) => v.id === newValue.id && v.name === newValue.name);
+            if (existingValueIndex !== -1) {
+                // 기존에 동일한 id와 name이 있는 경우, 해당 값을 업데이트
+                this.values[existingValueIndex] = {
+                    ...this.values[existingValueIndex],
+                    ...newValue,
+                };
+            }
+            else {
+                // 동일한 id와 name이 없는 경우, 새로운 값을 추가
+                this.values.push(newValue);
+            }
+        });
+    }
+    withValues(values) {
+        this.values = values ?? []; // undefined인 경우 빈 배열로 설정
+        return this;
+    }
+    isEmpty() {
+        return !this.values || this.values.length === 0;
+    }
+}
+export function getConfiguredFields(targetEntityForm) {
+    const fields = [];
+    if (targetEntityForm.fields !== undefined && targetEntityForm.fields.length > 0) {
+        fields.push(...targetEntityForm.fields);
+    }
+    else {
+        // 둘 중 하나는 반드시 있어야 한다.
+        for (const field of targetEntityForm.entityForm.getListFields()) {
+            if (field.isFilterable() && !isIgnoreField(field)) {
+                fields.push(field);
+            }
+        }
+    }
+    return fields;
+}
+/**
+ * 엔티티폼에서 Rule 필드를 자동으로 추출할 때 무조건 제거해야 할 대상 필드를 지정한다.
+ * 여러 조건이 있을 수 있으니 함수로 따로 뺀다.
+ * @param field
+ */
+export function isIgnoreField(field) {
+    if (field.name === 'active' && field.type === 'boolean') {
+        // active 조건을 rule 로 지정하는 것은 말이 안 된다.
+        return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { CustomFieldRendererProps } from '../../form/types/ViewEntityFormTheme.types';
+/**
+ * 카드 아이템의 스타일/렌더링 설정
+ */
+export interface CardItemConfig {
+    /** 카드 컨테이너 className */
+    containerClassName?: string;
+    /** 선택된 카드 컨테이너 className */
+    selectedContainerClassName?: string;
+    /** 카드 타이틀 className */
+    titleClassName?: string;
+    /** 카드 라벨(뱃지) className */
+    labelClassName?: string;
+    /** 카드 설명 className */
+    descriptionClassName?: string;
+    /** 선택 아이콘 className */
+    checkIconClassName?: string;
+    /** 카드 아이템 렌더링 함수 (완전 커스텀) */
+    renderCard?: (item: any, isSelected: boolean, onSelect: () => void) => React.ReactNode;
+    /** 카드 타이틀 필드 이름 또는 함수 */
+    titleField?: string | ((item: any) => string);
+    /** 카드 라벨(뱃지) 필드 이름 또는 함수 */
+    labelField?: string | ((item: any) => string);
+    /** 카드 설명 필드 이름 또는 함수 */
+    descriptionField?: string | ((item: any) => string);
+    /** 카드 이미지 필드 이름 또는 함수 */
+    imageField?: string | ((item: any) => string | undefined);
+    /** 카드 하단 액션 영역 렌더링 함수 */
+    renderAction?: (item: any) => React.ReactNode;
+}
+/**
+ * CardManyToOneView Props
+ */
+export interface CardManyToOneViewProps extends CustomFieldRendererProps {
+    /** 카드 그리드 컬럼 수 (기본: 3) */
+    columns?: number;
+    /** 모바일(sm) 화면에서의 컬럼 수 (기본: columns와 동일) */
+    mobileColumns?: number;
+    /** 카드 그리드 className */
+    gridClassName?: string;
+    /** 카드 아이템 설정 */
+    cardConfig?: CardItemConfig;
+    /** 선택 가능한 아이템 목록 (직접 제공하는 경우) */
+    items?: any[];
+    /** 아이템 목록 로드 함수 (커스텀 로드 로직) */
+    loadItems?: () => Promise<any[]>;
+    /** 빈 상태 메시지 */
+    emptyMessage?: string;
+    /** 검색 버튼 표시 여부 */
+    showSearchButton?: boolean;
+    /** 선택되지 않은 상태에서 전체 목록 표시 여부 (기본: true) */
+    showAllWhenEmpty?: boolean;
+    /** 페이지당 카드 수 (기본: 6). 이 숫자를 초과하면 페이징+검색 UI 표시 */
+    pageSize?: number;
+    /** 검색 우선 모드: true면 검색 전까지 카드 목록 숨김 (서버 검색) */
+    searchFirst?: boolean;
+    /** 검색 입력란 플레이스홀더 */
+    searchPlaceholder?: string;
+    /** 검색 필드 지정 (기본: ['name']) */
+    searchFields?: string[];
+}
+/**
+ * CardManyToOneView
+ *
+ * ManyToOne 필드를 카드 형태로 표시하는 커스텀 렌더러입니다.
+ * - readonly 모드: 선택된 카드만 표시
+ * - 편집 모드: 선택된 카드 + 변경 버튼으로 다른 옵션 선택 가능
+ *
+ * @example
+ * ```tsx
+ * <EntityFormThemeProvider
+ *   fieldRenderers={{
+ *     syllabus: CardManyToOneView,
+ *     selection: (props) => (
+ *       <CardManyToOneView
+ *         {...props}
+ *         columns={3}
+ *         cardConfig={{
+ *           titleField: 'name',
+ *           labelField: (item) => item.term?.name,
+ *           descriptionField: (item) => `${item.year}년도 ${item.semester}학기`,
+ *         }}
+ *       />
+ *     ),
+ *   }}
+ * >
+ *   {children}
+ * </EntityFormThemeProvider>
+ * ```
+ */
+export declare const CardManyToOneView: React.FC<CardManyToOneViewProps>;
+export default CardManyToOneView;