impaktapps-ui-builder 0.0.384 → 0.0.386

package/dist/impaktapps-ui-builder.es.js

@@ -24,9 +24,9 @@ const PageMasterSchema = {
     },
     template: {
       oneOf: [
-        { const: "template1", title: "template1" },
-        { const: "template2", title: "template2" },
-        { const: "template3", title: "template3" }
+        { const: "Template-1", title: "template1" },
+        { const: "Template-2", title: "template2" },
+        { const: "Template-3", title: "template3" }
       ]
     },
     sectionLabels: {
@@ -41,7 +41,7 @@ const PageMasterSchema = {
       }
     }
   },
-  required: ["template", "name"]
+  required: ["label", "template"]
 };
 const PageMasterUiSchema = {
   type: "HorizontalLayout",
@@ -5882,11 +5882,13 @@ const ComponentSchema = {
         { title: "Card", const: "card" },
         { title: "CheckBox", const: "CheckBox" },
         { title: "Container", const: "WrapperSection" },
+        { title: "DataGrid", const: "DataGrid" },
         { title: "Date", const: "Date" },
         { title: "Download File", const: "DownloadFile" },
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File", const: "FileInput" },
         { title: "Graph", const: "Graph" },
+        { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
         { title: "LeaderBoard", const: "LeaderBoard" },
         { title: "MultipleSelect", const: "MultipleSelect" },
@@ -5943,6 +5945,24 @@ const ComponentSchema = {
         }
       }
     },
+    cardLayout: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          key: {
+            type: "string",
+            oneOf: [
+              { title: "Extra Small", const: "xs" },
+              { title: "Small", const: "sm" },
+              { title: "Medium", const: "md" },
+              { title: "Large", const: "lg" }
+            ]
+          },
+          value: {}
+        }
+      }
+    },
     value: {
       type: "array",
       items: {
@@ -6010,6 +6030,20 @@ const ComponentSchema = {
         }
       }
     },
+    sizeHolder: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string"
+          },
+          value: {
+            type: "string"
+          }
+        }
+      }
+    },
     legendLabels: {
       type: "array",
       items: {
@@ -6667,6 +6701,57 @@ const EmptyBox = {
     main: {}
   }
 };
+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: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
+            main: {
+              label: "Screen Size"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: {
+              xs: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
+            main: {
+              label: "Value",
+              type: "number",
+              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."
+            }
+          }
+        }
+      ]
+    }
+  }
+};
 const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
@@ -6701,6 +6786,25 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
     }
   };
 };
