impaktapps-ui-builder 0.0.967 → 0.0.970

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

@@ -127,6 +127,30 @@ export const PageMasterUiSchema: any = (theme) => {
                         },
                       }
                     },
+
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Component",
+
+                        options: {
+                          widget: "IconButton",
+                        },
+                        config: {
+                          main: {
+                            // color: "info",
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "PasteIcon",
+                            iconLabel: "Paste",
+                            styleDefault: true,
+                          },
+                          style: {
+                            mt: "6px",
+                          },
+                        },
+                      }
+                    },
                   ]
                 },
                 disableAction: true,
@@ -187,7 +211,30 @@ export const PageMasterUiSchema: any = (theme) => {
                     },
                   },
                 },
-              }
+              },
+
+              {
+                header: "Copy",
+                field: "Copy_Component",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Component",
+                  options: {
+                    widget: "IconButton",
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      // color: "error",
+                      onClick: "copyPasteElement",
+                      styleDefault: true,
+                    },
+                  },
+                },
+              },
+
+            
             ]
           },
           {
@@ -223,6 +270,30 @@ export const PageMasterUiSchema: 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",
+                          },
+                        },
+                      }
+                    },
                   ]
                 },
 
@@ -284,6 +355,28 @@ export const PageMasterUiSchema: 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,
+                    },
+                  },
+                },
+              },
             ]
             // }]
           },
@@ -291,14 +384,60 @@ export const PageMasterUiSchema: any = (theme) => {
         ],
       },
       {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "EmptyBox",
-        },
+        type: "HorizontalLayout",
         config: {
-          layout: { xs: 8, sm: 10 },
-        }
+          layout:{xs:12,sm: 9}
+        },
+        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: "-5px"
+              }
+            },
+          },
+  
+          {
+            type: "Control",
+            scope: "#/properties/copiedElementDetails",
+      
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: { xs: 6, sm: 6 },
+              main: {
+                heading: "No element copied",
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-30px"
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+            config: {
+              layout: { xs: 1, sm: 5 },
+            },
+          },
+        ]
       },
       {
         type: "Control",
@@ -306,7 +445,7 @@ export const PageMasterUiSchema: any = (theme) => {
         options: {
           widget: "Button",
         },
-
+  
         config: {
           layout: { xs: 4, sm: 2 },
           main: {

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

@@ -83,7 +83,10 @@ export const EventSchema = {
           },
         },
       },
-    }
+    },
+    RemoveItemButton:{
+      disabled: true,
+    },
   },
 required:["eventType","Handler"]
 }

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

@@ -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,20 +190,87 @@ 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",
-        },
+        type: "HorizontalLayout",
         config: {
-          layout: { xs: 4, sm: 8 },
+          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"
+              },
+            },
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+            config: {
+              layout: { xs: 1, sm: 5 },
+            },
+          },
+        ]
       },
       {
         type: "Control",

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";
@@ -41,9 +41,7 @@ const sectionLabels = {
   ColumnGroup: ["Core", "Components"]
 }
 
-
-
-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 +56,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);
 }
@@ -79,7 +79,11 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       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"),
@@ -172,5 +176,80 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       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");
+      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 pasted content is invalid; the event cannot be integrated into the component section.",
+        Component: "The pasted content is invalid; 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"));
+      const elementHeading = formData.name ? `Copied Element: ${formData.name}` : `Event Type: ${formData.eventType} `;
+      uiSchema.elements[2].elements[1].config.main.heading  = elementHeading;
+    }
   }
 };

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

@@ -1,7 +1,7 @@
 import { EventSchema } from "../elements/UiSchema/event/schema";
 import { EventUiSchema } from "../elements/UiSchema/event/uiSchema";
 import Component from "./component";
-import { okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
+import { okHandler, saveFormdataInSessionStorage, saveHandler, getFormdataFromSessionStorage } from "./utils";
 import { APISection } from "../build/uischema/apiSection";
 import { getRadioInputField, getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
 import { refreshSectionUiSchema } from "../build/uischema/refresh";
@@ -85,6 +85,9 @@ export default (
           ...functionsName
         ]
       }
+      if (sessionStorage.getItem("copiedConfig") ) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(uiSchema);
+      }
       store.setSchema(schema)
       store.setUiSchema(uiSchema)
     },
@@ -94,7 +97,11 @@ export default (
       return EventUiSchema;
     },
     getSchema: () => {
-      return EventSchema;
+      const schema = _.cloneDeep(EventSchema);
+      if (sessionStorage.getItem("copiedConfig") ) {
+        schema.properties.RemoveItemButton.disabled = false;
+      }
+      return schema;
     },
     okHandler: () => okHandler(store),
     saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
@@ -138,6 +145,13 @@ export default (
       const rowId = dynamicData.path.split(".")[1];
       sessionStorage.setItem('rowId',rowId);
       store.updateDialog("popUpEvent");
-    }
+    },
+    copyPasteElement:  function(){
+      Component(store, dynamicData, submitHandler, service).copyPasteElement(store,this.setPage.bind(this));
+    },
+    RemoveItemButton: function(){
+      Component(store, dynamicData, submitHandler, service).RemoveItemButton(store)
+    },
+
   }
 };

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

@@ -34,10 +34,18 @@ export default (funcParams: funcParamsProps) => {
       return config
     },
     getUiSchema: function () {
-      return PageMasterUiSchema(store.theme.myTheme);
+      const UiSchema = _.cloneDeep(PageMasterUiSchema(store.theme.myTheme));
+      if (sessionStorage.getItem("copiedConfig") ) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(UiSchema)
+      }
+      return UiSchema;
     },
     getSchema: () => {
-      return PageMasterSchema;
+      const schema = _.cloneDeep(PageMasterSchema);
+      if (sessionStorage.getItem("copiedConfig") ) {
+        schema.properties.RemoveItemButton.disabled = false;
+      }
+      return schema;
     },
     backHandler: () => {
       sessionStorage.removeItem("pageFormdata")
@@ -101,5 +109,15 @@ export default (funcParams: funcParamsProps) => {
       sessionStorage.setItem('rowId',rowId);
       store.updateDialog("popUpPageMasterEvent");
     },
+
+
+    copyPasteElement:  function(){
+      Component(store, dynamicData, submitHandler, service).copyPasteElement(store,this.setPage.bind(this));
+    },
+    
+    RemoveItemButton: function(){
+      Component(store, dynamicData, submitHandler, service).RemoveItemButton(store)
+    },
+    
   }
 };