impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.2

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

@@ -0,0 +1,776 @@
+import { EventUiSchema } from "../event/uiSchema"
+export const PageMasterUiSchema: any = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Page",
+    elements: [
+      {
+        type: "WrapperLayout",
+        config: {
+          main: {
+            label: "Basic Details",
+            isAccordion: true,
+            gap: "8px",
+          },
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/name",
+
+            options: {
+              widget: "InputField",
+            },
+            config: {
+              layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Page Name",
+                options: [],
+                color: "secondary",
+                errorMessage: "Name should be start with 'page_'",
+                helperText: 'Name should be start with "page_"',
+                required: true,
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/label",
+
+            options: {
+              widget: "InputField",
+            },
+            config: {
+              layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Page Heading",
+                options: [],
+                color: "secondary",
+                required: true,
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 0, sm: 0, md: 4, lg: 6 },
+            },
+            options: {
+              widget: "EmptyBox",
+            },
+          },
+        ],
+      },
+      {
+        type: "TabLayout",
+        config: {
+          layout: 12,
+          main: {
+            tabLabels: ["Page Components", "Page Events"],
+          },
+          style: {
+            TabPanelStyle: {
+              padding: 0,
+            }
+          },
+          TabsStyle: {
+            borderTop: `1px solid ${theme.palette.common.black}29`,
+            marginBottom: "3px",
+            paddingBottom: "4px",
+            boxShadow: "0px 3px 4px #afafaf80",
+            "& .MuiTabs-indicator": {
+              bottom: "6px",
+            }
+          },
+          TabContainerStyle: {
+            marginTop: "-16px",
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/elements",
+            options: {
+              widget: "Table",
+            },
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            onClick: "onAddClickHandler",
+                            size: "small",
+                            icon: "TableAddIcon",
+                            iconLabel: "Add",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
+                          },
+                        },
+                      }
+                    },
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Component",
+
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "TablePaste",
+                            iconLabel: "Paste",
+                            styleDefault: true,
+                            title: ""
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
+                          },
+                        },
+                      }
+                    },
+                  ]
+                },
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true,
+              }
+            },
+            elements: [
+              {
+                accessorKey: "name",
+                header: "Name",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "type",
+                header: "Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                header: "Edit",
+                field: "Reject_Records",
+                size: 150,
+                type: "action",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "TableEditIcon",
+                      onClick: "Edit_Components",
+                      tooltipMessage: "Edit This Record",
+                    },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                header: "Delete",
+                field: "Reject_Records",
+                size: 150,
+                type: "action",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "Bin",
+                      onClick: "deletePopUpComponent",
+                      tooltipMessage: "Reject This Record",
+                    },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                header: "Copy",
+                field: "Copy_Component",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Component",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      onClick: "copyPasteElement",
+                      styleDefault: true,
+                    },
+                  },
+                },
+              },
+            ]
+          },
+          {
+            type: "Control",
+            scope: "#/properties/events",
+            options: {
+              widget: "Table",
+            },
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            onClick: "eventAddHandler",
+                            size: "small",
+                            icon: "TableAddIcon",
+                            iconLabel: "Add",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
+                          },
+                        },
+                      }
+                    },
+
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Event",
+
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "TablePaste",
+                            iconLabel: "Paste",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit",
+                            }
+                          },
+                        },
+                      }
+                    },
+                  ]
+                },
+
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true,
+
+              },
+            },
+            elements: [
+
+              {
+                accessorKey: "eventType",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "Handler",
+                header: "Handler",
+                size: 200,
+                type: "string"
+              },
+              {
+                accessorKey: "Edit_Approve_Records",
+                header: "Edit",
+                type: "action",
+                size: 150,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Edit_Records",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      size: "small",
+                      icon: "TableEditIcon",
+                      tooltipMessage: "Edit This Record",
+                      onClick: "editEvent",
+                    },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                accessorKey: "Reject_Records",
+                header: "Delete",
+                type: "action",
+                size: 150,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "Bin",
+                      tooltipMessage: "Reject This Record",
+                      onClick: "deletePopUpEvent",
+                    },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark,
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                header: "Copy",
+                field: "Copy_Event",
+                type: "action",
+                size: 150,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Event",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      onClick: "copyPasteElement",
+                      styleDefault: true,
+                    },
+                  },
+                },
+              },
+            ]
+          },
+
+        ],
+      },
+      {
+        scope: "#/properties/Remarks Container",
+        type: "WrapperLayout",
+        config: {
+          layout: 12,
+          main: {
+            divider: false,
+            rowSpacing: 0,
+            gap: 0
+          },
+          componentsBoxStyle: {
+            padding: "8px 8px 8px 24px",
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/btn",
+            options: {
+              widget: "Button",
+            },
+      
+            config: {
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+              main: {
+                name: "Save",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium",
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 8, sm:9.5, md: 10, lg: 10.5 },
+            },
+            options: {
+              widget: "EmptyBox",
+            },
+          },
+        ],
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpPageMasterComponent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12,
+          },
+          main: {
+            title: "WARNING!"
+          },
+          style: {
+          }
+        },
+        elements:
+          [
+            {
+              type: "Control",
+              scope: "#/properties/popText",
+              options: {
+                widget: "Box",
+              },
+              config: {
+                layout: 11,
+                main: {
+                  heading: "Are you sure you want to delete this Component ?",
+                },
+                style:{
+                  fontSize: "20px",
+                  "&.MuiTypography-root": {
+                    padding: "0px 20px",
+                    textAlign: "center",
+                    lineHeight: "1.2",
+                    fontWeight: "normal",
+                    fontSize: "18px",
+                    marginBottom: theme.spacing(5)
+                  }
+                }
+              },
+            },
+            {
+              type: "WrapperLayout",
+              config: {
+                layout: 11,
+                main: {},
+
+              },
+              elements: [
+                {
+                  type: "Control",
+                  scope: "#/properties/CancelDeleteCompButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "No",
+                      variant: "contained",
+                      type: "text",
+                      onClick: "deletePopUpComponent",
+                      size: "large",
+                    },
+                    style: {
+                      position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
+                      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"
+                      }
+                    }
+                  },
+                },
+                {
+                  type: "Control",
+                  scope: "#/properties/ConfirmDeleteCompButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "Yes",
+                      variant: "contained",
+                      color: "error",
+                      type: "text",
+                      onClick: "Delete_Components",
+                      size: "large",
+                    },
+                    style: {
+                      position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
+                      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/popUpPageMasterEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12,
+          },
+          main: {
+            title: "WARNING!"
+          },
+          style: {
+          }
+        },
+        elements:
+          [
+            {
+              type: "Control",
+              scope: "#/properties/popText1",
+              options: {
+                widget: "Box",
+              },
+              config: {
+                layout: 11,
+                main: {
+                  heading: "Are you sure you want to delete this Event ?",
+                },
+                style:{
+                  fontSize: "20px",
+                  "&.MuiTypography-root": {
+                    padding: "0px 20px",
+                    textAlign: "center",
+                    lineHeight: "1.2",
+                    fontWeight: "normal",
+                    fontSize: "18px",
+                    marginBottom: theme.spacing(5)
+                  }
+                }
+              },
+            },
+            {
+              type: "WrapperLayout",
+              config: {
+                layout: 11,
+                main: {},
+
+              },
+              elements: [
+                {
+                  type: "Control",
+                  scope: "#/properties/CancelDeleteEventButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "No",
+                      variant: "contained",
+                      type: "text",
+                      onClick: "deletePopUpEvent",
+                      size: "large",
+                    },
+                    style: {
+                      position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
+                      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"
+                      }
+                    }
+                  },
+                },
+                {
+                  type: "Control",
+                  scope: "#/properties/ConfirmDeleteEventButton",
+                  options: {
+                    widget: "Button",
+                  },
+                  config: {
+                    layout: 6,
+                    main: {
+                      name: "Yes",
+                      variant: "contained",
+                      color: "error",
+                      type: "text",
+                      onClick: "deleteEvent",
+                      size: "large",
+                    },
+                    style: {
+                      position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
+                      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/notify",
+        options: {
+          widget: "Notify",
+        },
+        layout: 6,
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          main: {
+            direction: "row",
+          },
+          style: {
+            flexDirection: "row",
+            position: "absolute",
+            bottom: 10,
+            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: "11px",
+                textAlign: "center",
+                lineHeight: 0,
+                width: "fit-content",
+                left: "50%",
+                position: "relative",
+                margin: "revert",
+                flexGrow: 1,
+                height: 0,
+                transform: "translate(-50%, 0%)",
+              },
+            },
+          },
+        ],
+      }
+    ]
+  }
+  return uiSchema
+}
+