impaktapps-ui-builder 0.0.99 → 0.0.101-alpha.1

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";
@@ -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);
 }
@@ -79,10 +80,14 @@ 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"),
+    saveHandler: async () => await saveHandler(store, service, submitHandler),
     onChange: function () {
       if (
         store?.formData?.type !== store?.newData?.type &&
@@ -172,5 +177,86 @@ 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");
+      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}`;
+    }
   }
 };

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,10 @@ export default (
           ...functionsName
         ]
       }
+      if (sessionStorage.getItem("copiedConfig") ) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(uiSchema);
+        schema.properties.RemoveItemButton.disabled = false;
+      }
       store.setSchema(schema)
       store.setUiSchema(uiSchema)
     },
@@ -94,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),
     onChange: function () {
       if (
         store?.formData?.Handler !== store?.newData?.Handler &&
@@ -138,6 +146,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)
+    },
+    
   }
 };

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

@@ -57,7 +57,7 @@ export const getFormdataFromSessionStorage = (path?: string) => {
 
 }
 
-export async function saveHandler(store, service, submitHandler, pageName?: string) {
+export async function saveHandler(store, service, submitHandler) {
     const id = store.searchParams?.get("id");
     const path = store.searchParams?.get("path");
     saveFormdataInSessionStorage(store.ctx.core.data, path);
@@ -65,7 +65,7 @@ export async function saveHandler(store, service, submitHandler, pageName?: stri
     if (_.isEmpty(store.ctx.core.errors)) {
         try {
             const saveReturn = await submitHandler(store, service, config);
-            navigateHandler(store, true, pageName ? `/${pageName}?id=${saveReturn.id}` : "/PageMasterRecords")
+            navigateHandler(store, true,"/PageMasterRecords")
         } catch (err) {
             navigateHandler(store, false)
         }

package/src/impaktapps-ui-builder/runtime/services/events.ts

@@ -146,32 +146,36 @@ function executeCustomHandler(params: handlersProps) {
 }
 
 function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any, formDataHolder: any) {
-  if (eventConfig.type === "Select"  && handlerResponse?.data && !_.isEmpty(handlerResponse?.data)) {
-    store.setSchema((pre) => {
-      return {
-        ...pre, properties: {
-          ...pre.properties, [componentName]: {
-            ...pre.properties?.[componentName],
-            oneOf: handlerResponse.data
+  if (eventConfig.type === "Select" && handlerResponse?.data) {
+    if (!_.isEmpty(handlerResponse?.data)) {
+      store.setSchema((pre) => {
+        return {
+          ...pre, properties: {
+            ...pre.properties, [componentName]: {
+              ...pre.properties?.[componentName],
+              oneOf: handlerResponse.data
+            }
           }
         }
-      }
-    })
+      })
+    }
   }
-  else if (eventConfig.type === "MultipleSelect" && handlerResponse?.data && !_.isEmpty(handlerResponse?.data)) {
-    store.setSchema((pre) => {
-      return {
-        ...pre, properties: {
-          ...pre.properties, [componentName]: {
-            ...pre.properties?.[componentName],
-            type: "array",
-            items: {
-              oneOf: handlerResponse?.data
+  else if (eventConfig.type === "MultipleSelect" && handlerResponse?.data) {
+    if (!_.isEmpty(handlerResponse?.data)) {
+      store.setSchema((pre) => {
+        return {
+          ...pre, properties: {
+            ...pre.properties, [componentName]: {
+              ...pre.properties?.[componentName],
+              type: "array",
+              items: {
+                oneOf: handlerResponse?.data
+              }
             }
           }
         }
-      }
-    })
+      })
+    }
   }
   else if (eventConfig.type === "page") {
     if (!(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {

package/src/impaktapps-ui-builder/runtime/services/service.ts

@@ -97,26 +97,129 @@ export default (funcParams: funcParamsProps) => {
       const theme = funcParams?.store?.theme?.myTheme;
       uiSchema.elements.push(
 
+        // {
+        //   type: "HorizontalLayout",
+        //   config: {
+        //     main: {
+        //       direction: "row",
+        //     },
+        //     style: {
+        //       flexDirection: "row",
+        //       position: "absolute",
+        //       bottom: 0,
+        //       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: "12px",
+        //           textAlign: "center",
+        //           lineHeight: 2,
+        //           width: "fit-content",
+        //           left: "50%",
+        //           position: "relative",
+        //           margin: 0,
+        //           flexGrow: 1,
+        //           height: 0,
+        //           transform: "translate(-50%, 0%)",
+        //         },
+        //       },
+        //     },
+        //     {
+        //       type: "Control",
+        //       scope: "#/properties/FooterBackIcon",
+        //       options: {
+        //         widget: "Box",
+        //       },
+        //       config: {
+        //         main: {
+        //           iconName: "PrevIcon",
+        //           onClick: "backHandler",
+        //           width: "fit-content",
+        //         },
+        //         style: {
+        //           fill: theme?.palette?.primary?.main,
+        //           width: 20,
+        //           height: 0,
+        //           // margin: 0,
+        //           top: 0,
+        //           right: { xs: "12px", sm: "84px" },
+        //           position: "absolute",
+        //           fontSize: "12px",
+        //           cursor: "pointer",
+        //           ":hover": {
+        //             fill: theme?.palette?.primary?.dark,
+        //           },
+        //           marginRight: "13px",
+        //         },
+        //       },
+        //     },
+        //     {
+        //       type: "Control",
+        //       scope: "#/properties/FooterBackHandlerText",
+        //       options: {
+        //         widget: "Box",
+        //       },
+        //       config: {
+        //         main: {
+        //           heading: "Previous Page",
+        //           onClick: "backHandler",
+        //         },
+        //         style: {
+        //           display: { xs: "none", sm: "flex" },
+        //           textAlign: "left",
+        //           lineHeight: 1,
+        //           height: 0,
+        //           width: "fit-content",
+        //           color: theme?.palette?.primary?.main,
+        //           fontSize: "14px",
+        //           cursor: "pointer",
+        //           marginLeft: "2px",
+        
+        //           top: 3,
+        //           right: "12px",
+        //           position: "absolute",
+        //           ":hover": {
+        //             color: theme?.palette?.primary?.dark,
+        //           },
+        //           marginRight: "4px",
+        //         },
+        //       },
+        //     },
+        //   ],
+        // }
         {
           type: "HorizontalLayout",
           config: {
             main: {
-              direction: 'row'
+              direction: "row",
             },
             style: {
               flexDirection: "row",
               position: "absolute",
               bottom: 0,
-              marginBottom: '-8px',
-              height: 'fit-content',
-              overflow: 'hidden',
+              height: "fit-content",
+              overflow: "hidden",
               zIndex: 1000,
-              width: 'inherit'
-            }
+              width: "inherit",
+            },
           },
           elements: [
             {
-
               type: "Control",
               scope: "#/properties/FooterText",
               options: {
@@ -124,84 +227,85 @@ export default (funcParams: funcParamsProps) => {
               },
               config: {
                 main: {
-                  heading: "Copywriter@ACT21.IO"
+                  heading: "Copywriter@ACT21.IO",
                 },
                 style: {
-                  color: theme?.palette?.text.disabled || "#AFAFAF",
-                  fontSize: '12px',
-                  textAlign: 'center',
+                  color: theme?.palette?.text?.disabled || "#AFAFAF",
+                  fontSize: "11px",
+                  textAlign: "center",
                   lineHeight: 2,
-                  width: 'fit-content',
-                  left: '50%',
-                  position: 'relative',
+                  width: "fit-content",
+                  left: "50%",
+                  position: "relative",
                   margin: 0,
                   flexGrow: 1,
                   height: 0,
-                  transform: "translate(-50%,0%)"
-                }
+                  transform: "translate(-50%, 0%)",
+                },
               },
             },
             {
               type: "Control",
-              scope: "#/properties/backIcon",
+              scope: "#/properties/FooterBackIcon",
               options: {
                 widget: "Box",
               },
               config: {
                 main: {
-                  iconName: 'PrevIcon',
+                  iconName: "PrevIcon",
                   onClick: "backHandler",
-                  width: 'fit-content',
+                  width: "fit-content",
                 },
                 style: {
-                  fill: theme.palette.primary.main,
+                  fill: theme?.palette?.primary?.main,
                   width: 20,
                   height: 0,
-                  margin: 0,
+                  // margin: 0,
                   top: 0,
-                  right: {xs: '12px', sm: '84px'},
-                  position: 'absolute',
-                  fontSize: '12px',
-                  cursor: 'pointer',
-                  ':hover': {
-                    fill: theme.palette.primary.dark,
-                  }
-                }
-              }
+                  right: { xs: "12px", sm: "84px" },
+                  position: "absolute",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  ":hover": {
+                    fill: theme?.palette?.primary?.dark,
+                  },
+                  marginRight: "20px",
+                },
+              },
             },
             {
               type: "Control",
-              scope: "#/properties/text",
-    
+              scope: "#/properties/FooterBackHandlerText",
               options: {
                 widget: "Box",
               },
               config: {
                 main: {
                   heading: "Previous Page",
-                  onClick: "backHandler"
+                  onClick: "backHandler",
                 },
                 style: {
-                  display: {xs: 'none', sm: "flex"},
-                  textAlign: 'left',
+                  display: { xs: "none", sm: "flex" },
+                  textAlign: "left",
                   lineHeight: 1,
                   height: 0,
-                  width: 'fit-content',
-                  color: theme.palette.primary.main,
+                  width: "fit-content",
+                  color: theme?.palette?.primary?.main,
                   fontSize: "12px",
-                  cursor: 'pointer',
-                  marginLeft: '2px',
-                  marginRight: 0,
+                  cursor: "pointer",
+                  marginLeft: "2px",
+        
                   top: 3,
-                  right: '12px',
-                  position: 'absolute',
-                  ':hover': {
-                    color: theme.palette.primary.dark,
-                  }
-                }
+                  right: "12px",
+                  position: "absolute",
+                  ":hover": {
+                    color: theme?.palette?.primary?.dark,
+                  },
+                  marginRight: "4px",
+                },
               },
             },
-          ]
+          ],
         }
       );
       const schema = pageData?.schema ?? { type: "object", properties: {} };