impaktapps-ui-builder 0.0.412-mtreemap.9 → 0.0.591

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

@@ -5,79 +5,26 @@ export const EventUiSchema: any = (theme) => {
     type: "HorizontalLayout",
     heading: "Component",
     elements: [
-      // {
-      //   type: "WrapperLayout",
-      //   config: {
-      //     main: {
-      //       rowSpacing: 1,
-      //       header: true
-      //     },
-      //     defaultStyle: true
-      //   },
-      //   elements: [
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/Component",
-
-      //       options: {
-      //         widget: "Box",
-      //       },
-      //       config: {
-      //         layout: {xs:12,sm:12,md:2},
-      //         main: {
-      //           heading: "Component",
-      //         },
-      //         style:{
-      //           "float":"left",
-      //         }
-      //       },
-      //     },
-
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/pageName",
-
-      //       options: {
-      //         widget: "Box",
-      //       },
-      //       config: {
-      //         layout: {xs:7,sm:7,md:9},
-      //         main: {
-      //           heading: " ",
-      //         },
-      //         style: {
-      //           float: "right",
-      //           width:"auto",
-      //           fontSize:"12px",
-      //           color:"gray",
-      //           paddingTop:"10px"
-      //         },
-      //       },
-      //     },
-
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/Back_Button",
-
-      //       options: {
-      //         widget: "IconButton",
-      //       },
-      //       config: {
-      //         layout: {xs:2,sm:2,md:0.5},
-      //         main: {
-      //           icon: "BackIcon",
-      //           styleDefault: true,
-      //           size: "small",
-      //           onClick: "backHandler",
-      //           tooltipMessage: "Back",
-      //         },
-      //         style: {
-      //           float: "right",
-      //         },
-      //       },
-      //     },
-      //   ],
-      // },
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+       
+        options: {
+          widget: "Box",
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: " ",
+          },
+          style: {
+            marginLeft: theme.spacing(3),
+            width:"auto",
+            fontSize:"12px",
+            color:"gray",
+          },
+        },
+      },
       {
         type: "TabLayout",
         config: {
@@ -126,59 +73,6 @@ export const EventUiSchema: any = (theme) => {
               },
             ],
           },
-          // {
-          //   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",
@@ -248,7 +142,7 @@ export const EventUiSchema: any = (theme) => {
                       onClick: "editEvent",
                     },
                     style: {
-                      color: "#3949ab",
+                      color: theme.palette.primary.main,
                     },
                   },
                 },
@@ -267,7 +161,7 @@ export const EventUiSchema: any = (theme) => {
                       icon: "RejectIcon",
                       color: "error",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deleteEvent",
+                      onClick: "deletePopUpEvent",
                     },
                   },
                 },
@@ -343,6 +237,102 @@ export const EventUiSchema: any = (theme) => {
           },
         },
       },
+      {
+        type: "Control",
+        scope: "#/properties/popUpEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6,
+          },
+          main: {
+          },
+          style: {
+            "& .MuiPaper-root":{
+              width: '30%',
+            },
+            "& .MuiTypography-root":{
+              padding: 0
+            },
+            wrapperStyle: {
+              width: { xs: "100%", sm: "100%", md: "98%" },
+            }
+          }
+        },
+        elements:
+          [
+            {
+              type: "Control",
+              scope: "#/properties/label",
+              options: {
+                widget: "Box",
+              },
+              config: {
+                layout: 12,
+                main: {
+                  heading: "Are you sure you want to delete ?",
+                },
+                style: {
+                  marginTop: "-40px"
+                }
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/EmptyBox",
+              options: {
+                widget: "EmptyBox",
+              },
+              config: {
+                main: {},
+                layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/ConfirmDeleteEventButton",
+              options: {
+                widget: "Button",
+              },
+              config: {
+                layout: 3,
+                main: {
+                  name: "Yes",
+                  startIcon: "ApproveIcon",
+                  variant: "contained",
+                  color: "error",
+                  type: "text",
+                  onClick: "deleteEvent",
+                  size: "small",
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/CancelDeleteEventButton",
+              options: {
+                widget: "Button",
+              },
+              config: {
+                layout: 3,
+                main: {
+                  name: "No",
+                  startIcon: "ApproveIcon",
+                  variant: "contained",
+                  color: "info",
+                  type: "text",
+                  onClick: "deletePopUpEvent",
+                  size: "small",
+                },
+              },
+            },
+          ]
+      },
       {
         type: "Control",
         scope: "#/properties/notify",

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

@@ -50,15 +50,14 @@ export const refreshPage = (type: string, store: any) => {
       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[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(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

@@ -28,26 +28,26 @@ export default (
       const schema: any = _.cloneDeep(EventSchema)
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
+          uiSchema.elements[1].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)
+          uiSchema.elements[1].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;
+          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[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);
+          uiSchema.elements[1].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;
+          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"]
@@ -101,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/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

@@ -93,35 +93,20 @@ export function getRefreshElements(eventConfig: any, eventGropus: any) {
       result.push(result[0]);
     }
   }
-  console.log(result);
   return result;
 }
 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 = {
@@ -200,13 +185,13 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
   }
   else {
     if (handlerResponse) {
-      formDataHolder[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") {
@@ -215,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);
@@ -269,7 +263,7 @@ export function buildApiPayload(compConfig: any, body: any, headers: any, store:
     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 +282,4 @@ export function asyncOperation() {
       }
     }, 50);
   });
-}
+}