@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/hooks/urlStateParsers.js

@@ -0,0 +1,241 @@
+import { createParser } from '../../../urlState';
+/**
+ * URL page parameter parser
+ * URL: 1-indexed (user-friendly)
+ * Internal: 0-indexed
+ */
+export const parseAsPage = createParser({
+    parse: (value) => {
+        const parsed = parseInt(value, 10);
+        if (isNaN(parsed) || parsed < 1)
+            return null;
+        // Convert 1-indexed URL to 0-indexed internal
+        return parsed - 1;
+    },
+    serialize: (value) => {
+        // Convert 0-indexed internal to 1-indexed URL
+        return String(value + 1);
+    },
+});
+/**
+ * URL pageSize parameter parser
+ * Default: 20
+ */
+export const parseAsPageSize = createParser({
+    parse: (value) => {
+        const parsed = parseInt(value, 10);
+        if (isNaN(parsed) || parsed < 1 || parsed > 100)
+            return null;
+        return parsed;
+    },
+    serialize: (value) => String(value),
+});
+export const parseAsSort = createParser({
+    parse: (value) => {
+        if (!value)
+            return null;
+        const [field, direction] = value.split(':');
+        if (!field || !direction)
+            return null;
+        if (direction !== 'ASC' && direction !== 'DESC')
+            return null;
+        return { field, direction };
+    },
+    serialize: (value) => {
+        if (!value)
+            return '';
+        return `${value.field}:${value.direction}`;
+    },
+});
+// Operator mapping from URL shorthand to internal QueryConditionType
+// Covers all QueryConditionType values
+const OPERATOR_MAP = {
+    eq: 'EQUAL',
+    ne: 'NOT_EQUAL',
+    eqi: 'EQUAL_IGNORECASE',
+    in: 'IN',
+    nin: 'NOT_IN',
+    null: 'NULL',
+    notnull: 'NOT_NULL',
+    like: 'LIKE',
+    nlike: 'NOT_LIKE',
+    start: 'START_WITH',
+    nstart: 'NOT_START_WITH',
+    end: 'END_WITH',
+    nend: 'NOT_END_WITH',
+    lt: 'LESS_THAN',
+    lte: 'LESS_THAN_EQUAL',
+    gt: 'GREATER',
+    gte: 'GREATER_THAN_EQUAL',
+    nlt: 'NOT_LESS_THAN',
+    nlte: 'NOT_LESS_THAN_EQUAL',
+    ngt: 'NOT_GREATER',
+    ngte: 'NOT_GREATER_THAN_EQUAL',
+    between: 'BETWEEN',
+    nbetween: 'NOT_BETWEEN',
+    ideq: 'ID_EQUAL',
+};
+// Reverse mapping for serialization
+const REVERSE_OPERATOR_MAP = {
+    EQUAL: 'eq',
+    NOT_EQUAL: 'ne',
+    EQUAL_IGNORECASE: 'eqi',
+    IN: 'in',
+    NOT_IN: 'nin',
+    NULL: 'null',
+    NOT_NULL: 'notnull',
+    LIKE: 'like',
+    NOT_LIKE: 'nlike',
+    START_WITH: 'start',
+    NOT_START_WITH: 'nstart',
+    END_WITH: 'end',
+    NOT_END_WITH: 'nend',
+    LESS_THAN: 'lt',
+    LESS_THAN_EQUAL: 'lte',
+    GREATER: 'gt',
+    GREATER_THAN_EQUAL: 'gte',
+    NOT_LESS_THAN: 'nlt',
+    NOT_LESS_THAN_EQUAL: 'nlte',
+    NOT_GREATER: 'ngt',
+    NOT_GREATER_THAN_EQUAL: 'ngte',
+    BETWEEN: 'between',
+    NOT_BETWEEN: 'nbetween',
+    ID_EQUAL: 'ideq',
+};
+/**
+ * Parse a single filter segment
+ * Formats: "field:value" or "field:op:value"
+ */
+function parseFilterSegment(segment) {
+    if (!segment)
+        return null;
+    const parts = segment.split(':');
+    if (parts.length < 2)
+        return null;
+    const name = parts[0];
+    if (!name)
+        return null;
+    // Format: field:op:value (3 parts)
+    if (parts.length >= 3) {
+        const opKey = parts[1].toLowerCase();
+        const queryConditionType = OPERATOR_MAP[opKey];
+        if (queryConditionType) {
+            // Join remaining parts in case value contains ':'
+            const rawValue = parts.slice(2).join(':');
+            // For IN/NOT_IN operators, split by pipe to get array and use 'values' field
+            if ((queryConditionType === 'IN' || queryConditionType === 'NOT_IN') &&
+                rawValue.includes('|')) {
+                return { name, values: rawValue.split('|'), queryConditionType };
+            }
+            return { name, value: rawValue, queryConditionType };
+        }
+    }
+    // Format: field:value (2 parts)
+    const value = parts.slice(1).join(':');
+    // If value contains pipe separator, treat as IN operator with multiple values
+    if (value.includes('|')) {
+        return { name, values: value.split('|'), queryConditionType: 'IN' };
+    }
+    return { name, value, queryConditionType: 'EQUAL' };
+}
+/**
+ * Serialize a single filter to URL format
+ */
+function serializeFilterItem(filter) {
+    const { name, value, values, queryConditionType } = filter;
+    // Handle array values (values field or array in value) - join with pipe separator
+    let serializedValue;
+    if (values && values.length > 0) {
+        serializedValue = values.join('|');
+    }
+    else if (Array.isArray(value)) {
+        serializedValue = value.join('|');
+    }
+    else {
+        serializedValue = value ?? '';
+    }
+    // For EQUAL condition, use short format: field:value
+    if (!queryConditionType || queryConditionType === 'EQUAL') {
+        return `${name}:${serializedValue}`;
+    }
+    // For other conditions, use full format: field:op:value
+    const op = REVERSE_OPERATOR_MAP[queryConditionType] ?? queryConditionType.toLowerCase();
+    return `${name}:${op}:${serializedValue}`;
+}
+export const parseAsFilters = createParser({
+    parse: (value) => {
+        if (!value)
+            return null;
+        try {
+            // Split by comma and parse each segment
+            const segments = value.split(',').filter((s) => s.trim());
+            if (segments.length === 0)
+                return null;
+            const filters = [];
+            for (const segment of segments) {
+                const filter = parseFilterSegment(segment.trim());
+                if (filter) {
+                    filters.push(filter);
+                }
+            }
+            if (filters.length === 0)
+                return null;
+            // All filters go to AND by default
+            return { AND: filters };
+        }
+        catch {
+            return null;
+        }
+    },
+    serialize: (value) => {
+        if (!value)
+            return '';
+        try {
+            const parts = [];
+            // Serialize AND filters
+            if (value.AND && value.AND.length > 0) {
+                for (const filter of value.AND) {
+                    parts.push(serializeFilterItem(filter));
+                }
+            }
+            // Note: OR filters are not commonly used in URL, but we can support them
+            // by prefixing with 'or.' if needed in the future
+            return parts.join(',');
+        }
+        catch {
+            return '';
+        }
+    },
+});
+/**
+ * URL quick search parameter parser
+ * Simple string with URL encoding handled by nuqs
+ */
+export const parseAsQuickSearch = createParser({
+    parse: (value) => {
+        if (!value || value.trim() === '')
+            return null;
+        return value;
+    },
+    serialize: (value) => value ?? '',
+});
+/**
+ * Default URL state
+ */
+export const defaultUrlState = {
+    page: null,
+    pageSize: null,
+    q: null,
+    sort: null,
+    filters: null,
+};
+/**
+ * Check if URL has any ListGrid params
+ */
+export function hasUrlParams(urlState) {
+    return (urlState.page !== null ||
+        urlState.pageSize !== null ||
+        urlState.q !== null ||
+        urlState.sort !== null ||
+        urlState.filters !== null);
+}

