impaktapps-ui-builder 0.0.596 → 0.0.751

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

@@ -47,7 +47,7 @@ export const EventUiSchema: any = (theme) => {
                   widget: "SelectInputField",
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Event Type",
                     type: "text",
@@ -106,6 +106,30 @@ export const EventUiSchema: any = (theme) => {
                         },
                       }
                     },
+
+                    {
+                      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,
@@ -166,30 +190,88 @@ export const EventUiSchema: any = (theme) => {
                   },
                 },
               },
+
+              {
+                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: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox",
-        },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-        },
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox",
-        },
+        type: "HorizontalLayout",
         config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+          layout:{xs:12,sm: 6}
         },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/RemoveItemButton",
+            options: {
+              widget: "IconButton",
+            },
+            config: {
+              layout: { xs: 1, sm: 1 },
+              main: {
+                onClick: "RemoveItemButton",
+                size: "large",
+                icon: "RejectIcon",
+                styleDefault: true,
+              },
+              style:{
+                marginLeft: "-10px"
+              }
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/copiedElementDetails",
+      
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: { xs: 6, sm: 6 },
+              main: {
+                heading: "No element copied",
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-10px",
+                fontSize: "12px",
+                marginTop: "4px"
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+            config: {
+              layout: { xs: 1, sm: 5 },
+            },
+          },
+        ]
       },
       {
         type: "Control",
@@ -199,7 +281,7 @@ export const EventUiSchema: any = (theme) => {
         },
 
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Ok",
             startIcon: "ApproveIcon",
@@ -222,7 +304,7 @@ export const EventUiSchema: any = (theme) => {
         },
 
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Save & Exit",
             startIcon: "ApproveIcon",
@@ -247,28 +329,20 @@ export const EventUiSchema: any = (theme) => {
           layout: {
             xs: 12,
             sm: 12,
-            md: 6,
-            lg: 6,
+            md: 12,
+            lg: 12,
           },
           main: {
+            title: "WARNING!"
           },
           style: {
-            "& .MuiPaper-root":{
-              width: '30%',
-            },
-            "& .MuiTypography-root":{
-              padding: 0
-            },
-            wrapperStyle: {
-              width: { xs: "100%", sm: "100%", md: "98%" },
-            }
           }
         },
         elements:
           [
             {
               type: "Control",
-              scope: "#/properties/label",
+              scope: "#/properties/popupText",
               options: {
                 widget: "Box",
               },
@@ -277,59 +351,97 @@ export const EventUiSchema: any = (theme) => {
                 main: {
                   heading: "Are you sure you want to delete ?",
                 },
-                style: {
-                  marginTop: "-40px"
+                style:{
+                  marginTop: "-20px",
+                  fontSize: "20px",
+                  "&.MuiTypography-root": {
+                    padding: "10px 30px 20px 30px",
+                    textAlign: "center",
+                    lineHeight: "1"
+                  }
                 }
               },
             },
             {
-              type: "Control",
-              scope: "#/properties/EmptyBox",
-              options: {
-                widget: "EmptyBox",
-              },
+              type: "WrapperLayout",
               config: {
+                layout: 12,
                 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",
+              elements: [
+                {
+                  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"
+                      }
+                    }
+                  },
                 },
-              },
-            },
-            {
-              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/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"
+                      }
+                    }
+                  },
                 },
-              },
+              ]
             },
           ]
       },
