impaktapps-ui-builder 0.0.101-alpha.60 → 0.0.101-alpha.62

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

@@ -71,6 +71,9 @@ export declare const EventSchema: {
         RemoveItemButton: {
             disabled: boolean;
         };
+        pageName: {
+            path: any[];
+        };
     };
     required: string[];
 };

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

@@ -79,6 +79,9 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
             RemoveItemButton: {
                 disabled: boolean;
             };
+            pageName: {
+                path: any[];
+            };
         };
         required: string[];
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.101-alpha.60",
+    "version": "0.0.101-alpha.62",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -660,8 +660,7 @@ export const componentBasicUiSchema: any = (theme)=>{
         main: {
         },
         style: {
-          // paddingLeft: theme.spacing(3),
-          // width:"100%",
+          paddingLeft: theme.spacing(3),
           color:theme.palette.grey[600],
           fontSize:"10px",
           position: "fixed",

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

@@ -87,6 +87,9 @@ export const EventSchema = {
     RemoveItemButton:{
       disabled: true,
     },
+    pageName: {
+      path: []
+    },
   },
 required:["eventType","Handler"]
 }

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

@@ -503,21 +503,18 @@ export const EventUiSchema: any = (theme) => {
         scope: "#/properties/pageName",
        
         options: {
-          widget: "Box",
+          widget: "Breadcrumb",
         },
         config: {
           layout: 12,
           main: {
-            heading: "",
           },
           style: {
             paddingLeft: theme.spacing(3),
-            width:"100%",
-            fontSize:"10px",
             color:theme.palette.grey[600],
+            fontSize:"10px",
             position: "fixed",
             bottom: "24px",
-            backgroundColor: theme.palette.background.default,
             borderBottom: `1px solid ${theme.palette.common.black}29`,
             borderTop: `1px solid ${theme.palette.common.black}29`,
           },

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

@@ -161,7 +161,6 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       let pathArray = [];
 
       if (path) {
-              // let urlRoutes: string = config.name;
               const pathArrayAll = path.split(".");
               const arr: any = []
               pathArrayAll.map((e: string, i: number) => {
@@ -182,8 +181,6 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
               })
           }
 
-          console.log("pathArray>>",pathArray)
-
       schema.properties.pageName.path = pathArray
       return schema;
     },

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,7 +22,7 @@ export default (
   dynamicData: any,
   submitHandler: any,
   service: any,
-  functionsName?: { const: string, title: string }[]
+  functionsName?: { const: string; title: string }[]
 ) => {
   return {
     setPage: async function () {
@@ -20,87 +30,142 @@ export default (
       store.setFormdata(formdata);
       const schema = await this.getSchema();
       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)
+      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 = [];
+
+      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: `/Component?path=${e}&id=${id}`,
+          });
+        });
+      }
+
+      schema.properties.pageName.path = pathArray;
       return schema;
     },
     okHandler: () => okHandler(store),
@@ -110,48 +175,56 @@ 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
+      );
     },
-
-  }
+  };
 };