wenay-react2 1.0.38 → 1.0.40

package/lib/common/src/logs/logsContext.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColDef, GridReadyEvent } from 'ag-grid-community';
 /** -----------------------------
  *  1. Log types
  * -----------------------------
@@ -42,7 +43,32 @@ export declare function useLogsContext(): LogsContextValue;
  *     (PageLogs equivalent)
  * -----------------------------
  */
+export type LogsTableController = {
+    logs: LogEntry[];
+    minVarLogs: number;
+    gridRef: React.MutableRefObject<GridReadyEvent | null>;
+    columnDefs: ColDef[];
+    defaultColDef: ColDef;
+    onGridReady(params: GridReadyEvent): void;
+};
+export declare function useLogsTableController(): LogsTableController;
 export declare function LogsTable(): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  7. LogsNotifications component
+ *     (MessageEventLogs equivalent)
+ * -----------------------------
+ */
+export interface NotificationItem {
+    id: number;
+    log: LogEntry;
+}
+export type LogsNotificationsController = {
+    showMessages: boolean;
+    setShowMessages(value: boolean): void;
+    notifications: NotificationItem[];
+    visibleNotifications: NotificationItem[];
+};
+export declare function useLogsNotificationsController(): LogsNotificationsController;
 export declare function LogsNotifications(): import("react/jsx-runtime").JSX.Element;
 /** -----------------------------
  *  8. LogsSettings component

package/lib/common/src/logs/logsContext.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridTable, colDefCentered } from '../grid/agGrid4';
 import { logDividerGradient, logSeverityBackground, logStyleTokens } from './logStyles';
 /** -----------------------------
  *  2. memoryGetOrCreate function -
@@ -93,15 +93,9 @@ export function useLogsContext() {
     }
     return ctx;
 }
-/** -----------------------------
- *  6. LogsTable component
- *     (PageLogs equivalent)
- * -----------------------------
- */
-export function LogsTable() {
+export function useLogsTableController() {
     const { logs, minVarLogs } = useLogsContext();
     const gridRef = useRef(null);
-    // Column definitions
     const columnDefs = useMemo(() => [
         {
             field: 'time',
@@ -126,12 +120,9 @@ export function LogsTable() {
         }
     ], []);
     const defaultColDef = useMemo(() => ({
-        resizable: true,
-        sortable: true,
-        filter: true,
+        ...colDefCentered,
         wrapText: true,
     }), []);
-    // Watch minVarLogs and configure the AG Grid filter
     useEffect(() => {
         if (gridRef.current?.api) {
             if (minVarLogs > 0) {
@@ -148,14 +139,19 @@ export function LogsTable() {
             }
         }
     }, [minVarLogs]);
+    const onGridReady = useCallback((params) => {
+        gridRef.current = params;
+        params.api.sizeColumnsToFit();
+    }, []);
+    return { logs, minVarLogs, gridRef, columnDefs, defaultColDef, onGridReady };
+}
+export function LogsTable() {
+    const table = useLogsTableController();
     return (
     // <div className="ag-theme-alpine-dark" style={{ width: '100%', height: '100%' }}>
-    _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(AgGridReact, { ref: gridRef, onGridReady: (params) => {
-                gridRef.current = params;
-                params.api.sizeColumnsToFit();
-            }, rowData: logs, columnDefs: columnDefs, defaultColDef: defaultColDef, headerHeight: 30, rowHeight: 26 }) }));
+    _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(AgGridTable, { onGridReady: table.onGridReady, rowData: table.logs, columnDefs: table.columnDefs, defaultColDef: table.defaultColDef, headerHeight: 30, rowHeight: 26 }) }));
 }
