impaktapps-ui-builder 0.0.101-alpha.28 → 0.0.101-alpha.282

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

@@ -1,9 +1,19 @@
 import { EventSchema } from "../elements/UiSchema/event/schema";
 import { EventUiSchema } from "../elements/UiSchema/event/uiSchema";
 import Component from "./component";
-import { okHandler, saveFormdataInSessionStorage, saveHandler, getFormdataFromSessionStorage } from "./utils";
+import {
+  okHandler,
+  saveFormdataInSessionStorage,
+  saveHandler,
+  getFormdataFromSessionStorage,
+} from "./utils";
 import { APISection } from "../build/uischema/apiSection";
-import { emptyBox, getRadioInputField, getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
+import {
+  emptyBox,
+  getRadioInputField,
+  getSelectField,
+  getTextArea,
+} from "../build/uischema/buildPropertiesSection";
 import { refreshSectionUiSchema } from "../build/uischema/refresh";
 import _ from "lodash";
 
@@ -12,95 +22,178 @@ export default (
   dynamicData: any,
   submitHandler: any,
   service: any,
-  functionsName?: { const: string, title: string }[]
+  functionsName?: { const: string; title: string }[]
 ) => {
   return {
     setPage: async function () {
       const formdata = await this.getFormData();
       store.setFormdata(formdata);
       const schema = await this.getSchema();
+      console.log("SettingSchema>>",schema)
       store.setSchema(schema);
-      this.refreshPage(formdata.Handler, store)
+      this.refreshPage(formdata.Handler, store);
     },
     refreshPage: (handlerType: any, store: any) => {
       const uiSchema = _.cloneDeep(EventUiSchema(store.theme.myTheme));
-      const schema: any = _.cloneDeep(EventSchema)
+      const schema: any = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
+          uiSchema.elements[0].elements[0].elements[2] = getRadioInputField(
+            "isSync",
+            "Run in Sync",
+            ["Yes", "No"]
+          );
           uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
               widget: "EmptyBox",
             },
-          
+
             config: {
               layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
-              style:{}
+              style: {},
             },
           };
-          uiSchema.elements[0].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false)
-          schema.required = ["eventType", "Handler", "eventCode"]
-
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea(
+            "eventCode",
+            "Write Custom Code",
+            false
+          );
+          schema.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {xs: 0,sm: 0,md: 4,lg: 6});
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {
+            xs: 0,
+            sm: 0,
+            md: 4,
+            lg: 6,
+          });
           uiSchema.elements[0].elements[0].elements[3] = APISection;
-          schema.required = ["eventType", "Handler", "method", "path"]
+          schema.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
-          
-          uiSchema.elements[0].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[0].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[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
               widget: "EmptyBox",
             },
-          
+
             config: {
               layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
-              style:{}
+              style: {},
             },
           };
-          uiSchema.elements[0].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
-          schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea(
+            "funcParametersCode",
+            "Write Custom Code for Functions Parameter",
+            true
+          );
+          schema.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {xs: 0,sm: 0,md: 4,lg: 6});
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {
+            xs: 0,
+            sm: 0,
+            md: 4,
+            lg: 6,
+          });
           uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
-          schema.properties.refreshElements.required = ["value"]
-          schema.properties.refreshElements.items.required = ["value"]
-          schema.required = ["eventType", "Handler", "refreshElements"]
+          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
-        ]
+          ...functionsName,
+        ];
       }
-      if (sessionStorage.getItem("copiedConfig") ) {
-        Component(store, dynamicData, submitHandler, service).ElementPathSetter(uiSchema);
+      if (sessionStorage.getItem("copiedConfig")) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(
+          uiSchema
+        );
         schema.properties.RemoveItemButton.disabled = false;
       }
-      store.setSchema(schema)
-      store.setUiSchema(uiSchema)
+
+      
+      const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
+      const path = store.searchParams?.get("path");
+      const id = store.searchParams?.get("id");
+
+      let pathArray = [{label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}`}];
+
+      if (path) {
+        const pathArrayAll = path.split(".");
+        const arr: any = [];
+        pathArrayAll.map((e: string, i: number) => {
+          if (i === 0) {
+            arr.push(e);
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`);
+        });
+
+        arr.map((e) => {
+          const data = _.get(config, e);
+          pathArray.push({
+            label: data?.name || data?.eventType || "NewComponent",
+            path: data?.eventType ? `/ComponentEvents?path=${e}${id ? `&id=${id}` : ''}` : `/Component?path=${e}${id ? `&id=${id}` : ''}`,
+          });
+        });
+      }
+      schema.properties.pageName.path = pathArray;
+      store.setSchema(schema);
+      store.setUiSchema(uiSchema);
     },
 
