@maxal_studio/kratosjs-react 1.0.0

package/dist/table/hooks/useEditableRows.js

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+const rowIdOf = (row) => row.id || row._id;
+/**
+ * Change tracking for inline-editable columns: per-row dirty state,
+ * optimistic cell updates, save and reset.
+ */
+export function useEditableRows({ data, setData, saveRecord, onSaveError }) {
+    const [changedRows, setChangedRows] = useState(new Map());
+    const [originalData, setOriginalData] = useState(new Map());
+    const resetTracking = (rows) => {
+        const originalMap = new Map();
+        rows.forEach(row => originalMap.set(rowIdOf(row), { ...row }));
+        setOriginalData(originalMap);
+        setChangedRows(new Map());
+    };
+    const handleCellChange = (rowId, columnName, newValue) => {
+        // Optimistic UI update
+        setData(prevData => prevData.map(row => (rowIdOf(row) === rowId ? { ...row, [columnName]: newValue } : row)));
+        setChangedRows(prev => {
+            const next = new Map(prev);
+            next.set(rowId, { ...(next.get(rowId) || {}), [columnName]: newValue });
+            return next;
+        });
+    };
+    const handleSaveRow = async (rowId) => {
+        const changes = changedRows.get(rowId);
+        if (!changes)
+            return;
+        try {
+            await saveRecord(rowId, changes);
+            // The saved row becomes the new original
+            setOriginalData(prev => {
+                const next = new Map(prev);
+                const currentRow = data.find(row => rowIdOf(row) === rowId);
+                if (currentRow) {
+                    next.set(rowId, { ...currentRow });
+                }
+                return next;
+            });
+            setChangedRows(prev => {
+                const next = new Map(prev);
+                next.delete(rowId);
+                return next;
+            });
+        }
+        catch (err) {
+            console.error('Error saving row:', err);
+            onSaveError?.(err instanceof Error ? err : new Error('Failed to save changes'));
+        }
+    };
+    const handleResetRow = (rowId) => {
+        const original = originalData.get(rowId);
+        if (!original)
+            return;
+        setData(prevData => prevData.map(row => (rowIdOf(row) === rowId ? { ...original } : row)));
+        setChangedRows(prev => {
+            const next = new Map(prev);
+            next.delete(rowId);
+            return next;
+        });
+    };
+    return { changedRows, handleCellChange, handleSaveRow, handleResetRow, resetTracking };
+}

package/dist/table/hooks/useTableActions.d.ts

@@ -0,0 +1,54 @@
+import { SerializedForm, SerializedTable } from '@maxal_studio/kratosjs';
+import { TableApiClient } from '../../api/tableApi';
+export interface ActionFormModalState {
+    actionName: string;
+    recordIds: string[];
+    formSchema: SerializedForm;
+    isBulk?: boolean;
+    requiresConfirmation?: boolean;
+    modalDescription?: string;
+}
+export interface TableActionsApi {
+    selectedRows: Set<any>;
+    handleRowSelect: (id: any) => void;
+    handleSelectAll: () => void;
+    clearSelection: () => void;
+    handleRowAction: (actionName: string, rowId: any) => Promise<void>;
+    handleBulkAction: (actionName: string, selectedIds: any[]) => Promise<void>;
+    handleHeaderAction: (actionName: string) => Promise<void>;
+    actionFormModal: ActionFormModalState | null;
+    setActionFormModal: (state: ActionFormModalState | null) => void;
+}
+export interface UseTableActionsOptions {
+    schema: SerializedTable & {
+        canCreate?: boolean;
+        canEdit?: boolean;
+        canDelete?: boolean;
+        canView?: boolean;
+    };
+    apiClient: TableApiClient;
+    apiBaseUrl: string;
+    resourceSlug: string;
+    relatedResourceSlug?: string;
+    relatedResourceApiUrl?: string;
+    apiUrl: string;
+    canEdit: boolean;
+    canDelete: boolean;
+    canView: boolean;
+    data: any[];
+    reload: () => Promise<void>;
+    setError: (error: string | null) => void;
+    setIsLoading: (loading: boolean) => void;
+    /** Current table query (search/filters/sort), used by header exports. */
+    getQueryParams?: () => Record<string, any>;
+    onRowAction?: (action: string, rowId: any) => Promise<void> | void;
+    onBulkAction?: (action: string, selectedIds: any[]) => Promise<void> | void;
+    onEditClick?: (rowId: any) => void;
+    onViewClick?: (rowId: any) => void;
+}
+/**
+ * Row selection plus the row/bulk action pipeline: view/edit modal routing,
+ * delete with confirmation, handler actions (with optional form modal or
+ * confirmation), redirects and toasts.
+ */
+export declare function useTableActions(options: UseTableActionsOptions): TableActionsApi;

