@ramesesinc/platform-core 0.1.0

package/dist/components/action/ProcessRunner.tsx

@@ -0,0 +1,337 @@
+"use client";
+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";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+// Display state is always derived from the server record — never set directly.
+type RunnerState = "idle" | "running" | "paused" | "done";
+
+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; // e.g. "/processtask/start?_id={_id}"
+      pause?: string; // e.g. "/processtask/pause?_id={_id}"
+      resume?: string; // e.g. "/processtask/resume?_id={_id}"
+      end?: string; // e.g. "/processtask/end?_id={_id}"
+    };
+  };
+  /**
+   * 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;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helpers */
+
+const toRunnerState = (raw: unknown): RunnerState => {
+  switch (String(raw ?? "").toUpperCase()) {
+    case "RUNNING":
+      return "running";
+    case "PAUSED":
+      return "paused";
+    case "DONE":
+      return "done";
+    default:
+      return "idle";
+  }
+};
+
+const resolveNumeric = (expr: string, data: Record<string, any>): number => {
+  const n = Number(getValue(expr, data));
+  return isNaN(n) ? 0 : n;
+};
+
+/* ------------------------------------------------------------------ */
+/* Component */
+const ProcessRunner = (props: ProcessRunnerProps) => {
+  const {
+    value: valueProp = "{processedcount}",
+    maxValue: maxValueProp = "{totalcount}",
+    statusValue = "{status}",
+    labelExpr,
+    data,
+    interval = 5000,
+    labels = {},
+    opt = {},
+    className = "",
+  } = 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<Record<string, any>>(optData);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(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) => ({ ...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 {
+      ...params,
+      ...pageContext.getAllData(),
+      ...optData, // row record from Table — always live, not just a one-time seed
+      ...liveData, // polled data wins last — overwrites optData after first fetch
+    };
+  }, [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?.api) return;
+    try {
+      const url = substituteExpr(data.api, resolveCtx);
+      const json = await 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 {
+      // Silently ignore — next tick will retry
+    }
+  }, [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: string | undefined) => {
+      if (!actionUrl || isBusy) return;
+      setIsBusy(true);
+      try {
+        const url = substituteExpr(actionUrl, resolveCtx);
+        await pageContext?.execService(url, resolveCtx);
+      } catch {
+        // 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 = () => fireAction(data?.actions?.start);
+  const handlePause = () => fireAction(data?.actions?.pause);
+  const handleResume = () => fireAction(data?.actions?.resume);
+  const handleEnd = () => fireAction(data?.actions?.end);
+
+  /* ----------------------------------------------------------------
+     Render
+  ---------------------------------------------------------------- */
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      {/* IDLE — Start button */}
+      {state === "idle" && (
+        <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"
+        >
+          {isBusy ? "…" : startLabel}
+        </button>
+      )}
+
+      {/* RUNNING / PAUSED / DONE — progress bar + controls */}
+      {state !== "idle" && (
+        <div className="flex flex-col gap-1 w-full">
+          <div className="flex items-center gap-2">
+            {/* Bar */}
+            <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"
+            >
+              <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}%` }}
+              />
+            </div>
+
+            {/* Percent */}
+            <span className="text-xs text-gray-600 w-10 text-right tabular-nums">{Math.round(percent)}%</span>
+
+            {/* RUNNING → Pause */}
+            {state === "running" && (
+              <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"
+              >
+                {isBusy ? "…" : pauseLabel}
+              </button>
+            )}
+
+            {/* PAUSED → Resume | End */}
+            {state === "paused" && (
+              <>
+                <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"
+                >
+                  {isBusy ? "…" : resumeLabel}
+                </button>
+                <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"
+                >
+                  {isBusy ? "…" : endLabel}
+                </button>
+              </>
+            )}
+
+            {/* DONE → End (reset) */}
+            {state === "done" && (
+              <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"
+              >
+                {isBusy ? "…" : endLabel}
+              </button>
+            )}
+          </div>
+
+          {/* Label below bar — only when labelExpr is provided */}
+          {resolvedLabel && <p className="text-xs text-gray-500 mt-0.5">{resolvedLabel}</p>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProcessRunner;

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

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

package/dist/components/action/Refresh.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+/* ------------------------------------------------------------------ */
+/* Component */
+const Refresh = (props) => {
+    const { className = "", title } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = () => {
+        // console.log("Refresh button", pageContext.refresh());
+        pageContext.notifyDepends();
+    };
+    /* ---------------------- 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: title || "Refresh" }));
+};
+export default Refresh;

package/dist/components/action/Refresh.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { usePageContext } from "../../core/PageContext";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface RefreshProps extends AbstractComponent {
+  className?: string;
+  title?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const Refresh = (props: RefreshProps) => {
+  const { className = "", title } = props ?? {};
+  const pageContext = usePageContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = () => {
+    // console.log("Refresh button", pageContext.refresh());
+    pageContext.notifyDepends();
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+      {title || "Refresh"}
+    </button>
+  );
+};
+
+export default Refresh;

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

@@ -0,0 +1,10 @@
+import { AbstractComponent } from "../../types/component";
+interface SaveDataProps extends AbstractComponent {
+    className?: string;
+    title?: string;
+    api: string;
+    params?: string;
+    data?: Record<string, any> | null;
+}
+declare const SaveData: (props: SaveDataProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveData;

package/dist/components/action/SaveData.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import { getValue } from "../../lib/utils/BeanUtils";
+import { getUrlPageParams } from "../../lib/utils/PageUtils";
+/* ------------------------------------------------------------------ */
+/* Component */
+const SaveData = (props) => {
+    const { className = "", title, api, params, data = {} } = props !== null && props !== void 0 ? props : {};
+    // console.log("save data props", { api, params, props });
+    const pageContext = usePageContext();
+    const pageViewContext = usePageViewContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async (e) => {
+        var _a, _b, _c, _d;
+        e.preventDefault();
+        try {
+            if (!api)
+                throw new Error("api not defined");
+            if (params) {
+                const allData = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+                // console.log("save data 1.1", allData);
+                const urlParams = (_b = getUrlPageParams()) !== null && _b !== void 0 ? _b : {};
+                // console.log("save data 1.2", urlParams);
+                const d = getValue(params, Object.assign(Object.assign({}, allData), urlParams === null || urlParams === void 0 ? void 0 : urlParams.params));
+                // console.log("save data", { api, d });
+                // console.log("data before save is ", params, d);
+                // throw new Error("test error");
+                await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(api, d));
+            }
+            else {
+                const vdata = (_c = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getData()) !== null && _c !== void 0 ? _c : {};
+                const req = {
+                    data: vdata,
+                };
+                // console.log("save data", { api, vdata });
+                await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(api, req));
+            }
+            const eventHandler = (_d = pageViewContext.getEventHandler()) !== null && _d !== void 0 ? _d : {};
+            const { onSave } = eventHandler;
+            if (typeof onSave === "function") {
+                onSave({});
+            }
+        }
+        catch (err) {
+            console.log("error save data", 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: title || "Save" }));
+};
+export default SaveData;

package/dist/components/action/SaveData.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import { getValue } from "../../lib/utils/BeanUtils";
+import { getUrlPageParams } from "../../lib/utils/PageUtils";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface SaveDataProps extends AbstractComponent {
+  className?: string;
+  title?: string;
+  api: string;
+  params?: string;
+  data?: Record<string, any> | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const SaveData = (props: SaveDataProps) => {
+  const { className = "", title, api, params, data = {} } = props ?? {};
+  // console.log("save data props", { api, params, props });
+  const pageContext = usePageContext();
+  const pageViewContext = usePageViewContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    try {
+      if (!api) throw new Error("api not defined");
+      if (params) {
+        const allData = pageContext?.getAllData() ?? {};
+        // console.log("save data 1.1", allData);
+        const urlParams = getUrlPageParams() ?? {};
+        // console.log("save data 1.2", urlParams);
+        const d = getValue(params, { ...allData, ...urlParams?.params });
+        // console.log("save data", { api, d });
+
+        // console.log("data before save is ", params, d);
+        // throw new Error("test error");
+        await pageContext?.execService(api, d);
+      } else {
+        const vdata = pageContext?.getData() ?? {};
+        const req = {
+          data: vdata,
+        };
+        // console.log("save data", { api, vdata });
+        await pageContext?.execService(api, req);
+      }
+
+      const eventHandler = pageViewContext.getEventHandler() ?? {};
+      const { onSave } = eventHandler;
+      if (typeof onSave === "function") {
+        onSave({});
+      }
+    } catch (err: any) {
+      console.log("error save data", err);
+      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}`}>
+      {title || "Save"}
+    </button>
+  );
+};
+
+export default SaveData;

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

@@ -0,0 +1,8 @@
+import { AbstractComponent } from "../../types/component";
+interface SelectDataProps extends AbstractComponent {
+    className?: string;
+    title?: string;
+    name: string;
+}
+declare const SelectData: (props: SelectDataProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectData;

package/dist/components/action/SelectData.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+/* ------------------------------------------------------------------ */
+/* Component */
+const SelectData = (props) => {
+    const { className = "", title, name } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const pageViewContext = usePageViewContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async () => {
+        var _a;
+        try {
+            const eventHandler = (_a = pageViewContext.getEventHandler()) !== null && _a !== void 0 ? _a : {};
+            const { onSelect } = eventHandler;
+            if (typeof onSelect === "function") {
+                const d = pageContext.get(name);
+                onSelect(d);
+            }
+        }
+        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: title || "Save" }));
+};
+export default SelectData;

package/dist/components/action/SelectData.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface SelectDataProps extends AbstractComponent {
+  className?: string;
+  title?: string;
+  name: string; //target name of data to extract
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const SelectData = (props: SelectDataProps) => {
+  const { className = "", title, name } = props ?? {};
+  const pageContext = usePageContext();
+  const pageViewContext = usePageViewContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = async () => {
+    try {
+      const eventHandler = pageViewContext.getEventHandler() ?? {};
+      const { onSelect } = eventHandler;
+
+      if (typeof onSelect === "function") {
+        const d = pageContext.get(name);
+        onSelect(d);
+      }
+    } 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}`}>
+      {title || "Save"}
+    </button>
+  );
+};
+
+export default SelectData;

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

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

package/dist/components/action/Undo.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+/* ------------------------------------------------------------------ */
+/* Component */
+const Undo = (props) => {
+    const { className = "", title, api, data } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async () => {
+        try {
+            /*
+            if(!api) throw new Error("api not defined");
+            const allData = pageContext?.getAllData() ?? {};
+            if( data ) {
+              const d = getValue( data, allData );
+              await pageContext?.execService( api, d );
+            }
+            else {
+              await pageContext?.execService( api, allData );
+            }
+            */
+        }
+        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: title || "Update Context" }));
+};
+export default Undo;