impaktapps-ui-builder 0.0.412 → 0.0.592-alpha.1

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

@@ -44,21 +44,20 @@ const sectionLabels = {
 
 
 export const refreshPage = (type: string, store: any) => {
-  const UiSchema = _.cloneDeep(componentBasicUiSchema)
+  const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection,
-      Components: TableSection,
+      Event: EventSection(store.theme.myTheme),
+      Components: TableSection(store.theme.myTheme),
       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];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store.theme.myTheme), ValidationSection];
 
   }
   store.setUiSchema(UiSchema);
@@ -107,20 +106,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)) {
@@ -155,6 +162,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

@@ -24,28 +24,56 @@ export default (
       this.refreshPage(formdata.Handler, store)
     },
     refreshPage: (handlerType: any, store: any) => {
-      const uiSchema = _.cloneDeep(EventUiSchema);
+      const uiSchema = _.cloneDeep(EventUiSchema(store.theme.myTheme));
       const schema: any = _.cloneDeep(EventSchema)
       if (handlerType) {
         if (handlerType === "custom") {
           uiSchema.elements[1].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
-          uiSchema.elements[1].elements[0].elements[3] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+          
+            config: {
+              layout: { xs: 0, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style:{}
+            },
+          };
           uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false)
           schema.required = ["eventType", "Handler", "eventCode"]
 
         } else if (handlerType === "api") {
-          uiSchema.elements[1].elements[0].elements[2] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = APISection;
           schema.required = ["eventType", "Handler", "method", "path"]
         } else if (handlerType === "inBuiltFunction") {
+          
           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[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, { xs: 12, sm: 12, md: 6 });
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+          
+            config: {
+              layout: { xs: 6, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style:{}
+            },
+          };
+          uiSchema.elements[1].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
         } else if (handlerType === "refresh") {
-          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
           schema.properties.refreshElements.required = ["value"]
           schema.properties.refreshElements.items.required = ["value"]
           schema.required = ["eventType", "Handler", "refreshElements"]
@@ -99,9 +127,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;
+      return PageMasterUiSchema(store.theme.myTheme);
     },
     getSchema: () => {
       return PageMasterSchema;
@@ -62,7 +62,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)) {
@@ -80,10 +84,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/builder/services/utils.ts

@@ -91,7 +91,6 @@ export const navigateHandler = (store, isSubmitted, pageName?: string | boolean)
 
 export function okHandler(store) {
     const path = store.searchParams?.get("path");
-    console.log(store.ctx.core.errors)
     if (_.isEmpty(store.ctx.core.errors)) {
         saveFormdataInLocalStorage(store.ctx.core.data, path)
         store.navigate(-1)

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

@@ -51,7 +51,7 @@ export const executeEvents = (params: handlersProps) => {
     }
   }
   return finalResponse;
-} 
+}
 
 function executeEventsHandler(params: handlersProps) {
   if (params.config.Handler === "api") {
@@ -68,7 +68,8 @@ function executeEventsHandler(params: handlersProps) {
       params.componentName,
       params.config,
       params.store,
-      params.service
+      params.service,
+      params.formDataHolder
     );
   } else if (params.config.Handler === "onBackHandler") {
     return params.store.functionParameters?.handleBack();
@@ -92,18 +93,20 @@ export function getRefreshElements(eventConfig: any, eventGropus: any) {
       result.push(result[0]);
     }
   }
-  console.log(result);
   return result;
 }
-export function executeRefreshHandler(params: handlersProps) {
+export async 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 Promise.allSettled(compToRefresh.map(componentName => {
+    const eventConfigs = params.eventGroups.onLoad[componentName];
+    if (!eventConfigs) {
+      return Promise.resolve();
+    }
+    return Promise.allSettled(eventConfigs.map(compEventConfig => {
       return executeEvents({ ...params, config: compEventConfig, componentName });
     }));
-  }))
-};
+  }));
+}
 export function executeApiRequest(params: any) {
   const initialBody = { ...params.userValue?.payload };
   const initialHeaders = {
@@ -143,7 +146,7 @@ function executeCustomHandler(params: handlersProps) {
 
 }
 
-function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any) {
+function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any, formDataHolder: any) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
     store.setSchema((pre) => {
       return {
@@ -173,17 +176,22 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
   }
   else if (eventConfig.type === "page") {
     if (!(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
+      store.newData = {
+        ...store.newData,
+        ...handlerResponse?.data
+      }
       store.setFormdata((pre: any) => { return { ...pre, ...handlerResponse?.data } })
     }
   }
   else {
     if (handlerResponse) {
-      store.setFormdata((pre) => { return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse?.data?.data : handlerResponse.data } });
+      formDataHolder[componentName] = handlerResponse.data
+      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
     }
   }
 }
 
-const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
+const buildBodyFormat = (body: any[], formData: any, userValue: any, store: any) => {
   let finalBody = { ...userValue?.payload };
   body.map((elem) => {
     if (typeof elem?.value !== "string") {
@@ -192,6 +200,15 @@ const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
       if (elem?.value?.startsWith("$userValue")) {
         const finalpath = elem.value.substring(11);
         finalBody[elem.key] = _.get(userValue, finalpath);;
+      } else if (elem?.value?.startsWith("$urlParams")) {
+        const finalpath = elem.value.substring(11);
+        const value = store?.searchParams?.get(finalpath);
+        finalBody[elem.key] = value;
+      }
+      else if (elem?.value?.startsWith("$local")) {
+        const finalpath = elem.value.substring(7);
+        const value = JSON.parse(localStorage.getItem(finalpath) || '""')
+        finalBody[elem.key] = value;
       }
       else if (elem?.value?.startsWith("$")) {
         const finalpath = elem.value.substring(1);
@@ -245,14 +262,10 @@ export function buildApiPayload(compConfig: any, body: any, headers: any, store:
   if (compConfig?.headers) {
     headers = buildHeadersFormat(compConfig.headers);
   }
-
   if (compConfig.body) {
-    body = { ...buildBodyFormat(compConfig.body, store.newData || store?.ctx?.core?.data || store.formData, userValue) };
+    body = { ...buildBodyFormat(compConfig.body, store.newData || store?.ctx?.core?.data || store.formData, userValue, store) };
   }
-
   const promiseChain = { body, headers };
-
-
   if (compConfig.apiBody) {
     const makeFunc = eval(compConfig.apiBody);
     return { body: makeFunc(store, dynamicData, userValue, promiseChain.body), headers: promiseChain.headers };
@@ -269,4 +282,4 @@ export function asyncOperation() {
       }
     }, 50);
   });
-}
+}

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

@@ -9,4 +9,5 @@ export interface handlersProps {
     eventGroups?: any, 
     parentEventOutput?: any,
     functionsProvider?:Record<string,any>
+    formDataHolder?:Record<string,any>
 }

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

@@ -12,7 +12,7 @@ const notifyUiSchema = {
   },
   layout: 6,
 };
-
+let formDataHolder = {}
 interface funcParamsProps {
   store: any,
   dynamicData: any,
@@ -54,7 +54,6 @@ export const extractEvents = (eventConfig: any) => {
       });
     }
   }