package/dist/table/hooks/useTableActions.js

@@ -0,0 +1,313 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TableApiClient } from '../../api/tableApi';
+import { executeAction, executeBulkAction } from '../../api/actionsApi';
+import { downloadExport } from '../../api/exportApi';
+import { handleRedirect } from '../../utils/redirectHandler';
+import { useConfirm } from '../../components/ui/ConfirmDialog';
+import { useToast } from '../../components/ui/Toast';
+import { useResourceModal } from '../../contexts/ResourceModalContext';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * Row selection plus the row/bulk action pipeline: view/edit modal routing,
+ * delete with confirmation, handler actions (with optional form modal or
+ * confirmation), redirects and toasts.
+ */
+export function useTableActions(options) {
+    const { schema, apiClient, apiBaseUrl, resourceSlug, relatedResourceSlug, relatedResourceApiUrl, apiUrl, canEdit, canDelete, canView, data, reload, setError, setIsLoading, getQueryParams, onRowAction, onBulkAction, onEditClick, onViewClick, } = options;
+    const navigate = useNavigate();
+    const confirm = useConfirm();
+    const toast = useToast();
+    const { openModal } = useResourceModal();
+    const [selectedRows, setSelectedRows] = useState(new Set());
+    const [actionFormModal, setActionFormModal] = useState(null);
+    const handleRowSelect = (id) => {
+        setSelectedRows(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    };
+    const handleSelectAll = () => {
+        setSelectedRows(prev => prev.size === data.length && data.length > 0 ? new Set() : new Set(data.map(row => row.id || row._id)));
+    };
+    const clearSelection = () => setSelectedRows(new Set());
+    /** For relation tables, mutations go to the related resource's own endpoint */
+    const clientForMutations = () => {
+        if (relatedResourceSlug && apiBaseUrl) {
+            const url = relatedResourceApiUrl || `${apiBaseUrl}/${relatedResourceSlug}`;
+            return new TableApiClient(apiBaseUrl, url, '/list');
+        }
+        return apiClient;
+    };
+    const actionApiUrl = () => relatedResourceSlug && apiBaseUrl ? `${apiBaseUrl}/${relatedResourceSlug}` : relatedResourceApiUrl || apiUrl;
+    /** Run an export (download) action, optionally scoped to selected record ids. */
+    const runExport = async (format, actionName, recordIds) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            await downloadExport(actionApiUrl(), apiBaseUrl, {
+                format,
+                action: actionName,
+                query: recordIds && recordIds.length > 0 ? undefined : getQueryParams?.() || {},
+                recordIds,
+            });
+        }
+        catch (err) {
+            setError(err.message || translate('core:error.export_failed'));
+            console.error('Error exporting:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const deleteRecords = async (ids) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            await clientForMutations().deleteRecords(ids);
+            toast.success(ids.length === 1 ? 'Item deleted successfully' : `${ids.length} items deleted successfully`);
+        }
+        catch (err) {
+            setError(err.message || translate('core:error.delete_failed'));
+            console.error('Error deleting:', err);
+        }
+        finally {
+            await reload();
+            setIsLoading(false);
+        }
+    };
+    const handleRowAction = async (actionName, rowId) => {
+        const actionConfig = schema.actions?.find(a => a.name === actionName);
+        if (actionName === 'view') {
+            if (!canView)
+                return;
+            if (onViewClick) {
+                onViewClick(rowId);
+                return;
+            }
+            openModal(resourceSlug, 'view', rowId);
+            return;
+        }
+        if (actionName === 'edit') {
+            if (!canEdit)
+                return;
+            if (onEditClick) {
+                onEditClick(rowId);
+                return;
+            }
+            openModal(resourceSlug, 'edit', rowId);
+            return;
+        }
+        if (actionName === 'delete') {
+            if (!canDelete)
+                return;
+            const confirmed = await confirm({
+                title: translate('core:confirm.delete_item_title'),
+                message: translate('core:confirm.delete_item_message'),
+                confirmLabel: translate('core:common.delete'),
+                danger: true,
+            });
+            if (!confirmed)
+                return;
+            await deleteRecords([rowId]);
+            return;
+        }
+        if (actionConfig?.hasHandler) {
+            if (actionConfig.form) {
+                setActionFormModal({
+                    actionName,
+                    recordIds: [rowId],
+                    formSchema: actionConfig.form,
+                    isBulk: false,
+                    requiresConfirmation: actionConfig.requiresConfirmation,
+                    modalDescription: actionConfig.modalDescription,
+                });
+                openModal(resourceSlug, 'action', rowId, actionName, actionConfig.label);
+                return;
+            }
+            if (actionConfig.requiresConfirmation) {
+                const confirmed = await confirm({
+                    title: actionConfig.label || actionName,
+                    message: actionConfig.modalDescription ||
+                        translate('core:confirm.action_single', { action: actionName }),
+                });
+                if (!confirmed)
+                    return;
+            }
+            setIsLoading(true);
+            setError(null);
+            try {
+                const result = await executeAction(actionApiUrl(), actionName, rowId, {});
+                if (handleRedirect(result, navigate) || (result.data && handleRedirect(result.data, navigate))) {
+                    return;
+                }
+                if (result.success) {
+                    if (result.message) {
+                        toast.success(result.message);
+                    }
+                }
+                else {
+                    setError(result.message || translate('core:form.action_failed'));
+                }
+            }
+            catch (err) {
+                setError(err.message || translate('core:error.action_failed'));
+                console.error('Error executing action:', err);
+            }
+            finally {
+                await reload();
+                setIsLoading(false);
+            }
+            return;
+        }
+        if (onRowAction) {
+            await onRowAction(actionName, rowId);
+        }
+    };
+    const handleBulkAction = async (actionName, selectedIds) => {
+        const actionConfig = schema.bulkActions?.find(a => a.name === actionName);
+        if (actionName === 'delete' || actionName === 'bulkDelete') {
+            if (!canDelete)
+                return;
+            const confirmed = await confirm({
+                title: translate('core:confirm.delete_items_title'),
+                message: translate('core:confirm.delete_items_message', { count: selectedIds.length }),
+                confirmLabel: translate('core:common.delete'),
+                danger: true,
+            });
+            if (!confirmed)
+                return;
+            clearSelection();
+            await deleteRecords(selectedIds);
+            return;
+        }
+        const exportFormat = actionConfig?.export;
+        if (exportFormat) {
+            await runExport(exportFormat, actionName, selectedIds);
+            return;
+        }
+        if (actionConfig?.hasHandler) {
+            if (actionConfig.form) {
+                setActionFormModal({
+                    actionName,
+                    recordIds: selectedIds,
+                    formSchema: actionConfig.form,
+                    isBulk: true,
+                    requiresConfirmation: actionConfig.requiresConfirmation,
+                    modalDescription: actionConfig.modalDescription,
+                });
+                openModal(resourceSlug, 'action', undefined, actionName, actionConfig.label);
+                return;
+            }
+            if (actionConfig.requiresConfirmation) {
+                const confirmed = await confirm({
+                    title: actionConfig.label || actionName,
+                    message: actionConfig.modalDescription ||
+                        translate('core:form.confirm_bulk', { action: actionName, count: selectedIds.length }),
+                });
+                if (!confirmed)
+                    return;
+            }
+            setIsLoading(true);
+            setError(null);
+            try {
+                const result = await executeBulkAction(actionApiUrl(), actionName, selectedIds, {});
+                if (result.success) {
+                    if (result.message) {
+                        toast.success(result.message);
+                    }
+                    if (actionConfig.deselectAfterCompletion !== false) {
+                        clearSelection();
+                    }
+                }
+                else {
+                    setError(result.message || translate('core:error.bulk_action_failed'));
+                }
+            }
+            catch (err) {
+                setError(err.message || translate('core:error.action_failed_bulk'));
+                console.error('Error executing bulk action:', err);
+            }
+            finally {
+                await reload();
+                setIsLoading(false);
+            }
+            return;
+        }
+        if (onBulkAction) {
+            await onBulkAction(actionName, selectedIds);
+            await reload();
+        }
+    };
+    const handleHeaderAction = async (actionName) => {
+        const actionConfig = schema.headerActions?.find(a => a.name === actionName);
+        if (!actionConfig)
+            return;
+        const exportFormat = actionConfig.export;
+        if (exportFormat) {
+            await runExport(exportFormat, actionName);
+            return;
+        }
+        // Handler-based header action (operates on no specific records).
+        if (actionConfig.hasHandler) {
+            if (actionConfig.form) {
+                setActionFormModal({
+                    actionName,
+                    recordIds: [],
+                    formSchema: actionConfig.form,
+                    isBulk: true,
+                    requiresConfirmation: actionConfig.requiresConfirmation,
+                    modalDescription: actionConfig.modalDescription,
+                });
+                openModal(resourceSlug, 'action', undefined, actionName, actionConfig.label);
+                return;
+            }
+            if (actionConfig.requiresConfirmation) {
+                const confirmed = await confirm({
+                    title: actionConfig.label || actionName,
+                    message: actionConfig.modalDescription ||
+                        translate('core:confirm.action_generic', { action: actionName }),
+                });
+                if (!confirmed)
+                    return;
+            }
+            setIsLoading(true);
+            setError(null);
+            try {
+                const result = await executeBulkAction(actionApiUrl(), actionName, [], {});
+                if (result.success) {
+                    if (result.message)
+                        toast.success(result.message);
+                }
+                else {
+                    setError(result.message || translate('core:form.action_failed'));
+                }
+            }
+            catch (err) {
+                setError(err.message || translate('core:error.action_failed'));
+                console.error('Error executing header action:', err);
+            }
+            finally {
+                await reload();
+                setIsLoading(false);
+            }
+        }
+    };
+    return {
+        selectedRows,
+        handleRowSelect,
+        handleSelectAll,
+        clearSelection,
+        handleRowAction,
+        handleBulkAction,
+        handleHeaderAction,
+        actionFormModal,
+        setActionFormModal,
+    };
+}

