impaktapps-ui-builder 0.0.383 → 0.0.385

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

@@ -0,0 +1 @@
+export declare const buildPopUp: (config: any, componentScope: any) => any;

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

@@ -0,0 +1 @@
+export declare const buildStepper: (config: any, componentScope: any) => any;

package/dist/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/schema.d.ts

@@ -22,6 +22,12 @@ export declare const PageMasterSchema: {
                 };
             };
         };
+        template: {
+            oneOf: {
+                const: string;
+                title: string;
+            }[];
+        };
         sectionLabels: {
             type: string;
             items: {

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

@@ -33,6 +33,12 @@ declare const _default: (funcParams: funcParamsProps) => {
                     };
                 };
             };
+            template: {
+                oneOf: {
+                    const: string;
+                    title: string;
+                }[];
+            };
             sectionLabels: {
                 type: string;
                 items: {

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

@@ -1 +1,2 @@
 export declare const downloadFile: (obj: any) => void;
+export declare const doDownload: (response: any, service: any) => void;

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

@@ -17,6 +17,11 @@ declare const _default: (funcParams: funcParamsProps) => {
     getSelectOptions: (param: any) => Promise<any>;
     onChange: () => Promise<void>;
     updateConfigApiBody: (paramValue: any, apiBody: any) => Promise<any>;
+    onBack: (functionParameters: any) => Promise<void>;
+    onNext: (functionParameters: any) => Promise<void>;
+    onReset: (functionParameters: any) => Promise<void>;
+    callHandler: (eventType: string, functionParameters?: any) => Promise<void>;
     downloadFile: (obj: any) => void;
+    download: (response: any, service: any) => void;
 };
 export default _default;

package/package.json

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

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

@@ -24,7 +24,7 @@ const FileInput = {
   export const buildFileInput = (config,componentScope) => {
     const box: any = _.cloneDeep(FileInput);
     box.scope = componentScope;
-    box.config.main.heading = config.label
+    box.config.main.label = config.label
     if(config.layout){
       box.config.layout = createLayoutFormat(config.layout)
     }

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

@@ -0,0 +1,43 @@
+import { createLayoutFormat } from "./buildConfig";
+import WrapperSection from "./uischema/wrapperSection";
+import _ from "lodash";
+
+const PopUP =  {
+    type: "Control",
+    scope: "#/properties/text",
+    options: {
+      widget: "PopUp",
+    },
+    config: {
+      layout: {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+      },
+      main: {
+        label: "PopUp",
+        fullScreen:false,
+        fullWidth:false,
+        maxWidth:false,
+        alignItems:false,
+        spacing:2
+      },
+      style:{}
+    },
+  }
+export const buildPopUp = (config,componentScope) =>{
+    const popup: any = _.cloneDeep(PopUP);
+    popup.scope = componentScope;
+    popup.config.main.title = config.label;
+    popup.config.main.fullScreen = config.fullScreen === "YES" ? true : false;
+    popup.config.main.fullWidth = config.fullWidth === "YES" ? true : false;
+    popup.config.main.maxWidth = config.maxWidth||false;
+    if (config.layout) {
+      popup.config.layout = createLayoutFormat(config.layout)
+    }
+    if (config.style) {
+      PopUP.config.style = JSON.parse(config.style)
+  }
+    return popup;
+}

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

@@ -21,7 +21,7 @@ const RadioUiSchema = {
   export const buildRadio = (config,componentScope) => {
     const Radio: any = _.cloneDeep(RadioUiSchema);
     Radio.scope = componentScope;
-    Radio.config.main.heading = config.label
+    Radio.config.main.label = config.label
     if(config.layout){
         Radio.config.layout = createLayoutFormat(config.layout)
     }

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

@@ -0,0 +1,42 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const Stepper = {
+    type: "Control",
+    scope: "#/properties/Stepper",
+    options: {
+        widget: "Stepper",
+    },
+
+    config: {
+        main: {
+            steps:[{label:"First"}, {label:"Second"},{label: "Third"}],
+            resetButton: false,
+            resetText: "Reset",
+            orientation: "vertical"
+        },
+    },
+    "elements":
+        [],
+};
+
+export const buildStepper = (config, componentScope) => {
+    const stepper: any = _.cloneDeep(Stepper);
+    stepper.scope = componentScope;
+    stepper.config.main.resetButton = config.resetButton === "YES" ? true : false;
+    stepper.config.main.resetText = config.resetText || "ResetData";
+    stepper.config.main.completeText = config.completeText || "Complete Text";
+    stepper.config.main.orientation = config.orientation || "horizontal";
+    if (config.sectionLabels) {
+        stepper.config.main.label = config.sectionLabels.map((e, i: number) => {
+            return { label: e.label, id: i }
+        });
+    }
+    if (config.layout) {
+        stepper.config.layout = createLayoutFormat(config.layout)
+    }
+    if (config.style) {
+        stepper.config.style = JSON.parse(config.style)
+    }
+    return stepper;
+}

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

@@ -34,6 +34,8 @@ import { buildEmptyBox } from "./buildEmptyBox";
 import { buildArray } from "./buildArray";
 import { buildAdhaarField, buildPanField } from "./buildAadharCard";
 import { buildFileInput } from "./buildFileInput";
+import { buildStepper } from "./buildStepper";
+import { buildPopUp } from "./buildPop";
 export let schema = {
   type: "object",
   properties: {},
@@ -164,6 +166,12 @@ const buildUiSchema = (config: any) => {
   let elements: any = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
+    case "Stepper":
+      elements = buildStepper(config, componentScope);
+      break;
+    case "PopUp":
+      elements = buildPopUp(config, componentScope);
+      break;
     case "FileInput":
       elements = buildFileInput(config, componentScope);
       break;

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

@@ -5,5 +5,8 @@ export const buildWrapperSection = (config,componentScope) =>{
     const wrapper: any = _.cloneDeep(WrapperSection);
     wrapper.config.main.label = config.label;
     wrapper.config.main.divider = config.divider === "YES" ? true : false;
+    if (config.style) {
+        wrapper.config.style = JSON.parse(config.style)
+      }
     return wrapper;
 }

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

@@ -160,6 +160,28 @@ const GraphSection = {
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(GraphSection);
   switch (type) {
+    case "Stepper":
+      uiSchema.elements = [
+        getRadioInputField("resetButton", "Reset Button", ["YES", "NO"]),
+        getInputField("resetText", "Reset Text"),
+        getInputField("completeText", "Complete Text"),
+        getSelectField("orientation", "Orientation Type", [
+          { label: "Horizontal", value: "horizontal" },
+          { label: "Vertical", value: "vertical" },
+        ]),
+        EmptyBox,
+        getArrayControl("sectionLabels", "label")
+
+      ]
+      break;
+    case "PopUp":
+      uiSchema.elements = [
+        getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
+        getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
+        getInputField("maxWidth", "Max. Width"),
+        EmptyBox
+      ]
+      break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),

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

@@ -19,11 +19,13 @@ export const ComponentSchema: any = {
         { title: "LeaderBoard", const: "LeaderBoard" },
         { title: "MultipleSelect", const: "MultipleSelect" },
         { title: "PanCardText", const: "PanCardText" },
+        { title: "Popup Container", const: "PopUp" },
         { title: "ProgressBar", const: "ProgressBar" },
         { title: "ProgressBar Card", const: "ProgressBarCard" },
         { title: "Select", const: "Select" },
         { title: "Slider", const: "Slider" },
         { title: "SpeedoMeter", const: "SpeedoMeter" },
+        { title: "Stepper Container", const: "Stepper" },
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
@@ -35,6 +37,11 @@ export const ComponentSchema: any = {
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },]
     },
+    orientation:{
+      oneOf: [
+      { title: "Horizontal", const: "horizontal" },
+      { title: "Vertical", const: "vertical" },
+    ]},
     method: {
       type: "string",
       oneOf: [

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

@@ -1,39 +1,48 @@
-export const PageMasterSchema  = {
-    type: "object",
-    properties: {
-      name:{
-     type:"string",
-     minLength: 6,
-    //  pattern: '^page_\\w+$'
-      },
-      label:{
-        type:"string",
-      },
-      layout: {
-        type: "array",
-        items: {
-          type: "object",
-          properties: {
-            layout_key: {
-              type: "string",
-            },
-            layout_value: {
-              type: "string",
-            },
+import { template } from "lodash";
+
+export const PageMasterSchema = {
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      minLength: 6,
+      //  pattern: '^page_\\w+$'
+    },
+    label: {
+      type: "string",
+    },
+    layout: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          layout_key: {
+            type: "string",
+          },
+          layout_value: {
+            type: "string",
           },
         },
       },
+    },
+    template: {
+      oneOf: [
+        { const: "template1", title: "template1" },
+        { const: "template2", title: "template2" },
+        { const: "template3", title: "template3" }
+      ]
+    },
     sectionLabels: {
-        type: "array",
-        items: {
-          type: "object",
-          properties: {
-            label: {
-              type: "string",
-            }
-          },
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          }
         },
-      }
-},
-required:["label","name"]
+      },
+    }
+  },
+  required: ["template", "name"]
 }

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

@@ -80,16 +80,20 @@ export const PageMasterUiSchema: any = {
         },
         {
           type: "Control",
-          scope: "#/properties/label",
+          scope: "#/properties/template",
 
           options: {
-            widget: "InputField",
+            widget: "SelectInputField",
           },
           config: {
             layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
             main: {
-              label: "Label",
-              options: [],
+              label: "Template",
+              options: [
+                {const:"template1",title:"template1"},
+                {const:"template2",title:"template2"},
+                {const:"template3",title:"template3"}
+              ],
               color: "secondary",
               required: true,
             },

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

@@ -39,12 +39,15 @@ export const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Click Event", const: "onClick" },
-        { title: "onStart", const: "onStart" },
         { title: "Load Event", const: "onLoad" },
-        { title: "File Upload Event", const: "onUpload" },
-        { title: "File Download Event", const: "onDownload" },
         { title: "Change Event", const: "onChange" },
         { title: "Success", const: "Success" },
+        { title: "onStart", const: "onStart" },
+     
+        { title: "File Upload Event", const: "onUpload" },
+        { title: "Back Event", const: "onBack" },
+        { title: "Next Event", const: "onNext" },
+        { title: "File Download Event", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -62,6 +65,7 @@ export const EventSchema = {
       oneOf: [
         { title: "RankProvider", const: "RankProvider" },
         { title: "Download File", const: "downloadFile" },
+        { title: "Download", const: "download" },
       ]
     },
     body: {

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

@@ -33,6 +33,8 @@ const sectionLabels = {
   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"],
 }
 
 

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

@@ -58,7 +58,6 @@ export const getFormdataFromLocalStorage = (path?: string) => {
 }
 
 export async function saveHandler(store, service, submitHandler, pageName?: string) {
-    const id = store.searchParams?.get("id");
     const path = store.searchParams?.get("path");
     saveFormdataInLocalStorage(store.ctx.core.data, path);
     const config = JSON.parse(localStorage.getItem("pageFormdata"));

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

@@ -1,17 +1,32 @@
-export  const downloadFile = (obj: any) => {
+export const downloadFile = (obj: any) => {
     const typeArr = obj.name.split(".");
     const data = obj.data;
     const finalData = window.atob(data);
-    let file ;
-    file = new File([finalData],  typeArr[typeArr.length - 1] );
-    
+    let file;
+    file = new File([finalData], typeArr[typeArr.length - 1]);
+
     const url = URL.createObjectURL(file);
     const link = document.createElement("a");
-    link.href = typeArr[typeArr.length - 1] === 'pdf' ?'data:application/octet-stream;base64,' + data: url;
+    link.href = typeArr[typeArr.length - 1] === 'pdf' ? 'data:application/octet-stream;base64,' + data : url;
     link.download = `${obj.name}`;
     document.body.appendChild(link);
     link.click();
-  
+
     URL.revokeObjectURL(url);
     document.body.removeChild(link);
-    };
+};
+
+export const doDownload = (response: any, service) => {
+    let url = `${service.defaults.baseURL}/${response.path}`;
+    if (response?.params) {
+        const keysArray = Object.keys(response?.params);
+        keysArray.map((e, i) => {
+            url = url + `${i === 0?"?":"&"}${e}=${response?.params[e]}`
+        })
+    }
+    const link = document.createElement('a');
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+    link.parentNode.removeChild(link);
+};

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

@@ -44,9 +44,18 @@ async function executeEventsHandler(params: handlersProps) {
   }
   else if (params.config.Handler === "mergeFormdata") {
     const result = await mergeFormdata(
-      params.parentEventOutput, params.componentName, params.config, params.store,params.service)
+      params.parentEventOutput, params.componentName, params.config, params.store, params.service)
     return result;
   }
+  else if (params.config.Handler === "onBackHandler") {
+    return params.store.functionParameters?.handleBack()
+  }
+  else if (params.config.Handler === "onNextHandler") {
+    return params.store.functionParameters?.handleNext()
+  }
+  else if (params.config.Handler === "onResetHandler") {
+    return params.store.functionParameters?.handleReset()
+  }
 }
 export async function executeRefreshHandler(params: handlersProps) {
   const compToRefresh: string[] = getRefreshElements(params.config, params.eventGroups)
@@ -87,7 +96,7 @@ async function executeCustomHandler(params: handlersProps) {
   return response;
 }
 
-async function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any,service:any) {
+async function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
     store.setSchema((pre) => {
       return {
@@ -108,7 +117,7 @@ async function mergeFormdata(handlerResponse: any, componentName: string, eventC
             ...pre.properties?.[componentName],
             type: "array",
             items: {
-              oneOf: handlerResponse.data
+              oneOf: handlerResponse?.data
             }
           }
         }
@@ -123,7 +132,7 @@ async function mergeFormdata(handlerResponse: any, componentName: string, eventC
   else {
     if (handlerResponse) {
       store.setFormdata((pre) => { return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : handlerResponse.data } });
-      const demoData =  await service.get("https://jsonplaceholder.typicode.com/posts/1");
+      const demoData = await asyncOperation();
     }
   }
 }
@@ -165,7 +174,7 @@ async function shouldEventExecute(params: handlersProps) {
   if (startEvent?.length > 0) {
     const response = await executeEventsHandler({ ...params, config: startEvent[0] });
     return response;
-  }else{
+  } else {
     return true
   }
 }
@@ -203,3 +212,15 @@ export function getRefreshElements(eventConfig: any, eventGropus: any) {
   return result;
 }
 
+
+function asyncOperation() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const success = true;
+      if (success) {
+        resolve("Operation completed successfully!");
+        reject(new Error("Operation failed!"));
+      }
+    }, 50);
+  });
+}

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

@@ -1,5 +1,5 @@
-import _ from "lodash";
-import { downloadFile } from "./downloadFile";
+import _, { isEmpty } from "lodash";
+import { doDownload, downloadFile } from "./downloadFile";
 import { executeEvents, executeRefreshHandler } from "./events";
 import { handlersProps } from "./interface";
 let compType: string;
@@ -30,7 +30,10 @@ export const extractEvents = (eventConfig: any) => {
           return elem.eventType === "Success"
         })
         if (!(!!SuccessEvent) && event.eventType === "onLoad") {
-          event.events.push({ Handler: "mergeFormdata", eventType: "Success", type: compType,lazyLoading:eventConfig.lazyLoading==="YES"?true:false })
+          event.events.push({ Handler: "mergeFormdata", eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false })
+        }
+        if (!(!!SuccessEvent) && (event.eventType === "onBack" || event.eventType === "onNext"|| event.eventType === "onReset")) {
+          event.events.push({ Handler: `${event.eventType}Handler`, eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false })
         }
         eventGroups[event.eventType][eventConfigObj.name].push({ ...event, type: compType })
       });
@@ -59,7 +62,7 @@ export default (funcParams: funcParamsProps) => {
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: {downloadFile}, eventGroups
+    serviceHolder: { downloadFile,download:doDownload }, eventGroups
   };
   return {
     setPage: async function () {
@@ -76,54 +79,33 @@ export default (funcParams: funcParamsProps) => {
               { ...funcParams.schema.properties, ...pre.properties, }
           }
         }
-        )
+      )
       funcParams.uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(funcParams.uiSchema);
-      await executeRefreshHandler( {
+      await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         serviceHolder: this, eventGroups
       })
     },
     onClick: async function () {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups?.onClick[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        })
-      }
+      await this.callHandler("onClick")
     },