-
   extractsConfigEvents(eventConfig)
   if (eventConfig?.elements) {
     eventConfig.elements.forEach(extractEvents);
@@ -72,12 +71,12 @@ export default (funcParams: funcParamsProps) => {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
     serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider }, eventGroups,
-    functionsProvider: funcParams.functionsProvider,
+    functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
     setPage: async function () {
-      funcParams.store.setFormdata({})
-
+      funcParams.store.setFormdata({});
+      funcParams.store.newData = {};
       const pageBasicDetailString = localStorage.getItem("pagemasterMetaData")
       if (pageBasicDetailString) {
         pageData = JSON.parse(pageBasicDetailString)
@@ -90,6 +89,119 @@ export default (funcParams: funcParamsProps) => {
       }
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
+      const event = new CustomEvent('pageNameChanged', {
+        detail: { pageName: config.label }
+      });
+      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,
+              marginBottom: '-8px',
+              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: '12px',
+                  textAlign: 'center',
+                  lineHeight: 1,
+                  width: 'fit-content',
+                  left: '50%',
+                  position: 'relative',
+                  margin: 0,
+                  flexGrow: 1,
+                  height: 0
+                }
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/backIcon",
+              options: {
+                widget: "Box",
+              },
+              config: {
+                main: {
+                  iconName: 'PrevIcon',
+                  onClick: "backHandler",
+                  width: 'fit-content',
+                },
+                style: {
+                  fill: theme.palette.primary.main,
+                  width: 20,
+                  height: 0,
+                  margin: 0,
+                  top: 0,
+                  right: {xs: '12px', sm: '84px'},
+                  position: 'absolute',
+                  fontSize: '12px',
+                  cursor: 'pointer',
+                  ':hover': {
+                    fill: theme.palette.primary.dark,
+                  }
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/text",
+    
+              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',
+                  marginRight: 0,
+                  top: 3,
+                  right: '12px',
+                  position: 'absolute',
+                  ':hover': {
+                    color: theme.palette.primary.dark,
+                  }
+                }
+              },
+            },
+          ]
+        }
+      );
       const schema = pageData?.schema ?? { type: "object", properties: {} };
       eventGroups = {}
       eventGroups = extractEvents(config);