package/dist/table/hooks/useTableData.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { QueryParams, TableApiClient } from '../../api/tableApi';
+export interface TableDataApi {
+    data: any[];
+    setData: React.Dispatch<React.SetStateAction<any[]>>;
+    isLoading: boolean;
+    setIsLoading: (loading: boolean) => void;
+    error: string | null;
+    setError: (error: string | null) => void;
+    widgetData: Record<string, any>;
+    totalRecords: number;
+    /** Re-fetch with the current params */
+    reload: () => Promise<void>;
+}
+export interface UseTableDataOptions {
+    apiClient: TableApiClient;
+    queryParams: QueryParams;
+    /** Increment to force a refresh from outside */
+    refreshKey?: number;
+    /** Called with the fresh rows after every successful load */
+    onLoaded?: (rows: any[]) => void;
+}
+/**
+ * Fetches table rows whenever the query parameters (or refreshKey) change.
+ * Tolerates StrictMode double-effects: loads are idempotent and stale
+ * responses are dropped.
+ */
+export declare function useTableData({ apiClient, queryParams, refreshKey, onLoaded }: UseTableDataOptions): TableDataApi;

package/dist/table/hooks/useTableData.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * Fetches table rows whenever the query parameters (or refreshKey) change.
+ * Tolerates StrictMode double-effects: loads are idempotent and stale
+ * responses are dropped.
+ */
+export function useTableData({ apiClient, queryParams, refreshKey, onLoaded }) {
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [widgetData, setWidgetData] = useState({});
+    const [totalRecords, setTotalRecords] = useState(0);
+    // Bumped by reload() so imperative refreshes re-run the effect
+    const [reloadCounter, setReloadCounter] = useState(0);
+    const onLoadedRef = React.useRef(onLoaded);
+    onLoadedRef.current = onLoaded;
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            setIsLoading(true);
+            try {
+                const result = await apiClient.fetchData(queryParams);
+                if (cancelled)
+                    return;
+                setData(result.data);
+                setTotalRecords(result.pagination.total);
+                setWidgetData(result.widgets || {});
+                setError(null);
+                onLoadedRef.current?.(result.data);
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setError(err instanceof Error ? err.message : translate('core:error.load_data'));
+                console.error('Error loading table data:', err);
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
+        load();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiClient, queryParams, refreshKey, reloadCounter]);
+    const reload = async () => {
+        setReloadCounter(prev => prev + 1);
+    };
+    return {
+        data,
+        setData,
+        isLoading,
+        setIsLoading,
+        error,
+        setError,
+        widgetData,
+        totalRecords,
+        reload,
+    };
+}

