impaktapps-ui-builder 0.0.95 → 0.0.97-alpha.5

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

@@ -22,6 +22,7 @@ export declare const APISection: {
                 heading: string;
                 minRows: number;
                 hideButton: boolean;
+                enableCodeEditor: boolean;
             };
         };
     } | {

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

@@ -59,6 +59,7 @@ export declare const getTextArea: (scope: string, heading: string, hideButton: b
             heading: string;
             minRows: number;
             hideButton: boolean;
+            enableCodeEditor: boolean;
         };
     };
 };

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

@@ -14,6 +14,7 @@ export declare const BarGraph: {
         main: {};
         style: {
             containerStyle: {};
+            labelStyle: {};
         };
     };
 };
@@ -92,6 +93,8 @@ export declare const HorizontalBarGraph: {
         main: {
             type: string;
         };
-        style: {};
+        style: {
+            labelStyle: {};
+        };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.95",
+    "version": "0.0.97-alpha.5",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -36,6 +36,16 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
       }
     }
 
+    }
+    if (config.leftMargin) {
+      horizontalBarGraph.config.style =
+    {
+      labelStyle: {
+        margin: {
+          left: config.leftMargin
+        }
+      }
+    }
     }
     if (config.bottomLabel) {
       horizontalBarGraph.config.main.bottomLabel =
@@ -47,4 +57,4 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
     return horizontalBarGraph
 }
 
-export default buildHorizontalBarGraph
+export default buildHorizontalBarGraph;

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

@@ -11,6 +11,16 @@ export const buildLineGraph = (config, componentScope) => {
   if (config.height) {
     lineGraph.config.style.containerStyle.height = config.height;
   }
+  if (config.leftMargin) {
+    lineGraph.config.style =
+  {
+    labelStyle: {
+      margin: {
+        left: config.leftMargin
+      }
+    }
+  }
+  }
   if (config.bottomLabel) {
     lineGraph.config.main.bottomLabel = config.bottomLabel;
   }
@@ -36,6 +46,15 @@ export const buildLineGraph = (config, componentScope) => {
   if (config.pieArcColors) {
     lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
   }
+  if (config.leftLabelMargin) {
+    lineGraph.config.style.labelStyle.margin = {
+      left: config.leftLabelMargin,
+    };
+  }
+  if (config.leftLabelOffset) {
+    lineGraph.config.style.labelStyle.leftLabelOffset =
+      config.leftLabelOffset;
+  }
   lineGraph.scope = componentScope;
   return lineGraph;
 }

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

@@ -25,12 +25,31 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     if (config.height) {
       barGraph.config.style.containerStyle.height = config.height;
     }
+    if (config.leftMargin) {
+      barGraph.config.style =
+    {
+      labelStyle: {
+        margin: {
+          left: config.leftMargin
+        }
+      }
+    }
+    }
     if (config.bottomLabel) {
       barGraph.config.main.bottomLabel = config.bottomLabel;
     }
     if (config.leftLabel) {
       barGraph.config.main.leftLabel = config.leftLabel;
     }
+    if (config.leftLabelMargin) {
+      barGraph.config.style.labelStyle.margin = {
+        left: config.leftLabelMargin,
+      };
+    }
+    if (config.leftLabelOffset) {
+      barGraph.config.style.labelStyle.leftLabelOffset =
+        config.leftLabelOffset;
+    }
     barGraph.scope = componentScope;
     return barGraph;
 } 

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

@@ -38,8 +38,11 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.downloadAllData) {
     table.config.main.downloadAllData = config.downloadAllData === "YES" ? true : false
   }
