impaktapps-ui-builder 1.0.4 → 1.0.6

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;
@@ -19,7 +19,8 @@ interface funcParamsProps {
   service: any,
   userValue: any,
   pageDataProvider: any,
-  functionsProvider?: Record<string, any>
+  functionsProvider?: Record<string, any>,
+  initFormData?: any
 }
 let pageData: any = false;
 export const extractEvents = (eventConfig: any) => {
@@ -61,17 +62,17 @@ 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, download: downloadFileFromUrl, ...funcParams.functionsProvider }, eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
     setPage: async function () {
       funcParams.store.setAdditionalErrors([]);
-      funcParams.store.setFormdata({});
+      funcParams.store.setFormdata(funcParams?.initFormData() || {});
       funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
       eventGroups = {};
@@ -79,129 +80,19 @@ export default (funcParams: funcParamsProps) => {
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
-        detail: { pageName: config.label }
+        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 {
@@ -210,29 +101,66 @@ 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 {}
     },
     onClick: function () {
       this.callHandler("onClick")
     },
+    onKeyDown: function () {
+      this.callHandler("onKeyDown")
+    },
+    onFileDelete: async function () {
+      this.callHandler("onFileDelete")
+    },
+    onClose: function () {
+      this.callHandler("onClose")
+    },
     onMount: function () {
       this.callHandler("onMount")
     },
@@ -261,7 +189,8 @@ 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: "expandedRowIds", value: paginationValues.expandedRowIds ?? [] }
       ]
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
@@ -276,29 +205,43 @@ 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;
-      const eventsGroupClone = _.cloneDeep(eventGroups)
-      for (const eventConfig of eventsGroupClone?.[eventType]?.[paramValue.path]) {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      for (const eventConfig of cloneEventGroup?.[eventType]?.[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -319,40 +262,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(".")[0];
-      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
   };
 };