impaktapps-ui-builder 1.0.621 → 1.0.622

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

@@ -1,32 +1,52 @@
-export const downloadFile = (obj: any) => {
-    const typeArr = obj.name.split(".");
-    const data = obj.data;
-    const finalData = window.atob(data);
-    let file;
-    file = new File([finalData], typeArr[typeArr.length - 1]);
-
-    const url = URL.createObjectURL(file);
-    const link = document.createElement("a");
-    link.href = typeArr[typeArr.length - 1] === 'pdf' ? 'data:application/octet-stream;base64,' + data : url;
-    link.download = `${obj.name}`;
-    document.body.appendChild(link);
-    link.click();
+export function downloadFile({ data, name }: { data: string; name: string }) {
+    const binary = window.atob(data);
+    const bytes = new Uint8Array(binary.length);
+
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+
+    const extension = name.split(".").pop()?.toLowerCase();
+    const mimeMap: Record<string, string> = {
+        pdf: "application/pdf",
+        png: "image/png",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        csv: "text/csv",
+    };
+
+    const blob = new Blob([bytes], {
+        type: mimeMap[extension!] || "application/octet-stream",
+    });
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.click();
 
     URL.revokeObjectURL(url);
-    document.body.removeChild(link);
-};
+}
 
-export const doDownload = (response: any, service) => {
-    let url = `${service.defaults.baseURL}/${response.path}`;
+export const downloadFileFromUrl = (response: any, service) => {
+    const url = new URL(response.path, service.defaults.baseURL);
     if (response?.params) {
-        const keysArray = Object.keys(response?.params);
-        keysArray.map((e, i) => {
-            url = url + `${i === 0?"?":"&"}${e}=${response?.params[e]}`
-        })
+        for (const [key, value] of Object.entries(response.params)) {
+            if (value == null) continue;
+
+            url.searchParams.append(
+                key,
+                Array.isArray(value) ? value.join(",") : String(value),
+            );
+        }
     }
     const link = document.createElement('a');
-    link.href = url;
+    link.href = url.toString();
+    link.download = "";
     document.body.appendChild(link);
     link.click();
     link.parentNode.removeChild(link);
 };
+
+

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

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import _, { isObject, mapKeys } from "lodash";
 import { handlersProps } from "./interface";
 export const executeEvents = (params: handlersProps) => {
   let nextEvent = [];
@@ -68,8 +68,7 @@ function executeEventsHandler(params: handlersProps) {
       params.componentName,
       params.config,
       params.store,
-      params.service,
-      params.formDataHolder
+      params.formDataHolder,
     );
   } else if (params.config.Handler === "onBackHandler") {
     return params.store.functionParameters?.handleBack();
@@ -144,8 +143,7 @@ function executeCustomHandler(params: handlersProps) {
   }
 
 }
-
-function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any, formDataHolder: any) {
+function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, formDataHolder: any) {
   if (eventConfig.type === "Select" && handlerResponse?.data) {
     if (!_.isEmpty(handlerResponse?.data)) {
       store.setSchema((pre) => {
@@ -178,28 +176,28 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
     }
   }
   else if (eventConfig.type === "page") {
-    if (!(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
+    if (!(_.isEmpty(handlerResponse?.data) && handlerResponse?.data && isObject(handlerResponse.data))) {
       store.newData = {
         ...store.newData,
         ...handlerResponse?.data
       }
-      store.setFormdata((pre: any) => { return { ...pre, ...handlerResponse?.data } })
+      Object.keys(handlerResponse.data).forEach((e) => {
+        formDataHolder[e] = handlerResponse.data[e]
+      })
     }
   }
   else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
     if (handlerResponse && handlerResponse?.data) {
       formDataHolder[componentName] = handlerResponse.data?.data
       formDataHolder[`${componentName}_RowCount`] = handlerResponse.data?.meta?.totalRowCount
-      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
     }
   }
   else {
-    if (handlerResponse) {
+    if (handlerResponse?.data) {
       formDataHolder[componentName] = handlerResponse.data
-      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
     }
   }
-}
+};
 
 const buildBodyFormat = (body: any[], formData: any, userValue: any, store: any) => {
   let finalBody = { ...userValue?.payload };

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

@@ -1,5 +1,5 @@
 import _, { isEmpty } from "lodash";
-import { doDownload, downloadFile } from "./downloadFile";
+import { downloadFileFromUrl, downloadFile } from "./downloadFile";
 import { executeEvents, executeRefreshHandler } from "./events";
 import { handlersProps } from "./interface";
 let compType: string;
@@ -62,11 +62,11 @@ export const extractEvents = (eventConfig: any) => {
   return eventGroups;
 };
 export default (funcParams: funcParamsProps) => {
-  const formDataHolder = {}
+  const formDataHolder = {};
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider }, eventGroups,
+    serviceHolder: { downloadFile, downloadFileFromUrl: downloadFileFromUrl, ...funcParams.functionsProvider }, eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
@@ -80,129 +80,19 @@ export default (funcParams: funcParamsProps) => {
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
-        detail: { pageName: config.label, hasBackIcon: true }
+        detail: { pageName: config.label, pageIconUrl: config.pageIconUrl, hasBackIcon: config.hasBackIcon === "NO" ? false : true }
       });
       window.dispatchEvent(event)
       const theme = funcParams?.store?.theme?.myTheme;
-      uiSchema.elements.push(
-        {
-          type: "HorizontalLayout",
-          config: {
-            main: {
-              direction: "row",
-            },
-            style: {
-              flexDirection: "row",
-              position: "absolute",
-              bottom: 0,
-              height: "fit-content",
-              overflow: "hidden",
-              zIndex: 1000,
-              width: "inherit",
-            },
-          },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/FooterText",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  heading: "Copywriter@ACT21.IO",
-                },
-                style: {
-                  color: theme?.palette?.text?.disabled || "#AFAFAF",
-                  fontSize: "11px",
-                  textAlign: "center",
-                  lineHeight: 2,
-                  width: "fit-content",
-                  left: "50%",
-                  position: "relative",
-                  margin: 0,
-                  flexGrow: 1,
-                  height: 0,
-                  transform: "translate(-50%, 0%)",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackIcon",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  iconName: "PrevIcon",
-                  onClick: "backHandler",
-                  width: "fit-content",
-                },
-                style: {
-                  fill: theme?.palette?.primary?.main,
-                  width: 20,
-                  height: 0,
-                  top: 0,
-                  right: { xs: "12px", sm: "84px" },
-                  position: "absolute",
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  ":hover": {
-                    fill: theme?.palette?.primary?.dark,
-                  },
-                  marginRight: "20px",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackHandlerText",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  heading: "Previous Page",
-                  onClick: "backHandler",
-                },
-                style: {
-                  display: { xs: "none", sm: "flex" },
-                  textAlign: "left",
-                  lineHeight: 1,
-                  height: 0,
-                  width: "fit-content",
-                  color: theme?.palette?.primary?.main,
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  marginLeft: "2px",
-
-                  top: 3,
-                  right: "12px",
-                  position: "absolute",
-                  ":hover": {
-                    color: theme?.palette?.primary?.dark,
-                  },
-                  marginRight: "4px",
-                },
-              },
-            },
-          ],
-        }
-      );
       const schema = pageData?.schema ?? { type: "object", properties: {} };
       eventGroups = extractEvents(config);
       executeEventsParameters = {
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
-        serviceHolder: this, eventGroups, formDataHolder
+        serviceHolder: this, eventGroups, formDataHolder,
       }
