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

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

@@ -3,28 +3,8 @@ import { getSelectField } from "../../../build/uischema/buildPropertiesSection";
 export const EventUiSchema: any = (theme) => {
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Page-Event",
+    heading: "Page-Events",
     elements: [
-      // {
-      //   type: "Control",
-      //   scope: "#/properties/pageName",
-       
-      //   options: {
-      //     widget: "Box",
-      //   },
-      //   config: {
-      //     layout: 12,
-      //     main: {
-      //       heading: " ",
-      //     },
-      //     style: {
-      //       marginLeft: theme.spacing(3),
-      //       width:"auto",
-      //       fontSize:"12px",
-      //       color:"gray",
-      //     },
-      //   },
-      // },
       {
         type: "TabLayout",
         config: {
@@ -75,7 +55,7 @@ export const EventUiSchema: any = (theme) => {
               },
               getSelectField("Handler", "Handler", [
                 { label: "Custom", value: "custom" },
-                { label: "Api", value: "api" },
+                { label: "API", value: "api" },
                 { label: "Inbuilt Function", value: "inBuiltFunction" },
                 { label: "Refresh", value: "refresh" },
               ]),
@@ -170,7 +150,7 @@ export const EventUiSchema: any = (theme) => {
 
               {
                 accessorKey: "eventType",
-                header: "Event Type",
+                header: "Event's Type",
                 size: 300,
                 type: "string"
               },
@@ -182,7 +162,7 @@ export const EventUiSchema: any = (theme) => {
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
                 type: "action",
                 size: 150,
                 widget: {
@@ -255,67 +235,9 @@ export const EventUiSchema: any = (theme) => {
                 },
               },
             ]
-            // }]
           }
         ],
       },
-      // {
-      //   type: "HorizontalLayout",
-      //   config: {
-      //     layout:{xs:12,sm: 6}
-      //   },
-      //   elements: [
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/RemoveItemButton",
-      //       options: {
-      //         widget: "IconButton",
-      //       },
-      //       config: {
-      //         layout: { xs: 1, sm: 1 },
-      //         main: {
-      //           onClick: "RemoveItemButton",
-      //           size: "large",
-      //           icon: "RejectIcon",
-      //           styleDefault: true,
-      //         },
-      //         style:{
-      //           marginLeft: "-10px"
-      //         }
-      //       },
-      //     },
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/copiedElementDetails",
-      
-      //       options: {
-      //         widget: "Box",
-      //       },
-      //       config: {
-      //         layout: { xs: 6, sm: 6 },
-      //         main: {
-      //           heading: "No element copied",
-      //         },
-      //         style: {
-      //           color: "#535557",
-      //           marginLeft: "-10px",
-      //           fontSize: "12px",
-      //           marginTop: "4px"
-      //         },
-      //       },
-      //     },
-      //     {
-      //       type: "Control",
-      //       scope: "#/properties/EmptyBox",
-      //       options: {
-      //         widget: "EmptyBox",
-      //       },
-      //       config: {
-      //         layout: { xs: 1, sm: 5 },
-      //       },
-      //     },
-      //   ]
-      // },
     {
       type: "WrapperLayout",
       config: {
@@ -402,15 +324,17 @@ export const EventUiSchema: any = (theme) => {
               config: {
                 layout: 11,
                 main: {
-                  heading: "Are you sure you want to delete ?",
+                  heading: "Are you sure you want to delete this Event ?",
                 },
                 style:{
-                  marginTop: "-20px",
                   fontSize: "20px",
                   "&.MuiTypography-root": {
-                    padding: "10px 30px 20px 30px",
+                    padding: "0px 20px",
                     textAlign: "center",
-                    lineHeight: "1"
+                    lineHeight: "1.2",
+                    fontWeight: "normal",
+                    fontSize: "18px",
+                    marginBottom: theme.spacing(5)
                   }
                 }
               },
@@ -435,13 +359,14 @@ export const EventUiSchema: any = (theme) => {
                       name: "No",
                       startIcon: "ApproveIcon",
                       variant: "contained",
-                      color: "info",
                       type: "text",
                       onClick: "deletePopUpEvent",
                       size: "large",
                     },
                     style: {
                       position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
                       bottom: 0,
                       left: 0,
                       width: "50%",
@@ -469,7 +394,6 @@ export const EventUiSchema: any = (theme) => {
                     layout: 6,
                     main: {
                       name: "Yes",
-                      startIcon: "ApproveIcon",
                       variant: "contained",
                       color: "error",
                       type: "text",
@@ -478,6 +402,8 @@ export const EventUiSchema: any = (theme) => {
                     },
                     style: {
                       position: "absolute",
+                      padding: "8px 0px",
+                      fontSize: "16px",
                       bottom: 0,
                       right: 0,
                       width: "50%",
@@ -503,23 +429,23 @@ export const EventUiSchema: any = (theme) => {
         scope: "#/properties/pageName",
        
         options: {
-          widget: "Box",
+          widget: "Breadcrumb",
         },
         config: {
           layout: 12,
           main: {
-            heading: "",
+          onNavigatePopupNo: "onNavigatePopupNo",
+          onNavigatePopupYes: "onNavigatePopupYes"
           },
           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`,
+            backgroundColor: theme.palette.background.default,
           },
         },
       },

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

@@ -10,54 +10,154 @@ import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
 import { getFormdataFromSessionStorage, okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
 const sectionLabels = {
-  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
-  card: ["Core", "Properties", "Event", "Style", "Validation"],
-  UploadFile: ["Core", "Event", "Style", "Validation"],
-  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
-  DownloadFile: ["Core", "Event", "Style", "Validation"],
-  Box: ["Core", "Event", "Style", "Validation"],
-  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  Slider: ["Core", "Components", "Event", "Style", "Validation"],
-  Timer: ["Core", "Event", "Style", "Validation"],
-  Rank: ["Core", "Event", "Style", "Validation"],
-  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  card: ["Core", "Properties", "Events", "Style", "Validation"],
+  UploadFile: ["Core", "Events", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Events", "Style", "Validation"],
+  DownloadFile: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Events", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  Slider: ["Core", "Components", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style", "Validation"],
+  Rank: ["Core", "Events", "Style", "Validation"],
+  Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Validation"],
-  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
-  Text: ["Core", "Properties", "Event", "Style", "Validation"],
-  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  Radio: ["Core", "Properties", "Events", "Style", "Validation"],
+  Text: ["Core", "Properties", "Events", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
   PopUp: ["Core", "Components", "Properties", "Style"],
-  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
-  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
-  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
-  TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Events", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
+  InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "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,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection(store.theme.myTheme),
+      Events: EventSection(store.theme.myTheme),
       Components: TableSection(store.theme.myTheme),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     }
     const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
+    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Events", "Validation"];
     UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection(store.theme.myTheme), ValidationSection];
   }
+
+  // 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[0].elements[0].elements[4] = 
+    {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format",
+
+        },
+      },
+    };
+    UiSchema.elements[0].elements[0].elements[6] = 
+    {
+      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[5] = 
+    {
+      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[0].elements[0].elements[7] = 
+    {
+      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[8] = 
+    {
+      type: "Control",
+      scope: "#/properties/columnKey",
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Key",
+        },
+      },
+      options: {
+        widget: "InputField",
+      },
+    },
+    UiSchema.elements[0].elements[0].elements[9] = 
+     {
+      type: "Control",
+      scope: "#/properties/elementType",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Element Type",
+        },
+      },
+    }
+  }
+
   if (sessionStorage.getItem("copiedConfig") ) {
     this.ElementPathSetter(UiSchema);
   }
@@ -81,9 +181,38 @@ 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;
       }
+      
+      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: `/Component?path=${e}${id ? `&id=${id}` : ''}`
+                  });
+              })
+          }
+
+      schema.properties.pageName.path = pathArray
       return schema;
     },
     okHandler: () => okHandler(store),
@@ -169,22 +298,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];
@@ -194,11 +323,15 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
 
       this.ElementPathSetter(uiSchema,copiedFormData);
       sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      store.setNotify({
+        SuccessMessage: `${elementType} Copied Successfully`,
+        Success: true,
+      })
       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,
@@ -206,41 +339,41 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         return;
       }
       const pastedElementParentPath = store.searchParams?.get("path");
-      if (!Array.isArray(store.formData.elements) ) {
+      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 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"));
       const notificationMessages = {
-        Event: " The event cannot be integrated into the component section.",
-        Component: "The component cannot be integrated into the event section."
+        Events: " The Events cannot be integrated into the component section.",
+        Component: "The component cannot be integrated into the Events section."
       };
-      if(copiedConfig.Handler && elementType === "Component"){
+      if (copiedConfig.Handler && elementType === "Component") {
         store.setNotify({
-          FailMessage: notificationMessages.Event,
+          FailMessage: notificationMessages.Events,
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Event"){
+      else if(copiedConfig.name && elementType === "Events"){
         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`;
@@ -248,15 +381,46 @@ 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}`;
+      if(uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
+        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      }
+      else if(uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
+        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      }
+
+      
+      if(uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons){
+        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Event: ${formData.eventType}`;
+      }
+      else if(uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons){
+        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.eventType}`;
+      }
+    },
+
+    
+    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`)
     }
   }
 };