-export function LogsNotifications() {
+export function useLogsNotificationsController() {
     const { logs, minVarMessage, timeShow, showMessages, setShowMessages } = useLogsContext();
     const [notifications, setNotifications] = useState([]);
     const counterRef = useRef(0);
@@ -183,13 +179,22 @@ export function LogsNotifications() {
         timersRef.current.add(timer);
     }, [logs, minVarMessage, timeShow]);
     useEffect(() => () => { timersRef.current.forEach(clearTimeout); }, []);
-    if (!showMessages) {
+    return {
+        showMessages,
+        setShowMessages,
+        notifications,
+        visibleNotifications: notifications.slice(0, 10),
+    };
+}
+export function LogsNotifications() {
+    const controller = useLogsNotificationsController();
+    if (!controller.showMessages) {
         // If popups are hidden, show only "log"
         return (_jsx("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: _jsx("div", { style: {
                     background: logStyleTokens.toggleOffBg,
                     padding: '6px 10px',
                     cursor: 'pointer'
-                }, onClick: () => setShowMessages(true), children: "log" }) }));
+                }, onClick: () => controller.setShowMessages(true), children: "log" }) }));
     }
     // Otherwise render the current notification list
     return (_jsxs("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: [_jsx("div", { style: {
@@ -197,7 +202,7 @@ export function LogsNotifications() {
                     fontSize: '20px',
                     padding: '6px 10px',
                     cursor: 'pointer'
-                }, onClick: () => setShowMessages(false), children: "X" }), _jsx("div", { children: notifications.slice(0, 10).map(({ id, log }) => (_jsxs("div", { className: "testAnime example-exit", style: {
+                }, onClick: () => controller.setShowMessages(false), children: "X" }), _jsx("div", { children: controller.visibleNotifications.map(({ id, log }) => (_jsxs("div", { className: "testAnime example-exit", style: {
                         width: 200,
                         color: logStyleTokens.text,
                         marginTop: 10,

package/lib/common/src/logs/logsController.d.ts

@@ -0,0 +1,88 @@
+import { Params } from "wenay-common2";
+export type LogInput<T extends object = {}> = T & {
+    id: string;
+    var?: number;
+    time: Date;
+    txt: string;
+};
+export type LogEntry<T extends object = {}> = LogInput<T> & {
+    num: number;
+};
+export type LogsApiOptions = {
+    limit?: number;
+    limitPer: number;
+    varMin?: number;
+};
+export declare const getSettingLogs: () => {
+    minVarLogs: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    minVarMessage: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    timeShow: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    show: {
+        name: string;
+        value: boolean;
+    };
+};
+export type LogsSettingsDefinition = ReturnType<typeof getSettingLogs>;
+export type LogsSettings = Params.SimpleParams<LogsSettingsDefinition>;
+export type LogsFullState<T extends object = {}> = {
+    map: Map<string, LogEntry<T>[]>;
+};
+export type LogsMiniState<T extends object = {}> = {
+    last: LogEntry<T>[];
+};
+export type LogsSettingsState = {
+    params: LogsSettings;
+};
+export type LogsControllerState<T extends object = {}> = {
+    full: LogsFullState<T>;
+    mini: LogsMiniState<T>;
+    settings: LogsSettingsState;
+};
+export type LogsControllerEvents = {
+    onFullChange?: () => void;
+    onMiniChange?: () => void;
+    onSettingsChange?: () => void;
+};
+export type CreateLogsControllerOptions<T extends object = {}> = LogsControllerEvents & {
+    options: LogsApiOptions;
+    state?: LogsControllerState<T>;
+};
+export type LogsController<T extends object = {}> = {
+    state: LogsControllerState<T>;
+    options: LogsApiOptions;
+    addLogs(input: LogInput<T>): LogEntry<T>;
+    getRows(): LogEntry<T>[];
+    getMiniRows(): LogEntry<T>[];
+    getLatest(): LogEntry<T> | undefined;
+    params: {
+        def: typeof getSettingLogs;
+        get(): LogsSettings;
+        set(settings: LogsSettings): void;
+    };
+};
+export declare function createLogsControllerState<T extends object = {}>(state?: Partial<LogsControllerState<T>>): LogsControllerState<T>;
+export declare function createLogsController<T extends object = {}>({ options, state, onFullChange, onMiniChange, onSettingsChange, }: CreateLogsControllerOptions<T>): LogsController<T>;

package/lib/common/src/logs/logsController.js

@@ -0,0 +1,54 @@
+import { Params } from "wenay-common2";
+export const getSettingLogs = () => ({
+    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
+    show: { name: "show", value: true }
+});
+function addToArr(arr, data, limit) {
+    arr.unshift(data);
+    if (arr.length > limit)
+        arr.length = limit;
+}
+export function createLogsControllerState(state = {}) {
+    return {
+        full: state.full ?? { map: new Map() },
+        mini: state.mini ?? { last: [] },
+        settings: state.settings ?? { params: Params.GetSimpleParams(getSettingLogs()) },
+    };
+}
+export function createLogsController({ options, state = createLogsControllerState(), onFullChange, onMiniChange, onSettingsChange, }) {
+    let num = 0;
+    return {
+        state,
+        options,
+        addLogs(input) {
+            const item = { ...input, num: num++ };
+            addToArr(state.mini.last, item, options.limit ?? 50);
+            const perId = state.full.map.get(input.id) ?? state.full.map.set(input.id, []).get(input.id);
+            addToArr(perId, item, options.limitPer);
+            onFullChange?.();
+            onMiniChange?.();
+            return item;
+        },
+        getRows() {
+            return [...state.full.map.values()].flat();
+        },
+        getMiniRows() {
+            return state.mini.last.slice();
+        },
+        getLatest() {
+            return state.mini.last[0];
+        },
+        params: {
+            def: getSettingLogs,
+            get() { return state.settings.params; },
+            set(settings) {
+                state.settings.params = settings;
+                onSettingsChange?.();
+                onMiniChange?.();
+                onFullChange?.();
+            },
+        },
+    };
+}

package/lib/common/src/logs/miniLogs.d.ts

@@ -1,5 +1,71 @@
-import { CellMouseDownEvent } from "ag-grid-community";
-export declare function MiniLogs<T = any>({ data, onClick }: {
+import React from "react";
+import type { CellMouseDownEvent, ColDef, GridApi, GridPreDestroyedEvent, GridReadyEvent } from "ag-grid-community";
+import { type AgGridTableProps } from "../grid/agGrid4";
+export declare const miniLogsColumnDefs: ({
+    field: string;
+    sort: "desc";
+    width: number;
+    valueFormatter: (e: import("ag-grid-community").ValueFormatterParams<any, any, any>) => any;
+    wrapText?: undefined;
+    autoHeight?: undefined;
+} | {
+    field: string;
+    width: number;
+    sort?: undefined;
+    valueFormatter?: undefined;
+    wrapText?: undefined;
+    autoHeight?: undefined;
+} | {
+    field: string;
+    wrapText: true;
+    autoHeight: true;
+    width: number;
+    sort?: undefined;
+    valueFormatter?: undefined;
+})[];
+export declare const miniLogsDefaultColDef: {
+    wrapText: true;
+    headerClass: () => string;
+    resizable: true;
+    cellStyle: {
+        textAlign: string;
+    };
+    sortable: true;
+    filter: boolean;
+};
+export type UseMiniLogsTableOptions<T = any> = {
     data: T[];
     onClick?: (e: CellMouseDownEvent<T>) => any;
-}): import("react/jsx-runtime").JSX.Element;
+    columnDefs?: ColDef<T>[];
+    defaultColDef?: ColDef<T>;
+};
+export type MiniLogsTableController<T = any> = {
+    rows: T[];
+    columns: ColDef<T>[];
+    columnDefs: ColDef<T>[];
+    defaultColDef: ColDef<T>;
+    apiRef: React.RefObject<GridApi<T> | null>;
+    fit: () => boolean;
+    getApi: () => GridApi<T> | null;
+    withApi: <R>(fn: (api: GridApi<T>) => R) => R | undefined;
+    onGridReady: (e: GridReadyEvent<T>) => void;
+    onGridPreDestroyed: (e: GridPreDestroyedEvent<T>) => void;
+    onCellMouseDown: (e: CellMouseDownEvent<T>) => void;
+    props: AgGridTableProps<T>;
+    tableProps: AgGridTableProps<T>;
+    gridProps: AgGridTableProps<T>;
+};
+export type MiniLogsController<T = any> = MiniLogsTableController<T>;
+export type MiniLogsViewProps<T = any> = {
+    controller: MiniLogsTableController<T>;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type MiniLogsTableProps<T = any> = UseMiniLogsTableOptions<T> & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function useMiniLogsTable<T = any>(options: UseMiniLogsTableOptions<T>): MiniLogsTableController<T>;
+export declare function MiniLogsView<T = any>({ controller, className, style }: MiniLogsViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogsTable<T = any>({ className, style, ...options }: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogs<T = any>(props: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/logs/miniLogs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { timeLocalToStr_hhmmss } from "wenay-common2";
-import { AgGridReact } from "ag-grid-react";
-const columns = [
+import { useCallback, useMemo, useRef } from "react";
+import { AgGridTable, colDefCentered } from "../grid/agGrid4";
+export const miniLogsColumnDefs = [
     {
         field: "time",
         sort: "desc",
@@ -27,17 +28,71 @@ const columns = [
         width: 150,
     },
 ];
-export function MiniLogs({ data, onClick }) {
-    return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact, { suppressCellFocus: true, onGridReady: (a) => {
-                a.api.sizeColumnsToFit();
-            }, defaultColDef: {
-                headerClass: () => ("gridTable-header"),
-                resizable: true,
-                cellStyle: { textAlign: "center" },
-                sortable: true,
-                filter: true,
-                wrapText: true,
-            }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: data, columnDefs: columns, onCellMouseDown: (e) => {
-                onClick?.(e);
-            } }) });
+export const miniLogsDefaultColDef = { ...colDefCentered, wrapText: true };
+export function useMiniLogsTable(options) {
+    const { data, onClick, columnDefs, defaultColDef: defaultColDefOverride } = options;
+    const apiRef = useRef(null);
+    const columns = useMemo(() => (columnDefs ?? miniLogsColumnDefs), [columnDefs]);
+    const defaultColDef = useMemo(() => ({ ...miniLogsDefaultColDef, ...defaultColDefOverride }), [defaultColDefOverride]);
+    const fit = useCallback(() => {
+        const api = apiRef.current;
+        if (!api)
+            return false;
+        api.sizeColumnsToFit();
+        return true;
+    }, []);
+    const getApi = useCallback(() => apiRef.current, []);
+    const withApi = useCallback(function withApi(fn) {
+        const api = apiRef.current;
+        return api ? fn(api) : undefined;
+    }, []);
+    const onGridReady = useCallback((e) => {
+        apiRef.current = e.api;
+        fit();
+    }, [fit]);
+    const onGridPreDestroyed = useCallback((_e) => {
+        apiRef.current = null;
+    }, []);
+    const onCellMouseDown = useCallback((e) => {
+        onClick?.(e);
+    }, [onClick]);
+    const props = useMemo(() => ({
+        suppressCellFocus: true,
+        onGridReady,
+        onGridPreDestroyed,
+        defaultColDef,
+        headerHeight: 30,
+        rowHeight: 26,
+        autoSizePadding: 1,
+        rowData: data,
+        columnDefs: columns,
+        onCellMouseDown,
+    }), [columns, data, defaultColDef, onCellMouseDown, onGridPreDestroyed, onGridReady]);
+    return useMemo(() => ({
+        rows: data,
+        columns,
+        columnDefs: columns,
+        defaultColDef,
+        apiRef,
+        fit,
+        getApi,
+        withApi,
+        onGridReady,
+        onGridPreDestroyed,
+        onCellMouseDown,
+        props,
+        tableProps: props,
+        gridProps: props,
+    }), [columns, data, defaultColDef, fit, getApi, onCellMouseDown, onGridPreDestroyed, onGridReady, props, withApi]);
+}
+export function MiniLogsView({ controller, className, style }) {
+    const classNames = ["maxSize", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classNames, style: style, children: _jsx(AgGridTable, { ...controller.props }) });
+}
+export function MiniLogsTable({ className, style, ...options }) {
+    const table = useMiniLogsTable(options);
+    return _jsx(MiniLogsView, { controller: table, className: className, style: style });
+}
+export function MiniLogs(props) {
+    return _jsx(MiniLogsTable, { ...props });
 }

package/lib/common/src/menu/menu.d.ts

@@ -4,6 +4,8 @@ import React, { ReactElement } from 'react';
  *******************************************************/
 export type MenuItemStrict<T = any> = {
     name: string | ((status?: T) => string);
+    /** Stable diagnostics key. Stats never fall back to visible labels. */
+    actionKey?: string | null;
     getStatus?: (() => T) | null;
     onClick?: ((e: any) => void | undefined | null | ((void | undefined | null | Promise<any> | (() => Promise<any>))[]) | Promise<any>) | null;
     active?: (() => boolean) | null;
@@ -14,6 +16,14 @@ export type MenuItemStrict<T = any> = {
     menuElement?: typeof MenuElement;
 };
 export type MenuItem<T = any> = MenuItemStrict<T> | false | null | undefined;
+export type MenuActionEventType = "click" | "ok" | "error" | "taskOk" | "taskError" | "submenuOpen" | "submenuOk" | "submenuError" | "funcOpen" | "funcOk" | "funcError" | "focusOpen" | "focusOk" | "focusError";
+export type MenuActionEvent = {
+    type: MenuActionEventType;
+    item: MenuItemStrict;
+    actionKey?: string;
+    error?: unknown;
+};
+export type MenuActionHandler = (event: MenuActionEvent) => void;
 /*******************************************************
  * Helper type
  *******************************************************/
@@ -31,12 +41,13 @@ declare function MenuProgress({ data }: {
 /*******************************************************
  * Main menu element with onClick and counters
  *******************************************************/
-declare function MenuElement({ data: item, toLeft, className, update, open, }: {
-    data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus">;
+declare function MenuElement({ data: item, toLeft, className, update, open, onActionEvent, }: {
+    data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus" | "actionKey">;
     toLeft: boolean;
     className?: (active?: boolean) => string;
     update: () => void;
     open?: boolean;
+    onActionEvent?: MenuActionHandler;
 }): ReactElement;
 /*******************************************************
  * Menu renders the popup menu with support for
@@ -62,6 +73,7 @@ type MenuProps = {
     data: MenuItem[];
     zIndex?: number;
     className?: (active?: boolean) => string;
+    onActionEvent?: MenuActionHandler;
     coordinate?: {
         x: number;
         y: number;
@@ -69,5 +81,5 @@ type MenuProps = {
         left?: number;
     };
 };
-export declare function Menu({ coordinate, data, zIndex, menu, className, menuElement, }: MenuProps): ReactElement;
+export declare function Menu({ coordinate, data, zIndex, menu, className, menuElement, onActionEvent, }: MenuProps): ReactElement;
 export { MenuProgress, MenuElement };