impaktapps-ui-builder 0.0.409-j → 0.0.409-k

package/dist/src/impaktapps-ui-builder/runtime/services/events.d.ts

@@ -1,10 +1,9 @@
 import { handlersProps } from "./interface";
-export declare const executeEvents: (params: handlersProps) => any;
-export declare function getRefreshElements(eventConfig: any, eventGropus: any): string[];
-export declare function executeRefreshHandler(params: handlersProps): Promise<any[][]>;
-export declare function executeApiRequest(params: any): any;
-export declare function shouldEventExecute(params: handlersProps): any;
-export declare function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service: any): {
+export declare const executeEvents: (params: handlersProps) => Promise<any>;
+export declare function executeRefreshHandler(params: handlersProps): Promise<void>;
+export declare function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service: any): Promise<{
     body: any;
     headers: any;
-};
+}>;
+export declare function getRefreshElements(eventConfig: any, eventGropus: any): string[];
+export declare function asyncOperation(): Promise<unknown>;

package/dist/src/impaktapps-ui-builder/runtime/services/service.d.ts

@@ -1,19 +1,18 @@
+export declare const extractEvents: (eventConfig: any) => any;
 interface funcParamsProps {
     store: any;
     dynamicData: any;
+    config: any;
+    uiSchema: any;
+    schema: any;
     service: any;
     userValue: any;
-    functionsProvider?: Record<string, any>;
 }
-export declare const extractEvents: (eventConfig: any) => any;
 declare const _default: (funcParams: funcParamsProps) => {
     setPage: () => Promise<void>;
-    onCellRenderer: (cellParams: any) => {};
-    onClick: () => void;
-    onMount: () => void;
-    onFileDownload: () => void;
-    onFileUpload: () => void;
-    backHandler: () => void;
+    onClick: () => Promise<void>;
+    onFileDownload: () => Promise<void>;
+    onFileUpload: () => Promise<void>;
     onPaginationChange: (paginationValues: any) => Promise<any>;
     getSelectOptions: (param: any) => Promise<any>;
     onChange: () => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.409j",
+    "version": "0.0.409k",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -316,7 +316,53 @@ const buildUiSchema = (config: any) => {
           sizeMap[e.keyName] = e.value
         });
       }
