impaktapps-ui-builder 0.0.412-mtreemap.2 → 0.0.412-mtreemap.21

package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts

@@ -1,3 +1,5 @@
+import { getSelectField } from "../../../build/uischema/buildPropertiesSection";
+
 export const EventUiSchema: any = (theme) => {
   const uiSchema = {
     type: "HorizontalLayout",
@@ -106,33 +108,77 @@ export const EventUiSchema: any = (theme) => {
                   },
                 },
               },
+              getSelectField("Handler", "Handler", [
+                { label: "Custom", value: "custom" },
+                { label: "Api", value: "api" },
+                { label: "Inbuilt Function", value: "inBuiltFunction" },
+                { label: "Refresh", value: "refresh" },
+              ]),
               {
                 type: "Control",
-                scope: `#/properties/Handler`,
-
+                scope: "#/properties/EmptyBox",
                 options: {
-                  widget: "SelectInputField",
+                  widget: "EmptyBox",
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Handler",
-                    type: "text",
-                  },
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 },
                 },
               },
-              {
-                type: "Control",
-                scope: "#/properties/emptyBox",
-                options: {
-                  widget: "EmptyBox"
-                },
-                config: {
-                  layout: { xs: 0, sm: 4 }
-                }
-              }
             ],
           },
+          // {
+          //   type: "WrapperLayout",
+          //   config: {
+          //     main: {
+          //       // label: "Success Case Event",
+          //       // divider: true,
+          //     },
+          //     wrapperStyle: {
+          //       border: "1px solid gray"
+          //     },
+          //   },
+          //   elements: [
+          //     {
+          //       type: "Control",
+          //       scope: "#/properties/heading",
+
+          //       options: {
+          //         widget: "Box",
+          //       },
+          //       config: {
+          //         layout: 8,
+          //         main: {
+          //           heading: "Response Event",
+          //         },
+          //         style: {
+          //           fontFamily: "Roboto",
+          //           fontWeight: "500",
+          //           paddingLeft: "-10px",
+          //           fontSize: "20px",
+          //         },
+          //       },
+          //     },
+          //     {
+          //       type: "Control",
+          //       scope: "#/properties/AddButton",
+          //       options: {
+          //         widget: "IconButton",
+          //       },
+          //       config: {
+          //         layout: 3,
+          //         main: {
+          //           icon: "AddIcon",
+          //           styleDefault: true,
+          //           size: "small",
+          //           onClick: "addEvent",
+          //           tooltipMessage: "Back",
+          //         },
+          //         style: {
+          //           float: "right",
+          //         },
+          //       },
+          //     },
+
           {
             type: "Control",
             scope: "#/properties/events",
@@ -195,7 +241,7 @@ export const EventUiSchema: any = (theme) => {
                   },
                   config: {
                     main: {
-                      // color: "info",
+                      color: "info",
                       size: "small",
                       icon: "EditIcon",
                       tooltipMessage: "Edit This Record",
@@ -227,6 +273,7 @@ export const EventUiSchema: any = (theme) => {
                 },
               },
             ]
+            // }]
           }
         ],
       },
