impaktapps-ui-builder 0.0.382456 → 0.0.382460

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

@@ -1,5 +1,5 @@
-import _ from "lodash";
-import { ComponentSchema } from "../elements/UiSchema/Component/schema"; 
+import _, { cloneDeep } from "lodash";
+import { ComponentSchema } from "../elements/UiSchema/Component/schema";
 import { componentBasicUiSchema } from "../elements/UiSchema/Component/uiSchema";
 import { CoreSection } from "../build/uischema/coreSection";
 import { EventSection } from "../build/uischema/eventSection";
@@ -8,57 +8,60 @@ 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", "style", "Event","Validation"],
-  MultipleSelect: ["Core", "Properties","Value", "style", "Event","Validation"],
-  Table: ["Core", "Components",  "Properties","style",  "Event","Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "style", "Event","Validation"],
-  WrapperSection: ["Core", "Components","Properties", "style","Validation"],
-  TabSection: ["Core", "Components", "Properties", "style","Validation"],
-  SpeedoMeter:["Core", "Properties", "style", "Event","Validation"],
-  card:["Core", "Properties", "style", "Event","Validation"],
-  UploadFile:["Core",  "style", "Event","Validation"],
-  Graph:["Core", "Properties", "style", "Event","Validation"],
-  DownloadFile:["Core",  "style", "Event","Validation"],
-  Box: ["Core", "style", "Event","Validation"],
-  Properties: ["Core", "Properties", "style", "Event","Validation"],
-  ProgressBarCard: ["Core", "Properties", "style", "Event","Validation"],
-  RankCard: ["Core", "Properties", "style", "Event","Validation"],
-  Slider: ["Core", "Components", "style", "Event","Validation"],
-  Timer: ["Core", "style", "Event","Validation"],
-  Rank: ["Core","style", "Event","Validation"],
-  Button: ["Core", "Properties", "style", "Event","Validation"],
-  Array:["Core","Components","Validation"],
-  Radio:["Core", "Properties", "style", "Event","Validation"],
-  Text:["Core","Properties","style", "Event","Validation"],
-  TextArea:["Core","Properties","style", "Event","Validation"],
-  PopUp: ["Core", "Components","Properties", "style"],
-  Stepper: ["Core", "Components","Properties","Event", "style"],
-  DataGrid: ["Core", "Components","Properties","Event", "style"],
+  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
+  card: ["Core", "Properties", "Event", "Style", "Validation"],
+  UploadFile: ["Core", "Event", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
+  DownloadFile: ["Core", "Event", "Style", "Validation"],
+  Box: ["Core", "Event", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  Slider: ["Core", "Components", "Event", "Style", "Validation"],
+  Timer: ["Core", "Event", "Style", "Validation"],
+  Rank: ["Core", "Event", "Style", "Validation"],
+  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  Array: ["Core", "Components", "Validation"],
+  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
+  Text: ["Core", "Properties", "Event", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  PopUp: ["Core", "Components", "Properties", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
+  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
+  ColumnGroup: ["Core", "Components"],
+  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
 }
 
-
-
-export const refreshPage = (type:string,store:any) => {
-  const UiSchema = _.cloneDeep(componentBasicUiSchema)
-  if(type){
-  const sectionUiSchema = {
-    Core: CoreSection,
-    Value: ValueTab,
-    style: StyleSection,
-    Event: EventSection,
-    Components: TableSection,
-    Properties: buildPropertiesSection(type),
-    Validation:ValidationSection
-  
+export function refreshPage (type: string, store: any) {
+  const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
+  if (type) {
+    const sectionUiSchema = {
+      Core: CoreSection,
+      Value: ValueTab,
+      Style: StyleSection,
+      Event: EventSection(store.theme.myTheme),
+      Components: TableSection(store.theme.myTheme),
+      Properties: buildPropertiesSection(type),
+      Validation: ValidationSection
+    }
+    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];
   }
-  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,ValidationSection];
- 
-}
-store.setUiSchema(UiSchema);
+  if (sessionStorage.getItem("copiedConfig") ) {
+    this.ElementPathSetter(UiSchema);
+  }
+  store.setUiSchema(UiSchema);
 }
 
 export default (store: any, dynamicData: any, submitHandler: any, service: any) => {
@@ -67,33 +70,37 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const formdata = await this.getFormdata();
       store.setFormdata(formdata);
       const schema = this.getSchema();
-      store.setSchema(schema); 
-     this.refreshPage(formdata?.type, store);
-    
+      store.setSchema(schema);
+      this.refreshPage(formdata?.type, store);
+
     },
-    refreshPage:refreshPage,
+    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"),
+    okHandler: () => okHandler(store),
+    saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
     onChange: function () {
       if (
         store?.formData?.type !== store?.newData?.type &&
         store?.newData?.type !== undefined
       ) {
-        this.refreshPage(store?.newData?.type,store);
+        this.refreshPage(store?.newData?.type, store);
       }
     },
     editComponents: function () {
       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}]`
@@ -104,27 +111,35 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         store.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`)
       }
     },