@@ -97,12 +209,12 @@ export default (funcParams: funcParamsProps) => {
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
-        serviceHolder: this, eventGroups
+        serviceHolder: this, eventGroups, formDataHolder
       }
       await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups
+        serviceHolder: this, eventGroups, formDataHolder
       })
       funcParams.store.setSchema(
         (pre: any) => {
@@ -114,7 +226,6 @@ export default (funcParams: funcParamsProps) => {
       )
       uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(uiSchema);
-
     },
     onCellRenderer: (cellParams) => {
       if (eventGroups.onCellRenderer) {
@@ -147,6 +258,16 @@ export default (funcParams: funcParamsProps) => {
     backHandler: function () {
       funcParams.store.navigate(-1)
     },
+    onRowMovement: async function (paginationValues) {
+      const apiBody = [
+        { key: "direction", value: paginationValues.rowMovement.direction },
+        { key: "movedRowId", value: paginationValues.rowMovement.movedRowId },
+        { key: "targetRowId", value: paginationValues.rowMovement.targetRowId || [] }
+      ]
+      await this.callExecuteEvents({ path: paginationValues?.path }, apiBody, "onRowMovement");
+      const response = await this.callExecuteEvents({ path: paginationValues?.path }, apiBody, "onLoad");
+      return response?.data;
+    },
     onPaginationChange: async function (paginationValues) {
       const apiBody = [
         { key: "size", value: paginationValues.pagination.pageSize },
@@ -155,7 +276,7 @@ export default (funcParams: funcParamsProps) => {
         { key: "filters", value: paginationValues.columnFilters || [] },
         { key: "globalFilter", value: paginationValues.globalFilter ?? '' }
       ]
-      const response = await this.updateConfigApiBody(paginationValues, apiBody);
+      const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
     },
     getSelectOptions: async function (param) {
@@ -164,7 +285,7 @@ export default (funcParams: funcParamsProps) => {
           { key: "searchValue", value: param.serachValue },
           { key: "currentValue", value: param.currentValue }
         ]
-        const response = await this.updateConfigApiBody(param, apiBody);
+        const response = await this.callExecuteEvents(param, apiBody);
         return response?.data;
       }
     },
@@ -187,9 +308,9 @@ export default (funcParams: funcParamsProps) => {
         }))
       }
     },
-    updateConfigApiBody: async function (paramValue, apiBody) {
+    callExecuteEvents: async function (paramValue, apiBody, eventType: string) {
       let LastCallResponse = undefined;
-      for (const eventConfig of eventGroups?.onLoad[paramValue.path]) {
+      for (const eventConfig of eventGroups?.[eventType]?.[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -232,17 +353,16 @@ export default (funcParams: funcParamsProps) => {
     callHandler: async function (eventType: string, functionParameters?: any) {
       const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
       if (eventGroups?.[eventType]?.[path] !== undefined) {
-        for (const eventConfig of eventGroups?.[eventType]?.[path]) {
+        Promise.all(eventGroups?.[eventType]?.[path].map((eventConfig) => {
           executeEventsParameters.store.functionParameters = functionParameters
           executeEvents({
             ...executeEventsParameters,
             config: eventConfig,
             componentName: path
           })
-        }
+        }))
       }
     },
-
     downloadFile: downloadFile,
     download: doDownload,
     ...funcParams.functionsProvider