impaktapps-ui-builder 1.0.4 → 1.0.9-4.card.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "1.0.4",
+    "version": "1.0.94.card.2",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -11,7 +11,7 @@ const TextField = {
       "widget": "InputField"
     },
   config:{
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main:{
       label:"Adhaar Card",
       formatStrArray:["9","9","9","9"," ","9","9","9","9"," ","X9","X9","X9","X9"],
@@ -43,7 +43,7 @@ const PanField = {
       "widget": "InputField"
     },
   config:{
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main:{
       label:"Pan Card",
       placeholder:"AAAAA0000A",

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

@@ -1,18 +1,34 @@
 import _ from "lodash";
 
-const ArrayUiSchema = {
-            type: "Control",
-            scope: "#/properties/adjustments",
-            layout: 11.5,
-            options: {
-                detail: {
-                    type: "HorizontalLayout",
-                    elements: []
-                }
-            }
-        }
-export const buildArray = (config:any,componentScope:string)=>{
- const array = _.cloneDeep(ArrayUiSchema);
- array.scope = componentScope;
-return array;
+const ArrayUiSchema: any = {
+    type: "Control",
+    scope: "#/properties/adjustments",
+    layout: 12,
+    elements: [],
+    config: {
+        main: {}
+    }
+
+}
+export const buildArray = (config: any, componentScope: string) => {
+    const array = _.cloneDeep(ArrayUiSchema);
+    if (config.allExpanded) {
+        array.config.main.allExpanded = config.allExpanded === "YES" ? true : false
+    }
+    if(config.disableAddButton ){
+        array.config.main.disableAddButton  = config.disableAddButton  === "YES" ? true : false
+    }
+    if(config.disableExpandAllButton ){
+        array.config.main.disableExpandAllButton  = config.disableExpandAllButton  === "YES" ? true : false
+    }
+    if(config.disableRowActions ){
+        array.config.main.disableRowActions  = config.disableRowActions  === "YES" ? true : false
+    }
+    if (config.style) {
+        array.config.style = JSON.parse(config.style)
+    }
+    array.config.main.childElementLabel = config.childElementLabel;
+    array.config.main.label = config.label;
+    array.scope = componentScope;
+    return array;
 }

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

@@ -12,7 +12,7 @@ export const buildButton = (config:any,componentScope:string) =>{
 
     }
     if(config.layout){
-      button.config.layout = createLayoutFormat(config.layout)
+      button.config.layout = createLayoutFormat(config.layout, config.type)
     }
     if(config.tooltipMessage){
         button.config.main.tooltipMessage = config.tooltipMessage

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

@@ -4,11 +4,11 @@ import { createLayoutFormat } from "./buildConfig";
 const Checkbox =  {
     "type": "Control",
     "scope": "#/properties/username1",
-    "layout": 12,
     "options": {
       "widget": "CheckBox"
     },
     "config": {
+    "layout": { xs: 6, sm: 6, md: 4, lg: 3 },
       "main": {
         "label": "Welcome to Hyperform",
       }

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

@@ -26,27 +26,31 @@ export default (FormData: any) => {
   return component;
 };
 
-export const createLayoutFormat = (config: any[]) => {
-  if (_.isEmpty(config)) {
-    return {
-      xs: 12,
-      sm: 12,
-      md: 12,
-      lg: 12,
+export const createLayoutFormat = (layout: any[], type?: string) => {
+  if (_.isEmpty(layout)) {
+    const fullLayoutComponents: string[] = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout"]
+    if(fullLayoutComponents.includes(type)){
+      return { xs: 12, sm: 12, md: 12, lg: 12 }
+    }
+    else if(type === "Graph"){
+      return {xs :12,sm:12,md:12,lg:6}
+    }
+    else if(type === "Button"){
+      return { xs: 4, sm: 2.5, md: 2, lg: 1.5 }
+    }
+    else{
+      return { xs: 6, sm: 6, md: 4, lg: 3 }
     }
   }
-  let data: any = {
-    xs: 12,
-    sm: 12,
-    md: 6,
-    lg: 6,
-  };
-  config.map((e: any) => {
-    data[e.key || "xs"] = +e.value || 5.5
+  let data: any = {  };
+
+  layout.map((e: any) => {
+    data[e.key || "xs"] = +e.value || 5.5;
+
   })
   return data;
 };
-export const flatObjectValueInArray = (config: any[]=[]) => {
+export const flatObjectValueInArray = (config: any[] = []) => {
   if (config.length < 1) {
     return
   }

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

@@ -39,10 +39,10 @@ export const buildDataGrid = (config, componentScope) => {
         DataGrid.config.main.label = config.label;
     }
     if (config.layout) {
-        DataGrid.config.layout = createLayoutFormat(config.layout)
+        DataGrid.config.layout = createLayoutFormat(config.layout, config.type)
     }
     if (config.cardLayout) {
-        DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout)
+        DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout, config.type)
     }
     if (config.style) {
         DataGrid.config.style = JSON.parse(config.style)

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

@@ -10,6 +10,9 @@ export const buildDate = (config:any,componentScope:string)=> {
     if(config.layout){
         dateInputField.config.layout = createLayoutFormat(config.layout)
       }
+    if (config.variant) {
+      dateInputField.config.main.variant = config.variant;
+    }
     return dateInputField;
 }
 export const buildDateTime = (config:any,componentScope:string)=>{
@@ -20,5 +23,8 @@ export const buildDateTime = (config:any,componentScope:string)=>{
   if(config.layout){
     dateTimeInputField.config.layout = createLayoutFormat(config.layout)
     }
+  if (config.variant) {
+    dateTimeInputField.config.main.variant = config.variant;
+  }
   return dateTimeInputField;
 }

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

@@ -5,6 +5,7 @@ import { createLayoutFormat } from "./buildConfig";
 export const buildDownloadFile = (config,componentScope) => {
     const DownloadFile: any = _.cloneDeep(downloadFile);
     DownloadFile.scope = componentScope;
+    DownloadFile.config.main.label = config.label;
     if (config.layout) {
       DownloadFile.config.layout = config.layout;
     }

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

@@ -8,7 +8,7 @@ const FileInput = {
       widget: "FileInputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         required: false,
         onUpload: "onFileUpload",
@@ -31,5 +31,8 @@ const FileInput = {
     if (config.style) {
       box.config.style = JSON.parse(config.style)
     }
+    if (config.variant) {
+      box.config.main.variant = config.variant
+    }
     return box;
 }

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

@@ -7,7 +7,7 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
     const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
     horizontalBarGraph.scope = componentScope;
     if (config.layout) {
-      horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+      horizontalBarGraph.config.layout = createLayoutFormat(config.layout, config.type);
     }
     horizontalBarGraph.config.main.type = config.graphType;
     horizontalBarGraph.scope = componentScope;

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

@@ -0,0 +1,15 @@
+import { createLayoutFormat } from "./buildConfig";
+import horizontalLayout from "./uischema/horizontalLayout";
+import _ from "lodash";
+
+export const buildHorizontalLayout = (config, componentScope) => {
+  const horizontal: any = _.cloneDeep(horizontalLayout);
+  horizontal.scope = componentScope;
+  if (config.style) {
+    horizontal.config.style = JSON.parse(config.style)
+  }
+  if (config.layout) {
+    horizontal.config.layout = createLayoutFormat(config.layout, config.type)
+  }
+  return horizontal;
+}

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

@@ -0,0 +1,35 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const imageUiSchema = {
+  type: "Control",
+  scope: "#/properties/Logo",
+
+  options: {
+    widget: "Image",
+  },
+  config: {
+  layout: 3,
+    main: {
+      url: "",
+    },
+    style: {
+    },
+  },
+};
+
+export const buildImage = (config, componentScope) => {
+  const image: any = _.cloneDeep(imageUiSchema);
+  image.scope = componentScope;
+  image.config.main.url = config.imageUrl;
+  if (config.layout) {
+    image.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    image.config.style = JSON.parse(config.style);
+  }
+  if (config.height) {
+    image.config.style.imageStyle = {...image.config.style.imageStyle, height: config.height}
+  }
+  return image;
+};

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

@@ -9,6 +9,9 @@ export const buildLabel = (config,componentScope) => {
     if(config.layout){
       box.config.layout = createLayoutFormat(config.layout)
     }
+    if(config.iconName){
+      box.config.main.iconName = config.iconName
+    }
     if (config.style) {
       box.config.style = JSON.parse(config.style)
     }

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

@@ -38,7 +38,7 @@ export const buildLeaderBoard = (config) => {
         LeaderBoard.config.main.scoreKey = config.scoreKey;
     }
     if (config.layout) {
-        LeaderBoard.config.layout = createLayoutFormat(config.layout);
+        LeaderBoard.config.layout = createLayoutFormat(config.layout, config.type);
     }
     if (config.style) {
         LeaderBoard.config.style = JSON.parse(config.style)

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

@@ -5,7 +5,7 @@ import _ from "lodash";
 export const buildLineGraph = (config, componentScope) => {
   const lineGraph: any = _.cloneDeep(LineGraph);
   if (config.layout) {
-    lineGraph.config.layout = createLayoutFormat(config.layout);
+    lineGraph.config.layout = createLayoutFormat(config.layout, config.type);
   }
   lineGraph.config.main.header = config.heading;
   if (config.height) {

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

@@ -15,6 +15,9 @@ export const buildMultiSelect = (config, componentScope) => {
   if (config.value) {
     multipleSelect.config.main.options = config.value;
   }
+  if (config.variant) {
+    multipleSelect.config.main.variant = config.variant;
+  }
   if (config.lazyLoading) {
       multipleSelect.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
     }

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

@@ -4,7 +4,7 @@ import _ from "lodash";
 export const buildPieGraph = (config, componentScope) => {
   const pieGraph: any = _.cloneDeep(PieGraph);
   if (config.layout) {
-    pieGraph.config.layout = createLayoutFormat(config.layout);
+    pieGraph.config.layout = createLayoutFormat(config.layout, config.type);
   }
   if (config.height) {
     pieGraph.config.style.containerStyle.height = config.height;

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

@@ -34,10 +34,10 @@ export const buildPopUp = (config,componentScope) =>{
     popup.config.main.fullWidth = config.fullWidth === "YES" ? true : false;
     popup.config.main.maxWidth = config.maxWidth||false;
     if (config.layout) {
-      popup.config.layout = createLayoutFormat(config.layout)
+      popup.config.layout = createLayoutFormat(config.layout, config.type)
     }
     if (config.style) {
-      PopUP.config.style = JSON.parse(config.style)
+      popup.config.style = JSON.parse(config.style)
   }
     return popup;
 }

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

@@ -9,7 +9,7 @@ const RadioUiSchema = {
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         label: "Enabled",
         options: ["YES", "NO"],

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

@@ -14,6 +14,9 @@ export const buildSelect = (config: any, componentScope: string) => {
   if (config.lazyLoading) {
     selectInputField.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.variant) {
+    selectInputField.config.main.variant = config.variant;
+  }
   if (config.layout) {
     selectInputField.config.layout = createLayoutFormat(config.layout)
   }

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

@@ -5,7 +5,7 @@ import _ from "lodash";
 export const buildStackbarGraph = (config:any,componentScope:string) => {
     const barGraph: any = _.cloneDeep(BarGraph);
     if (config.layout) {
-      barGraph.config.layout = createLayoutFormat(config.layout);
+      barGraph.config.layout = createLayoutFormat(config.layout, config.type);
     }
     if (config.legendHide) {
       barGraph.config.main.legendAvailable = config.legendHide;

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

@@ -14,6 +14,9 @@ export const buildTabSection = (config:any,componentScope:string) => {
     if (config.sectionLabels) {
       tab.config.main.tabLabels = config.sectionLabels.map(e => e.label);
     }
+    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/buildText.ts

@@ -11,12 +11,18 @@ 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)
   }

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

@@ -40,6 +40,8 @@ import { buildDataGrid } from "./buildDataGrid";
 import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
 import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
+import { buildHorizontalLayout } from "./buildHorizontalLayout";
+import { buildImage } from "./buildImage";
 export let schema = {
   type: "object",
   properties: {},
@@ -141,7 +143,7 @@ function buildRule(configObj: any, tableName?: string, arrayHolderName?: boolean
 export const buildSchema = (config: any, tableName?: string, isArrayType?: boolean) => {
   buildRule(config, tableName, isArrayType);
   if (config?.elements) {
-    if (config.type == "Table" || config.type == "Array") {
+    if ( config.type == "Array") {
       if (!schema.properties[config.name]) {
         schema.properties[config.name] = {
           type: "array",
@@ -206,6 +208,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;
@@ -307,6 +312,8 @@ const buildUiSchema = (config: any, store?: any) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config, componentScope);
       break;
+    case "Image":
+      elements = buildImage(config, componentScope);
       break;
     default:
       schema = {
@@ -329,12 +336,25 @@ 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
+        }
+        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,7 +371,7 @@ 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,
@@ -372,9 +392,8 @@ const buildUiSchema = (config: any, store?: any) => {
           }
           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,12 +405,6 @@ 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)

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

@@ -15,7 +15,7 @@ export const buildWrapperSection = (config, componentScope) => {
     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,10 @@
       widget: "Box",
     },
    
-    config: { layout: 12,
-      main: {},
+    config: { layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+      main: {
+        iconName: ""
+      },
       style:{
         // fontWeight:300
       }