impaktapps-ui-builder 0.0.382-alpha.34 → 0.0.382-alpha.340

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

@@ -41,7 +41,7 @@ const sectionLabels = {
 
 
 export const refreshPage = (type:string,store:any) => {
-  const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
+  const UiSchema = _.cloneDeep(componentBasicUiSchema)
   if(type){
   const sectionUiSchema = {
     Core: CoreSection,
@@ -54,8 +54,8 @@ export const refreshPage = (type:string,store:any) => {
   
   }
   const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-  UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event","Validation"];
-  UiSchema.elements[0].elements = elements || [CoreSection, StyleSection,EventSection,ValidationSection];
+  UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event","Validation"];
+  UiSchema.elements[1].elements = elements || [CoreSection, StyleSection,EventSection,ValidationSection];
  
 }
 store.setUiSchema(UiSchema);
@@ -104,20 +104,28 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         store.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`)
       }
     },
-    deleteComponents: function () {
+    deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = dynamicData.path.split(".")[1];
+      const rowId = localStorage.getItem('rowId');
       store.formData.elements.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store.ctx.core.data, path)
       const data = path ? _.get(response, path) : response;
       store.setFormdata(data);
+      if(shouldUpdateDialog){
+        store.updateDialog("popUpComponentSection");
+      }
+      localStorage.removeItem('rowId');
     },
-    deleteEvent: function () {
+    deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = dynamicData.path.split(".")[1];
+      const rowId = localStorage.getItem('rowId');
       store.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store.ctx.core.data, path)
       store.setFormdata(_.get(response, path));
+      if(shouldUpdateDialog){
+        store.updateDialog("popUpEventSection")
+      }
+      localStorage.removeItem('rowId');
     },
     widgetAddClickHandler: function () {
       if (!Array.isArray(store.formData.elements)) {
@@ -152,6 +160,16 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     backHandler: function () {
       store.navigate(-1)
     },
+    deletePopUpComponent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      localStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpComponentSection");
+    },
+    deletePopUpEvent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      localStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpEventSection");
+    },
   }
 };
 

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

@@ -22,26 +22,26 @@ export default (
       this.refreshPage(formdata.Handler, store)
     },
     refreshPage: (handlerType: any, store: any) => {
-      const uiSchema = _.cloneDeep(EventUiSchema(store.theme.myTheme));
+      const uiSchema = _.cloneDeep(EventUiSchema);
       const schema: any = _.cloneDeep(EventSchema)
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false)
+          uiSchema.elements[1].elements[0].elements[2] = getTextArea("eventCode", "Write Custom Code", false)
           schema.required = ["eventType", "Handler", "eventCode"]
 
         } else if (handlerType === "api") {
-          uiSchema.elements[0].elements[0].elements[3] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = APISection;
           schema.required = ["eventType", "Handler", "method", "path"]
         } else if (handlerType === "inBuiltFunction") {
-          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name", [
+          uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name", [
             { label: "RankProvider", value: "RankProvider" },
             { label: "Download File", value: "downloadFile" },
             { label: "Download Blob File", value: "downloadBlobFile" }
           ])
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, 12);
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, { xs: 12, sm: 12, md: 6 });
           schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
         } else if (handlerType === "refresh") {
-          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
           schema.properties.refreshElements.required = ["value"]
           schema.properties.refreshElements.items.required = ["value"]
           schema.required = ["eventType", "Handler", "refreshElements"]
@@ -52,8 +52,8 @@ export default (
     },
 
     getFormData: Component(store, dynamicData, submitHandler, service).getFormdata,
-    getUiSchema: async function () {
-      return await EventUiSchema(store.theme.myTheme);
+    getUiSchema: function () {
+      return EventUiSchema;
     },
     getSchema: () => {
       return EventSchema;
@@ -89,9 +89,17 @@ export default (
       this.setPage()
 
     },
-    deleteEvent: Component(store, dynamicData, submitHandler, service).deleteEvent,
+    deleteEvent: async function () {
+      await Component(store, dynamicData, submitHandler, service).deleteEvent(false);
+      store.updateDialog("popUpEvent");
+    },
     backHandler: function () {
       store.navigate(-1)
     },
+    deletePopUpEvent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      localStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpEvent");
+    }
   }
 };

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

@@ -34,7 +34,7 @@ export default (funcParams: funcParamsProps) => {
       return config
     },
     getUiSchema: function () {
-      return PageMasterUiSchema(store.theme.myTheme);
+      return PageMasterUiSchema;
     },
     getSchema: () => {
       return PageMasterSchema;
@@ -55,7 +55,11 @@ export default (funcParams: funcParamsProps) => {
     },
     saveHandler: async ()=> await saveHandler(store,service,submitHandler),
     Edit_Components: Component(store, dynamicData, submitHandler, service).editComponents,
-    Delete_Components: Component(store, dynamicData, submitHandler, service).deleteComponents,
+    
+    Delete_Components: async function() {
+      await Component(store, dynamicData, submitHandler, service).deleteComponents(false);
+      store.updateDialog("popUpPageMasterComponent");
+    },
     eventAddHandler: function () {
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
@@ -73,10 +77,22 @@ export default (funcParams: funcParamsProps) => {
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     deleteEvent: function () {
-      const rowId = dynamicData.path.split(".")[1];
+      const rowId = localStorage.getItem('rowId');
       store.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store.ctx.core.data)
       store.setFormdata(response);
+      store.updateDialog("popUpPageMasterEvent");
+      localStorage.removeItem('rowId');
+    },
+    deletePopUpComponent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      localStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      localStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpPageMasterEvent");
     },
   }
 };

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

@@ -1,4 +1,4 @@
-import _, { isEmpty } from "lodash";
+import _, { isEmpty, debounce } from "lodash";
 import { doDownload, downloadFile } from "./downloadFile";
 import { executeEvents, executeRefreshHandler } from "./events";
 import { handlersProps } from "./interface";
@@ -27,20 +27,38 @@ export const extractEvents = (eventConfig: any) => {
           eventGroups[event.eventType][eventConfigObj.name] = [];
         }
         const SuccessEvent = event?.events?.find((elem) => {
-          return elem.eventType === "Success"
-        })
+          return elem.eventType === "Success";
+        });
         if (!(!!SuccessEvent) && event.eventType === "onLoad") {
-          event.events.push({ Handler: "mergeFormdata", eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false })
+          event.events.push({
+            Handler: "mergeFormdata",
+            eventType: "Success",
+            type: compType,
+            lazyLoading: eventConfig.lazyLoading === "YES" ? true : false,
+          });
         }
-        if (!(!!SuccessEvent) && (event.eventType === "onBack" || event.eventType === "onNext" || event.eventType === "onReset")) {
-          event.events.push({ Handler: `${event.eventType}Handler`, eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false })
+        if (
+          !(!!SuccessEvent) &&
+          (event.eventType === "onBack" ||
+            event.eventType === "onNext" ||
+            event.eventType === "onReset")
+        ) {
+          event.events.push({
+            Handler: `${event.eventType}Handler`,
+            eventType: "Success",
+            type: compType,
+            lazyLoading: eventConfig.lazyLoading === "YES" ? true : false,
+          });
         }
-        eventGroups[event.eventType][eventConfigObj.name].push({ ...event, type: compType })
+        eventGroups[event.eventType][eventConfigObj.name].push({
+          ...event,
+          type: compType,
+        });
       });
     }
   }
 
-  extractsConfigEvents(eventConfig)
+  extractsConfigEvents(eventConfig);
   if (eventConfig?.elements) {
     eventConfig.elements.forEach(extractEvents);
   }
@@ -48,54 +66,80 @@ export const extractEvents = (eventConfig: any) => {
 };
 
 interface funcParamsProps {
-  store: any,
-  dynamicData: any,
-  config: any,
-  uiSchema: any,
-  schema: any,
-  service: any,
-  userValue: any,
+  store: any;
+  dynamicData: any;
+  config: any;
+  uiSchema: any;
+  schema: any;
+  service: any;
+  userValue: any;
 }
 export default (funcParams: funcParamsProps) => {
-  eventGroups = {}
-  eventGroups = extractEvents(funcParams.config)
+  eventGroups = {};
+  eventGroups = extractEvents(funcParams.config);
   let executeEventsParameters: handlersProps = {
-    config: {}, componentName: "",
-    store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: doDownload }, eventGroups
+    config: {},
+    componentName: "",
+    store: funcParams.store,
+    dynamicData: funcParams.dynamicData,
+    userValue: funcParams.userValue,
+    service: funcParams.service,
+    serviceHolder: { downloadFile, download: doDownload },
+    eventGroups,
   };
+
+
+  const debouncedExecuteEvents = debounce(async (eventConfig: any, componentName: string) => {
+    await executeEvents({
+      ...executeEventsParameters,
+      config: eventConfig,
+      componentName,
+    });
+  }, 3000); 
+
   return {
     setPage: async function () {
       funcParams.store.setFormdata({});
       executeEventsParameters = {
-        config: {}, componentName: "",
-        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups
-      }
-      funcParams.store.setSchema(
-        (pre: any) => {
-          return {
-            ...funcParams.schema, properties:
-              { ...funcParams.schema.properties, ...pre.properties, }
-          }
-        }
-      )
+        config: {},
+        componentName: "",
+        store: funcParams.store,
+        dynamicData: funcParams.dynamicData,
+        userValue: funcParams.userValue,
+        service: funcParams.service,
+        serviceHolder: this,
+        eventGroups,
+      };
+      funcParams.store.setSchema((pre: any) => {
+        return {
+          ...funcParams.schema,
+          properties: { ...funcParams.schema.properties, ...pre.properties },
+        };
+      });
       funcParams.uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(funcParams.uiSchema);
       await executeRefreshHandler({
-        config: {}, componentName: "",
-        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups
-      })
+        config: {},
+        componentName: "",
+        store: funcParams.store,
+        dynamicData: funcParams.dynamicData,
+        userValue: funcParams.userValue,
+        service: funcParams.service,
+        serviceHolder: this,
+        eventGroups,
+      });
     },
     onClick: async function () {
-      await this.callHandler("onClick")
+      // alert("Loading");
+      funcParams.dynamicData?.setLoading(true);
+      await this.callHandler("onClick");
+      funcParams.dynamicData?.setLoading(false);
     },
     onFileDownload: async function () {
-      await this.callHandler("onDownload")
+      await this.callHandler("onDownload");
     },
     onFileUpload: async function () {
-      await this.callHandler("onUpload")
+      await this.callHandler("onUpload");
     },
     onPaginationChange: async function (paginationValues) {
       const apiBody = [
@@ -103,8 +147,8 @@ export default (funcParams: funcParamsProps) => {
         { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.columnFilters || [] },
-        { key: "globalFilter", value: paginationValues.globalFilter ?? '' }
-      ]
+        { key: "globalFilter", value: paginationValues.globalFilter ?? "" },
+      ];
       const response = await this.updateConfigApiBody(paginationValues, apiBody);
       return response?.data;
     },
@@ -112,82 +156,90 @@ export default (funcParams: funcParamsProps) => {
       if (param.serachValue !== "" && param.serachValue !== undefined) {
         const apiBody = [
           { key: "searchValue", value: param.serachValue },
-          { key: "currentValue", value: param.currentValue }
-        ]
-        return await this.updateConfigApiBody(param, apiBody)
+          { key: "currentValue", value: param.currentValue },
+        ];
+        return await this.updateConfigApiBody(param, apiBody);
       }
     },
     onChange: async function () {
       if (eventGroups.onChange) {
+        funcParams.dynamicData?.setLoading(true);
         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
-              })
+        await 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 debouncedExecuteEvents(eventConfig, componentName);
+              }
             }
-          }
-        }))
+          })
+        );
+        funcParams.dynamicData?.setLoading(false);
       }
     },
     updateConfigApiBody: async function (paramValue, apiBody) {
       let LastCallResponse = undefined;
       for (const eventConfig of eventGroups?.onLoad[paramValue.path]) {
         if (eventConfig.body) {
-          eventConfig.body = [
-            ...eventConfig.body,
-            ...apiBody
-          ]
-        } else { eventConfig.body = apiBody; };
+          eventConfig.body = [...eventConfig.body, ...apiBody];
+        } else {
+          eventConfig.body = apiBody;
+        }
         const responseEvent = eventConfig?.events?.filter((elem) => {
-          return elem.Handler !== "mergeFormdata"
-        })
-        eventConfig.events = responseEvent ?? []
+          return elem.Handler !== "mergeFormdata";
+        });
+        eventConfig.events = responseEvent ?? [];
         LastCallResponse = await executeEvents({
           ...executeEventsParameters,
           config: eventConfig,
-          componentName: paramValue.path
-        })
+          componentName: paramValue.path,
+        });
       }
-      return LastCallResponse
+      return LastCallResponse;
     },
     onBack: async function (functionParameters) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onBack", functionParameters)
+      const path =
+        funcParams.dynamicData?.tableButtonPath ||
+        funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onBack", functionParameters);
       if (eventGroups?.["onBack"]?.[path] === undefined) {
-        functionParameters?.handleBack()
+        functionParameters?.handleBack();
       }
     },
     onNext: async function (functionParameters) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onNext", functionParameters)
+      const path =
+        funcParams.dynamicData?.tableButtonPath ||
+        funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onNext", functionParameters);
       if (eventGroups?.["onNext"]?.[path] === undefined) {
-        functionParameters?.handleNext()
+        functionParameters?.handleNext();
       }
     },
     onReset: async function (functionParameters) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onReset", functionParameters)
+      const path =
+        funcParams.dynamicData?.tableButtonPath ||
+        funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onReset", functionParameters);
       if (eventGroups?.["onReset"]?.[path] === undefined) {
-        functionParameters?.handleReset()
+        functionParameters?.handleReset();
       }
     },
     callHandler: async function (eventType: string, functionParameters?: any) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      const path =
+        funcParams.dynamicData?.tableButtonPath ||
+        funcParams.dynamicData.path.split(".")[0];
       if (eventGroups?.[eventType]?.[path] !== undefined) {
         for (const eventConfig of eventGroups?.[eventType]?.[path]) {
           executeEventsParameters.store.functionParameters = functionParameters
-          await executeEvents({
+          const res = await executeEvents({
             ...executeEventsParameters,
             config: eventConfig,
             componentName: path
           })
+          // console.log("valll", res);
         }
       }
     },
@@ -195,14 +247,3 @@ export default (funcParams: funcParamsProps) => {
     download: doDownload,
   };
 };
-
-
-
-
-
-
-
-
-
-
-