impaktapps-ui-builder 1.0.621 → 1.0.622

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

@@ -0,0 +1,72 @@
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
+import { StackBarLineG } from "./uischema/graph";
+import _ from "lodash";
+
+
+const buildStackBarLineGraph = (config:any,componentScope:string) => {
+    const StackBarLineGraph: any = _.cloneDeep(StackBarLineG);
+    StackBarLineGraph.scope = componentScope;
+    if (config.layout) {
+      StackBarLineGraph.config.layout = createLayoutFormat(config.layout, config.type);
+    }
+    StackBarLineGraph.config.main.type = config.graphType;
+    StackBarLineGraph.scope = componentScope;
+    StackBarLineGraph.config.main.header = config.heading;
+    StackBarLineGraph.config.main.subHeader = config.subHeader;
+    if (config.legendHide) {
+      StackBarLineGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
+    }
+    if (config.bottomAxisAngle) {
+      StackBarLineGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
+    }
+    if (config.legendLabels) {
+      StackBarLineGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
+    }
+    if(config.legendDirection){
+      StackBarLineGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
+    }
+    if (config.height) {
+      StackBarLineGraph.config.style.containerStyle.height = config.height;
+    }
+    if (config.pieArcColors) {
+      StackBarLineGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
+    }
+    if(config.yAxisTickCount){
+      StackBarLineGraph.config.main.yAxisTickCount = config.yAxisTickCount
+    }
+    if(config.xAxisTickCount){
+      StackBarLineGraph.config.main.xAxisTickCount = config.xAxisTickCount
+    }
+    if (config.xAxisValue) {
+      StackBarLineGraph.config.main.xAxisValue = config.xAxisValue;
+    }
+    if(config.xAxisType) {
+      StackBarLineGraph.config.main.xAxisType = config.xAxisType;
+    }
+    if (config.bottomLabel) {
+      StackBarLineGraph.config.main.bottomLabel = config.bottomLabel;
+    }
+    if (config.leftLabel) {
+      StackBarLineGraph.config.main.leftLabel = config.leftLabel;
+    }
+    if (config.rightLabel) {
+      StackBarLineGraph.config.main.rightLabel = config.rightLabel;
+    }
+    if (config.disableLeftLabel) {
+      StackBarLineGraph.config.main.disableLeftLabel = config.disableLeftLabel==="YES"? true: false;
+    }
+    if (config.growthRateKey) {
+      StackBarLineGraph.config.main.growthRateKey = config.growthRateKey;
+    }
+    if (config.tooltipUnit) {
+      StackBarLineGraph.config.main.tooltipUnit = config.tooltipUnit;
+    }
+    if (config.leftMargin) {
+      StackBarLineGraph.config.style.labelStyle.margin ={
+        left: config.leftMargin
+      }
+    }
+    return StackBarLineGraph
+}
+
+export default buildStackBarLineGraph;

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

@@ -1,3 +1,4 @@
+import { flatObjectValueInArray } from "./buildConfig";
 import Tabsection from "./uischema/tabsection";
 import _ from "lodash";
  
@@ -13,6 +14,10 @@ export const buildTabSection = (config:any,componentScope:string) => {
     }
     if (config.sectionLabels) {
       tab.config.main.tabLabels = config.sectionLabels.map(e => e.label);
+      tab.config.main.tabIcons = config.sectionLabels.map(e => e.icon);
+    }
+    if (config.style) {
+      tab.config.style = JSON.parse(config.style)
     }
     tab.config.main.id = config.name;
     return tab

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

@@ -1,3 +1,4 @@
+import { createLayoutFormat } from "./buildConfig";
 import Table from "./uischema/table";
 import _ from "lodash";
 
@@ -10,6 +11,9 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.lazyLoading) {
     table.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.defaultColumnSize) {
+    table.config.main.defaultColumnSize = config.defaultColumnSize
+  }
   if (config.enableRowMovement) {
     table.config.main.enableRowMovement = config.enableRowMovement === "YES" ? true : false;
   }
@@ -26,9 +30,6 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.paginateExpandedRows) {
     table.config.main.paginateExpandedRows = config.paginateExpandedRows === "YES" ? true : false;
   }
-  if (config.treeStructure) {
-    table.config.main.treeStructure = config.treeStructure === "YES" ? "flatTreeMap" : false;
-  }
   if (config.SelectionAvailable) {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false
   };
