@ramesesinc/platform-core 0.1.0

package/dist/components/action/Edit.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { AbstractComponent } from "../../types/component";
+interface EditProps extends AbstractComponent {
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+}
+declare const Edit: (props: EditProps) => import("react/jsx-runtime").JSX.Element;
+export default Edit;

package/dist/components/action/Edit.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+/* ------------------------------------------------------------------ */
+/* Component */
+const Edit = (props) => {
+    const { children, className = "", title } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async () => {
+        try {
+            await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.set("editable", true));
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    };
+    /* ---------------------- Render ---------------------- */
+    return (_jsx("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: children || title || "Edit" }));
+};
+export default Edit;

package/dist/components/action/Edit.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { usePageContext } from "../../core/PageContext";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface EditProps extends AbstractComponent {
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const Edit = (props: EditProps) => {
+  const { children, className = "", title } = props ?? {};
+  const pageContext = usePageContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = async () => {
+    try {
+      await pageContext?.set("editable", true);
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+      {children || title || "Edit"}
+    </button>
+  );
+};
+
+export default Edit;

package/dist/components/action/LookupPage.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { AbstractComponent } from "../../types/component";
+interface LookupPageProps extends AbstractComponent {
+    url: string;
+    name?: string;
+    result?: Record<string, any>;
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+    icon?: string;
+    opt?: Record<string, any>;
+    iconOnly?: boolean;
+    popupClassName?: string;
+}
+declare const LookupPage: (props: LookupPageProps) => import("react/jsx-runtime").JSX.Element;
+export default LookupPage;

package/dist/components/action/LookupPage.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { getValue, substituteExpr } from "../../lib/utils/BeanUtils";
+import PopupView from "../view/PopupView";
+/* ------------------------------------------------------------------ */
+/* Component */
+const LookupPage = (props) => {
+    const { url, name = "", result = null, children, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false } = props !== null && props !== void 0 ? props : {};
+    const { data = {} } = opt;
+    const pageContext = usePageContext();
+    const [showPopup, setShowPopup] = useState(false);
+    const [popupUrl, setPopupUrl] = useState("");
+    const slotRef = useRef(null);
+    const onClose = () => {
+        var _a;
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(null);
+    };
+    /* ---------------------- Events ---------------------- */
+    const handleClick = () => {
+        var _a;
+        if (!url)
+            return;
+        //combine data if specified and pageContext all data if specified
+        const surl = substituteExpr(url, Object.assign(Object.assign({}, pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()), data));
+        setPopupUrl(surl);
+        setShowPopup(true);
+        const handler = {
+            onSelect: (itm) => {
+                let resdata = itm;
+                if (result != null) {
+                    resdata = getValue(result, itm);
+                }
+                alert("item selected " + JSON.stringify(resdata));
+                if (name) {
+                    pageContext.set(name, resdata);
+                }
+                onClose();
+                //pageContext.refresh();
+            },
+        };
+        //eventHandler={handler}
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(_jsx(PopupView, { url: surl, onClose: onClose, eventHandler: handler }));
+    };
+    const handleClosePopup = () => {
+        setShowPopup(false);
+    };
+    /* ---------------------- Render ---------------------- */
+    return (_jsxs(_Fragment, { children: [iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })), _jsx(ChildrenSlot, { ref: slotRef })] }));
+};
+export default LookupPage;
+const ChildrenSlot = memo(forwardRef((_, ref) => {
+    const [content, setContent] = useState(null);
+    useImperativeHandle(ref, () => ({
+        update: (content) => {
+            // console.log("view page children slot", content);
+            setContent(content);
+        },
+    }), []);
+    return _jsx(_Fragment, { children: content == null ? null : content });
+}));

package/dist/components/action/LookupPage.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { getValue, substituteExpr } from "../../lib/utils/BeanUtils";
+import { AbstractComponent } from "../../types/component";
+import PopupView from "../view/PopupView";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface LookupPageProps extends AbstractComponent {
+  url: string;
+  name?: string;
+  result?: Record<string, any>;
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+  icon?: string;
+  opt?: Record<string, any>;
+  iconOnly?: boolean; // ✅ added
+  popupClassName?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const LookupPage = (props: LookupPageProps) => {
+  const { url, name = "", result = null, children, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false } = props ?? {};
+  const { data = {} } = opt;
+
+  const pageContext = usePageContext();
+  const [showPopup, setShowPopup] = useState(false);
+  const [popupUrl, setPopupUrl] = useState("");
+  const slotRef = useRef<ChildrenSlotHandle>(null);
+
+  const onClose = () => {
+    slotRef.current?.update(null);
+  };
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = () => {
+    if (!url) return;
+    //combine data if specified and pageContext all data if specified
+    const surl = substituteExpr(url, { ...pageContext?.getAllData(), ...data });
+    setPopupUrl(surl);
+    setShowPopup(true);
+
+    const handler = {
+      onSelect: (itm: any) => {
+        let resdata = itm;
+        if (result != null) {
+          resdata = getValue(result, itm);
+        }
+        alert("item selected " + JSON.stringify(resdata));
+        if (name) {
+          pageContext.set(name, resdata);
+        }
+        onClose();
+        //pageContext.refresh();
+      },
+    };
+    //eventHandler={handler}
+    slotRef.current?.update(<PopupView url={surl} onClose={onClose} eventHandler={handler} />);
+  };
+
+  const handleClosePopup = () => {
+    setShowPopup(false);
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <>
+      {iconOnly ? (
+        <span onClick={handleClick} className={`cursor-pointer ${className}`}>
+          {icon}
+        </span>
+      ) : (
+        <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+          {icon && <span className="dl-action-icon">{icon}</span>}
+          {title || "View Page"}
+        </button>
+      )}
+
+      <ChildrenSlot ref={slotRef} />
+    </>
+  );
+};
+
+export default LookupPage;
+
+type ChildrenSlotHandle = {
+  update: (content: React.ReactNode) => void;
+};
+
+const ChildrenSlot = memo(
+  forwardRef<ChildrenSlotHandle>((_, ref) => {
+    const [content, setContent] = useState<React.ReactNode>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        update: (content: React.ReactNode) => {
+          // console.log("view page children slot", content);
+          setContent(content);
+        },
+      }),
+      [],
+    );
+
+    return <>{content == null ? null : content}</>;
+  }),
+);

