impaktapps-ui-builder 0.0.281 → 0.0.282

package/dist/src/impaktapps-ui-builder/builder/build/buildTable.d.ts

@@ -1 +1,2 @@
 export declare const buildTable: (config: any, componentScope: string) => any;
+export declare const buildLazyLoadingTable: (config: any, componentScope: string) => any;

package/dist/src/impaktapps-ui-builder/builder/build/uischema/lazyLoadingTable.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    type: string;
+    scope: string;
+    options: {
+        widget: string;
+    };
+    elements: any[];
+    config: {
+        main: {
+            columns: {};
+        };
+    };
+};
+export default _default;

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

@@ -11,6 +11,7 @@ interface funcParamsProps {
 declare const _default: (funcParams: funcParamsProps) => {
     setPage: () => Promise<void>;
     onClick: () => Promise<void>;
+    onPaginationChange: (paginationValues: any) => Promise<void>;
     onChange: () => Promise<void>;
     downloadFile: (obj: any) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.281",
+    "version": "0.0.282",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildTable.ts

@@ -1,13 +1,41 @@
 import Table from "./uischema/table";
 import _ from "lodash";
 import buildUiSchema  from "./buildUiSchema";
+import lazyLoadingTable from "./uischema/lazyLoadingTable";
 
-export const buildTable = (config:any,componentScope:string)=>{
-    const table: any = _.cloneDeep(Table);
-    table.scope = componentScope;
-    if (config.style) {
-      table.config.style = JSON.parse(config.style)
-    }
-    table.config.main.label = config.label;
-    return table;
+export const buildTable = (config: any, componentScope: string) => {
+  const table: any = _.cloneDeep(Table);
+  table.scope = componentScope;
+  if (config.style) {
+    table.config.style = JSON.parse(config.style)
+  }
+  if (config.SelectionAvailable) {
+    table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false
+  };
+  if (config.ColumnResizingAvailable) {
+    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? true : false
+  };
+  if (config.DragAvailable) {
+    table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false
+  };
+  return table;
+}
+
+export const buildLazyLoadingTable = (config: any, componentScope: string) => {
+  const table: any = _.cloneDeep(lazyLoadingTable);
+  table.scope = componentScope;
+  if (config.style) {
+    table.config.style = JSON.parse(config.style)
+  }
+  if (config.SelectionAvailable) {
+    table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false
+  };
+  if (config.ColumnResizingAvailable) {
+    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? false : true
+  };
+  if (config.DragAvailable) {
+    table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false
+  };
+  table.config.main.label = config.label;
+  return table;
 }

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -14,7 +14,7 @@ import { buildWrapperSection } from "./buildWrapperSection";
 import { buildTextField } from "./buildText";
 import { buildSelect } from "./buildSelect";
 import { buildButton } from "./buildButton";
-import { buildTable } from "./buildTable";
+import { buildLazyLoadingTable, buildTable } from "./buildTable";
 import { buildLabel } from "./buildLabel";
 import { buildUploadFile } from "./buildUplaodFile";
 import { buildDownloadFile } from "./buildDownloadFile";
@@ -144,6 +144,10 @@ const buildUiSchema = (config: any) => {
     case "Table":
       elements = buildTable(config, componentScope);
       break;
+    
+    case "LazyLoadingTable" :
+    elements = buildLazyLoadingTable(config, componentScope)
+    break; 
     case "Box":
       elements = buildLabel(config, componentScope);
       break;

package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts

@@ -248,6 +248,14 @@ export const buildPropertiesSection = function (type: String) {
       getArrayControl("sectionLabels", "label"),
     ]
   }
+  else if(type === "Table"||type === "LazyLoadingTable"){
+    uiSchema.elements =[
+      getRadioInputField("SelectionAvailable","Selection Available",["YES","NO"]),
+      getRadioInputField("ColumnResizingAvailable","ColumnResizing Available",["YES","NO"]),
+      getRadioInputField("DragAvailable","Drag Available",["YES","NO"]),
+      EmptyBox
+    ]
+ }
   else if (type === "Radio") {
     uiSchema.elements = [
       getArrayControl("sectionLabels", "label", "Options Of Radio"),

package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts

@@ -18,6 +18,7 @@ export const CoreSection = {
             { title: "Date", const: "Date" },
             { title: "CheckBox", const: "CheckBox" },
             { title: "Table", const: "Table" },
+            { title: "Lazy Loading Table", const: "LazyLoadingTable" },
             { title: "Array", const: "Array" },
             { title: "Container", const: "WrapperSection" },
             { title: "Tabs", const: "TabSection" },

package/src/impaktapps-ui-builder/builder/build/uischema/lazyLoadingTable.ts

@@ -0,0 +1,14 @@
+export default {
+    type: "Control",
+    scope: "#/properties/LazyLoadingTable",
+    options: {
+      widget: "LazyLoadingTable",
+    },
+    elements:[],
+    config: {
+      main: {
+        columns: {
+        },
+      },
+    },
+  };

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

@@ -106,6 +106,7 @@ export const componentBasicUiSchema: any = {
                     { title: "Date", const: "Date" },
                     { title: "CheckBox", const: "CheckBox" },
                     { title: "Table", const: "Table" },
+                    { title: "Lazy Loading Table", const: "LazyLoadingTable" },
                     { title: "Array", const: "Array" },
                     { title: "Container", const: "WrapperSection" },
                     { title: "Tabs", const: "TabSection" },

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

@@ -9,11 +9,11 @@ import { StyleSection } from "../build/uischema/styleSection";
 import { TableSection } from "../build/uischema/tableSection";
 import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
-
 const sectionLabels = {
   Select: ["Core", "Value", "style", "Event","Validation"],
   MultipleSelect: ["Core", "Value", "style", "Event","Validation"],
-  Table: ["Core", "Components", "style", "Event","Validation"],
+  Table: ["Core", "Components",  "Properties","style",  "Event","Validation"],
+  LazyLoadingTable:["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"],

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

@@ -39,6 +39,7 @@ export default (
       }
       store.setUiSchema(uiSchema)
     },
+
     getFormData: Component(store, dynamicData).getFormdata,
     getUiSchema: async function () {
       return EventUiSchema;
@@ -54,6 +55,7 @@ export default (
         this.refreshPage(store.newData.Handler||store.formdata.Handler,store)
       }
     },
+    
     saveHandler: Component(store, dynamicData).saveHandler,
     addEvent: async function () {
       const path = store.searchParams?.get("path");

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

@@ -161,7 +161,9 @@ async function mergeFormdata(handlerResponse: any, componentName: string, eventC
         }
       }
     })
-
+  }
+  else if (eventConfig.type === "LazyLoadingTable") {
+    store.setFormdata((pre) => { return { ...pre, [`${componentName}Backend`]: handlerResponse } });
   }
   else if (eventConfig.type === "page") {
     store.setFormdata((pre: any) => { return { ...pre, ...handlerResponse?.data } })
@@ -180,15 +182,19 @@ async function mergeFormdata(handlerResponse: any, componentName: string, eventC
 const buildBodyFormat = (body: any[], formData: any, userValue: any) => {
   const finalBody = { ...userValue?.payload };
   body.map((elem) => {
-    if (elem?.value?.startsWith("$userValue")) {
-      const finalpath = elem.value.substring(11);
-      finalBody[elem.key] = _.get(userValue, finalpath);;
-    }
-    else if (elem?.value?.startsWith("$")) {
-      const finalpath = elem.value.substring(1);
-      finalBody[elem.key] = _.get(formData, finalpath);;
-    } else {
+    if (elem?.value !== "string") {
       finalBody[elem.key] = elem.value;
+    } else {
+      if (elem?.value?.startsWith("$userValue")) {
+        const finalpath = elem.value.substring(11);
+        finalBody[elem.key] = _.get(userValue, finalpath);;
+      }
+      else if (elem?.value?.startsWith("$")) {
+        const finalpath = elem.value.substring(1);
+        finalBody[elem.key] = _.get(formData, finalpath);;
+      } else {
+        finalBody[elem.key] = elem.value;
+      }
     }
   })
   return finalBody;
@@ -216,9 +222,6 @@ async function shouldEventExecute(config, componentName,
     return response
   }
 }
-// if(!response){
-//   return {response:undefined,events:undefined};
-// }
 export async function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service) {
   if (compConfig?.headers) {
     headers = buildHeadersFormat(compConfig.headers)

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

@@ -75,6 +75,27 @@ export default (funcParams: funcParamsProps) => {
           this, eventGroups)
       }
     },
+    onPaginationChange: async (paginationValues) => {
+      for (const eventConfig of eventGroups?.onLoad[paginationValues.path]) {
+;
+        const bodyValues = [
+         {key: "size",value: paginationValues.pagination.pageSize},
+         {key: "start",value: paginationValues.pagination.pageIndex * paginationValues.pagination.pageSize},
+          {key:"filters",value: paginationValues.columnFilters || []},
+          {key:"globalFilter",value: paginationValues.globalFilter ?? ''}
+        ]
+        if (eventConfig.body) {
+          eventConfig.body = [
+            ...eventConfig.body,
+            ...bodyValues
+          ]
+        } else { eventConfig.body = bodyValues; };
+        await executeEvents(
+          eventConfig, paginationValues.path,
+          funcParams.store, funcParams.dynamicData, funcParams.userValue, funcParams.service,
+          this, eventGroups)
+      }
+    },
     onChange: async function () {
       if (eventGroups.onChange) {
         const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);