impaktapps-ui-builder 0.0.382460 → 1.0.1-alpha.1

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

@@ -38,18 +38,18 @@ export const EventSchema = {
     eventType: {
       type: "string",
       oneOf: [
-        { title: "Click Event", const: "onClick" },
-        { title: "Load Event", const: "onLoad" },
-        { title: "Change Event", const: "onChange" },
-        { title: "Mount Event", const: "onMount" },
+        { title: "Click", const: "onClick" },
+        { title: "Load", const: "onLoad" },
+        { title: "Change", const: "onChange" },
+        { title: "Mount", const: "onMount" },
         { title: "Success", const: "Success" },
-        { title: "onStart", const: "onStart" },
-        { title: "Cell Renderer", const: "onCellRenderer" },
-        { title: "File Upload Event", const: "onUpload" },
-        { title: "Back Event", const: "onBack" },
-        { title: "Next Event", const: "onNext" },
-        { title: "onRowMovement", const: "onRowMovement" },
-        { title: "File Download Event", const: "onDownload" },
+        { title: "Start", const: "onStart" },
+        { title: "Cell Render", const: "onCellRenderer" },
+        { title: "Upload", const: "onUpload" },
+        { title: "Back", const: "onBack" },
+        { title: "Next", const: "onNext" },
+        { title: "Row Movement", const: "onRowMovement" },
+        { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -57,7 +57,7 @@ export const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Custom", const: "custom" },
-        { title: "Api", const: "api" },
+        { title: "API", const: "api" },
         { title: "Inbuilt Function", const: "inBuiltFunction" },
         { title: "Refresh", const: "refresh" },
       ]
@@ -87,6 +87,9 @@ export const EventSchema = {
     RemoveItemButton:{
       disabled: true,
     },
+    pageName: {
+      path: [{label: "defaultLabel", path: "defaultPath"}]
+    },
   },
 required:["eventType","Handler"]
 }

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

@@ -3,41 +3,39 @@ import { getSelectField } from "../../../build/uischema/buildPropertiesSection";
 export const EventUiSchema: any = (theme) => {
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Component",
+    heading: "Page-Events",
     elements: [
       {
-        type: "Control",
-        scope: "#/properties/pageName",
-       
-        options: {
-          widget: "Box",
-        },
+        type: "TabLayout",
         config: {
-          layout: 12,
           main: {
-            heading: " ",
+            tabLabels: ["Core", "Response Events"],
+            id: "event"
           },
           style: {
-            marginLeft: theme.spacing(3),
-            width:"auto",
-            fontSize:"12px",
-            color:"gray",
+            TabPanelStyle: {
+              padding: 0,
+            }
           },
-        },
-      },
-      {
-        type: "TabLayout",
-        config: {
-          main: {
-            tabLabels: ["Core", "Response Event"],
-            defaultStyle: true,
-            id: "event"
+          TabsStyle: {
+            marginBottom: "3px",
+            paddingBottom: "4px",
+            boxShadow: "0px 3px 4px #afafaf80",
+            "& .MuiTabs-indicator": {
+              bottom: "6px",
+            }
           },
         },
 
         elements: [
           {
-            type: "HorizontalLayout",
+            type: "WrapperLayout",
+            config: {
+              main: {
+                label: " ",
+                gap: "8px"
+              },
+            },
             elements: [
               {
                 type: "Control",
@@ -47,9 +45,9 @@ export const EventUiSchema: any = (theme) => {
                   widget: "SelectInputField",
                 },
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 3 },
                   main: {
-                    label: "Event Type",
+                    label: "Event's Type",
                     type: "text",
 
                   },
@@ -57,7 +55,7 @@ export const EventUiSchema: any = (theme) => {
               },
               getSelectField("Handler", "Handler", [
                 { label: "Custom", value: "custom" },
-                { label: "Api", value: "api" },
+                { label: "API", value: "api" },
                 { label: "Inbuilt Function", value: "inBuiltFunction" },
                 { label: "Refresh", value: "refresh" },
               ]),
@@ -68,7 +66,7 @@ export const EventUiSchema: any = (theme) => {
                   widget: "EmptyBox",
                 },
                 config: {
-                  layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 0, sm: 0, md: 4, lg: 6 },
                 },
               },
             ],
@@ -93,15 +91,20 @@ export const EventUiSchema: any = (theme) => {
                         },
                         config: {
                           main: {
-                            // color: "info",
                             onClick: "addEvent",
                             size: "small",
-                            icon: "AddIcon",
-                            iconLabel: "Add New",
+                            icon: "TableAddIcon",
+                            iconLabel: "Add",
                             styleDefault: true,
                           },
                           style: {
                             mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
                           },
                         },
                       }
@@ -117,15 +120,20 @@ export const EventUiSchema: any = (theme) => {
                         },
                         config: {
                           main: {
-                            // color: "info",
                             onClick: "copyPasteElement",
                             size: "small",
-                            icon: "PasteIcon",
+                            icon: "TablePaste",
                             iconLabel: "Paste",
                             styleDefault: true,
                           },
                           style: {
                             mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
                           },
                         },
                       }
@@ -142,15 +150,21 @@ export const EventUiSchema: any = (theme) => {
 
               {
                 accessorKey: "eventType",
-                header: "Event Type",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
               },
               {
                 accessorKey: "Handler",
                 header: "Handler",
+                size: 200,
+                type: "string"
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
@@ -159,14 +173,16 @@ export const EventUiSchema: any = (theme) => {
                   },
                   config: {
                     main: {
-                      color: "info",
                       size: "small",
-                      icon: "EditIcon",
+                      icon: "TableEditIcon",
                       tooltipMessage: "Edit This Record",
                       onClick: "editEvent",
                     },
                     style: {
-                      color: theme.palette.primary.main,
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
                     },
                   },
                 },
@@ -174,6 +190,8 @@ export const EventUiSchema: any = (theme) => {
               {
                 accessorKey: "Reject_Records",
                 header: "Delete",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/RejectButton",
@@ -182,11 +200,16 @@ export const EventUiSchema: any = (theme) => {
                   },
                   config: {
                     main: {
-                      icon: "RejectIcon",
-                      color: "error",
+                      icon: "Bin",
                       tooltipMessage: "Reject This Record",
                       onClick: "deletePopUpEvent",
                     },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
+                    },
                   },
                 },
               },
@@ -194,7 +217,8 @@ export const EventUiSchema: any = (theme) => {
               {
                 header: "Copy",
                 field: "Copy_Event",
-                flex: 1,
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
@@ -204,7 +228,6 @@ export const EventUiSchema: any = (theme) => {
                   config: {
                     main: {
                       icon: "FileCopyIcon",
-                      // color: "error",
                       onClick: "copyPasteElement",
                       styleDefault: true,
                     },
@@ -212,112 +235,64 @@ export const EventUiSchema: any = (theme) => {
                 },
               },
             ]
-            // }]
           }
         ],
       },
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout:{xs:12,sm: 6}
-        },
-        elements: [
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          gap: "8px"
+        }
+      },
+      elements: [
           {
             type: "Control",
-            scope: "#/properties/RemoveItemButton",
+            scope: "#/properties/btn",
             options: {
-              widget: "IconButton",
+              widget: "Button",
             },
+
             config: {
-              layout: { xs: 1, sm: 1 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                onClick: "RemoveItemButton",
-                size: "large",
-                icon: "RejectIcon",
-                styleDefault: true,
+                name: "Ok",
+                variant: "contained",
+                type: "text",
+                onClick: "okHandler",
+                size: "medium",
               },
-              style:{
-                marginLeft: "-10px"
-              }
             },
           },
           {
             type: "Control",
-            scope: "#/properties/copiedElementDetails",
-      
+            scope: "#/properties/btnSubmit",
             options: {
-              widget: "Box",
+              widget: "Button",
             },
+
             config: {
-              layout: { xs: 6, sm: 6 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                heading: "No element copied",
-              },
-              style: {
-                color: "#535557",
-                marginLeft: "-10px",
-                fontSize: "12px",
-                marginTop: "4px"
+                name: "Save & Exit",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium",
               },
             },
           },
           {
             type: "Control",
             scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 4, sm:7, md: 8, lg: 9 },
+            },
             options: {
               widget: "EmptyBox",
             },
-            config: {
-              layout: { xs: 1, sm: 5 },
-            },
-          },
-        ]
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button",
-        },
-
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Ok",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            // color: "info",
-            type: "text",
-            onClick: "okHandler",
-            size: "medium",
-          },
-          style: {
-            float: "right",
-          },
-        },
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btnSubmit",
-        options: {
-          widget: "Button",
-        },
-
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Save & Exit",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            // color: "info",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium",
           },