package/dist/listgrid/components/list/hooks/useCardSubCollectionData.d.ts

@@ -0,0 +1,34 @@
+import { SearchForm } from '../../../form/SearchForm';
+/**
+ * Configuration for card subcollection data fetching
+ */
+export interface CardSubCollectionDataConfig {
+    /** Field name that maps the child to parent (e.g., 'parentId') */
+    mappedBy: string;
+    /** Filter field name (defaults to mappedBy) */
+    filterBy?: string;
+    /** Optional filters to apply */
+    filters?: Record<string, any>;
+    /** Whether to use SearchForm-based fetching (POST request) */
+    useSearchForm?: boolean;
+    /** SearchForm instance for fetching (when useSearchForm is true) */
+    searchForm?: SearchForm;
+}
+/**
+ * Hook for fetching card subcollection data
+ * Fetches all data at once (no pagination) from the specified URL
+ *
+ * Supports two modes:
+ * 1. Simple GET request (default) - fetches from URL directly
+ * 2. SearchForm-based POST request - uses PageResult.fetchListData
+ *
+ * @param fetchUrl - String URL or function returning URL
+ * @param config - Card subcollection configuration
+ * @returns Object with data, loading, error states and refresh function
+ */
+export declare function useCardSubCollectionData(fetchUrl: string | (() => string), config: CardSubCollectionDataConfig): {
+    data: any[];
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+};

