impaktapps-ui-builder 0.0.382456 → 0.0.382460

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

@@ -1,318 +1,565 @@
-import { getSelectField } from "../../../build/uischema/buildPropertiesSection"; 
+import { getSelectField } from "../../../build/uischema/buildPropertiesSection";
 
-export const EventUiSchema: any = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          rowSpacing: 1,
-          header: true
+export const EventUiSchema: any = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Component",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+       
+        options: {
+          widget: "Box",
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: " ",
+          },
+          style: {
+            marginLeft: theme.spacing(3),
+            width:"auto",
+            fontSize:"12px",
+            color:"gray",
+          },
         },
-        defaultStyle: true
       },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/Component",
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Core", "Response Event"],
+            defaultStyle: true,
+            id: "event"
+          },
+        },
+
+        elements: [
+          {
+            type: "HorizontalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: `#/properties/eventType`,
+
+                options: {
+                  widget: "SelectInputField",
+                },
+                config: {
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  main: {
+                    label: "Event Type",
+                    type: "text",
 
-          options: {
-            widget: "Box",
+                  },
+                },
+              },
+              getSelectField("Handler", "Handler", [
+                { label: "Custom", value: "custom" },
+                { label: "Api", value: "api" },
+                { label: "Inbuilt Function", value: "inBuiltFunction" },
+                { label: "Refresh", value: "refresh" },
+              ]),
+              {
+                type: "Control",
+                scope: "#/properties/EmptyBox",
+                options: {
+                  widget: "EmptyBox",
+                },
+                config: {
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                },
+              },
+            ],
           },
-          config: {
-            layout: {xs:12,sm:12,md:2},
-            main: {
-              heading: "Component",
+          {
+            type: "Control",
+            scope: "#/properties/events",
+            options: {
+              widget: "Table",
             },
-            style:{
-              "float":"left",
-            }
-          },
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            // color: "info",
+                            onClick: "addEvent",
+                            size: "small",
+                            icon: "AddIcon",
+                            iconLabel: "Add New",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                          },
+                        },
+                      }
+                    },
+
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Event",
+    
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            // color: "info",
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "PasteIcon",
+                            iconLabel: "Paste",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                          },
+                        },
+                      }
+                    },
+                  ]
+                },
+                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: theme.palette.primary.main,
+                    },
+                  },
+                },
+              },
+              {
+                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: "deletePopUpEvent",
+                    },
+                  },
+                },
+              },
+
+              {
+                header: "Copy",
+                field: "Copy_Event",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Event",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      // color: "error",
+                      onClick: "copyPasteElement",
+                      styleDefault: true,
+                    },
+                  },
+                },
+              },
+            ]
+            // }]
+          }
+        ],
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout:{xs:12,sm: 6}
         },