-    getFormData: Component(store, dynamicData, submitHandler, service).getFormdata,
+    getFormData: Component(store, dynamicData, submitHandler, service)
+      .getFormdata,
     getUiSchema: function () {
       return EventUiSchema;
     },
     getSchema: () => {
       const schema = _.cloneDeep(EventSchema);
-      if (sessionStorage.getItem("copiedConfig") ) {
+      if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
+
+      const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
+      const path = store.searchParams?.get("path");
+      const id = store.searchParams?.get("id");
+
+      let pathArray = [{label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}`}];
+
+      if (path) {
+        const pathArrayAll = path.split(".");
+        const arr: any = [];
+        pathArrayAll.map((e: string, i: number) => {
+          if (i === 0) {
+            arr.push(e);
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`);
+        });
+
+        arr.map((e) => {
+          const data = _.get(config, e);
+          pathArray.push({
+            label: data?.name || data?.eventType || "NewComponent",
+            path: data?.eventType ? `/ComponentEvents?path=${e}${id ? `&id=${id}` : ''}` : `/Component?path=${e}${id ? `&id=${id}` : ''}`,
+          });
+        });
+      }
+      schema.properties.pageName.path = _.cloneDeep(pathArray);
       return schema;
     },
     okHandler: () => okHandler(store),
@@ -110,48 +203,72 @@ export default (
         store?.formData?.Handler !== store?.newData?.Handler &&
         store?.newData?.Handler !== undefined
       ) {
-        this.refreshPage(store.newData.Handler || store.formdata.Handler, store)
+        this.refreshPage(
+          store.newData.Handler || store.formdata.Handler,
+          store
+        );
       }
     },
     addEvent: function () {
       const path = store.searchParams?.get("path");
       if (!Array.isArray(store.formData.events)) {
-        store.formData.events = []
+        store.formData.events = [];
       }
-      saveFormdataInSessionStorage(store.ctx.core.data, path)
-      const finalPath = `${path}.events[${store.formData?.events?.length}]`
-      store.searchParams.set("path", finalPath)
-      store.setSearchParams(store.searchParams)
-      this.setPage()
+      saveFormdataInSessionStorage(store.ctx.core.data, path);
+      const finalPath = `${path}.events[${store.formData?.events?.length}]`;
+      store.searchParams.set("path", finalPath);
+      store.setSearchParams(store.searchParams);
+      this.setPage();
     },
     editEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
-      saveFormdataInSessionStorage(store.ctx.core.data, path)
-      const finalPath = `${path}.events[${rowId}]`
-      store.searchParams.set("path", finalPath)
-      store.setSearchParams(store.searchParams)
-      this.setPage()
-
+      saveFormdataInSessionStorage(store.ctx.core.data, path);
+      const finalPath = `${path}.events[${rowId}]`;
+      store.searchParams.set("path", finalPath);
+      store.setSearchParams(store.searchParams);
+      this.setPage();
     },
     deleteEvent: async function () {
-      await Component(store, dynamicData, submitHandler, service).deleteEvent(false);
+      await Component(store, dynamicData, submitHandler, service).deleteEvent(
+        false
+      );
       store.updateDialog("popUpEvent");
     },
     backHandler: function () {
-      store.navigate(-1)
+      store.navigate(-1);
     },
-    deletePopUpEvent: function(){
+    deletePopUpEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem("rowId", rowId);
       store.updateDialog("popUpEvent");
     },
-    copyPasteElement:  function(){
-      Component(store, dynamicData, submitHandler, service).copyPasteElement(store,this.setPage.bind(this));
+    copyPasteElement: function () {
+      Component(store, dynamicData, submitHandler, service).copyPasteElement(
+        store,
+        this.setPage.bind(this)
+      );
     },
-    RemoveItemButton: function(){
-      Component(store, dynamicData, submitHandler, service).RemoveItemButton(store)
+    RemoveItemButton: function () {
+      Component(store, dynamicData, submitHandler, service).RemoveItemButton(
+        store
+      );
     },
-
-  }
+    onNavigatePopupYes: function() {
+      try{
+        store.navigate(sessionStorage.getItem("pendingNavigatePath"))
+        store.updateDialog(`pageNamepopup`)
+      }
+      catch(e){
+        store.updateDialog(`pageNamepopup`)
+        store.setNotify({
+          FailMessage: "Couldn't navigate page",
+          Fail: true,
+        })
+      }
+    },
+    onNavigatePopupNo: function() {
+        store.updateDialog(`pageNamepopup`)
+    }
+  };
 };

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 = [];
@@ -186,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