@@ -41,28 +42,28 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.downloadAllData) {
     table.config.main.downloadAllData = config.downloadAllData === "YES" ? true : false
   }
-  if(config.disableGlobalSearch){
+  if (config.disableGlobalSearch) {
     table.config.main.disableGlobalSearch = config.disableGlobalSearch === "YES" ? true : false
   }
-  if(config.disableColumnFilter){
+  if (config.disableColumnFilter) {
     table.config.main.disableColumnFilter = config.disableColumnFilter === "YES" ? true : false
   }
-  if(config.disableSorting){
+  if (config.disableSorting) {
     table.config.main.disableSorting = config.disableSorting === "YES" ? true : false
   }
-  if(config.disableEditColumn){
+  if (config.disableEditColumn) {
     table.config.main.disableEditColumn = config.disableEditColumn === "YES" ? true : false
   }
-  if(config.disableFullScreenToggle){
+  if (config.disableFullScreenToggle) {
     table.config.main.disableFullScreenToggle = config.disableFullScreenToggle === "YES" ? true : false
   }
-  if(config.disableDensityToggle){
+  if (config.disableDensityToggle) {
     table.config.main.disableDensityToggle = config.disableDensityToggle === "YES" ? true : false
   }
-  if(config.disableDownloadFile){
+  if (config.disableDownloadFile) {
     table.config.main.disableDownloadFile = config.disableDownloadFile === "YES" ? true : false
   }
-  if(config.disablePagination){
+  if (config.disablePagination) {
     table.config.main.disablePagination = config.disablePagination === "YES" ? true : false
   }
   if (config.Table_Download_Keys_Name) {
@@ -71,5 +72,14 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.selectKey) {
     table.config.main.selectKey = config.selectKey
   }
+  if (config.maxPageSize) {
+    table.config.main.maxPageSize = config.maxPageSize
+  }
+  if(config.initialDensity){
+    table.config.main.initialDensity = config.initialDensity
+  }
+  if(config.layout){
+        table.config.layout = createLayoutFormat(config.layout)
+  }
   return table;
 };

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

@@ -26,6 +26,15 @@ export const buildTextField = (config: any, componentScope: string) => {
   if (config.layout) {
     inputField.config.layout = createLayoutFormat(config.layout)
   }
+  if (config.toolTip) {
+      inputField.config.main.toolTip = config.toolTip;
+  }
+  if (config.toolTipPosition) {
+    inputField.config.main.toolTipPosition = config.toolTipPosition;
+  }
+  if(config.iconName){
+    inputField.config.main.startIcon = config.iconName;
+  }
   inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
   inputField.scope = componentScope;
   return inputField;

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

@@ -1,6 +1,4 @@
 import _ from "lodash";
-import emptyBox from "./uischema/emptyBox";
-import cardSlider from "./uischema/cardSlider";
 import { buildLeaderBoard } from "./buildLeaderboard";
 import { buildProgressBarCard } from "./buildProgressBarCard";
 import { buildProgressBar } from "./buildProgressBar";
@@ -19,6 +17,7 @@ import { buildLabel } from "./buildLabel";
 import { buildUploadFile } from "./buildUplaodFile";
 import { buildDownloadFile } from "./buildDownloadFile";
 import { buildCard } from "./buildCard";
+import { buildMetricCard } from "./buildMetricCard";
 import { buildDate, buildDateTime } from "./buildDate";
 import { buildRankCard } from "./buildRankCard";
 import { buildRollAndDice } from "./buildRollAndDice";
@@ -40,136 +39,99 @@ import { buildDataGrid } from "./buildDataGrid";
 import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
 import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
+import { buildHorizontalLayout } from "./buildHorizontalLayout";
+import { buildImage } from "./buildImage";
+import buildAreaGraph from "./buildAreaGraph";
+import buildStackBarLineGraph from "./buildStackBarLineGraph";
+import { buildCamera } from "./buildCamera";
+import { buildButtonGroup } from "./buildGroupButton";
+import { buildPopOver } from "./buildPopover";
+import { buildOTP_Input } from "./buildOTP_inputs";
+import { buildPdfViewer } from "./buildPdfViewer";
+import { buildHierarchyChart } from "./buildHierarchyChart";
 export let schema = {
   type: "object",
   properties: {},
   required: []
 };
-//MultipleSelect
-function buildRule(configObj: any, tableName?: string, arrayHolderName?: boolean) {
-  if (arrayHolderName) {
-    if (schema.properties?.[tableName]?.items?.properties) {
-      if (!schema.properties?.[tableName]?.items?.properties?.[configObj.name]) {
-        schema.properties[tableName].items.properties[configObj.name] = {};
-        if (configObj.type === "Select" && configObj.value?.length > 0) {
-          schema.properties[tableName].items.properties[configObj.name] = {
-            oneOf: configObj.value.map((e) => {
-              return { const: e.value, title: e.label }
-            })
-          }
-        }
-        else if (configObj.type === "MultipleSelect" && configObj.value?.length > 0) {
-          schema.properties[tableName].items.properties[configObj.name] = {
-            items: {
-              oneOf: configObj.value.map((e) => {
-                return { const: e.value, title: e.label }
-              })
-            }
-          }
-        }
-      }
-    }
-  } else if ((configObj.type === "Select" || configObj.type === "MultipleSelect") && configObj.value?.length > 0) {
-    if (configObj.type === "Select") {
-      schema.properties[configObj.name] = {
-        oneOf: configObj.value.map((e) => {
-          return { const: e.value, title: e.label }
-        })
-      }
-    }
-    else if (configObj.type === "MultipleSelect") {
-      schema.properties[configObj.name] = {
+function buildOneOf(values: any[]) {
+  return values.map((e) => ({
+    const: e.value,
+    title: e.label
+  }));
+}
+export function buildSchemaFromConfig(config: any, parentSchema: any) {
+  if (config.elements) {
+    if (config.type === "Array") {
+      parentSchema.properties ??= {};
+      parentSchema.properties[config.name] ??= {
+        type: "array",
         items: {
-          oneOf: configObj.value.map((e) => {
-            return { const: e.value, title: e.label }
-          })
-        }
-      }
-    }
-  }
-  if (configObj.validation) {
-    configObj.validation.forEach((rule: any) => {
-      if (tableName) {
-        if (schema.properties?.[tableName]?.items?.properties) {
-          if (!schema.properties?.[tableName]?.items?.properties?.[configObj.name]) {
-            schema.properties[tableName].items.properties[configObj.name] = {};
-            if (configObj.type === "Select" || configObj.value?.length > 0) {
-              schema.properties[tableName].items.properties[configObj.name] = {
-                oneOf: configObj.value.map((e) => {
-                  return { const: e.value, title: e.label }
-                })
-              }
-            }
-            else if (configObj.type === "MultipleSelect" || configObj.value?.length > 0) {
-              schema.properties[tableName].items.properties[configObj.name] = {
-                items: {
-                  oneOf: configObj.value.map((e) => {
-                    return { const: e.value, title: e.label }
-                  })
-                }
-              }
-            }
-          }
-          if (rule.validationType === "required") {
-            schema.properties?.[tableName]?.items?.required.push(configObj.name)
-          } else {
-            schema.properties[tableName].items.properties[configObj.name]["type"] = "string"
-            schema.properties[tableName].items.properties[configObj.name][rule.validationType] =
-              isNaN(rule.validationValue) ?
-                rule.validationValue : Number(rule.validationValue)
-          }
-
-        }
-      } else {
-        if (!schema.properties[configObj.name]) {
-          schema.properties[configObj.name] = {};
-        }
-        if (rule.validationType === "required") {
-          schema.required.push(configObj.name)
-        } else {
-          schema.properties[configObj.name]["type"] = "string"
-          schema.properties[configObj.name][rule.validationType] =
-            isNaN(rule.validationValue) ?
-              rule.validationValue : Number(rule.validationValue)
-        }
-      }
-    });
-  }
+          type: "object",
+          properties: {},
+          required: [],
+        },
+      };
 
+      const arrayItemSchema = parentSchema.properties[config.name].items;
 
-}
-export const buildSchema = (config: any, tableName?: string, isArrayType?: boolean) => {
-  buildRule(config, tableName, isArrayType);
-  if (config?.elements) {
-    if ( config.type == "Array") {
-      if (!schema.properties[config.name]) {
-        schema.properties[config.name] = {
-          type: "array",
-          items: {
-            type: "object",
-            properties: {},
-            required: []
-          }
-        }
-      }
-      config.elements.map((e, elemInd) => {
-        buildSchema(e, config.name, config.type === "Array" ? true : false)
-      })
+      config.elements?.forEach((child: any) =>
+        buildSchemaFromConfig(child, arrayItemSchema)
+      );
+      return;
+    } else {
+      config.elements?.forEach((child: any) =>
+        buildSchemaFromConfig(child, parentSchema)
+      );
+      return;
     }
-    else {
-      config.elements.map((e, elemInd) => {
-        buildSchema(e)
-      })
+  }
+  parentSchema.properties ??= {};
+  parentSchema.properties[config.name] ??= {};
+  const fieldSchema = parentSchema.properties[config.name];
+  config.validation?.forEach((v: any) => {
+    if (v.validationType === "required") {
+      parentSchema.required ??= [];
+      parentSchema.required.push(config.name);
+    } else if (v.validationType === "readOnly") {
+      fieldSchema.type = "string";
+      fieldSchema.disabled = true;
+    } else {
+      fieldSchema.type = "string";
+      fieldSchema[v.validationType] = isNaN(v.validationValue)
+        ? v.validationValue
+        : Number(v.validationValue);
     }
+  });
+  if (config.type === "Select" && config.value?.length) {
+    fieldSchema.oneOf = config.value.map((v: any) => ({
+      const: v.value,
+      title: v.label,
+    }));
+  }
+  if (config.type === "MultipleSelect" && config.value?.length) {
+    fieldSchema.type = "array";
+    fieldSchema.items = {
+      oneOf: config.value.map((v: any) => ({
+        const: v.value,
+        title: v.label,
+      })),
+    };
   }
-  return schema;
 }
 
+export const buildSchema = (config) => {
+  buildSchemaFromConfig(config, schema)
+  return schema;
+}
 
 const buildUiSchema = (config: any, store?: any) => {
   let elements: any = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
+    case "OTP_Input":
+      elements = buildOTP_Input(config, componentScope);
+      break;
     case "TreeMap":
       elements = buildTreeMap(config, componentScope)
       break;
@@ -188,6 +150,9 @@ const buildUiSchema = (config: any, store?: any) => {
     case "PopUp":
       elements = buildPopUp(config, componentScope);
       break;
+    case "PopOver":
+      elements = buildPopOver(config, componentScope);
+      break;
     case "FileInput":
       elements = buildFileInput(config, componentScope);
       break;
@@ -206,6 +171,9 @@ const buildUiSchema = (config: any, store?: any) => {
     case "WrapperSection":
       elements = buildWrapperSection(config, componentScope);
       break;
+    case "HorizontalLayout":
+      elements = buildHorizontalLayout(config, componentScope);
+      break;
     case "Text":
       elements = buildTextField(config, componentScope);
       break;
@@ -225,6 +193,9 @@ const buildUiSchema = (config: any, store?: any) => {
 
       elements = buildButton(config, componentScope);
       break;
+    case "ButtonGroup":
+      elements = buildButtonGroup(config, componentScope);
+      break;
     case "Table":
       elements = buildTable(config, componentScope);
       break;
@@ -249,6 +220,12 @@ const buildUiSchema = (config: any, store?: any) => {
     case "card":
       elements = buildCard(config, componentScope, store);
       break;
+    case "MetricCard":
+      elements = buildMetricCard(config, componentScope, store);
+      break;
+    case "HierarchyChart":
+      elements = buildHierarchyChart(config, componentScope, store);
+      break;
     case "Graph":
       switch (config.graphType) {
         case "BarGraph":
@@ -265,6 +242,12 @@ const buildUiSchema = (config: any, store?: any) => {
         case "HorizontalStackBarGraph":
           elements = buildHorizontalBarGraph(config, componentScope);
           break;
+        case "AreaGraph":
+          elements = buildAreaGraph(config, componentScope);
+          break;
+        case "StackBarLineGraph":
+          elements = buildStackBarLineGraph(config, componentScope);
+          break;
         default:
           elements = buildStackbarGraph(config, componentScope);
           break;
@@ -307,6 +290,14 @@ const buildUiSchema = (config: any, store?: any) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config, componentScope);
       break;
+    case "Image":
+      elements = buildImage(config, componentScope);
+      break;
+    case "Camera":
+      elements = buildCamera(config, componentScope)
+      break;
+    case "PdfViewer":
+      elements = buildPdfViewer(config, componentScope);
       break;
     default:
       schema = {
@@ -319,7 +310,17 @@ const buildUiSchema = (config: any, store?: any) => {
 
   if (config?.elements) {
     if (config?.type === "LeaderBoard") {
-      return elements;
+      const rowElements = []
+      config.elements.map((cellElem) => {
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          columnKey: cellElem.columnKey
+        }
+        rowElements.push({ ...commonProperties })
+      })
+      elements.elements = rowElements;
     }
     else if (config.type == "ColumnGroup") {
       const sizeMap = {}
@@ -329,12 +330,26 @@ const buildUiSchema = (config: any, store?: any) => {
         });
       }
       elements.elements = config.elements.map((cellElem, elemInd) => {
-        return {
+        const commonProperties = {
           accessorKey: cellElem.name,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
-          type: cellElem.columnFormat,
-          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : []
+          enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
+          columnFilterModeOptions: cellElem.filteringOptions,
+          enableSorting: cellElem.enableSorting === "No" ? false : true,
+          columnKey: cellElem.columnKey,
+          dateFormat: cellElem.dateFormat,
+        }
+        if (cellElem.type) {
+          const tableElem = {
+            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
+            ...commonProperties,
+            ...(cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store) : {})
+          }
+          return tableElem
+        } else {
+          return { ...commonProperties }
         }
       })
     } else if (config.type == "Table") {
@@ -351,13 +366,14 @@ const buildUiSchema = (config: any, store?: any) => {
       config.elements.filter((cellElem, elemInd) => {
         const commonProperties = {
           accessorKey: cellElem.name,
-          type: cellElem.columnFormat,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
           enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
           columnFilterModeOptions: cellElem.filteringOptions,
           enableSorting: cellElem.enableSorting === "No" ? false : true,
-          columnKey: cellElem.columnKey
+          columnKey: cellElem.columnKey,
+          dateFormat: cellElem.dateFormat,
         }
         if (cellElem.type) {
           if (cellElem.elementType == "action") {
@@ -367,14 +383,13 @@ const buildUiSchema = (config: any, store?: any) => {
           }
           if (cellElem.elementType == "tableHeader") {
             const headerElem = buildUiSchema(cellElem, store);
-            tableHeaderElements.push({widget:headerElem});
+            tableHeaderElements.push({ widget: headerElem });
             return false;
           }
           const tableElem = {
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
-            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
-            ...commonProperties
-
+            ...commonProperties,
+            ...(cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store) : {})
           }
           rowElements.push(tableElem)
         } else {
@@ -392,6 +407,11 @@ const buildUiSchema = (config: any, store?: any) => {
       });
     }
   }
+  if (config.tabLabelElements) {
+    elements.tabLabelElements = config.tabLabelElements.map((e: any, elemInd: number) => {
+      return buildUiSchema(e, store)
+    });
+  }
   return elements;
 }
 

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

@@ -16,6 +16,12 @@ export const buildUploadFile = (config, componentScope) => {
   if (config.required) {
     UploadFile.config.main.required = true;
   }
+  if (config.toolTip) {
+      UploadFile.config.main.toolTip = config.toolTip;
+  }
+  if (config.toolTipPosition) {
+    UploadFile.config.main.toolTipPosition = config.toolTipPosition;
+  }
   UploadFile.config.main.errorMessage = config.errorMessage;
   return UploadFile;
 }

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

@@ -8,8 +8,13 @@ export const buildWrapperSection = (config, componentScope) => {
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
   wrapper.config.main.isAccordion = config.isAccordion === "No" ? false : true;
-  if(config.defaultStyle){
-  wrapper.config.defaultStyle = config.defaultStyle ==="YES" ? true : false;
+  wrapper.config.main.defaultClosed = config.defaultClosed === "YES" ? true : false;
+  wrapper.config.main.icon = config.iconUrl;
+  wrapper.config.main.rowSpacing = Number(config.rowSpacing);
+  wrapper.config.main.columnSpacing = Number(config.columnSpacing);
+  wrapper.config.main.spacing = Number(config.spacing);
+  if (config.defaultStyle) {
+    wrapper.config.defaultStyle = config.defaultStyle === "YES" ? true : false;
   }
   if (config.style) {
     wrapper.config.style = JSON.parse(config.style)

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

@@ -7,7 +7,10 @@
     },
    
     config: { layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-      main: {},
+      main: {
+        iconName: "",
+        onClick: "onClick",
+      },
       style:{
         // fontWeight:300
       }