package/dist/table/hooks/useTableLayout.d.ts

@@ -0,0 +1,12 @@
+import { SerializedTable } from '@maxal_studio/kratosjs';
+export interface TableLayoutApi {
+    layout: 'table' | 'grid';
+    setLayout: (layout: 'table' | 'grid') => void;
+    widgetsExpanded: boolean;
+    setWidgetsExpanded: (expanded: boolean) => void;
+}
+/**
+ * Persisted presentation state: table-vs-grid layout (per resource) and
+ * the widgets expanded/collapsed preference (global).
+ */
+export declare function useTableLayout(schema: SerializedTable, resourceSlug: string): TableLayoutApi;

package/dist/table/hooks/useTableLayout.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { layoutStorage } from '../../utils/layoutStorage';
+import { widgetVisibilityStorage, getDefaultWidgetsExpanded } from '../../utils/widgetVisibilityStorage';
+/**
+ * Persisted presentation state: table-vs-grid layout (per resource) and
+ * the widgets expanded/collapsed preference (global).
+ */
+export function useTableLayout(schema, resourceSlug) {
+    const [layout, setLayoutState] = useState(() => {
+        const defaultLayout = schema.defaultLayout === 'grid' ? 'grid' : 'table';
+        if (schema.allowLayoutSwitch) {
+            return layoutStorage.getLayout(resourceSlug, defaultLayout);
+        }
+        return defaultLayout;
+    });
+    const [widgetsExpanded, setWidgetsExpandedState] = useState(false);
+    // Hydrate widgets-expanded from localStorage (desktop default expanded)
+    useEffect(() => {
+        const stored = widgetVisibilityStorage.get();
+        setWidgetsExpandedState(stored !== null ? stored : getDefaultWidgetsExpanded());
+    }, []);
+    const setLayout = (next) => {
+        setLayoutState(next);
+        layoutStorage.setLayout(resourceSlug, next);
+    };
+    const setWidgetsExpanded = (next) => {
+        widgetVisibilityStorage.set(next);
+        setWidgetsExpandedState(next);
+    };
+    return { layout, setLayout, widgetsExpanded, setWidgetsExpanded };
+}