-      await executeRefreshHandler({
-        config: {}, componentName: "",
-        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups, formDataHolder: {}
-      })
+
       funcParams.store.setSchema(
         (pre: any) => {
           return {
@@ -211,23 +101,51 @@ export default (funcParams: funcParamsProps) => {
           }
         }
       )
-      uiSchema.elements.push(notifyUiSchema);
-      funcParams.store.setUiSchema(uiSchema);
+
+      executeRefreshHandler({
+        config: {}, componentName: "",
+        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
+        serviceHolder: this, eventGroups, formDataHolder: formDataHolder
+      }).then((e) => {
+        funcParams.store.setFormdata((pre) => ({ ...pre, ...formDataHolder }))
+        uiSchema.elements.push(notifyUiSchema);
+        funcParams.store.setUiSchema(uiSchema);
+      });
+    },
+    getStyle: () => {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      if (cloneEventGroup.setStyle) {
+        let finalResponse = {};
+        const path = funcParams.dynamicData?.tableButtonPath || funcParams?.dynamicData.path?.split(".").pop();
+        if (cloneEventGroup?.setStyle?.[path]) {
+          for (const eventConfig of cloneEventGroup?.setStyle?.[path]) {
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            })
+          }
+          return finalResponse
+        }
+      }
+      return {}
     },
     onCellRenderer: (cellParams) => {
-      if (eventGroups.onCellRenderer) {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      if (cloneEventGroup.onCellRenderer) {
         let finalResponse = {};
         const path = funcParams.dynamicData?.tableButtonPath || funcParams?.dynamicData?.path?.split(".")[0];
-
-        for (const eventConfig of eventGroups?.onCellRenderer?.[path]) {
-          executeEventsParameters.store.functionParameters = cellParams
-          finalResponse = executeEvents({
-            ...executeEventsParameters,
-            config: eventConfig,
-            componentName: path
-          })
+        if (cloneEventGroup?.onCellRenderer?.[path]) {
+          for (const eventConfig of cloneEventGroup?.onCellRenderer?.[path]) {
+            executeEventsParameters.store.functionParameters = cellParams
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            })
+          }
+          return finalResponse
         }
-        return finalResponse
       }
       return {}
     },