@@ -360,7 +472,7 @@ export const EventUiSchema: any = (theme) => {
         },
         elements: [
           {
-
+  
             type: "Control",
             scope: "#/properties/FooterText",
             options: {
@@ -374,13 +486,14 @@ export const EventUiSchema: any = (theme) => {
                 color: theme?.palette?.text.disabled || "#AFAFAF",
                 fontSize: '12px',
                 textAlign: 'center',
-                lineHeight: 1,
+                lineHeight: 2,
                 width: 'fit-content',
                 left: '50%',
                 position: 'relative',
                 margin: 0,
                 flexGrow: 1,
-                height: 0
+                height: 0,
+                transform: "translate(-50%,0%)"
               }
             },
           },
@@ -402,7 +515,7 @@ export const EventUiSchema: any = (theme) => {
                 height: 0,
                 margin: 0,
                 top: 0,
-                right: '82px',
+                right: {xs: '12px', sm: '84px'},
                 position: 'absolute',
                 fontSize: '12px',
                 cursor: 'pointer',
@@ -415,7 +528,7 @@ export const EventUiSchema: any = (theme) => {
           {
             type: "Control",
             scope: "#/properties/text",
-
+  
             options: {
               widget: "Box",
             },
@@ -425,6 +538,7 @@ export const EventUiSchema: any = (theme) => {
                 onClick: "backHandler"
               },
               style: {
+                display: {xs: 'none', sm: "flex"},
                 textAlign: 'left',
                 lineHeight: 1,
                 height: 0,

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

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import _, { cloneDeep } from "lodash";
 import { ComponentSchema } from "../elements/UiSchema/Component/schema";
 import { componentBasicUiSchema } from "../elements/UiSchema/Component/uiSchema";
 import { CoreSection } from "../build/uischema/coreSection";
@@ -8,7 +8,7 @@ import { StyleSection } from "../build/uischema/styleSection";
 import { TableSection } from "../build/uischema/tableSection";
 import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
-import { getFormdataFromLocalStorage, okHandler, saveFormdataInLocalStorage, saveHandler } from "./utils";
+import { getFormdataFromSessionStorage, okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
@@ -38,12 +38,11 @@ const sectionLabels = {
   DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
   InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
-  ColumnGroup: ["Core", "Components"]
+  ColumnGroup: ["Core", "Components"],
+  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
 }
 
-
-
-export const refreshPage = (type: string, store: any) => {
+export function refreshPage (type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   if (type) {
     const sectionUiSchema = {
@@ -58,7 +57,9 @@ export const refreshPage = (type: string, store: any) => {
     const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
     UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
     UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store.theme.myTheme), ValidationSection];
-
+  }
+  if (sessionStorage.getItem("copiedConfig") ) {
+    this.ElementPathSetter(UiSchema);
   }
   store.setUiSchema(UiSchema);
 }
@@ -76,10 +77,14 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     refreshPage: refreshPage,
     getFormdata: function () {
       const path = store.searchParams?.get("path");
-      return getFormdataFromLocalStorage(path)
+      return getFormdataFromSessionStorage(path)
     },
     getSchema: function () {
-      return ComponentSchema;
+      const schema = _.cloneDeep(ComponentSchema);
+      if (sessionStorage.getItem("copiedConfig") ) {
+        schema.properties.RemoveItemButton.disabled = false;
+      }
+      return schema;
     },
     okHandler: () => okHandler(store),
     saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
@@ -95,7 +100,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
-      saveFormdataInLocalStorage(store.ctx.core.data, path)
+      saveFormdataInSessionStorage(store.ctx.core.data, path)
       if (path) {
         const path = store.searchParams?.get("path");
         const finalPath = `${path}.elements[${rowId}]`
@@ -108,33 +113,33 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = localStorage.getItem('rowId');
+      const rowId = sessionStorage.getItem('rowId');
       store.formData.elements.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store.ctx.core.data, path)
+      const response = saveFormdataInSessionStorage(store.ctx.core.data, path)
       const data = path ? _.get(response, path) : response;
       store.setFormdata(data);
       if (shouldUpdateDialog) {
         store.updateDialog("popUpComponentSection");
       }
-      localStorage.removeItem('rowId');
+      sessionStorage.removeItem('rowId');
     },
     deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = localStorage.getItem('rowId');
+      const rowId = sessionStorage.getItem('rowId');
       store.formData.events.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store.ctx.core.data, path)
+      const response = saveFormdataInSessionStorage(store.ctx.core.data, path)
       store.setFormdata(_.get(response, path));
       if (shouldUpdateDialog) {
         store.updateDialog("popUpEventSection")
       }
-      localStorage.removeItem('rowId');
+      sessionStorage.removeItem('rowId');
     },
     widgetAddClickHandler: function () {
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
       const path = store.searchParams?.get("path");
-      saveFormdataInLocalStorage(store.ctx.core.data, path)
+      saveFormdataInSessionStorage(store.ctx.core.data, path)
       const finalPath = `${path}.elements[${store.formData.elements.length}]`
       store.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
@@ -145,7 +150,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
-      saveFormdataInLocalStorage(store.ctx.core.data, path)
+      saveFormdataInSessionStorage(store.ctx.core.data, path)
       const finalPath = `${path}.events[${rowId}]`
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
@@ -155,7 +160,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
-      saveFormdataInLocalStorage(store.ctx.core.data, path)
+      saveFormdataInSessionStorage(store.ctx.core.data, path)
       const finalPath = `${path}.events[${store.formData.events.length}]`
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
@@ -164,20 +169,94 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      localStorage.setItem('rowId', rowId);
+      sessionStorage.setItem('rowId',rowId);
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      localStorage.setItem('rowId', rowId);
+      sessionStorage.setItem('rowId',rowId);
       store.updateDialog("popUpEventSection");
     },
-  }
-};
-
-
-
 
+    copyPasteElement: function(paramStore: any, setPage: any = this.setPage.bind(this) ){
+      const [actionType, elementType] = dynamicData.path.split('.').pop()?.split('_');
+      actionType === "Copy" ? this.CopyElement(paramStore, elementType) : this.PasteElement(setPage, elementType);
+    },
+    CopyElement: function(paramStore: any = store, elementType: string){
+      const schema = cloneDeep(paramStore.schema );
+      const uiSchema = cloneDeep(paramStore.uiSchema );
+      schema.properties.RemoveItemButton.disabled = false;
 
+      const rowId = dynamicData.path.split(".")[1];
+      const parentPathOfCopiedComponent = store.searchParams?.get("path");
+      const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
+      const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
 
+      this.ElementPathSetter(uiSchema,copiedFormData);
+      sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      store.setSchema(schema);
+      store.setUiSchema(uiSchema);
+    }, 
+    PasteElement: function( setPage: any , elementType: string){
+      if (!sessionStorage.getItem("copiedConfig") ) {
+        store.setNotify({
+          FailMessage: "No item has been copied.",
+          Fail: true,
+        });
+        return;
+      }
+      const pastedElementParentPath = store.searchParams?.get("path");
+      if (!Array.isArray(store.formData.elements) ) {
+        store.formData.elements = []
+      }
+      if (!Array.isArray(store.formData.events)) {
+        store.formData.events = []
+      }
+      saveFormdataInSessionStorage(store.ctx.core.data, pastedElementParentPath);
+      const formData =  getFormdataFromSessionStorage(pastedElementParentPath);
+      const insertElementIndex =  elementType === "Component" ? formData.elements.length : formData.events.length;
+      const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
 
+      const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
+      const notificationMessages = {
+        Event: " The event cannot be integrated into the component section.",
+        Component: "The component cannot be integrated into the event section."
+      };
+      if(copiedConfig.Handler && elementType === "Component"){
+        store.setNotify({
+          FailMessage: notificationMessages.Event,
+          Fail: true,
+        });
+      }
+      else if(copiedConfig.name && elementType === "Event"){
+        store.setNotify({
+          FailMessage: notificationMessages.Component,
+          Fail: true,
+        });
+      }
+      else{
+        saveFormdataInSessionStorage(copiedConfig, pastedElementPath);
+        setPage();
+      }
+    },    
+    RemoveItemButton: function(paramStore: any = store){
+      const schema = cloneDeep(paramStore.schema );
+      const uiSchema = cloneDeep(paramStore.uiSchema);
+      schema.properties.RemoveItemButton.disabled = true;
+      uiSchema.elements[2].elements[1].config.main.heading = `No element copied`;
+      sessionStorage.removeItem('copiedConfig');
+      store.setSchema(schema);
+      store.setUiSchema(uiSchema);
+    },
+    elementPathHandler: function(parentPath: string, rowId: any, elementType: string){
+      if(elementType === "Component"){
+         return parentPath ? `${parentPath}.elements[${rowId}]`  : `elements[${rowId}]`;
+      }
+      return parentPath ? `${parentPath}.events[${rowId}]`  : `events[${rowId}]`;
+    },
+    ElementPathSetter: function(uiSchema: any,copiedFormData?: any){
+      const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
+      uiSchema.elements[2].elements[1].config.main.heading  = `Copied Path: ${formData.pageName}`;
+    }
+  }
+};