@@ -61,33 +61,21 @@ export const extractEvents = (eventConfig: any) => {
   return eventGroups;
 };
 export default (funcParams: funcParamsProps) => {
-  eventGroups = {}
   const formDataHolder = {}
-  if (pageData) {
-    if ((!isEmpty(pageData)) && typeof pageData === "object") {
-      eventGroups = extractEvents(pageData?.config)
-    }
-  }
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider }, eventGroups,
+    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider },eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
     setPage: async function () {
+      funcParams.store.setAdditionalErrors([]);
       funcParams.store.setFormdata({});
+      funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
-      const pageBasicDetailString = sessionStorage.getItem("pagemasterMetaData")
-      if (pageBasicDetailString) {
-        pageData = JSON.parse(pageBasicDetailString)
-      } else {
-        pageData = await funcParams.pageDataProvider();
-        sessionStorage.setItem("pagemasterMetaData", JSON.stringify({
-          schema: pageData?.schema,
-          uiSchema: pageData?.uiSchema, config: pageData?.config
-        }))
-      }
+      eventGroups = {};
+      pageData = await funcParams.pageDataProvider();
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
@@ -96,112 +84,6 @@ export default (funcParams: funcParamsProps) => {
       window.dispatchEvent(event)
       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: {
@@ -260,7 +142,6 @@ export default (funcParams: funcParamsProps) => {
                   fill: theme?.palette?.primary?.main,
                   width: 20,
                   height: 0,
-                  // margin: 0,
                   top: 0,
                   right: { xs: "12px", sm: "84px" },
                   position: "absolute",
@@ -294,7 +175,7 @@ export default (funcParams: funcParamsProps) => {
                   fontSize: "12px",
                   cursor: "pointer",
                   marginLeft: "2px",
-        
+
                   top: 3,
                   right: "12px",
                   position: "absolute",
@@ -309,22 +190,24 @@ export default (funcParams: funcParamsProps) => {
         }
       );
       const schema = pageData?.schema ?? { type: "object", properties: {} };
-      eventGroups = extractEvents(config);
+      const newEventGroups = extractEvents(config);
+      console.log("newEventGroups", newEventGroups,eventGroups)
+      eventGroups = newEventGroups;
       executeEventsParameters = {
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
-        serviceHolder: this, eventGroups, formDataHolder
+        serviceHolder: this, eventGroups: newEventGroups, formDataHolder
       }
       await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups, formDataHolder
+        serviceHolder: this, eventGroups: newEventGroups, formDataHolder: {}
       })
       funcParams.store.setSchema(
         (pre: any) => {
           return {
-            ...schema,...pre, properties:
+            ...schema, ...pre, properties:
               { ...schema.properties, ...pre.properties, }
           }
         }
@@ -336,7 +219,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,
@@ -390,7 +274,7 @@ export default (funcParams: funcParamsProps) => {
           { key: "searchValue", value: param.serachValue },
           { key: "currentValue", value: param.currentValue }
         ]
-        const response = await this.callExecuteEvents(param, apiBody);
+        const response = await this.callExecuteEvents(param, apiBody, "onLoad");
         return response?.data;
       }
     },

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

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

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

@@ -1,19 +0,0 @@
-declare const _default: {
-    type: string;
-    scope: string;
-    options: {
-        widget: string;
-    };
-    config: {
-        layout: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-        };
-        main: {
-            title: string;
-        };
-    };
-};
-export default _default;

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

@@ -1,22 +0,0 @@
-import pdfViewer from "./uischema/pdfViewer";
-import buildUiSchema from "./buildUiSchema";
-import _ from "lodash";
-import { createLayoutFormat } from "./buildConfig";
-
-export const buildPdfViewer = (config) => {
-    const PdfViewer: any = _.cloneDeep(pdfViewer)
-    PdfViewer.config.main.label = config.label
-    if (config.name) {
-        PdfViewer.scope=`#/properties/${config.name}`
-    }
-    if (config.layout) {
-        PdfViewer.config.layout = createLayoutFormat(config.layout);
-    }
-    if(config.label) {
-        PdfViewer.config.main.title = config.label
-    }
-    if (config.style) {
-        PdfViewer.config.style = JSON.parse(config.style)
-    }
-    return PdfViewer
-}

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

@@ -1,18 +0,0 @@
-export default {
-    type: "Control",
-    scope: "#/properties/pdfviewer",
-    options: {
-      widget: "PdfViewer",
-    },
-    config: {
-      layout: {
-        xs: 12,
-        sm: 12,
-        md: 12,
-        lg: 12,
-      },
-      main: {
-        title: "PDF"
-      },
-    },
-  }