-       
-        {
-          type: "Control",
-          scope: "#/properties/pageName",
-         
-          options: {
-            widget: "Box",
-          },
-          config: {
-            layout: {xs:7,sm:7,md:9},
-            main: {
-              heading: " ",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/RemoveItemButton",
+            options: {
+              widget: "IconButton",
             },
-            style: {
-              float: "right",
-              width:"auto",
-              fontSize:"12px",
-              color:"gray",
-              paddingTop:"10px"
+            config: {
+              layout: { xs: 1, sm: 1 },
+              main: {
+                onClick: "RemoveItemButton",
+                size: "large",
+                icon: "RejectIcon",
+                styleDefault: true,
+              },
+              style:{
+                marginLeft: "-10px"
+              }
             },
           },
-        },
+          {
+            type: "Control",
+            scope: "#/properties/copiedElementDetails",
       
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-         
-          options: {
-            widget: "IconButton",
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: { xs: 6, sm: 6 },
+              main: {
+                heading: "No element copied",
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-10px",
+                fontSize: "12px",
+                marginTop: "4px"
+              },
+            },
           },
-          config: {
-            layout: {xs:2,sm:2,md:0.5},
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back",
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox",
             },
-            style: {
-              float: "right",
+            config: {
+              layout: { xs: 1, sm: 5 },
             },
           },
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "Button",
         },
-      ],
-    },
-    {
-      type: "TabLayout",
-      config: {
-        main: {
-          tabLabels: ["Core", "Response Event"],
-          defaultStyle: true,
-          id: "event"
+
+        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",
+        },
 
-      elements: [
-        {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: `#/properties/eventType`,
-          
-              options: {
-                widget: "SelectInputField",
-              },
-              config: {
-                layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-                main: {
-                  label: "Event Type",
-                  type: "text",                
-  
-                },
-              },
-            },
-            getSelectField("Handler", "Handler", [
-              { label: "Custom", value: "custom" },
-              { label: "Api", value: "api" },
-              { label: "Inbuilt Function", value: "inBuiltFunction" },
-              { label: "Refresh", value: "refresh" },
-            ]),
-          ],
+        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: "WrapperLayout",
-          config: {
-            main: {
-              // label: "Success Case Event",
-              divider: true,
-            },
-            wrapperStyle: {
-              border: "1px solid gray"
-            },
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12,
           },
-          elements: [
+          main: {
+            title: "WARNING!"
+          },
+          style: {
+          }
+        },
+        elements:
+          [
             {
               type: "Control",
-              scope: "#/properties/heading",
-    
+              scope: "#/properties/popupText",
               options: {
                 widget: "Box",
               },
               config: {
-                layout: 8,
+                layout: 12,
                 main: {
-                  heading: "Response Event",
+                  heading: "Are you sure you want to delete ?",
                 },
-                style: {
-                  fontFamily: "Roboto",
-                  fontWeight: "500",
-                  paddingLeft: "-10px",
+                style:{
+                  marginTop: "-20px",
                   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",
-                },
+                  "&.MuiTypography-root": {
+                    padding: "10px 30px 20px 30px",
+                    textAlign: "center",
+                    lineHeight: "1"
+                  }
+                }
               },
             },
-    
             {
-              type: "Control",
-              scope: "#/properties/events",
-              options: {
-                widget: "Table",
-              },
+              type: "WrapperLayout",
               config: {
-                main: {
-                  disableAction: true,
-                  disableSelection: true,
-                  enableDrag: true,
-    
-                },
+                layout: 12,
+                main: {},
+
               },
               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",
-                      },
+                  type: "Control",
+                  scope: "#/properties/CancelDeleteEventButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "No",
+                      startIcon: "ApproveIcon",
+                      variant: "contained",
+                      color: "info",
+                      type: "text",
+                      onClick: "deletePopUpEvent",
+                      size: "large",
                     },
+                    style: {
+                      position: "absolute",
+                      bottom: 0,
+                      left: 0,
+                      width: "50%",
+                      borderRadius: 0,
+                      boxShadow: 0,
+                      backgroundColor: "transparent",
+                      color: theme.palette.primary.main,
+                      borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                      borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                      "&:hover": {
+                        color: theme.palette.primary.contrastText,
+                        backgroundColor: theme.palette.primary.main,
+                        boxShadow: "none"
+                      }
+                    }
                   },
                 },
                 {
-                  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/ConfirmDeleteEventButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "Yes",
+                      startIcon: "ApproveIcon",
+                      variant: "contained",
+                      color: "error",
+                      type: "text",
+                      onClick: "deleteEvent",
+                      size: "large",
                     },
+                    style: {
+                      position: "absolute",
+                      bottom: 0,
+                      right: 0,
+                      width: "50%",
+                      borderRadius: 0,
+                      boxShadow: 0,
+                      backgroundColor: "transparent",
+                      color: theme.palette.error.main,
+                      borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                      "&:hover": {
+                        color: theme.palette.error.contrastText,
+                        backgroundColor: theme.palette.error.main,
+                        boxShadow: "none"
+                      }
+                    }
                   },
                 },
               ]
-            }]
-        }
-      ],
-    },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 },
-      },
-      options: {
-        widget: "EmptyBox",
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "Button",
+            },
+          ]
       },
-
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5,
-        },
-        main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "small",
+      {
+        type: "Control",
+        scope: "#/properties/notify",
+        options: {
+          widget: "Notify",
         },
-        style: {
-          marginBottom: "8px",
-          float: "right",
-        },
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btnSubmit",
-      options: {
-        widget: "Button",
+        layout: 6,
       },
-
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5,
-        },
-        main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "small",
-        },
-        style: {
-          marginBottom: "8px",
-          float: "right",
+      {
+        type: "HorizontalLayout",
+        config: {
+          main: {
+            direction: 'row'
+          },
+          style: {
+            flexDirection: "row",
+            position: "absolute",
+            bottom: 0,
+            marginBottom: '-8px',
+            height: 'fit-content',
+            overflow: 'hidden',
+            zIndex: 1000,
+            width: 'inherit'
+          }
         },
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/notify",
-      options: {
-        widget: "Notify",
-      },
-      layout: 6,
-    }
-  ],
-};
+        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: 2,
+                width: 'fit-content',
+                left: '50%',
+                position: 'relative',
+                margin: 0,
+                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',
+              },
+              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,
+                }
+              }
+            },
+          },
+        ]
+      }
+    ],
+  };
+  return uiSchema;
+}