-  if(config.disableFilters){
-    table.config.main.disableFilters = config.disableFilters === "YES" ? true : false
+  if(config.disableGlobalSearch){
+    table.config.main.disableGlobalSearch = config.disableGlobalSearch === "YES" ? true : false
+  }
+  if(config.disableColumnFilter){
+    table.config.main.disableColumnFilter = config.disableColumnFilter === "YES" ? true : false
   }
   if(config.disableSorting){
     table.config.main.disableSorting = config.disableSorting === "YES" ? true : false

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

@@ -45,6 +45,12 @@ export const buildTextArea = (config:any,componentScope:string) =>{
       if (config.placeholder) {
         textArea.config.main.placeholder = config.placeholder;
       }
+      if(config.enableCodeEditor){
+        textArea.config.main.enableCodeEditor = config.enableCodeEditor === "YES" ? true : false
+      }
+      if(config.codeEditorLanguage){
+        textArea.config.main.codeEditorLanguage = config.codeEditorLanguage;
+      }
       textArea.scope = componentScope;
     return textArea;
 }

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

@@ -2,23 +2,20 @@ import { uploadFile } from "./uischema/file";
 import _ from "lodash";
 import { createLayoutFormat } from "./buildConfig";
 
-export const buildUploadFile = (config,componentScope)=>{
-    const UploadFile: any = _.cloneDeep(uploadFile);
-    
-    UploadFile.scope = componentScope;
-      UploadFile.config.main.label = config.label;
-      if (config.layout) {
-        UploadFile.config.layout = config.layout;
-      }
-      if(config.layout){
-        uploadFile.config.layout = createLayoutFormat(config.layout)
-      }
-      if (config.style) {
-        UploadFile.config.style = config.style;
-      }
-      if (config.required) {
-        UploadFile.config.main.required = true;
-      }
-      UploadFile.config.main.errorMessage = config.errorMessage;
-      return UploadFile;
+export const buildUploadFile = (config, componentScope) => {
+  const UploadFile: any = _.cloneDeep(uploadFile);
+
+  UploadFile.scope = componentScope;
+  UploadFile.config.main.label = config.label;
+  if (config.layout) {
+    UploadFile.config.layout = createLayoutFormat(config.layout)
+  }
+  if (config.style) {
+    UploadFile.config.style = config.style;
+  }
+  if (config.required) {
+    UploadFile.config.main.required = true;
+  }
+  UploadFile.config.main.errorMessage = config.errorMessage;
+  return UploadFile;
 }

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

@@ -206,7 +206,8 @@ export const getTextArea = (scope: string, heading: string, hideButton: boolean,
       main: {
         heading: heading,
         minRows: 8,
-        hideButton: hideButton
+        hideButton: hideButton,
+        enableCodeEditor: true
       },
     },
   }
@@ -324,7 +325,9 @@ export const buildPropertiesSection = function (type: String) {
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextAreaEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }), emptyBox("TextAreaEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })]
+        getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
+        getInputField("codeEditorLanguage", "Enter Code Language"),
+      ]
       break;
 
     case "SpeedoMeter":
@@ -404,12 +407,15 @@ export const buildPropertiesSection = function (type: String) {
         ]),
         getInputField("leftLabel", "Left Label"),
         getInputField("bottomLabel", "Bottom Label"),
+        getInputField("leftLabelMargin", "Left Label Margin"),
+        getInputField("leftLabelOffset", "Left Label Offset"),
         emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
-        emptyBox("GraphEmpty1", {xs: 0, sm: 6, md: 6, lg: 0 }),
+        getInputField("leftMargin", "Left Margin"),
+        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -438,7 +444,8 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
         getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
-        getRadioInputField("disableFilters", "Disable Filter", ["YES", "NO"]),
+        getRadioInputField("disableGlobalSearch", "Disable Global Search", ["YES", "NO"]),
+        getRadioInputField("disableColumnFilter", "Disable Column Filter", ["YES", "NO"]),
         getRadioInputField("disableSorting", "Disable Sorting", ["YES", "NO"]),
 
         getRadioInputField("disableEditColumn", "Disable Edit Column", ["YES", "NO"]),
@@ -448,7 +455,6 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("disablePagination", "Disable Pagination", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
         getMultiSelectField("filteringOptions", "Filtering Options"),
-        emptyBox("LazyLoadingTableEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }),
         buildWrapper("Tree Table Properties", [
           getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),

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

@@ -15,7 +15,7 @@ export default  {
       styleDefault:false,
       icon:"",
       onClick: "onClick",
-      size: "medium",
+      size: "small",
     },
     style: {
     },

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

@@ -9,7 +9,7 @@ export const BarGraph = {
     layout: {xs :12,sm:12,md:12,lg:6},
     main: {
     },
-    style: { containerStyle: {} }
+    style: { containerStyle: {},labelStyle:{} }
   },
 };
 
@@ -75,7 +75,7 @@ export const HorizontalBarGraph = {
       type: "HorizontalBarGraph",
     },
     style:{
-      
+      labelStyle:{}
     }
   },
 };

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

