impaktapps-ui-builder 1.0.4 → 1.0.5

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;
   }
@@ -41,28 +45,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 +75,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

@@ -11,15 +11,30 @@ export const buildTextField = (config: any, componentScope: string) => {
   if (config.multiline) {
     inputField.config.main.multiline = config.multiline === "YES" ? true : false;
   }
+  if (config.keyName) {
+    inputField.config.main.keyName = config.keyName;
+  }
   if (config.InputFormatingAndMasking) {
     inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
   }
   if (config.placeholder) {
     inputField.config.main.placeholder = config.placeholder;
   }
+  if (config.variant) {
+    inputField.config.main.variant = config.variant;
+  }
   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/buildTextArea.ts

@@ -10,7 +10,7 @@ const TextArea =  {
       widget: "TextArea",
     },
     config: {
-      layout:{xs:12,sm:12,md:5.5,lg:5.5},
+      layout:12,
       style:{
         containerStyle:{
           borderRadius:"20px",
@@ -37,7 +37,7 @@ export const buildTextArea = (config:any,componentScope:string) =>{
     textArea.config.main.heading = config.label;
   
     if(config.layout){
-        textArea.config.layout = createLayoutFormat(config.layout)
+        textArea.config.layout = createLayoutFormat(config.layout, config.type)
       }
       if (config.style) {
         textArea.config.style = JSON.parse(config.style)

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

@@ -10,7 +10,7 @@ export const buildThoughtOfTheDay = (config,componentScope) =>{
       thought.config.main.thought = `${config.thought}`
     }
     if(config.layout){
-      thought.config.layout = createLayoutFormat(config.layout)
+      thought.config.layout = createLayoutFormat(config.layout, config.type)
     }
     if(config.label){
       thought.config.main.label = config.label;

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

@@ -5,6 +5,7 @@ const TreeMap = {
     "type": "Control",
     "scope": "#/properties/TreeMap2",
     "config": {
+        layout: 12,
         "main": {
             "layout": "cartsian",
             orientation: "vertical",
@@ -34,7 +35,7 @@ export const buildTreeMap = (config, componentScope) => {
         treMap.config.main.header = config.label;
     }
     if (config.layout) {
-        treMap.config.layout = createLayoutFormat(config.layout);
+        treMap.config.layout = createLayoutFormat(config.layout, config.type);
     }
     if (config.orientation) {
         treMap.config.main.orientation = config.orientation;

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,98 @@ 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";
 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 == "Table" || 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 +149,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 +170,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 +192,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 +219,9 @@ const buildUiSchema = (config: any, store?: any) => {
     case "card":
       elements = buildCard(config, componentScope, store);
       break;
+    case "MetricCard":
+      elements = buildMetricCard(config, componentScope, store);
+      break;
     case "Graph":
       switch (config.graphType) {
         case "BarGraph":
@@ -265,6 +238,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 +286,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 +306,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 +326,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 +362,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 +379,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 {
@@ -386,18 +397,17 @@ const buildUiSchema = (config: any, store?: any) => {
       elements.config.action = tableActionElement;
       elements.config.main.headerIcons.elements = tableHeaderElements;
     }
-
-    else if (config.type == "Array") {
-      elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
-        return buildUiSchema(e, store)
-      });
-    }
     else {
       elements.elements = config.elements.map((e: any, elemInd: number) => {
         return buildUiSchema(e, store)
       });
     }
   }
+  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,14 +8,19 @@ 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)
   }
   if (config.layout) {
-    wrapper.config.layout = createLayoutFormat(config.layout)
+    wrapper.config.layout = createLayoutFormat(config.layout, config.type)
   }
   return wrapper;
 }

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

@@ -49,9 +49,6 @@ export const APISection = {
     {
       type: "Control",
       scope: "#/properties/headers",
-      options: {
-        widget: "Array",
-      },
       config: {
         layout: 12,
         main: {
@@ -113,9 +110,6 @@ export const APISection = {
     {
       type: "Control",
       scope: "#/properties/body",
-      options: {
-        widget: "Array",
-      },
       config: {
         layout: 12,
         main: {

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

@@ -2,7 +2,7 @@ export const ArrayLayout = {
     "type": "Control",
         "scope": "#/properties/adjustments",
             "config": {
-        "layout": 11.5
+        "layout": 12
     },
     "options": {
         "name": "adjustments",

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

@@ -6,8 +6,11 @@
       widget: "Box",
     },
    
-    config: { layout: 12,
-      main: {},
+    config: { layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+      main: {
+        iconName: "",
+        onClick: "onClick",
+      },
       style:{
         // fontWeight:300
       }