impaktapps-ui-builder 0.0.101-alpha.22 → 0.0.101-alpha.230

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

@@ -1,3 +1,13 @@
+export declare const emptyBox: (scope: string, layout?: any) => {
+    type: string;
+    scope: string;
+    options: {
+        widget: string;
+    };
+    config: {
+        layout: any;
+    };
+};
 export declare const getRadioInputField: (scope: String, label: String, options: string[]) => {
     type: string;
     scope: string;
@@ -24,16 +34,6 @@ export declare const buildWrapper: (label: string, elements: any[]) => {
             label: string;
             isAccordion: boolean;
         };
-        wrapperStyle: {
-            marginTop: string;
-            marginBottom: string;
-            marginLeft: string;
-            width: string;
-        };
-        componentsBoxStyle: {
-            marginLeft: string;
-        };
-        defaultStyle: boolean;
     };
     elements: any[];
 };

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

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

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

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

package/package.json

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

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

@@ -2,22 +2,25 @@ import _ from "lodash";
 import TextInputField from "./uischema/textInputField";
 import { createLayoutFormat } from "./buildConfig";
 
-export const buildTextField = (config:any,componentScope:string) =>{
-    const inputField: any = _.cloneDeep(TextInputField);
-    inputField.config.main.label = config.label;
-    if (config.style) {
-      inputField.config.style = JSON.parse(config.style)
-    }
-    if (config.InputFormatingAndMasking) {
-      inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
-    }
-    if (config.placeholder) {
-      inputField.config.main.placeholder = config.placeholder;
-    }
-    if (config.layout) {
-      inputField.config.layout = createLayoutFormat(config.layout)
-    }
-    inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-    inputField.scope = componentScope;
-    return inputField;
+export const buildTextField = (config: any, componentScope: string) => {
+  const inputField: any = _.cloneDeep(TextInputField);
+  inputField.config.main.label = config.label;
+  if (config.style) {
+    inputField.config.style = JSON.parse(config.style)
+  }
+  if (config.multiline) {
+    inputField.config.main.multiline = config.multiline === "YES" ? true : false;
+  }
+  if (config.InputFormatingAndMasking) {
+    inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
+  }
+  if (config.placeholder) {
+    inputField.config.main.placeholder = config.placeholder;
+  }
+  if (config.layout) {
+    inputField.config.layout = createLayoutFormat(config.layout)
+  }
+  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+  inputField.scope = componentScope;
+  return inputField;
 }

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

@@ -343,17 +343,17 @@ const buildUiSchema = (config: any, store?: any) => {
     }
     else if (config.type == "Table") {
       const sizeMap = {}
-      const filterMap = {}
+      // const filterMap = {}
       if (config.sizeHolder) {
         config.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value
         });
       }
-      if(config.enableColumnFilter){
-        config.enableColumnFilter.map((e)=>{
-          filterMap[e.keyName] = true
-        })
-      }
+      // if(config.enableColumnFilter){
+      //   config.enableColumnFilter.map((e)=>{
+      //     filterMap[e.keyName] = true
+      //   })
+      // }
       elements.elements = config.elements.map((cellElem, elemInd) => {
         if (cellElem.type) {
           return {
@@ -363,8 +363,10 @@ const buildUiSchema = (config: any, store?: any) => {
             type: cellElem.columnFormat,
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
             elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
-            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
-            columnFilterModeOptions: config.filteringOptions
+            // enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
+            columnFilterModeOptions: cellElem.filteringOptions,
+            enableColumnFilter: cellElem.enableFilter === "Yes" ? true : false,
+            enableSorting: cellElem.enableSorting === "Yes" ? true : false
           }
         } else {
           return {
@@ -372,8 +374,10 @@ const buildUiSchema = (config: any, store?: any) => {
             type: cellElem.columnFormat,
             header: cellElem.label || cellElem.name,
             size: sizeMap[cellElem.name] || 180,
-            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
-            columnFilterModeOptions: config.filteringOptions
+            // enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
+            columnFilterModeOptions: cellElem.filteringOptions,
+            enableColumnFilter: cellElem.enableFilter === "Yes" ? true : false,
+            enableSorting: cellElem.enableSorting === "Yes" ? true : false
           }
         }
 

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

@@ -1,8 +1,6 @@
 
 import _ from "lodash";
-import { buildLabel } from "../buildLabel";
-import Box from "./box";
-const emptyBox = (scope:string,layout?: any) => {
+export const emptyBox = (scope:string,layout?: any) => {
 
   if(layout !== undefined){
     return {
@@ -31,82 +29,108 @@ const emptyBox = (scope:string,layout?: any) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 11.5,
   options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size",
+    widget: "Array",
+  },
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout",
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px",
+      },
+      detailsStyle: {
+        marginLeft: "24px",
+      }
+    }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Screen Size",
 
-            },
-          },
         },
-        {
-          type: "Control",
-          scope: "#/properties/value",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
 
-          options: {
-            widget: "InputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              // freeSolo:true,
-              helperText: 'Number should be in range of 0 to 12',
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
+      options: {
+        widget: "InputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          // freeSolo:true,
+          helperText: 'Number should be in range of 0 to 12',
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
 
-            },
-          },
         },
-        emptyBox("cardEmpty")
-      ],
+      },
     },
