robobyte-front-builder 1.0.19 → 1.0.23

package/src/services/Endpoints.js

@@ -22,6 +22,7 @@ import { NavigatorEndpoints } from 'services/Endpoints/NavigatorEndpoints'
 import { ViewEndpoints } from './Endpoints/ViewEndpoints'
 import { UiBuilderEndpoints } from 'services/Endpoints/UiBuilderEndpoints'
 import { WidgetEndpoints } from 'services/Endpoints/WidgetEndpoints'
+import { PrintLayoutEndpoints } from 'services/Endpoints/PrintLayoutEndpoints'
 
 // BaseURL and ApiURL are now sourced from the config singleton so that
 // host apps can override them via configureRoboByte() or the
@@ -47,6 +48,7 @@ export const Endpoints = {
   UiBuilder: { ...UiBuilderEndpoints },
   Navigator: { ...NavigatorEndpoints },
   Widget: { ...WidgetEndpoints },
+  PrintLayout: { ...PrintLayoutEndpoints },
   ViewPermission: { ...ViewPermissionEndpoints },
   ViewPermissionRole: { ...ViewPermissionRoleEndpoints },
   ViewPermissionRoleItems: { ...ViewPermissionRoleItemsEndpoints },

package/src/services/GetService.js

@@ -1,64 +1,43 @@
 import Axios from 'axios'
-import { DataTypes } from './ContentTypes'
 import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
+
 export default async function GetService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
-  let response = { status: 'Error', message: '' }
-  let result = null
-  const url = resolveURL(endpoint)
+  try {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
+
+    const r = await Axios.get(url, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: {
+        ...params,
+        ...data,
+      },
+    })
 
-  const axiosConfig = {
-    method: 'post',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...data
+    if (showToast) {
+      toast.success(r.data?.message || 'تم التحميل بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
+}
 
-  try {
-    await Axios.get(url, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
 
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في تحميل البيانات'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في تحميل البيانات'
-    }
-  } finally {
-    if (response.status == 'Success') {
-      if (showToast) toast.success(response.message)
-    } else {
-      toast.error(response.message)
-    }
-  }
-  return result
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في تحميل البيانات'
 }

package/src/services/PatchService.js

@@ -4,77 +4,50 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function PatchService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
-    let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
 
-  let currnetData =
-    endpoint.DataType == DataTypes.Form
-      ? data
-      : {
-          ...(endpoint.DataType == DataTypes.Body ? { ...data } : {})
-        }
-  if (!data) return
-  const url = resolveURL(endpoint)
+  try {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
 
-  const axiosConfig = {
-    method: 'patch',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  }
-
-  try {
-    await Axios.patch(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
+    const requestData =
+      endpoint.DataType === DataTypes.Form
+        ? data
+        : endpoint.DataType === DataTypes.Body
+        ? { ...data }
+        : {}
 
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const r = await Axios.patch(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
-    }
-  } finally {
     if (showToast) {
-      if (response.status == 'Success') {
-        toast.success(response.message)
-      } else {
-        toast.error(response.message)
-      }
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
-  return result
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
+
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/PostService.js

@@ -4,75 +4,49 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function PostService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
 
 
-  let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
-  let currnetData = endpoint.DataType == DataTypes.Form || endpoint.DataType == DataTypes.Body ? data : {}
-
-  if (!data) return
-  const url = resolveURL(endpoint)
-
-  const axiosConfig = {
-    method: 'post',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
-    }
-  }
-
   try {
-    await Axios.post(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  } finally {
-    if (response.status == 'Success') {
-      if (showToast) {
-        toast.success(response.message)
-      }
-    } else {
-      toast.error(response.message)
-      return false
+    const requestData =
+      endpoint.DataType === DataTypes.Form || endpoint.DataType === DataTypes.Body
+        ? data
+        : {}
+
+    const r = await Axios.post(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
+
+    if (showToast) {
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
 
-  return result
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/UpdateService.js

@@ -4,76 +4,50 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function UpdateService(endpoint, showToast, data, params, urlExtra = '') {
-  const accessToken = getAccessToken()
-  let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
-  let currnetData =
-    endpoint.DataType == DataTypes.Form
-      ? data
-      : {
-        ...(endpoint.DataType == DataTypes.Body ? { ...data } : {})
-      }
-  if (!data) return
-  const url = resolveURL(endpoint) + urlExtra
-
-  const axiosConfig = {
-    method: 'put',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
-    }
-  }
 
   try {
-    await Axios.put(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
-
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint) + (urlExtra || '')
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  } finally {
+    const requestData =
+      endpoint.DataType === DataTypes.Form
+        ? data
+        : endpoint.DataType === DataTypes.Body
+        ? { ...data }
+        : {}
+
+    const r = await Axios.put(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
+
     if (showToast) {
-      if (response.status == 'Success') {
-        toast.success(response.message)
-      } else {
-        toast.error(response.message)
-      }
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
-  return result
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
+
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/builderHelper/actionExecutor.js

@@ -1,10 +1,15 @@
 import { executeJSCode } from './jsExecutor'
 
 /**
- * Execute an action and set the result to the data object
- * @param {object} action - The action to execute
- * @param {object} context - The execution context (form, data)
- * @param {function} setData - Function to update the data object
+ * Execute an action and optionally set its result onto the data state.
+ *
+ * context shape:
+ *   form, data, setData, dataRef, reportRefs
+ *   (setData may also be provided as the legacy 3rd argument for backward compat)
+ *
+ * @param {object}   action  - The action to execute
+ * @param {object}   context - Execution context
+ * @param {function} [setData] - Legacy: state setter; prefer context.setData
  */
 export async function executeAction(action, context, setData) {
   if (!action || !action.code) {
@@ -12,27 +17,47 @@ export async function executeAction(action, context, setData) {
     return
   }
 
+  // Resolve setData: prefer what's already in context, fall back to the explicit arg
+  const effectiveSetData = context.setData || setData || (() => {})
+
+  // Build the full context that jsExecutor expects
+  const fullContext = {
+    form: context.form ?? {},
+    data: context.data ?? {},
+    dataRef: context.dataRef ?? {},
+    reportRefs: context.reportRefs ?? {},
+    openDialog: context.openDialog ?? (() => {}),
+    closeDialog: context.closeDialog ?? (() => {}),
+    // Thread parent-page stores so Calculation can access `page.data` etc.
+    pageData:       context.pageData,
+    pageSetData:    context.pageSetData,
+    pageDataRef:    context.pageDataRef,
+    pageReportRefs: context.pageReportRefs,
+    ...context,
+    setData: effectiveSetData,
+  }
+
   try {
-    // Execute the action code using centralized executor
-    const result = await executeJSCode(action.code, context)
+    const result = await executeJSCode(action.code, fullContext)
 
-    // Parse target path and set the result
     if (action.targetPath) {
-      setDataAtPath(setData, action.targetPath, result)
+      setDataAtPath(effectiveSetData, action.targetPath, result)
     }
+
+    return result
   } catch (e) {
     console.error(`Action execution error [${action.name}]:`, e)
   }
 }
 
 /**
- * Set value at a nested path in the data object
- * @param {function} setData - Function to update the data object
- * @param {string} path - Dot-notation path (e.g., 'data.d1' or 'd1')
- * @param {any} value - Value to set
+ * Set value at a nested path in the data object.
+ *
+ * @param {function} setData - State setter
+ * @param {string}   path    - Dot-notation path (e.g. 'data.d1' or 'd1')
+ * @param {any}      value   - Value to set
  */
 function setDataAtPath(setData, path, value) {
-  // Remove 'data.' prefix if present
   const cleanPath = path.startsWith('data.') ? path.substring(5) : path
 
   setData(prev => {
@@ -40,34 +65,125 @@ function setDataAtPath(setData, path, value) {
     const keys = cleanPath.split('.')
     let current = newData
 
-    // Navigate to the parent of the target key
     for (let i = 0; i < keys.length - 1; i++) {
-      if (!current[keys[i]]) {
-        current[keys[i]] = {}
-      }
+      if (!current[keys[i]]) current[keys[i]] = {}
       current = current[keys[i]]
     }
 
-    // Set the final value
     current[keys[keys.length - 1]] = value
-
     return newData
   })
 }
 
 /**
- * Execute all actions of a specific event type
- * @param {array} actions - All actions from schema
- * @param {string} eventType - Event type to filter (e.g., 'onLoad')
- * @param {object} context - Execution context (form, data)
- * @param {function} setData - Function to update the data object
+ * Execute all actions of a specific event type.
+ *
+ * @param {array}    actions   - All actions from schema
+ * @param {string}   eventType - Event type to filter ('onLoad', 'onSubmit', …)
+ * @param {object}   context   - Execution context (see executeAction)
+ * @param {function} [setData] - Legacy 4th arg for backward compat
  */
 export async function executeActionsByEvent(actions, eventType, context, setData) {
   if (!actions || !Array.isArray(actions)) return
 
   const matchingActions = actions.filter(action => action.event === eventType)
 
+  let lastResult
   for (const action of matchingActions) {
-    await executeAction(action, context, setData)
+    lastResult = await executeAction(action, context, setData)
+  }
+  return lastResult
+}
+
+/**
+ * Convenience helper for KPI / data-visualisation renderers.
+ *
+ * Reads `node.props.actions[eventName]` and executes the action,
+ * injecting `clickVars` into the Calculation's lexical scope so the
+ * user can reference them directly by name:
+ *
+ *   async function Calculation(form, data, setData, ...) {
+ *     // clickedItem, clickedValue, clickedLabel, clickedIndex, etc.
+ *     setData(prev => ({ ...prev, selected: clickedItem }))
+ *     openDialog('detail', { data: { row: clickedItem } })
+ *     showToast('Clicked: ' + clickedLabel, 'info')
+ *   }
+ *
+ * @param {object} node           - Builder node (has node.props.actions)
+ * @param {object} viewerContext  - Full viewerContext from the renderer
+ * @param {string} eventName      - 'onDataClick' | 'onCellClick' | 'onItemClick' | etc.
+ * @param {object} [clickVars]    - Click-specific variables to inject (clickedItem, clickedValue, …)
+ */
+export async function runKpiAction(node, viewerContext, eventName, clickVars = {}) {
+  const action = node.props?.actions?.[eventName]
+  if (!action?.code) return
+
+  const {
+    form, data, setData, dataRef, reportRefs,
+    openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext ?? {}
+
+  const context = {
+    form:        form        ?? {},
+    data:        data        ?? {},
+    setData:     setData     ?? (() => {}),
+    dataRef:     dataRef?.current ?? dataRef ?? {},
+    reportRefs:  reportRefs  ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    extraVars: clickVars,
   }
+
+  return executeAction(action, context)
+}
+
+/**
+ * Convenience helper for field/input renderers.
+ *
+ * Reads the node's actions, builds the context from viewerContext, and fires
+ * all handlers registered for `eventName`.
+ *
+ * `newValue` is injected into the Calculation's lexical scope so action code
+ * can reference it directly without digging through form state:
+ *
+ *   async function Calculation(form, data, setData, ...) {
+ *     if (newValue === 'active') setData(prev => ({ ...prev, showExtra: true }))
+ *   }
+ *
+ * @param {object} node          - Builder node (has node.props.actions)
+ * @param {object} viewerContext - Full viewerContext from the renderer
+ * @param {string} eventName     - 'onChange' | 'onBlur' | etc.
+ * @param {any}    newValue      - The new field value, available as `newValue` in action code
+ */
+export async function runFieldAction(node, viewerContext, eventName, newValue) {
+  const propsActions = node.props?.actions ?? {}
+
+  const actions = Object.entries(propsActions)
+    .filter(([, v]) => v?.actionType === 'custom' && v?.code)
+    .map(([event, v]) => ({ event, code: v.code, name: event }))
+
+  if (!actions.length) return
+
+  const {
+    form, data, setData, dataRef, reportRefs,
+    openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext
+
+  const context = {
+    form,
+    data,
+    setData:      setData      ?? (() => {}),
+    dataRef:      dataRef?.current ?? dataRef ?? {},
+    reportRefs:   reportRefs   ?? {},
+    openDialog:   openDialog   ?? (() => {}),
+    closeDialog:  closeDialog  ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    // Inject newValue into the Calculation's lexical scope via extraVars
+    extraVars: { newValue },
+  }
+
+  return executeActionsByEvent(actions, eventName, context)
 }