impaktapps-ui-builder 0.0.21 → 0.0.22

package/dist/impaktapps-ui-builder.es.js

@@ -147,142 +147,292 @@ const PageMasterUiSchema = {
       ]
     },
     {
-      type: "WrapperLayout",
+      type: "TabLayout",
       config: {
         main: {
-          label: "Page Components",
+          tabLabels: ["Components", "events"],
           divider: true
         },
         defaultStyle: true
       },
       elements: [
         {
-          type: "Control",
-          scope: "#/properties/elements",
-          options: {
-            widget: "Table"
-          },
+          type: "WrapperLayout",
           config: {
             main: {
-              disableAction: true,
-              disableSelection: true,
-              enableDrag: true
+              divider: true
+            },
+            wrapperStyle: {
+              border: "1px solid gray"
             }
           },
           elements: [
             {
-              accessorKey: "name",
-              header: "Name"
-            },
-            {
-              accessorKey: "type",
-              header: "Type"
+              type: "Control",
+              scope: "#/properties/heading",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                layout: 8,
+                main: {
+                  heading: "Components Table"
+                },
+                style: {
+                  fontFamily: "Roboto",
+                  fontWeight: "500",
+                  paddingLeft: "-10px",
+                  fontSize: "20px"
+                }
+              }
             },
             {
-              header: "Edit",
-              field: "Reject_Records",
-              flex: 1,
-              widget: {
-                type: "Control",
-                scope: "#/properties/RejectButton",
-                options: {
-                  widget: "IconButton"
+              type: "Control",
+              scope: "#/properties/AddButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                layout: 3,
+                main: {
+                  icon: "AddIcon",
+                  styleDefault: true,
+                  size: "small",
+                  onClick: "onAddClickHandler",
+                  tooltipMessage: "Back"
                 },
-                config: {
-                  main: {
-                    icon: "EditIcon",
-                    color: "primary",
-                    onClick: "Edit_Components",
-                    tooltipMessage: "Reject This Record"
-                  }
+                style: {
+                  float: "right"
                 }
               }
             },
             {
-              header: "Delete",
-              field: "Reject_Records",
-              flex: 1,
-              widget: {
-                type: "Control",
-                scope: "#/properties/RejectButton",
-                options: {
-                  widget: "IconButton"
+              type: "Control",
+              scope: "#/properties/elements",
+              options: {
+                widget: "Table"
+              },
+              config: {
+                main: {
+                  disableAction: true,
+                  disableSelection: true,
+                  enableDrag: true
+                }
+              },
+              elements: [
+                {
+                  accessorKey: "name",
+                  header: "Name"
                 },
-                config: {
-                  main: {
-                    icon: "RejectIcon",
-                    color: "error",
-                    onClick: "Delete_Components",
-                    tooltipMessage: "Reject This Record"
+                {
+                  accessorKey: "type",
+                  header: "Type"
+                },
+                {
+                  header: "Edit",
+                  field: "Reject_Records",
+                  flex: 1,
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "EditIcon",
+                        color: "primary",
+                        onClick: "Edit_Components",
+                        tooltipMessage: "Reject This Record"
+                      }
+                    }
+                  }
+                },
+                {
+                  header: "Delete",
+                  field: "Reject_Records",
+                  flex: 1,
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "RejectIcon",
+                        color: "error",
+                        onClick: "Delete_Components",
+                        tooltipMessage: "Reject This Record"
+                      }
+                    }
                   }
                 }
-              }
+              ]
             }
           ]
         },
         {
-          type: "Control",
-          scope: "#/properties/btn",
-          options: {
-            widget: "EmptyBox"
-          },
-          config: {
-            layout: { xs: 0, sm: 0, md: 8, lg: 7 }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/btn",
-          options: {
-            widget: "Button"
-          },
+          type: "WrapperLayout",
           config: {
-            layout: { xs: 12, sm: 12, md: 3, lg: 2.5 },
             main: {
-              name: "Submit Page",
-              startIcon: "ApproveIcon",
-              variant: "contained",
-              color: "info",
-              type: "text",
-              onClick: "submitPageHandler",
-              size: "small"
+              divider: true
             },
-            style: {
-              marginBottom: "8px"
+            wrapperStyle: {
+              border: "1px solid gray"
             }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/btn",
-          options: {
-            widget: "Button"
           },
-          config: {
-            layout: { xs: 12, sm: 12, md: 2, lg: 1.5 },
-            main: {
-              name: "Add",
-              startIcon: "ApproveIcon",
-              variant: "contained",
-              color: "info",
-              type: "text",
-              onClick: "onAddClickHandler",
-              size: "small"
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/heading",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                layout: 8,
+                main: {
+                  heading: "Event Table"
+                },
+                style: {
+                  fontFamily: "Roboto",
+                  fontWeight: "500",
+                  paddingLeft: "-10px",
+                  fontSize: "20px"
+                }
+              }
             },
-            style: {
-              marginBottom: "8px"
+            {
+              type: "Control",
+              scope: "#/properties/AddButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                layout: 3,
+                main: {
+                  icon: "AddIcon",
+                  styleDefault: true,
+                  size: "small",
+                  onClick: "eventAddHandler",
+                  tooltipMessage: "Back"
+                },
+                style: {
+                  float: "right"
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/events",
+              options: {
+                widget: "Table"
+              },
+              config: {
+                main: {
+                  disableAction: true,
+                  disableSelection: true,
+                  enableDrag: true
+                }
+              },
+              elements: [
+                {
+                  accessorKey: "eventType",
+                  header: "Event Type"
+                },
+                {
+                  accessorKey: "Handler",
+                  header: "Handler"
+                },
+                {
+                  accessorKey: "Edit_Approve_Records",
+                  header: "Edit Widget",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Edit_Records",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        color: "info",
+                        size: "small",
+                        icon: "EditIcon",
+                        tooltipMessage: "Edit This Record",
+                        onClick: "editEvent"
+                      },
+                      style: {
+                        color: "#3949ab"
+                      }
+                    }
+                  }
+                },
+                {
+                  accessorKey: "Reject_Records",
+                  header: "Delete",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "RejectIcon",
+                        color: "error",
+                        tooltipMessage: "Reject This Record",
+                        onClick: "deleteEvent"
+                      }
+                    }
+                  }
+                }
+              ]
             }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/notify",