@@ -146,7 +146,7 @@ function executeCustomHandler(params: handlersProps) {
 }
 
 function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any, formDataHolder: any) {
-  if (eventConfig.type === "Select"  && handlerResponse?.data) {
+  if (eventConfig.type === "Select"  && handlerResponse?.data && !_.isEmpty(handlerResponse?.data)) {
     store.setSchema((pre) => {
       return {
         ...pre, properties: {
@@ -158,7 +158,7 @@ function mergeFormdata(handlerResponse: any, componentName: string, eventConfig:
       }
     })
   }
-  else if (eventConfig.type === "MultipleSelect" && handlerResponse?.data) {
+  else if (eventConfig.type === "MultipleSelect" && handlerResponse?.data && !_.isEmpty(handlerResponse?.data)) {
     store.setSchema((pre) => {
       return {
         ...pre, properties: {

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

@@ -101,22 +101,20 @@ export default (funcParams: funcParamsProps) => {
           type: "HorizontalLayout",
           config: {
             main: {
-              direction: 'row'
+              direction: "row",
             },
             style: {
               flexDirection: "row",
               position: "absolute",
               bottom: 0,
-              marginBottom: '-8px',
-              height: 'fit-content',
-              overflow: 'hidden',
+              height: "fit-content",
+              overflow: "hidden",
               zIndex: 1000,
-              width: 'inherit'
-            }
+              width: "inherit",
+            },
           },
           elements: [
             {
-
               type: "Control",
               scope: "#/properties/FooterText",
               options: {
@@ -124,84 +122,85 @@ export default (funcParams: funcParamsProps) => {
               },
               config: {
                 main: {
-                  heading: "Copywriter@ACT21.IO"
+                  heading: "Copywriter@ACT21.IO",
                 },
                 style: {
-                  color: theme?.palette?.text.disabled || "#AFAFAF",
-                  fontSize: '12px',
-                  textAlign: 'center',
+                  color: theme?.palette?.text?.disabled || "#AFAFAF",
+                  fontSize: "12px",
+                  textAlign: "center",
                   lineHeight: 2,
-                  width: 'fit-content',
-                  left: '50%',
-                  position: 'relative',
+                  width: "fit-content",
+                  left: "50%",
+                  position: "relative",
                   margin: 0,
                   flexGrow: 1,
                   height: 0,
-                  transform: "translate(-50%,0%)"
-                }
+                  transform: "translate(-50%, 0%)",
+                },
               },
             },
             {
               type: "Control",
-              scope: "#/properties/backIcon",
+              scope: "#/properties/FooterBackIcon",
               options: {
                 widget: "Box",
               },
               config: {
                 main: {
-                  iconName: 'PrevIcon',
+                  iconName: "PrevIcon",
                   onClick: "backHandler",
-                  width: 'fit-content',
+                  width: "fit-content",
                 },
                 style: {
-                  fill: theme.palette.primary.main,
+                  fill: theme?.palette?.primary?.main,
                   width: 20,
                   height: 0,
-                  margin: 0,
+                  // margin: 0,
                   top: 0,
-                  right: {xs: '12px', sm: '84px'},
-                  position: 'absolute',
-                  fontSize: '12px',
-                  cursor: 'pointer',
-                  ':hover': {
-                    fill: theme.palette.primary.dark,
-                  }
-                }
-              }
+                  right: { xs: "12px", sm: "84px" },
+                  position: "absolute",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  ":hover": {
+                    fill: theme?.palette?.primary?.dark,
+                  },
+                  marginRight: "13px",
+                },
+              },
             },
             {
               type: "Control",
-              scope: "#/properties/text",
-    
+              scope: "#/properties/FooterBackHandlerText",
               options: {
                 widget: "Box",
               },
               config: {
                 main: {
                   heading: "Previous Page",
-                  onClick: "backHandler"
+                  onClick: "backHandler",
                 },
                 style: {
-                  display: {xs: 'none', sm: "flex"},
-                  textAlign: 'left',
+                  display: { xs: "none", sm: "flex" },
+                  textAlign: "left",
                   lineHeight: 1,
                   height: 0,
-                  width: 'fit-content',
-                  color: theme.palette.primary.main,
-                  fontSize: "12px",
-                  cursor: 'pointer',
-                  marginLeft: '2px',
-                  marginRight: 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,
-                  }
-                }
+                  right: "12px",
+                  position: "absolute",
+                  ":hover": {
+                    color: theme?.palette?.primary?.dark,
+                  },
+                  marginRight: "4px",
+                },
               },
             },
-          ]
+          ],
         }
       );
       const schema = pageData?.schema ?? { type: "object", properties: {} };