package/dist/table/hooks/useTableQuery.d.ts

@@ -0,0 +1,29 @@
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { QueryParams } from '../../api/tableApi';
+export interface TableQueryState {
+    searchQuery: string;
+    sortColumn: string | undefined;
+    sortDirection: 'asc' | 'desc';
+    filters: Record<string, any>;
+    queryBuilders: Record<string, any[]>;
+    activeTab: string | null;
+    currentPage: number;
+    perPage: number;
+}
+export interface TableQueryApi extends TableQueryState {
+    handleSearch: (query: string) => void;
+    handleSort: (column: string) => void;
+    handleFilterChange: (name: string, value: any, isQueryBuilder?: boolean) => void;
+    handleTabClick: (tabKey: string | null) => void;
+    handleClearFilters: () => void;
+    handlePageChange: (page: number) => void;
+    handlePageSizeChange: (size: number) => void;
+    /** Request payload for TableApiClient.fetchData, with tab rules merged in */
+    queryParams: QueryParams;
+}
+/**
+ * All list-query state for a table: search, sort, filters, query builders,
+ * tabs, and pagination — plus the handlers that keep them consistent
+ * (changing any criterion resets to page 1; manual filtering clears the tab).
+ */
+export declare function useTableQuery(schema: SerializedTable): TableQueryApi;