package/dist/components/action/ProcessRunner.d.ts

@@ -0,0 +1,62 @@
+import { AbstractComponent } from "../../types/component";
+interface ProcessRunnerProps extends AbstractComponent {
+    /**
+     * Field expression for current progress value. Default: "{processedcount}"
+     */
+    value?: string;
+    /**
+     * Field expression for max value. Default: "{totalcount}"
+     */
+    maxValue?: string;
+    /**
+     * Field expression resolving to the server-side status field.
+     * Expected values (case-insensitive): IDLE | RUNNING | PAUSED | DONE.
+     * Default: "{status}"
+     */
+    statusValue?: string;
+    /**
+     * Optional label expression shown below the bar.
+     * Only rendered when provided.
+     * Example: "{processedcount} of {totalcount} records processed"
+     */
+    labelExpr?: string;
+    /**
+     * Data config: the API endpoint polled on interval to refresh the record.
+     * Should return the single record object: { _id, status, processedcount, totalcount, ... }
+     * May contain bound param expressions, e.g. "/processtask?_id={_id}"
+     *
+     * Note: The DataList (parent) fetches the initial list. This component
+     * polls independently for live updates on its own record.
+     */
+    data?: {
+        api: string;
+        /** Action APIs called on button click, then immediately re-fetches. */
+        actions?: {
+            start?: string;
+            pause?: string;
+            resume?: string;
+            end?: string;
+        };
+    };
+    /**
+     * Polling interval in milliseconds. Default: 5000.
+     * Timer only fires while status === "running".
+     */
+    interval?: number;
+    /** Button label overrides */
+    labels?: {
+        start?: string;
+        pause?: string;
+        resume?: string;
+        end?: string;
+    };
+    /**
+     * Row data injected by the Table renderer (same as ViewPage opt.data).
+     * Carries the initial record: { _id, status, processedcount, totalcount }
+     * This is the seed — polling overlays it with fresh values.
+     */
+    opt?: Record<string, any>;
+    className?: string;
+}
+declare const ProcessRunner: (props: ProcessRunnerProps) => import("react/jsx-runtime").JSX.Element;
+export default ProcessRunner;