package/dist/listgrid/components/list/hooks/useCardSubCollectionData.js

@@ -0,0 +1,181 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PageResult } from '../../../form/Type';
+/**
+ * Hook for fetching card subcollection data
+ * Fetches all data at once (no pagination) from the specified URL
+ *
+ * Supports two modes:
+ * 1. Simple GET request (default) - fetches from URL directly
+ * 2. SearchForm-based POST request - uses PageResult.fetchListData
+ *
+ * @param fetchUrl - String URL or function returning URL
+ * @param config - Card subcollection configuration
+ * @returns Object with data, loading, error states and refresh function
+ */
+export function useCardSubCollectionData(fetchUrl, config) {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // AbortController ref for cleanup (for simple GET requests)
+    const abortControllerRef = useRef(null);
+    // Track if mounted
+    const isMountedRef = useRef(true);
+    /**
+     * Helper to get the actual URL string
+     */
+    const getUrl = useCallback((url) => {
+        return typeof url === 'function' ? url() : url;
+    }, []);
+    /**
+     * Helper to extract data from response
+     * Handles both array responses and paginated responses with 'data' or 'list' property
+     */
+    const extractData = useCallback((response) => {
+        if (Array.isArray(response)) {
+            return response;
+        }
+        if (response && typeof response === 'object') {
+            if (Array.isArray(response.data)) {
+                return response.data;
+            }
+            if (Array.isArray(response.list)) {
+                return response.list;
+            }
+        }
+        return [];
+    }, []);
+    /**
+     * Fetch data using SearchForm-based POST request
+     */
+    const fetchDataWithSearchForm = useCallback(async () => {
+        if (!config.searchForm) {
+            setError(new Error('SearchForm is required when useSearchForm is true'));
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const url = getUrl(fetchUrl);
+            const result = await PageResult.fetchListData(url, config.searchForm);
+            if (!isMountedRef.current)
+                return;
+            if (result.errors && result.errors.length > 0) {
+                setError(new Error(result.errors.join(', ')));
+                setData([]);
+            }
+            else {
+                setData(result.list);
+                setError(null);
+            }
+        }
+        catch (err) {
+            if (!isMountedRef.current)
+                return;
+            const errorObj = err instanceof Error ? err : new Error(String(err));
+            setError(errorObj);
+            setData([]);
+        }
+        finally {
+            if (isMountedRef.current) {
+                setLoading(false);
+            }
+        }
+    }, [fetchUrl, getUrl, config.searchForm]);
+    /**
+     * Fetch data using simple GET request
+     */
+    const fetchDataSimple = useCallback(async (signal) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const url = getUrl(fetchUrl);
+            const response = await fetch(url, signal !== undefined ? { signal } : {});
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            const jsonData = await response.json();
+            const items = extractData(jsonData);
+            // Only update state if not aborted and mounted
+            if (!signal?.aborted && isMountedRef.current) {
+                setData(items);
+                setError(null);
+            }
+        }
+        catch (err) {
+            // Ignore abort errors
+            if (err instanceof Error && err.name === 'AbortError') {
+                return;
+            }
+            const errorObj = err instanceof Error ? err : new Error(String(err));
+            if (isMountedRef.current) {
+                setError(errorObj);
+                setData([]);
+            }
+        }
+        finally {
+            if (isMountedRef.current) {
+                setLoading(false);
+            }
+        }
+    }, [fetchUrl, getUrl, extractData]);
+    /**
+     * Effect to fetch data on mount and when dependencies change
+     */
+    useEffect(() => {
+        isMountedRef.current = true;
+        if (config.useSearchForm) {
+            // Use SearchForm-based fetching
+            fetchDataWithSearchForm();
+        }
+        else {
+            // Use simple GET request
+            // Cancel any in-flight request
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+            // Create new AbortController for this request
+            const abortController = new AbortController();
+            abortControllerRef.current = abortController;
+            fetchDataSimple(abortController.signal);
+        }
+        return () => {
+            isMountedRef.current = false;
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, [
+        fetchUrl,
+        config.mappedBy,
+        config.filterBy,
+        config.useSearchForm,
+        config.searchForm,
+        fetchDataWithSearchForm,
+        fetchDataSimple,
+    ]);
+    /**
+     * Refresh function to manually refetch data
+     */
+    const refresh = useCallback(async () => {
+        if (config.useSearchForm) {
+            await fetchDataWithSearchForm();
+        }
+        else {
+            // Cancel any in-flight request
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+            const abortController = new AbortController();
+            abortControllerRef.current = abortController;
+            await fetchDataSimple(abortController.signal);
+        }
+    }, [config.useSearchForm, fetchDataWithSearchForm, fetchDataSimple]);
+    return {
+        data,
+        loading,
+        error,
+        refresh,
+    };
+}

package/dist/listgrid/components/list/hooks/useListGridHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ListGridHeaderProps } from '../types/ListGridHeader.types';
+export declare const useListGridHeader: (props: ListGridHeaderProps) => {
+    headerButtons: React.ReactNode[];
+    checkedButtons: React.ReactNode[];
+};

