impaktapps-ui-builder 0.0.974 → 0.0.1051

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

@@ -38,11 +38,13 @@ 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 function refreshPage (type: string, store: any) {
+export function refreshPage(type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
+  const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
@@ -57,7 +59,95 @@ export function refreshPage (type: string, store: any) {
     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") ) {
+  // Get Widget Type of parent
+  const path = store.searchParams?.get("path");
+  const lastDotIndex = path.lastIndexOf('.')
+  const parentPath = path.slice(0, lastDotIndex)
+
+  const parentObj = _.get(currentConfig, parentPath)
+
+  if (parentObj?.type === "Table") {
+    UiSchema.elements[1].elements[0].elements[3] =
+    {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format",
+
+        },
+      },
+    };
+    UiSchema.elements[1].elements[0].elements[4] =
+    {
+      type: "Control",
+      scope: "#/properties/enableFilter",
+      options: {
+        widget: "RadioInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Filter",
+          options: ["Yes", "No"],
+        },
+      },
+    },
+      UiSchema.elements[1].elements[0].elements[5] =
+      {
+        type: "Control",
+        scope: "#/properties/filteringOptions",
+        options: {
+          widget: "SelectInputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Filter Mode",
+            multiple: true
+          },
+        },
+      };
+
+    UiSchema.elements[0].elements[0].elements[6] =
+    {
+      type: "Control",
+      scope: "#/properties/enableSorting",
+      options: {
+        widget: "RadioInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Sorting",
+          options: ["Yes", "No"],
+        },
+      },
+    },
+      UiSchema.elements[0].elements[0].elements[7] =
+      {
+        type: "Control",
+        scope: "#/properties/columnKey",
+
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: "Column Key",
+            options: [],
+            color: "secondary",
+            required: true,
+          },
+        },
+      }
+  }
+  if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
   store.setUiSchema(UiSchema);
@@ -80,13 +170,13 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     getSchema: function () {
       const schema = _.cloneDeep(ComponentSchema);
-      if (sessionStorage.getItem("copiedConfig") ) {
+      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 &&
@@ -168,22 +258,22 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpEventSection");
     },
 
-    copyPasteElement: function(paramStore: any, setPage: any = this.setPage.bind(this) ){
+    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 );
+    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];
@@ -191,13 +281,13 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
       const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
 
-      this.ElementPathSetter(uiSchema,copiedFormData);
-      sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      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") ) {
+    },
+    PasteElement: function (setPage: any, elementType: string) {
+      if (!sessionStorage.getItem("copiedConfig")) {
         store.setNotify({
           FailMessage: "No item has been copied.",
           Fail: true,
@@ -205,8 +295,15 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         return;
       }
       const pastedElementParentPath = store.searchParams?.get("path");
-      const formData =  getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex =  elementType === "Component" ? formData.elements.length : formData.events.length;
+      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"));
@@ -214,25 +311,25 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         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"){
+      if (copiedConfig.Handler && elementType === "Component") {
         store.setNotify({
           FailMessage: notificationMessages.Event,
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Event"){
+      else if (copiedConfig.name && elementType === "Event") {
         store.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true,
         });
       }
-      else{
+      else {
         saveFormdataInSessionStorage(copiedConfig, pastedElementPath);
         setPage();
       }
-    },    
-    RemoveItemButton: function(paramStore: any = store){
-      const schema = cloneDeep(paramStore.schema );
+    },
+    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`;
@@ -240,15 +337,15 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       store.setSchema(schema);
       store.setUiSchema(uiSchema);
     },
-    elementPathHandler: function(parentPath: string, rowId: any, elementType: string){
-      if(elementType === "Component"){
-         return parentPath ? `${parentPath}.elements[${rowId}]`  : `elements[${rowId}]`;
+    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}]`;
+      return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
-    ElementPathSetter: function(uiSchema: any,copiedFormData?: any){
+    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}`;
+      uiSchema.elements[2].elements[1].config.main.heading = `Copied Path: ${formData.pageName}`;
     }
   }
 };

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

@@ -105,7 +105,7 @@ export default (
       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 &&

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

@@ -1,4 +1,4 @@
-import _, { cloneDeep } from "lodash";
+import _ from "lodash";
 import { handlersProps } from "./interface";
 export const executeEvents = (params: handlersProps) => {
   let nextEvent = [];
@@ -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)) {
@@ -182,6 +186,13 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
       store.setFormdata((pre: any) => { return { ...pre, ...handlerResponse?.data } })
     }
   }
+  else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
+    if (handlerResponse && handlerResponse?.data) {
+      formDataHolder[componentName] = handlerResponse.data?.data
+      formDataHolder[`${componentName}_RowCount`] = handlerResponse.data?.meta?.totalRowCount
+      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
+    }
+  }
   else {
     if (handlerResponse) {
       formDataHolder[componentName] = handlerResponse.data

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

@@ -189,7 +189,7 @@ export default (funcParams: funcParamsProps) => {
                   fontSize: "14px",
                   cursor: "pointer",
                   marginLeft: "2px",
-        
+
                   top: 3,
                   right: "12px",
                   position: "absolute",
@@ -214,12 +214,12 @@ export default (funcParams: funcParamsProps) => {
       await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups, formDataHolder
+        serviceHolder: this, eventGroups, formDataHolder: {}
       })
       funcParams.store.setSchema(
         (pre: any) => {
           return {
-            ...schema,...pre, properties:
+            ...schema, ...pre, properties:
               { ...schema.properties, ...pre.properties, }
           }
         }
@@ -231,7 +231,8 @@ export default (funcParams: funcParamsProps) => {
       if (eventGroups.onCellRenderer) {
         let finalResponse = {};
         const path = funcParams.dynamicData?.tableButtonPath || funcParams?.dynamicData?.path?.split(".")[0];
-        for (const eventConfig of eventGroups?.onCellRenderer[path]) {
+
+        for (const eventConfig of eventGroups?.onCellRenderer?.[path]) {
           executeEventsParameters.store.functionParameters = cellParams
           finalResponse = executeEvents({
             ...executeEventsParameters,