-          options: {
-            widget: "Notify"
-          },
-          layout: 6
+          ]
         }
       ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout: { xs: 0, sm: 0, md: 8, lg: 7 }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: 11.7,
+        main: {
+          name: "Submit Page",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "submitPageHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          width: { xs: "100%", sm: "100%", md: "25%", lg: "20%" },
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/notify",
+      options: {
+        widget: "Notify"
+      },
+      layout: 6
     }
   ]
 };
@@ -7030,7 +7180,31 @@ var pageMaster = (funcParams) => {
       });
     },
     Edit_Components: Component(store2, dynamicData2).editComponents,
-    Delete_Components: Component(store2, dynamicData2).deleteComponents
+    Delete_Components: Component(store2, dynamicData2).deleteComponents,
+    eventAddHandler: async function() {
+      var _a;
+      const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
+      if (!Array.isArray(store2.formData.events)) {
+        store2.formData.events = [];
+      }
+      saveFormdataInLocalStorage(store2.formData);
+      const finalPath = `events[${store2.formData.events.length}]`;
+      store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
+    },
+    editEvent: async function() {
+      var _a;
+      const rowId = dynamicData2.path.split(".")[1];
+      const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
+      saveFormdataInLocalStorage(store2.formData);
+      const finalPath = `events[${rowId}]`;
+      store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
+    },
+    deleteEvent: async function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      store2.formData.events.splice(rowId, 1);
+      const response = saveFormdataInLocalStorage(store2.formData);
+      store2.setFormdata(response);
+    }
   };
 };
 const EventSchema = {
@@ -7771,6 +7945,10 @@ async function mergeFormdata(handlerResponse, componentName2, eventConfig, store
     handlerResponse && store2.setFormdata((pre) => {
       return { ...pre, [componentName2]: { rows: handlerResponse.data } };
     });
+  } else if (eventConfig.type === "page") {
+    store2.setFormdata((pre) => {
+      return { ...pre, ...handlerResponse.data };
+    });
   } else {
     handlerResponse && store2.setFormdata((pre) => {
       return { ...pre, [componentName2]: handlerResponse.data };
@@ -7863,6 +8041,7 @@ const extractEvents = (eventConfig) => {
 var service = (funcParams) => {
   return {
     setPage: async function() {
+      eventGroups = {};
       eventGroups = extractEvents(funcParams.config);
       await executeEvents(
         { Handler: "refresh", eventType: "onPageRefresh" },