package/dist/listgrid/components/list/hooks/useListGridHeader.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { showConfirm } from '../../../message';
+import { useLoadingStore } from '../../../loading';
+export const useListGridHeader = (props) => {
+    const { buttons, selectionOptions, entityForm, checkedItems, session } = props;
+    const [headerButtons, setHeaderButtons] = useState([]);
+    const [checkedButtons, setCheckedButtons] = useState([]);
+    const { setOpenBaseLoading } = useLoadingStore();
+    useEffect(() => {
+        (async () => {
+            if (buttons) {
+                const newButtons = [];
+                for (const [index, buttonFunc] of buttons.entries()) {
+                    const buttonProps = { ...props, ...(session !== undefined ? { session } : {}) };
+                    newButtons.push(_jsx(React.Fragment, { children: await buttonFunc(buttonProps) }, index));
+                }
+                setHeaderButtons(newButtons);
+            }
+        })();
+    }, [buttons, props]);
+    useEffect(() => {
+        (async () => {
+            const newCheckedButtons = [];
+            // selection.actions 처리
+            if (selectionOptions?.actions && checkedItems && checkedItems.length > 0) {
+                for (const [index, action] of selectionOptions.actions.entries()) {
+                    // show 조건 확인
+                    const shouldShow = action.show === undefined
+                        ? true
+                        : typeof action.show === 'function'
+                            ? action.show(checkedItems)
+                            : action.show;
+                    if (!shouldShow)
+                        continue;
+                    const color = action.color ?? 'primary';
+                    const outline = action.outline ?? false;
+                    const className = action.className ?? (outline ? `btn btn-outline-${color}` : `btn btn-${color}`);
+                    const label = typeof action.label === 'function' ? action.label(checkedItems) : action.label;
+                    newCheckedButtons.push(_jsxs("button", { type: "button", className: className, onClick: async () => {
+                            // 확인 메시지
+                            if (action.confirmMessage) {
+                                const message = typeof action.confirmMessage === 'function'
+                                    ? action.confirmMessage(checkedItems)
+                                    : action.confirmMessage;
+                                showConfirm({
+                                    title: '확인',
+                                    message: message,
+                                    confirmButtonText: '확인',
+                                    cancelButtonText: '취소',
+                                    onConfirm: async () => {
+                                        // 실행 가능 여부 검증
+                                        if (action.canExecute && !action.canExecute(checkedItems)) {
+                                            return;
+                                        }
+                                        // 로딩바 표시
+                                        setOpenBaseLoading(true);
+                                        try {
+                                            await action.onClick(entityForm, checkedItems);
+                                        }
+                                        finally {
+                                            // 로딩바 숨김
+                                            setOpenBaseLoading(false);
+                                        }
+                                    },
+                                });
+                            }
+                            else {
+                                // 확인 메시지가 없는 경우
+                                // 실행 가능 여부 검증
+                                if (action.canExecute && !action.canExecute(checkedItems)) {
+                                    return;
+                                }
+                                // 로딩바 표시
+                                setOpenBaseLoading(true);
+                                try {
+                                    await action.onClick(entityForm, checkedItems);
+                                }
+                                finally {
+                                    // 로딩바 숨김
+                                    setOpenBaseLoading(false);
+                                }
+                            }
+                        }, disabled: action.canExecute && !action.canExecute(checkedItems), children: [action.icon, label] }, `action-${index}`));
+                }
+            }
+            setCheckedButtons(newCheckedButtons);
+        })();
+    }, [selectionOptions, entityForm, checkedItems, setOpenBaseLoading]);
+    return { headerButtons, checkedButtons };
+};

package/dist/listgrid/components/list/hooks/useListGridLogic.d.ts

@@ -0,0 +1,2 @@
+import { ViewListGridProps } from '../types/ViewListGrid.types';
+export declare const useListGridLogic: (props: ViewListGridProps) => any;