-    onFileDownload:async () =>{
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups?.onDownload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        })
-      }
+    onFileDownload: async function () {
+      await this.callHandler("onDownload")
     },
-    onFileUpload:async () =>{
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups?.onUpload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        })
-      }
+    onFileUpload: async function () {
+      await this.callHandler("onUpload")
     },
     onPaginationChange: async function (paginationValues) {
       const apiBody = [
         { key: "size", value: paginationValues.pagination.pageSize },
-        { key: "pageIndex", value: paginationValues.pagination.pageIndex  },
+        { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.columnFilters || [] },
         { key: "globalFilter", value: paginationValues.globalFilter ?? '' }
       ]
-      const response =  await this.updateConfigApiBody(paginationValues, apiBody);
+      const response = await this.updateConfigApiBody(paginationValues, apiBody);
       return response?.data;
     },
     getSelectOptions: async function (param) {
@@ -175,7 +157,42 @@ export default (funcParams: funcParamsProps) => {
       }
       return LastCallResponse
     },
-    downloadFile: downloadFile
+    onBack: async function (functionParameters) {
+      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onBack", functionParameters)
+      if (eventGroups?.["onBack"]?.[path] === undefined) {
+        functionParameters?.handleBack()
+      }
+    },
+    onNext: async function (functionParameters) {
+      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onNext", functionParameters)
+      if (eventGroups?.["onNext"]?.[path] === undefined) {
+        functionParameters?.handleNext()
+      }
+    },
+    onReset: async function (functionParameters) {
+      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onReset", functionParameters)
+      if (eventGroups?.["onReset"]?.[path] === undefined) {
+        functionParameters?.handleReset()
+      }
+    },
+    callHandler: async function (eventType: string, functionParameters?: any) {
+      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      if (eventGroups?.[eventType]?.[path] !== undefined) {
+        for (const eventConfig of eventGroups?.[eventType]?.[path]) {
+          executeEventsParameters.store.functionParameters = functionParameters
+          await executeEvents({
+            ...executeEventsParameters,
+            config: eventConfig,
+            componentName: path
+          })
+        }
+      }
+    },
+    downloadFile: downloadFile,
+    download:doDownload,
   };
 };