package/dist/components/action/ProcessRunner.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { getValue, substituteExpr } from "../../lib/utils/BeanUtils";
+import { getUrlPageParams } from "../../lib/utils/PageUtils";
+/* ------------------------------------------------------------------ */
+/* Helpers */
+const toRunnerState = (raw) => {
+    switch (String(raw !== null && raw !== void 0 ? raw : "").toUpperCase()) {
+        case "RUNNING":
+            return "running";
+        case "PAUSED":
+            return "paused";
+        case "DONE":
+            return "done";
+        default:
+            return "idle";
+    }
+};
+const resolveNumeric = (expr, data) => {
+    const n = Number(getValue(expr, data));
+    return isNaN(n) ? 0 : n;
+};
+/* ------------------------------------------------------------------ */
+/* Component */
+const ProcessRunner = (props) => {
+    const { value: valueProp = "{processedcount}", maxValue: maxValueProp = "{totalcount}", statusValue = "{status}", labelExpr, data, interval = 5000, labels = {}, opt = {}, className = "", } = props !== null && props !== void 0 ? props : {};
+    const { data: optData = {} } = opt;
+    const { start: startLabel = "Start", pause: pauseLabel = "Pause", resume: resumeLabel = "Resume", end: endLabel = "End" } = labels;
+    const pageContext = usePageContext();
+    /* ----------------------------------------------------------------
+       liveData is the SOLE source of truth.
+  
+       Seed it with optData (the row record from DataList) so the
+       component displays correctly on first render — before any poll fires.
+       Subsequent polls overwrite it entirely with the server's response.
+    ---------------------------------------------------------------- */
+    const [liveData, setLiveData] = useState(optData);
+    const intervalRef = useRef(null);
+    const [isBusy, setIsBusy] = useState(false); // prevents double-clicks during action API call
+    // When optData changes from outside (table refresh, parent re-render),
+    // merge it in — but don't overwrite fields already updated by polling.
+    useEffect(() => {
+        setLiveData((prev) => (Object.assign(Object.assign({}, optData), prev)));
+    }, [optData]);
+    /* ----------------------------------------------------------------
+       Resolution context — built from all data sources.
+       Priority (low → high): url params → page data → liveData
+       liveData already contains optData as its seed, so per-row fields
+       like {_id} resolve correctly from the very first render.
+    ---------------------------------------------------------------- */
+    const resolveCtx = useMemo(() => {
+        const { params } = getUrlPageParams();
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, params), pageContext.getAllData()), optData), liveData);
+    }, [liveData, optData, pageContext]);
+    /* ----------------------------------------------------------------
+       All display values are derived from resolveCtx — no separate state.
+       This is what makes multi-browser sync work: any change in the DB
+       flows through poll → liveData → resolveCtx → these values → render.
+    ---------------------------------------------------------------- */
+    const state = toRunnerState(getValue(statusValue, resolveCtx));
+    const currentValue = resolveNumeric(valueProp, resolveCtx);
+    const maxValue = resolveNumeric(maxValueProp, resolveCtx);
+    const percent = maxValue > 0 ? Math.min((currentValue / maxValue) * 100, 100) : 0;
+    const resolvedLabel = labelExpr ? substituteExpr(labelExpr, resolveCtx) : null;
+    /* ----------------------------------------------------------------
+       Core fetch — retrieves the latest record and overwrites liveData.
+       Called both by the interval timer AND immediately after button actions.
+    ---------------------------------------------------------------- */
+    const fetchRecord = useCallback(async () => {
+        if (!(data === null || data === void 0 ? void 0 : data.api))
+            return;
+        try {
+            const url = substituteExpr(data.api, resolveCtx);
+            const json = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(url, resolveCtx));
+            if (!json)
+                return;
+            // Full overwrite — server response is authoritative.
+            // state, currentValue, maxValue all re-derive from this on next render.
+            setLiveData(json);
+        }
+        catch (_a) {
+            // Silently ignore — next tick will retry
+        }
+    }, [data === null || data === void 0 ? void 0 : data.api, resolveCtx, pageContext]);
+    /* ----------------------------------------------------------------
+       Polling — only runs while state === "running".
+       Starts automatically when state becomes "running" (either from a
+       button click confirming via re-fetch, or from another browser
+       changing the DB and the interval picking it up).
+    ---------------------------------------------------------------- */
+    const startPolling = useCallback(() => {
+        if (intervalRef.current)
+            return;
+        intervalRef.current = setInterval(fetchRecord, interval);
+    }, [fetchRecord, interval]);
+    const stopPolling = useCallback(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    // Manage timer based on derived state — not on button clicks.
+    // This means another browser pausing/completing the job will also
+    // stop the timer on this browser after the next tick confirms it.
+    useEffect(() => {
+        if (state === "running") {
+            startPolling();
+        }
+        else {
+            stopPolling();
+        }
+    }, [state, startPolling, stopPolling]);
+    // Cleanup on unmount (row removed from table, page navigated away)
+    useEffect(() => () => stopPolling(), [stopPolling]);
+    /* ----------------------------------------------------------------
+       Action handler — the key pattern for button clicks:
+         1. Call action API (POST/GET — whatever your backend expects)
+         2. Immediately re-fetch the record — don't wait for next tick
+         3. liveData updates → state re-derives → UI updates instantly
+       No optimistic setState — server response is always the authority.
+    ---------------------------------------------------------------- */
+    const fireAction = useCallback(async (actionUrl) => {
+        if (!actionUrl || isBusy)
+            return;
+        setIsBusy(true);
+        try {
+            const url = substituteExpr(actionUrl, resolveCtx);
+            await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(url, resolveCtx));
+        }
+        catch (_a) {
+            // Action failed — re-fetch anyway to show real current state
+        }
+        finally {
+            // Always re-fetch immediately after action — this is what makes
+            // the button feel instant rather than waiting for the next tick.
+            await fetchRecord();
+            setIsBusy(false);
+        }
+    }, [isBusy, resolveCtx, fetchRecord, pageContext]);
+    /* ----------------------------------------------------------------
+       Handlers — just delegate to fireAction with the right endpoint.
+       If no action API is configured, fetchRecord still runs so the
+       UI reflects whatever the server currently has.
+    ---------------------------------------------------------------- */
+    const handleStart = () => { var _a; return fireAction((_a = data === null || data === void 0 ? void 0 : data.actions) === null || _a === void 0 ? void 0 : _a.start); };
+    const handlePause = () => { var _a; return fireAction((_a = data === null || data === void 0 ? void 0 : data.actions) === null || _a === void 0 ? void 0 : _a.pause); };
+    const handleResume = () => { var _a; return fireAction((_a = data === null || data === void 0 ? void 0 : data.actions) === null || _a === void 0 ? void 0 : _a.resume); };
+    const handleEnd = () => { var _a; return fireAction((_a = data === null || data === void 0 ? void 0 : data.actions) === null || _a === void 0 ? void 0 : _a.end); };
+    /* ----------------------------------------------------------------
+       Render
+    ---------------------------------------------------------------- */
+    return (_jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [state === "idle" && (_jsx("button", { onClick: handleStart, disabled: isBusy, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors text-sm font-medium", children: isBusy ? "…" : startLabel })), state !== "idle" && (_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1 h-4 bg-gray-200 rounded-full overflow-hidden", role: "progressbar", "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": maxValue || undefined, "aria-label": "Process progress", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ${state === "done" ? "bg-green-500" : state === "paused" ? "bg-yellow-400" : "bg-blue-500"}`, style: { width: `${percent}%` } }) }), _jsxs("span", { className: "text-xs text-gray-600 w-10 text-right tabular-nums", children: [Math.round(percent), "%"] }), state === "running" && (_jsx("button", { onClick: handlePause, disabled: isBusy, className: "px-3 py-1 bg-yellow-400 text-yellow-900 rounded-md hover:bg-yellow-500 disabled:opacity-50 transition-colors text-xs font-medium", children: isBusy ? "…" : pauseLabel })), state === "paused" && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleResume, disabled: isBusy, className: "px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors text-xs font-medium", children: isBusy ? "…" : resumeLabel }), _jsx("button", { onClick: handleEnd, disabled: isBusy, className: "px-3 py-1 bg-gray-500 text-white rounded-md hover:bg-gray-600 disabled:opacity-50 transition-colors text-xs font-medium", children: isBusy ? "…" : endLabel })] })), state === "done" && (_jsx("button", { onClick: handleEnd, disabled: isBusy, className: "px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 transition-colors text-xs font-medium", children: isBusy ? "…" : endLabel }))] }), resolvedLabel && _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: resolvedLabel })] }))] }));
+};
+export default ProcessRunner;