@@ -240,6 +158,9 @@ export default (funcParams: funcParamsProps) => {
     onFileDelete: async function () {
       this.callHandler("onFileDelete")
     },
+    onClose: function () {
+      this.callHandler("onClose")
+    },
     onMount: function () {
       this.callHandler("onMount")
     },
@@ -268,11 +189,20 @@ export default (funcParams: funcParamsProps) => {
         { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.tableColumnConfig || [] },
-        { key: "globalFilter", value: paginationValues.globalFilter ?? '' }
+        { key: "globalFilter", value: paginationValues.globalFilter ?? '' },
+        { key: "parentIds", value: paginationValues.parentIds},
+        { key: "isExpandAll", value: paginationValues.isExpandAll},
       ]
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
     },
+    onNodeExpandChange: async function (param) {
+      const apiBody = [
+        { key: "expandedNodeId", value: param.expandedNodeId }
+      ]
+      const response = await this.callExecuteEvents(param, apiBody, "onNodeExpandChange");
+      return response?.data;
+    },
     getSelectOptions: async function (param) {
       if (param.serachValue !== "" && param.serachValue !== undefined) {
         const apiBody = [
@@ -283,24 +213,38 @@ export default (funcParams: funcParamsProps) => {
         return response?.data;
       }
     },
-    onChange: async function () {
-      if (eventGroups.onChange) {
-        const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
-        Promise.all(ChangeEventsKeysArray.map(async (componentName: string) => {
-          if (
-            funcParams.store?.formData[componentName] !== funcParams.store.newData[componentName] &&
-            funcParams.store?.newData[componentName] !== undefined
-          ) {
-            for (const eventConfig of eventGroups.onChange[componentName]) {
-              await executeEvents({
-                ...executeEventsParameters,
-                config: eventConfig,
-                componentName
-              })
+    onChange: function () {
+      if (!eventGroups.onChange) return;
+
+      const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
+
+      const promises = ChangeEventsKeysArray.flatMap((componentName: string) => {
+        if (
+          funcParams.store?.formData[componentName] === funcParams.store.newData[componentName] 
+        ) {
+          return [];
+        }
+
+        return eventGroups.onChange[componentName].map(eventConfig =>
+          Promise.resolve(
+            executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName,
+              formDataHolder
+            })
+          ).then(() => {
+            if (!isEmpty(formDataHolder)) {
+              funcParams.store.setFormdata(pre => ({
+                ...pre,
+                ...formDataHolder
+              }));
             }
-          }
-        }))
-      }
+          })
+        );
+      });
+
+      Promise.allSettled(promises);
     },
     callExecuteEvents: async function (paramValue, apiBody, eventType: string) {
       let LastCallResponse = undefined;
@@ -326,40 +270,56 @@ export default (funcParams: funcParamsProps) => {
     },
     onBack: async function (functionParameters) {
       const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onBack", functionParameters)
+      this.callHandler("onBack", functionParameters)
       if (eventGroups?.["onBack"]?.[path] === undefined) {
         functionParameters?.handleBack()
       }
     },
     onNext: async function (functionParameters) {
       const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onNext", functionParameters)
+      this.callHandler("onNext", functionParameters)
       if (eventGroups?.["onNext"]?.[path] === undefined) {
         functionParameters?.handleNext()
       }
     },
     onReset: async function (functionParameters) {
       const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onReset", functionParameters)
+      this.callHandler("onReset", functionParameters)
       if (eventGroups?.["onReset"]?.[path] === undefined) {
         functionParameters?.handleReset()
       }
     },
-    callHandler: async function (eventType: string, functionParameters?: any) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[funcParams.dynamicData.path.split(".").length - 1];
-      if (eventGroups?.[eventType]?.[path] !== undefined) {
-        Promise.all(eventGroups?.[eventType]?.[path].map((eventConfig) => {
-          executeEventsParameters.store.functionParameters = functionParameters
+    callHandler: function (eventType: string, functionParameters?: any) {
+      const path =
+        funcParams.dynamicData?.tableButtonPath ||
+        funcParams.dynamicData.path.split(".").pop();
+
+      if (!eventGroups?.[eventType]?.[path]) return;
+
+      const promises = eventGroups[eventType][path].map(eventConfig => {
+        executeEventsParameters.store.functionParameters = functionParameters;
+
+        return Promise.resolve(
           executeEvents({
             ...executeEventsParameters,
             config: eventConfig,
-            componentName: path
+            componentName: path,
+            formDataHolder
           })
-        }))
-      }
+        ).then(() => {
+          if (!isEmpty(formDataHolder)) {
+            funcParams.store.setFormdata(pre => ({
+              ...pre,
+              ...formDataHolder
+            }));
+          }
+        });
+      });
+
+      Promise.allSettled(promises);
     },
     downloadFile: downloadFile,
-    download: doDownload,
+    downloadFileFromUrl: downloadFileFromUrl,
     ...funcParams.functionsProvider
   };
 };