-  },
+    emptyBox("cardEmpty")
+  ],
 };
 const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 12,
     options: {
-      "elementLabelProp": childScope,
-      detail: {
-        type: "HorizontalLayout",
-        elements: [
-          {
-            type: "Control",
-            scope: `#/properties/${childScope}`,
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: childLabel,
+        childElementLabel: childLabel,
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px",
+        },
+        detailsStyle: {
+          marginLeft: "24px",
+        }
+      }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${childScope}`,
 
-            options: {
-              widget: "InputField",
-            },
-            config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-              main: {
-                label: childLabel || "Labels for Tab",
-              },
-            },
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: childLabel || "Labels for Tab",
           },
-          emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
-          emptyBox("ArrayControlEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })
-        ],
+        },
       },
-    },
+      emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 8, lg: 8 }),
+    ],
   }
 };
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
-sizeHolder.options.detail.elements[1] = {
+sizeHolder.elements[1] = {
   type: "Control",
   scope: `#/properties/value`,
 
@@ -120,7 +144,7 @@ sizeHolder.options.detail.elements[1] = {
     },
   },
 };
-sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
+sizeHolder.elements[2] = emptyBox("sizeHolderempty")
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -164,16 +188,6 @@ export const buildWrapper = (label: string, elements: any[]) => {
         label: label || "Details",
         isAccordion: true,
       },
-      wrapperStyle: {
-        marginTop: '-6px',
-        marginBottom: '-8px',
-        marginLeft: "-34px",
-        width: "108%"
-      },
-      componentsBoxStyle: {
-        marginLeft: "12px",
-      },
-      defaultStyle: true
     },
     elements: elements || []
   }
@@ -308,7 +322,7 @@ export const buildPropertiesSection = function (type: String) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
@@ -318,6 +332,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
         getInputField("codeEditorLanguage", "Enter Code Language"),
+        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
       ]
       break;
 
@@ -404,7 +419,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
+        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];

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

@@ -79,7 +79,7 @@ export const EventSection = (theme)=>{
               
           {
             accessorKey: "eventType",
-            header: "Event Type",
+            header: "Event's Type",
             type: "string",
             size: 300,
           },
@@ -91,7 +91,7 @@ export const EventSection = (theme)=>{
           },
           {
             accessorKey: "Edit_Approve_Records",
-            header: "Edit Widget",
+            header: "Edit",
             size: 150,
             type: "action",
             widget: {

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

@@ -4,7 +4,7 @@ export const ComponentSchema: any = {
     type: {
       // type: "string",
       oneOf: [
-        { title: "Masked Aadhaar", const: "AadharcardText" },
+        { title: "Masked Aadhar Card", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
         { title: "Data Card", const: "card" },
@@ -19,7 +19,7 @@ export const ComponentSchema: any = {
         { title: "Graph", const: "Graph" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
-        { title: "LeaderBoard", const: "LeaderBoard" },
+        { title: "Leaderboard", const: "LeaderBoard" },
         { title: "Multi-Select Dropdown", const: "MultipleSelect" },
         { title: "Pan Card Masked", const: "PanCardText" },
         { title: "Pop Up", const: "PopUp" },
@@ -204,8 +204,6 @@ export const ComponentSchema: any = {
       },
     },
     filteringOptions:{
-      type: "array",
-      items:{
         oneOf: [
           { const: 'fuzzy', title: 'Fuzzy' },
           { const: 'contains', title: 'Contain' },
@@ -220,7 +218,6 @@ export const ComponentSchema: any = {
           { const: 'lessThan', title: 'Less than' },
           { const: 'lessThanOrEqualTo', title: 'Less than or equal to' },
         ]
-      },
     },
     legendLabels: {
       type: "array",
@@ -340,6 +337,9 @@ export const ComponentSchema: any = {
         { title: "Info", const: "info" },
       ]
     },
+    pageName: {
+      path: []
+    },
     name: {
       type: "string",
     },

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

@@ -407,15 +407,16 @@ export const componentBasicUiSchema: any = (theme)=>{
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?",
+                heading: "Are you sure you want to delete this Component ?",
               },
               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)
                 }
               }
             },
@@ -445,6 +446,8 @@ export const componentBasicUiSchema: any = (theme)=>{
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -480,6 +483,8 @@ export const componentBasicUiSchema: any = (theme)=>{
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -530,15 +535,17 @@ export const componentBasicUiSchema: 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)
                 }
               }
             },
@@ -568,6 +575,8 @@ export const componentBasicUiSchema: any = (theme)=>{
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -603,6 +612,8 @@ export const componentBasicUiSchema: any = (theme)=>{
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -623,6 +634,54 @@ export const componentBasicUiSchema: any = (theme)=>{
           },
         ]
     },
+    // {
+    //   type: "Control",
+    //   scope: "#/properties/pageName",
+     
+    //   options: {
+    //     widget: "Box",
+    //   },
+    //   config: {
+    //     layout: 12,
+    //     main: {
+    //       heading: "",
+    //     },
+    //     style: {
+    //       paddingLeft: theme.spacing(3),
+    //       width:"100%",
+    //       fontSize:"10px",
+    //       color:theme.palette.grey[600],
+    //       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`,
+    //     },
+    //   },
+    // },
+    {
+      type: "Control",
+      scope: "#/properties/pageName",
+     
+      options: {
+        widget: "Breadcrumb",
+      },
+      config: {
+        layout: 12,
+        main: {
+        },
+        style: {
+          paddingLeft: theme.spacing(3),
+          color:theme.palette.grey[600],
+          fontSize:"10px",
+          position: "fixed",
+          bottom: "24px",
+          borderBottom: `1px solid ${theme.palette.common.black}29`,
+          borderTop: `1px solid ${theme.palette.common.black}29`,
+          backgroundColor: theme.palette.background.default,
+        },
+      },
+    },
     {
       type: "Control",
       scope: "#/properties/notify",