+const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
+sizeHolder.options.detail.elements[1] = {
+  type: "Control",
+  scope: `#/properties/value`,
+  options: {
+    widget: "InputField"
+  },
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
+    main: {
+      label: "Size"
+    }
+  }
+};
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6792,13 +6896,30 @@ const GraphSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(GraphSection);
   switch (type) {
+    case "InputSlider":
+      uiSchema.elements = [
+        getInputField("max", "Max Limit"),
+        getInputField("step", "Step"),
+        getInputField("min", "Min Limit"),
+        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"])
+      ];
+      break;
+    case "DataGrid":
+      uiSchema.elements = [
+        getRadioInputField("divider", "Use Header divider", ["YES", "NO"]),
+        getInputField("elevation", "Card Elevation"),
+        getInputField("height", "Grid height"),
+        getInputField("justifyContent", "justifyContent"),
+        cardLayout
+      ];
+      break;
     case "Stepper":
       uiSchema.elements = [
         getRadioInputField("resetButton", "Reset Button", ["YES", "NO"]),
+        getRadioInputField("defaultButtonAvailable", "Use Default Buttons ", ["YES", "NO"]),
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
-        EmptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6911,7 +7032,8 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
-        getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name")
+        getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
+        sizeHolder
       ];
       break;
     case "Radio":
@@ -7291,14 +7413,14 @@ const getFormdataFromLocalStorage = (path) => {
 };
 async function saveHandler(store2, service2, submitHandler, pageName) {
   var _a, _b;
-  const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
+  (_a = store2.searchParams) == null ? void 0 : _a.get("id");
   const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
   saveFormdataInLocalStorage(store2.ctx.core.data, path);
   const config = JSON.parse(localStorage.getItem("pageFormdata"));
   if (_.isEmpty(store2.ctx.core.errors)) {
     try {
       const saveReturn = await submitHandler(store2, service2, config);
-      navigateHandler(store2, true, pageName ? `/${pageName}?id=${id}` : "/PageMasterRecords");
+      navigateHandler(store2, true, pageName ? `/${pageName}?id=${saveReturn.id}` : "/PageMasterRecords");
     } catch (err) {
       navigateHandler(store2, false);
     }
@@ -7364,7 +7486,9 @@ const sectionLabels = {
   Text: ["Core", "Properties", "style", "Event", "Validation"],
   TextArea: ["Core", "Properties", "style", "Event", "Validation"],
   PopUp: ["Core", "Components", "Properties", "style"],
-  Stepper: ["Core", "Components", "Properties", "Event", "style"]
+  Stepper: ["Core", "Components", "Properties", "Event", "style"],
+  DataGrid: ["Core", "Components", "Properties", "Event", "style"],
+  InputSlider: ["Core", "Properties", "style", "Event", "Validation"]
 };
 const refreshPage = (type, store2) => {
   var _a;
@@ -8306,7 +8430,7 @@ async function executeInBuiltFunctionHandler(params) {
     const makeFunc = eval(params.config.funcParametersCode);
     parameter = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service);
   }
-  params.serviceHolder[params.config.inBuiltFunctionType](parameter);
+  params.serviceHolder[params.config.inBuiltFunctionType](parameter, params.service);
 }
 async function executeCustomHandler(params) {
   const makeFunc = eval(params.config.eventCode);
@@ -8354,7 +8478,8 @@ async function mergeFormdata(handlerResponse, componentName, eventConfig, store2
   } else {
     if (handlerResponse) {
       store2.setFormdata((pre) => {
-        return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : handlerResponse.data };
+        var _a;
+        return { ...pre, [componentName]: eventConfig.lazyLoading ? (_a = handlerResponse == null ? void 0 : handlerResponse.data) == null ? void 0 : _a.data : handlerResponse.data };
       });
       await asyncOperation();
     }
@@ -9465,6 +9590,9 @@ const buildWrapperSection = (config, componentScope) => {
   if (config.style) {
     wrapper.config.style = JSON.parse(config.style);
   }
+  if (config.layout) {
+    wrapper.config.layout = createLayoutFormat(config.layout);
+  }
   return wrapper;
 };
 var TextInputField = {
@@ -9648,7 +9776,7 @@ const buildTable = (config, componentScope) => {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
   }
   if (config.ColumnResizingAvailable) {
-    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? true : false;
+    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? false : true;
   }
   if (config.DragAvailable) {
     table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false;
@@ -10371,11 +10499,14 @@ const buildStepper = (config, componentScope) => {
   const stepper = _.cloneDeep(Stepper);
   stepper.scope = componentScope;
   stepper.config.main.resetButton = config.resetButton === "YES" ? true : false;
+  if (config.defaultButtonAvailable) {
+    stepper.config.main.defaultButtonAvailable = config.defaultButtonAvailable === "YES" ? true : false;
+  }
   stepper.config.main.resetText = config.resetText || "ResetData";
   stepper.config.main.completeText = config.completeText || "Complete Text";
   stepper.config.main.orientation = config.orientation || "horizontal";
   if (config.sectionLabels) {
-    stepper.config.main.label = config.sectionLabels.map((e, i) => {
+    stepper.config.main.steps = config.sectionLabels.map((e, i) => {
       return { label: e.label, id: i };
     });
   }
@@ -10426,6 +10557,90 @@ const buildPopUp = (config, componentScope) => {
   }
   return popup;
 };
+const dataGrid = {
+  "type": "Control",
+  "scope": "#/properties/dataGrid",
+  "layout": 12,
+  "options": {
+    "widget": "DataGrid"
+  },
+  elements: [],
+  "config": {
+    "main": {
+      elevation: 0,
+      useWrapper: false
+    },
+    style: {}
+  }
+};
+const buildDataGrid = (config, componentScope) => {
+  const DataGrid = _.cloneDeep(dataGrid);
+  DataGrid.scope = componentScope;
+  if (config.elevation) {
+    DataGrid.config.main.elevation = +config.elevation;
+  }
+  DataGrid.config.main.divider = config.divider === "NO" ? false : true;
+  if (config.height) {
+    DataGrid.config.main.height = `${config.height}px`;
+  }
+  if (config.justifyContent) {
+    DataGrid.config.main.justifyContent = config.justifyContent;
+  }
+  if (config.label) {
+    DataGrid.config.main.label = config.label;
+  }
+  if (config.layout) {
+    DataGrid.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.cardLayout) {
+    DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout);
+  }
+  if (config.style) {
+    DataGrid.config.style = JSON.parse(config.style);
+  }
+  return DataGrid;
+};
+const InputSlider = {
+  type: "Control",
+  scope: "#/properties/inputSlider",
+  options: {
+    widget: "InputSlider"
+  },
+  config: {
+    layout: 12,
+    main: {
+      limitToMax: false,
+      max: 1e4,
+      step: 1e3,
+      min: 0,
+      label: "Slider"
+    }
+  }
+};
+const buildInputSlider = (config, componentScope) => {
+  const inputSlider = _.cloneDeep(InputSlider);
+  inputSlider.scope = componentScope;
+  inputSlider.config.main.label = config.label;
+  if (config.layout) {
+    inputSlider.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.limitToMax) {
+    inputSlider.config.main.limitToMax = config.limitToMax === "YES" ? true : false;
+  }
+  if (config.max) {
+    inputSlider.config.main.max = config.max;
+  }
+  if (config.step) {
+    inputSlider.config.main.step = config.step;
+  }
+  if (config.min) {
+    inputSlider.config.main.min = config.min;
+  }
+  if (config.style) {
+    inputSlider.config.main.defaultStyle = JSON.parse(config.style);
+  }
+  return inputSlider;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -10544,6 +10759,12 @@ const buildUiSchema = (config) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
+    case "InputSlider":
+      elements = buildInputSlider(config, componentScope);
+      break;
+    case "DataGrid":
+      elements = buildDataGrid(config, componentScope);
+      break;
     case "Stepper":
       elements = buildStepper(config, componentScope);
       break;
@@ -10669,17 +10890,25 @@ const buildUiSchema = (config) => {
     if ((config == null ? void 0 : config.type) === "LeaderBoard") {
       return elements;
     } else if (config.type == "Table") {
+      const sizeMap = {};
+      if (config.sizeHolder) {
+        config.sizeHolder.map((e, i) => {
+          sizeMap[e.keyName] = e.value;
+        });
+      }
       elements.elements = config.elements.map((e, elemInd) => {
         if (e.type) {
           return {
             accessorKey: e.name,
             header: e.label || e.name,
+            size: sizeMap[e.name] || 180,
             widget: buildUiSchema(e)
           };
         }
         return {
           accessorKey: e.name,
-          header: e.label || e.name
+          header: e.label || e.name,
+          size: sizeMap[e.name] || 180
         };
       });
     } else if (config.type == "Array") {