-      elements.elements = transformConfigToOutput(config, sizeMap)
+      function nodeProvider(element) {
+        if (element.type) {
+          return {
+            accessorKey: element.name,
+            type: element.columnFormat,
+            header: element.label || element.name,
+            size: sizeMap[element.name] || 180,
+            widget: buildUiSchema(element)
+
+          };
+        }
+        return {
+          accessorKey: element.name,
+          type: element.columnFormat,
+          header: element.label || element.name,
+          size: sizeMap[element.name] || 180,
+        }
+      }
+
+      function buildHierarchy(elements, parentName = null) {
+        const result = [];
+        for (const element of elements) {
+          if (element?.parent === parentName) {
+            const children = buildHierarchy(elements, element.name);
+            const node: any = nodeProvider(element)
+            if (children.length > 0) {
+              node.columns = children;
+              node.type = "group";
+            }
+            result.push(node);
+          }
+        }
+        return result;
+      }
+
+      function transformConfigToOutput(config) {
+        const output = [];
+        const hierarchy = buildHierarchy(config.elements, config.name);
+        for (const element of config.elements) {
+          const parentExists = config.elements.some(e => e.name === element.parent);
+          if (!parentExists && element.parent !== config.name) {
+            output.push(nodeProvider(element))
+          }
+        }
+        return [ ...hierarchy,...output,];
+      }
+      elements.elements = transformConfigToOutput(config)
     }
     else if (config.type == "Array") {
       elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { ComponentSchema } from "../elements/UiSchema/Component/schema"; 
+import { ComponentSchema } from "../elements/UiSchema/Component/schema";
 import { componentBasicUiSchema } from "../elements/UiSchema/Component/uiSchema";
 import { CoreSection } from "../build/uischema/coreSection";
 import { EventSection } from "../build/uischema/eventSection";
@@ -10,57 +10,57 @@ import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
 import { getFormdataFromLocalStorage, okHandler, saveFormdataInLocalStorage, saveHandler } from "./utils";
 const sectionLabels = {
-  Select: ["Core", "Properties","Value", "style", "Event","Validation"],
-  MultipleSelect: ["Core", "Properties","Value", "style", "Event","Validation"],
-  Table: ["Core", "Components",  "Properties","style",  "Event","Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "style", "Event","Validation"],
-  WrapperSection: ["Core", "Components","Properties", "style","Validation"],
-  TabSection: ["Core", "Components", "Properties", "style","Validation"],
-  SpeedoMeter:["Core", "Properties", "style", "Event","Validation"],
-  card:["Core", "Properties", "style", "Event","Validation"],
-  UploadFile:["Core",  "style", "Event","Validation"],
-  Graph:["Core", "Properties", "style", "Event","Validation"],
-  DownloadFile:["Core",  "style", "Event","Validation"],
-  Box: ["Core", "style", "Event","Validation"],
-  Properties: ["Core", "Properties", "style", "Event","Validation"],
-  ProgressBarCard: ["Core", "Properties", "style", "Event","Validation"],
-  RankCard: ["Core", "Properties", "style", "Event","Validation"],
-  Slider: ["Core", "Components", "style", "Event","Validation"],
-  Timer: ["Core", "style", "Event","Validation"],
-  Rank: ["Core","style", "Event","Validation"],
-  Button: ["Core", "Properties", "style", "Event","Validation"],
-  Array:["Core","Components","Validation"],
-  Radio:["Core", "Properties", "style", "Event","Validation"],
-  Text:["Core","Properties","style", "Event","Validation"],
-  TextArea:["Core","Properties","style", "Event","Validation"],
-  PopUp: ["Core", "Components","Properties", "style"],
-  Stepper: ["Core", "Components","Properties","Event", "style"],
-  DataGrid: ["Core", "Components","Properties","Event", "style"],
-  InputSlider:["Core","Properties","style", "Event","Validation"],
- TreeMap:["Core", "Components","Properties","style", "Event"],
+  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
+  card: ["Core", "Properties", "Event", "Style", "Validation"],
+  UploadFile: ["Core", "Event", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
+  DownloadFile: ["Core", "Event", "Style", "Validation"],
+  Box: ["Core", "Event", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  Slider: ["Core", "Components", "Event", "Style", "Validation"],
+  Timer: ["Core", "Event", "Style", "Validation"],
+  Rank: ["Core", "Event", "Style", "Validation"],
+  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  Array: ["Core", "Components", "Validation"],
+  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
+  Text: ["Core", "Properties", "Event", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  PopUp: ["Core", "Components", "Properties", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
+  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Event", "Style",],
 }
 
 
 
-export const refreshPage = (type:string,store:any) => {
+export const refreshPage = (type: string, store: any) => {
   const UiSchema = _.cloneDeep(componentBasicUiSchema)
-  if(type){
-  const sectionUiSchema = {
-    Core: CoreSection,
-    Value: ValueTab,
-    style: StyleSection,
-    Event: EventSection,
-    Components: TableSection,
-    Properties: buildPropertiesSection(type),
-    Validation:ValidationSection
-  
+  if (type) {
+    const sectionUiSchema = {
+      Core: CoreSection,
+      Value: ValueTab,
+      Style: StyleSection,
+      Event: EventSection,
+      Components: TableSection,
+      Properties: buildPropertiesSection(type),
+      Validation: ValidationSection
+
+    }
+    const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+
   }
-  const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-  UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event","Validation"];
-  UiSchema.elements[1].elements = elements || [CoreSection, StyleSection,EventSection,ValidationSection];
- 
-}
-store.setUiSchema(UiSchema);
+  store.setUiSchema(UiSchema);
 }
 
 export default (store: any, dynamicData: any, submitHandler: any, service: any) => {
@@ -69,26 +69,26 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const formdata = await this.getFormdata();
       store.setFormdata(formdata);
       const schema = this.getSchema();
-      store.setSchema(schema); 
-     this.refreshPage(formdata?.type, store);
-    
+      store.setSchema(schema);
+      this.refreshPage(formdata?.type, store);
+
     },
-    refreshPage:refreshPage,
+    refreshPage: refreshPage,
     getFormdata: function () {
       const path = store.searchParams?.get("path");
-      return getFormdataFromLocalStorage(path) 
+      return getFormdataFromLocalStorage(path)
     },
     getSchema: function () {
       return ComponentSchema;
     },
-    okHandler:()=>okHandler(store),
-    saveHandler: async ()=> await saveHandler(store,service,submitHandler,"PageMaster"),
+    okHandler: () => okHandler(store),
+    saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
     onChange: function () {
       if (
         store?.formData?.type !== store?.newData?.type &&
         store?.newData?.type !== undefined
       ) {
-        this.refreshPage(store?.newData?.type,store);
+        this.refreshPage(store?.newData?.type, store);
       }
     },
     editComponents: function () {

package/src/impaktapps-ui-builder/runtime/services/events.ts

@@ -1,148 +1,102 @@
-import _ from "lodash";
+import _, { cloneDeep } from "lodash";
 import { handlersProps } from "./interface";
 
-export const executeEvents = (params: handlersProps) => {
+
+export const executeEvents = async (
+  params: handlersProps
+) => {
   let nextEvent = [];
   let finalResponse = null;
-
-  if (params.config.isSync !== "Yes") {
-    return shouldEventExecute(params)
-      .then((shouldExecute) => {
-        if (!shouldExecute) {
-          return { response: undefined, events: undefined };
-        }
-        return executeEventsHandler(params);
-      })
-      .then((response) => {
-        finalResponse = response;
-        const SuccessEvent = params.config?.events.filter(e => e.eventType === "Success");
-        nextEvent = SuccessEvent;
-      })
-      .catch((err) => {
-        const FailEvent = params.config?.events?.filter(e => e.eventType === "Fail");
-        const setEvent = FailEvent?.length > 0 ? FailEvent : [];
-        nextEvent = setEvent;
-      })
-      .then(() => {
-        if (nextEvent?.length > 0) {
-          return nextEvent.reduce((chain, actionConfig) => {
-            return chain.then(() => executeEvents({ ...params, config: actionConfig, parentEventOutput: finalResponse }));
-          }, Promise.resolve());
-        }
-      })
-      .then(() => finalResponse)
-  }
-  const shouldExecute = shouldEventExecute(params);
-  if (!shouldExecute) {
-    return { response: undefined, events: undefined };
-  }
   try {
-    const eventsResponse = executeEventsHandler(params);
-    finalResponse = eventsResponse;
+    const shouldExecute = await shouldEventExecute(params)
+    if (!shouldExecute) {
+      return { response: undefined, events: undefined };
+    }
+    const response = await executeEventsHandler(params)
+    finalResponse = response;
     const SuccessEvent = params.config?.events.filter(e => e.eventType === "Success");
     nextEvent = SuccessEvent;
-  } catch {
-    const FailEvent = params.config?.events?.filter(e => e.eventType === "Fail");
-    const setEvent = FailEvent?.length > 0 ? FailEvent : [];
+  } catch (err) {
+    const FailEvent = params.config?.events?.filter(e => e.eventType === "Fail")
+    const setEvent = FailEvent?.length > 0 ? FailEvent : []
     nextEvent = setEvent;
   }
   if (nextEvent?.length > 0) {
     for (const actionConfig of nextEvent) {
-      executeEvents({ ...params, config: actionConfig, parentEventOutput: finalResponse })
+      await executeEvents({ ...params, config: actionConfig, parentEventOutput: finalResponse })
     }
   }
   return finalResponse;
 }
-function executeEventsHandler(params: handlersProps) {
+
+async function executeEventsHandler(params: handlersProps) {
   if (params.config.Handler === "api") {
-    return executeApiRequest(params);
-  } else if (params.config.Handler === "inBuiltFunction") {
-    return executeInBuiltFunctionHandler(params);
-  } else if (params.config.Handler === "custom") {
-    return executeCustomHandler(params);
-  } else if (params.config.Handler === "refresh") {
-    return executeRefreshHandler(params);
-  } else if (params.config.Handler === "mergeFormdata") {
-    return mergeFormdata(
-      params.parentEventOutput,
-      params.componentName,
-      params.config,
-      params.store,
-      params.service
-    );
-  } else if (params.config.Handler === "onBackHandler") {
-    return params.store.functionParameters?.handleBack();
-  } else if (params.config.Handler === "onNextHandler") {
-    return params.store.functionParameters?.handleNext();
-  } else if (params.config.Handler === "onResetHandler") {
-    return params.store.functionParameters?.handleReset();
+    return await executeApiEventHandler(params)
+  }
+  else if (params.config.Handler === "inBuiltFunction") {
+    return await executeInBuiltFunctionHandler(params)
+  }
+  else if (params.config.Handler === "custom") {
+    return await executeCustomHandler(params)
+  }
+  else if (params.config.Handler === "refresh") {
+    return await executeRefreshHandler(params)
+  }
+  else if (params.config.Handler === "mergeFormdata") {
+    const result = await mergeFormdata(
+      params.parentEventOutput, params.componentName, params.config, params.store, params.service)
+    return result;
+  }
+  else if (params.config.Handler === "onBackHandler") {
+    return params.store.functionParameters?.handleBack()
+  }
+  else if (params.config.Handler === "onNextHandler") {
+    return params.store.functionParameters?.handleNext()
+  }
+  else if (params.config.Handler === "onResetHandler") {
+    return params.store.functionParameters?.handleReset()
   }
 }
-
-export function getRefreshElements(eventConfig: any, eventGropus: any) {
-  let result: string[] = [];
-  if (eventConfig?.refreshElements?.length > 0) {
-    result = eventConfig.refreshElements.map((e) => {
-      return e.value
-    })
-
-  } else {
-    if (eventGropus?.onLoad) {
-      result = Object.keys(eventGropus?.onLoad)
-      result.push(result[0]);
+export async function executeRefreshHandler(params: handlersProps) {
+  const compToRefresh: string[] = getRefreshElements(params.config, params.eventGroups)
+  for (const componentName of compToRefresh) {
+    for (const compEventConfig of params.eventGroups.onLoad[componentName]) {
+      await executeEvents({ ...params, config: compEventConfig, componentName });
     }
   }
-  return result;
 }
-export function executeRefreshHandler(params: handlersProps) {
-  const compToRefresh: string[] = getRefreshElements(params.config, params.eventGroups);
-
-  return Promise.all(compToRefresh.map(componentName => {
-    return Promise.all(params.eventGroups.onLoad[componentName].map(compEventConfig => {
-      return executeEvents({ ...params, config: compEventConfig, componentName });
-    }));
-  }))
-};
-export function executeApiRequest(params: any) {
+async function executeApiEventHandler(params: handlersProps) {
   const initialBody = { ...params.userValue?.payload };
   const initialHeaders = {
     "X-Requested-With": "XMLHttpRequest",
     "Access-Control-Allow-Origin": "*"
   };
+  const { body, headers } = await buildApiPayload(params.config, initialBody, initialHeaders, params.store, params.dynamicData, params.userValue, params.service)
 
-  const payloadApi = buildApiPayload(params.config, initialBody, initialHeaders, params.store, params.dynamicData, params.userValue, params.service)
-  return params.service[params.config.method](
+  const response = await params.service[params.config.method](
     params.config.path,
-    payloadApi.body,
-    { headers: payloadApi.headers }
-  ).then((response) => {
-    return response;
-  });
-};
+    body,
+    headers && { headers: headers }
+  );
+  return response;
+}
 
-function executeInBuiltFunctionHandler(params: handlersProps) {
+async function executeInBuiltFunctionHandler(params: handlersProps) {
   let parameter = {};
   if (params.config.funcParametersCode) {
     const makeFunc = eval(params.config.funcParametersCode)
     parameter = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service);
-    params.serviceHolder[params.config.inBuiltFunctionType](parameter, params.service)
-  } else {
-    params.serviceHolder[params.config.inBuiltFunctionType](params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service)
   }
+  params.serviceHolder[params.config.inBuiltFunctionType](parameter)
 }
 
-function executeCustomHandler(params: handlersProps) {
+async function executeCustomHandler(params: handlersProps) {
   const makeFunc = eval(params.config.eventCode)
-  if (params.config.isSync !== "Yes") {
-    makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.componentName).then((res) => res)
-  } else {
-    const response = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.componentName)
-    return response;
-  }
-
+  const response = await makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.componentName);
+  return response;
 }
 
-function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any) {
+async function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
     store.setSchema((pre) => {
       return {
@@ -177,13 +131,14 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
   }
   else {
     if (handlerResponse) {
-      store.setFormdata((pre) => { return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse?.data?.data : handlerResponse.data } });
+      store.setFormdata((pre) => { return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : handlerResponse.data } });
+      const demoData = await asyncOperation();
     }
   }
 }
 
 const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
-  let finalBody = { ...userValue?.payload };
+  const finalBody = { ...userValue?.payload };
   body.map((elem) => {
     if (typeof elem?.value !== "string") {
       finalBody[elem.key] = elem.value;
@@ -195,12 +150,7 @@ const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
       else if (elem?.value?.startsWith("$")) {
         const finalpath = elem.value.substring(1);
         finalBody[elem.key] = _.get(formData, finalpath);;
-      } else if (elem?.value === "*" && elem?.key === "*") {
-        finalBody = { ...finalBody, ...formData };
-      } else if (elem?.value === "*") {
-        finalBody[elem.key] = formData;
-      }
-      else {
+      } else {
         finalBody[elem.key] = elem.value;
       }
     }
@@ -219,40 +169,58 @@ const buildHeadersFormat = (headers: any[]) => {
   return headerObj;
 }
 
-export function shouldEventExecute(params: handlersProps) {
+async function shouldEventExecute(params: handlersProps) {
   const startEvent = params.config?.events?.filter(e => e.eventType === "onStart");
-
   if (startEvent?.length > 0) {
-    return executeEventsHandler({ ...params, config: startEvent[0] }).then((response) => {
-      return response;
-    });
+    const response = await executeEventsHandler({ ...params, config: startEvent[0] });
+    return response;
   } else {
-    if (params.config.isSync !== "Yes") {
-      return Promise.resolve(true)
-    } else {
-      return true
-    }
+    return true
   }
 }
 
-
-export function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service) {
+export async function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service) {
   if (compConfig?.headers) {
-    headers = buildHeadersFormat(compConfig.headers);
-  }
+    headers = buildHeadersFormat(compConfig.headers)
 
+  }
   if (compConfig.body) {
     body = { ...buildBodyFormat(compConfig.body, store.newData || store?.ctx?.core?.data || store.formData, userValue) };
   }
-
-  const promiseChain = { body, headers };
-
-
   if (compConfig.apiBody) {
     const makeFunc = eval(compConfig.apiBody);
-    return { body: makeFunc(store, dynamicData, userValue, promiseChain.body), headers: promiseChain.headers };
-    // return result;
+    const data = await makeFunc(store, dynamicData, userValue, body);
+    body = data
+  }
+  return { body, headers };
+}
+
+export function getRefreshElements(eventConfig: any, eventGropus: any) {
+  let result: string[] = [];
+  if (eventConfig?.refreshElements?.length > 0) {
+    result = eventConfig.refreshElements.map((e) => {
+      return e.value
+    })
 
+  } else {
+    if (eventGropus?.onLoad) {
+      result = Object.keys(eventGropus?.onLoad)
+      result.push(result[0]);
+    }
   }
-  return promiseChain;
+  console.log(result);
+  return result;
+}
+
+
+export function asyncOperation() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const success = true;
+      if (success) {
+        resolve("Operation completed successfully!");
+        reject(new Error("Operation failed!"));
+      }
+    }, 50);
+  });
 }