-          style: {
-            float: "right",
-          },
-        },
+        ],
       },
       {
         type: "Control",
@@ -347,17 +322,19 @@ export const EventUiSchema: any = (theme) => {
                 widget: "Box",
               },
               config: {
-                layout: 12,
+                layout: 11,
                 main: {
-                  heading: "Are you sure you want to delete ?",
+                  heading: "Are you sure you want to delete this Event ?",
                 },
                 style:{
-                  marginTop: "-20px",
                   fontSize: "20px",
                   "&.MuiTypography-root": {
-                    padding: "10px 30px 20px 30px",
+                    padding: "0px 20px",
                     textAlign: "center",
-                    lineHeight: "1"
+                    lineHeight: "1.2",
+                    fontWeight: "normal",
+                    fontSize: "18px",
+                    marginBottom: theme.spacing(5)
                   }
                 }
               },
@@ -365,7 +342,7 @@ export const EventUiSchema: any = (theme) => {
             {
               type: "WrapperLayout",
               config: {
-                layout: 12,
+                layout: 11,
                 main: {},
 
               },
@@ -382,13 +359,14 @@ export const EventUiSchema: any = (theme) => {
                       name: "No",
                       startIcon: "ApproveIcon",
                       variant: "contained",
-                      color: "info",
                       type: "text",
                       onClick: "deletePopUpEvent",
                       size: "large",
                     },
                     style: {
                       position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
                       bottom: 0,
                       left: 0,
                       width: "50%",
@@ -416,7 +394,6 @@ export const EventUiSchema: any = (theme) => {
                     layout: 6,
                     main: {
                       name: "Yes",
-                      startIcon: "ApproveIcon",
                       variant: "contained",
                       color: "error",
                       type: "text",
@@ -425,6 +402,8 @@ export const EventUiSchema: any = (theme) => {
                     },
                     style: {
                       position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
                       bottom: 0,
                       right: 0,
                       width: "50%",
@@ -445,6 +424,31 @@ export const EventUiSchema: any = (theme) => {
             },
           ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+       
+        options: {
+          widget: "Breadcrumb",
+        },
+        config: {
+          layout: 12,
+          main: {
+          onNavigatePopupNo: "onNavigatePopupNo",
+          onNavigatePopupYes: "onNavigatePopupYes"
+          },
+          style: {
+            paddingLeft: theme.spacing(3),
+            color:theme.palette.grey[600],
+            fontSize:"10px",
+            position: "fixed",
+            bottom: "24px",
+            borderBottom: `1px solid ${theme.palette.common.black}29`,
+            borderTop: `1px solid ${theme.palette.common.black}29`,
+            backgroundColor: theme.palette.background.default,
+          },
+        },
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -457,22 +461,20 @@ export const EventUiSchema: any = (theme) => {
         type: "HorizontalLayout",
         config: {
           main: {
-            direction: 'row'
+            direction: "row",
           },
           style: {
             flexDirection: "row",
             position: "absolute",
-            bottom: 0,
-            marginBottom: '-8px',
-            height: 'fit-content',
-            overflow: 'hidden',
+            bottom: 10,
+            height: "fit-content",
+            overflow: "hidden",
             zIndex: 1000,
-            width: 'inherit'
-          }
+            width: "inherit",
+          },
         },
         elements: [
           {
-  
             type: "Control",
             scope: "#/properties/FooterText",
             options: {
@@ -480,84 +482,24 @@ export const EventUiSchema: any = (theme) => {
             },
             config: {
               main: {
-                heading: "Copywriter@ACT21.IO"
+                heading: "Copywriter@ACT21.IO",
               },
               style: {
                 color: theme?.palette?.text.disabled || "#AFAFAF",
-                fontSize: '12px',
-                textAlign: 'center',
-                lineHeight: 2,
-                width: 'fit-content',
-                left: '50%',
-                position: 'relative',
-                margin: 0,
+                fontSize: "11px",
+                textAlign: "center",
+                lineHeight: 0,
+                width: "fit-content",
+                left: "50%",
+                position: "relative",
+                margin: "revert",
                 flexGrow: 1,
                 height: 0,
-                transform: "translate(-50%,0%)"
-              }
-            },
-          },
-          {
-            type: "Control",
-            scope: "#/properties/backIcon",
-            options: {
-              widget: "Box",
-            },
-            config: {
-              main: {
-                iconName: 'PrevIcon',
-                onClick: "backHandler",
-                width: 'fit-content',
+                transform: "translate(-50%, 0%)",
               },
-              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,
-                }
-              }
             },
           },
-        ]
+        ],
       }
     ],
   };