@@ -323,7 +370,7 @@ export const EventUiSchema: any = (theme) => {
         },
         elements: [
           {
-  
+
             type: "Control",
             scope: "#/properties/FooterText",
             options: {
@@ -378,7 +425,7 @@ export const EventUiSchema: any = (theme) => {
           {
             type: "Control",
             scope: "#/properties/text",
-  
+
             options: {
               widget: "Box",
             },
@@ -410,5 +457,5 @@ export const EventUiSchema: any = (theme) => {
       }
     ],
   };
-  return uiSchema
-}
+  return uiSchema;
+}

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

@@ -43,25 +43,25 @@ const sectionLabels = {
 
 
 
-export const refreshPage = (type:string,store:any) => {
+export const refreshPage = (type: string, store: any) => {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
-  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[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
+    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+
   }
-  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];
- 
-}
-store.setUiSchema(UiSchema);
+  store.setUiSchema(UiSchema);
 }
 
 export default (store: any, dynamicData: any, submitHandler: any, service: any) => {
@@ -107,20 +107,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 +163,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

@@ -28,12 +28,13 @@ export default (
       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[0].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
+          // uiSchema.elements[0].elements[0].elements[3] = emptyBox;
           uiSchema.elements[0].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false)
           schema.required = ["eventType", "Handler", "eventCode"]
 
         } else if (handlerType === "api") {
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox;
           uiSchema.elements[0].elements[0].elements[3] = APISection;
           schema.required = ["eventType", "Handler", "method", "path"]
         } else if (handlerType === "inBuiltFunction") {
@@ -42,9 +43,10 @@ export default (
             { 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[0].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
         } else if (handlerType === "refresh") {
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox;
           uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
           schema.properties.refreshElements.required = ["value"]
           schema.properties.refreshElements.items.required = ["value"]
@@ -62,8 +64,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;
@@ -99,9 +101,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

@@ -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/runtime/services/events.ts

@@ -3,7 +3,7 @@ import { handlersProps } from "./interface";
 export const executeEvents = (params: handlersProps) => {
   let nextEvent = [];
   let finalResponse = null;
-
+ 
   if (params.config.isSync !== "Yes") {
     return shouldEventExecute(params)
       .then((shouldExecute) => {
@@ -52,7 +52,7 @@ export const executeEvents = (params: handlersProps) => {
   }
   return finalResponse;
 }
-
+ 
 function executeEventsHandler(params: handlersProps) {
   if (params.config.Handler === "api") {
     return executeApiRequest(params);
@@ -79,14 +79,14 @@ function executeEventsHandler(params: handlersProps) {
     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)
@@ -98,37 +98,23 @@ export function getRefreshElements(eventConfig: any, eventGropus: any) {
 }
 export async function executeRefreshHandler(params: handlersProps) {
   const compToRefresh: string[] = getRefreshElements(params.config, params.eventGroups);
- 
-  // Create an array of promises for the components to refresh
   return Promise.allSettled(compToRefresh.map(componentName => {
     const eventConfigs = params.eventGroups.onLoad[componentName];
- 
-    // If eventConfigs is undefined, return a resolved promise
     if (!eventConfigs) {
-      return Promise.resolve(); // Resolve immediately if there are no events to load
+      return Promise.resolve();
     }
- 
-    // Create an array of promises for the defined eventConfigs
     return Promise.allSettled(eventConfigs.map(compEventConfig => {
       return executeEvents({ ...params, config: compEventConfig, componentName });
     }));
   }));
 }
-// 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) {
   const initialBody = { ...params.userValue?.payload };
   const initialHeaders = {
     "X-Requested-With": "XMLHttpRequest",
     "Access-Control-Allow-Origin": "*"
   };
-
+ 
   const payloadApi = buildApiPayload(params.config, initialBody, initialHeaders, params.store, params.dynamicData, params.userValue, params.service)
   return params.service[params.config.method](
     params.config.path,
@@ -138,7 +124,7 @@ export function executeApiRequest(params: any) {
     return response;
   });
 };
-
+ 
 function executeInBuiltFunctionHandler(params: handlersProps) {
   let parameter = {};
   if (params.config.funcParametersCode) {
@@ -149,7 +135,7 @@ function executeInBuiltFunctionHandler(params: handlersProps) {
     params.serviceHolder[params.config.inBuiltFunctionType](params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service)
   }
 }
-
+ 
 function executeCustomHandler(params: handlersProps) {
   const makeFunc = eval(params.config.eventCode)
   if (params.config.isSync !== "Yes") {
@@ -158,9 +144,9 @@ function executeCustomHandler(params: handlersProps) {
     const response = 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, formDataHolder: any) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
     store.setSchema((pre) => {
@@ -205,8 +191,8 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
     }
   }
 }
-
-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") {
@@ -215,6 +201,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);
@@ -231,7 +226,7 @@ const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
   })
   return finalBody;
 }
-
+ 
 const buildHeadersFormat = (headers: any[]) => {
   const headerObj = {
     // "Content-Type": "application/json",
@@ -242,10 +237,10 @@ const buildHeadersFormat = (headers: any[]) => {
   })
   return headerObj;
 }
-
+ 
 export function shouldEventExecute(params: handlersProps) {
   const startEvent = params.config?.events?.filter(e => e.eventType === "onStart");
-
+ 
   if (startEvent?.length > 0) {
     if (startEvent[0]?.isSync !== "Yes") {
       return executeEventsHandler({ ...params, config: startEvent[0] }).then((response) => {
@@ -262,14 +257,14 @@ export function shouldEventExecute(params: handlersProps) {
     }
   }
 }
-
-
+ 
+ 
 export function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service) {
   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) {
@@ -288,4 +283,4 @@ export function asyncOperation() {
       }
     }, 50);
   });
-}
+}

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

@@ -1,6 +1,6 @@
 import _, { isEmpty } from "lodash";
 import { doDownload, downloadFile } from "./downloadFile";
-import { asyncOperation, executeEvents, executeRefreshHandler } from "./events";
+import { executeEvents, executeRefreshHandler } from "./events";
 import { handlersProps } from "./interface";
 let compType: string;
 let eventGroups: any = {};
@@ -89,6 +89,116 @@ export default (funcParams: funcParamsProps) => {
       }
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
+      window.localStorage.setItem("pageName", config.label);
+      window.dispatchEvent(new Event('pageNameChanged'))
+      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: '82px',
+                  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: {
+                  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);
@@ -101,10 +211,8 @@ export default (funcParams: funcParamsProps) => {
       await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups,formDataHolder
+        serviceHolder: this, eventGroups, formDataHolder
       })
-     const jsonres =  await fetch('https://jsonplaceholder.typicode.com/todos/1');
-     const result = await jsonres.json()
       funcParams.store.setSchema(
         (pre: any) => {
           return {