-    deleteComponents: function () {
+    deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = dynamicData.path.split(".")[1];
+      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");
+      }
+      sessionStorage.removeItem('rowId');
     },
-    deleteEvent: function () {
+    deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
-      const rowId = dynamicData.path.split(".")[1];
+      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")
+      }
+      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)
@@ -135,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}`)
     },
@@ -145,19 +160,96 @@ 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}`)
     },
     backHandler: function () {
       store.navigate(-1)
     },
-  }
-};
-
-
-
+    deletePopUpComponent: function () {
+      const rowId = dynamicData.path.split(".")[1];
+      sessionStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpComponentSection");
+    },
+    deletePopUpEvent: function () {
+      const rowId = dynamicData.path.split(".")[1];
+      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 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}`;
+    }
+  }
+};

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

@@ -1,17 +1,19 @@
 import { EventSchema } from "../elements/UiSchema/event/schema";
 import { EventUiSchema } from "../elements/UiSchema/event/uiSchema";
 import Component from "./component";
-import { okHandler, saveFormdataInLocalStorage, saveHandler } from "./utils";
+import { okHandler, saveFormdataInSessionStorage, saveHandler, getFormdataFromSessionStorage } from "./utils";
 import { APISection } from "../build/uischema/apiSection";
-import { getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
+import { getRadioInputField, getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
 import { refreshSectionUiSchema } from "../build/uischema/refresh";
 import _ from "lodash";
+import emptyBox from "../build/uischema/emptyBox";
 
 export default (
   store: any,
   dynamicData: any,
   submitHandler: any,
-  service: any
+  service: any,
+  functionsName?: { const: string, title: string }[]
 ) => {
   return {
     setPage: async function () {
@@ -22,31 +24,71 @@ export default (
       this.refreshPage(formdata.Handler, store)
     },
     refreshPage: (handlerType: any, store: any) => {
-      const uiSchema = _.cloneDeep(EventUiSchema);
+      const uiSchema = _.cloneDeep(EventUiSchema(store.theme.myTheme));
       const schema: any = _.cloneDeep(EventSchema)
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[1].elements[0].elements[2] = getTextArea("eventCode", "Write Custom Code", false)
+          uiSchema.elements[1].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+          
+            config: {
+              layout: { xs: 0, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style:{}
+            },
+          };
+          uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false)
           schema.required = ["eventType", "Handler", "eventCode"]
 
         } else if (handlerType === "api") {
-          uiSchema.elements[1].elements[0].elements[2] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = APISection;
           schema.required = ["eventType", "Handler", "method", "path"]
         } else if (handlerType === "inBuiltFunction") {
+          
           uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name", [
             { label: "RankProvider", value: "RankProvider" },
             { label: "Download File", value: "downloadFile" },
             { label: "Download Blob File", value: "downloadBlobFile" }
           ])
-          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, { xs: 12, sm: 12, md: 6 });
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox",
+            },
+          
+            config: {
+              layout: { xs: 6, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style:{}
+            },
+          };
+          uiSchema.elements[1].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
         } else if (handlerType === "refresh") {
-          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
           schema.properties.refreshElements.required = ["value"]
           schema.properties.refreshElements.items.required = ["value"]
           schema.required = ["eventType", "Handler", "refreshElements"]
         }
       }
+      if (functionsName) {
+        schema.properties.inBuiltFunctionType.oneOf = [
+          ...schema.properties.inBuiltFunctionType.oneOf,
+          ...functionsName
+        ]
+      }
+      if (sessionStorage.getItem("copiedConfig") ) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(uiSchema);
+        schema.properties.RemoveItemButton.disabled = false;
+      }
       store.setSchema(schema)
       store.setUiSchema(uiSchema)
     },
@@ -56,10 +98,14 @@ 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"),
+    saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
     onChange: function () {
       if (
         store?.formData?.Handler !== store?.newData?.Handler &&
@@ -73,7 +119,7 @@ export default (
       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.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
@@ -82,16 +128,31 @@ export default (
     editEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
-      saveFormdataInLocalStorage(store.ctx.core.data, path)
+      saveFormdataInSessionStorage(store.ctx.core.data, path)
       const finalPath = `${path}.events[${rowId}]`
       store.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
       this.setPage()
 
     },
-    deleteEvent: Component(store, dynamicData, submitHandler, service).deleteEvent,
+    deleteEvent: async function () {
+      await Component(store, dynamicData, submitHandler, service).deleteEvent(false);
+      store.updateDialog("popUpEvent");
+    },
     backHandler: function () {
       store.navigate(-1)
     },
+    deletePopUpEvent: function(){
+      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

@@ -2,19 +2,18 @@ import { PageMasterSchema } from "../elements/UiSchema/PageMaster/schema";
 import { PageMasterUiSchema } from "../elements/UiSchema/PageMaster/uiSchema";
 import _ from "lodash";
 import Component from "./component";
-import { getFormdataFromLocalStorage, saveFormdataInLocalStorage, saveHandler } from "./utils";
+import { getFormdataFromSessionStorage, saveFormdataInSessionStorage, saveHandler } from "./utils";
 
 
 interface funcParamsProps {
   store: any,
   dynamicData: any,
-
+  pageConfigProvider: any,
   submitHandler: any,
   service: any
-  config?: any
 }
 export default (funcParams: funcParamsProps) => {
-  const { store, dynamicData, config, submitHandler, service } = funcParams
+  const { store, dynamicData, submitHandler, service } = funcParams
   return {
     setPage: async function () {
       const formdata = await this.getFormdata();
@@ -24,23 +23,32 @@ export default (funcParams: funcParamsProps) => {
       store.setSchema(schema);
       store.setUiSchema(uiSchema);
     },
-    getFormdata: function () {
+    getFormdata: async function () {
       const id = store.searchParams?.get("id");
-      const formData = getFormdataFromLocalStorage()
+      const config: any = await funcParams.pageConfigProvider(id)
+      const formData = getFormdataFromSessionStorage()
       if (formData) {
         return formData;
       }
-      saveFormdataInLocalStorage(config)
+      saveFormdataInSessionStorage(config)
       return config
     },
     getUiSchema: function () {
-      return PageMasterUiSchema;
+      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: () => {
-      localStorage.removeItem("pageFormdata")
+      sessionStorage.removeItem("pageFormdata")
       store.navigate("/PageMasterRecords");
     },
     onAddClickHandler: function () {
@@ -48,35 +56,68 @@ export default (funcParams: funcParamsProps) => {
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
-      const response = saveFormdataInLocalStorage(store.ctx.core.data)
-      store.navigate(
-        `/Component?path=${`elements[${response?.elements.length}]`}&id=${id}`
-      );
+      const response = saveFormdataInSessionStorage(store.ctx.core.data)
+      if (id) {
+        store.navigate(
+          `/Component?path=${`elements[${response?.elements.length}]`}&id=${id}`
+        );
+      } else {
+        store.navigate(
+          `/Component?path=${`elements[${response?.elements.length}]`}`
+        );
+      }
+
     },
-    saveHandler: async ()=> await saveHandler(store,service,submitHandler),
+    saveHandler: async () => await saveHandler(store, service, submitHandler),
     Edit_Components: Component(store, dynamicData, submitHandler, service).editComponents,
-    Delete_Components: Component(store, dynamicData, submitHandler, service).deleteComponents,
+    
+    Delete_Components: async function() {
+      await Component(store, dynamicData, submitHandler, service).deleteComponents(false);
+      store.updateDialog("popUpPageMasterComponent");
+    },
     eventAddHandler: function () {
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
-      saveFormdataInLocalStorage(store.ctx.core.data)
+      saveFormdataInSessionStorage(store.ctx.core.data)
       const finalPath = `events[${store.formData.events.length}]`
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     editEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
       const id = store.searchParams?.get("id");
-      saveFormdataInLocalStorage(store.ctx.core.data)
+      saveFormdataInSessionStorage(store.ctx.core.data)
       const finalPath = `events[${rowId}]`
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     deleteEvent: function () {
-      const rowId = dynamicData.path.split(".")[1];
+      const rowId = sessionStorage.getItem('rowId');
       store.formData.events.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store.ctx.core.data)
+      const response = saveFormdataInSessionStorage(store.ctx.core.data)
       store.setFormdata(response);
+      store.updateDialog("popUpPageMasterEvent");
+      sessionStorage.removeItem('rowId');
+    },
+    deletePopUpComponent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      sessionStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      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)
     },
+    
   }
 };