impaktapps-ui-builder 0.0.275 → 0.0.276

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

@@ -1,3 +1,4 @@
 declare const _default: (FormData: any) => any;
 export default _default;
 export declare const createLayoutFormat: (config: any[]) => any;
+export declare const flatObjectValueInArray: (config: any[]) => any[];

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

@@ -0,0 +1 @@
+export declare const buildLineGraph: (config: any, componentScope: any) => any;

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

@@ -0,0 +1 @@
+export declare const buildRadio: (config: any, componentScope: any) => any;

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

@@ -0,0 +1,6 @@
+export declare const buildSchema: (config: any) => {
+    type: string;
+    properties: {};
+    required: any[];
+};
+export default buildSchema;

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

@@ -1,6 +1,2 @@
 declare const buildUiSchema: (config: any) => any;
 export default buildUiSchema;
-export declare const buildSchema: (config: any) => {
-    properties: {};
-};
-export declare const buildProperties: (config: any) => {};

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

@@ -6,12 +6,7 @@ declare const _default: {
     };
     elements: any[];
     config: {
-        layout: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-        };
+        layout: number;
         main: {};
     };
 };

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

@@ -7,10 +7,17 @@ declare const _default: {
             label: string;
             divider: boolean;
         };
+        style: {
+            wrapperStyle: {
+                height: {
+                    xs: number;
+                    sm: number;
+                };
+            };
+        };
         wrapperStyle: {
             position: string;
             width: string;
-            height: number;
         };
     };
     elements: ({

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

@@ -5,10 +5,17 @@ declare const _default: {
         widget: string;
     };
     config: {
-        layout: number;
+        layout: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
+        width: number;
+        segments: string;
         main: {
             currentValueText: string;
-            customSegmentLabels: {};
+            customSegmentLabels: any[];
             data: {
                 maxValue: number;
                 value: number;
@@ -22,7 +29,6 @@ declare const _default: {
             needleColor: string;
             startColor: string;
             textColor: string;
-            segments: number;
             endColor: string;
             containerStyle: {
                 background: string;

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

@@ -0,0 +1,31 @@
+export declare const ValidationSection: {
+    type: string;
+    elements: {
+        type: string;
+        scope: string;
+        layout: number;
+        options: {
+            detail: {
+                type: string;
+                elements: {
+                    type: string;
+                    scope: string;
+                    options: {
+                        widget: string;
+                    };
+                    config: {
+                        layout: {
+                            xs: number;
+                            sm: number;
+                            md: number;
+                            lg: number;
+                        };
+                        main: {
+                            label: string;
+                        };
+                    };
+                }[];
+            };
+        };
+    }[];
+};

package/dist/src/impaktapps-ui-builder/lib/index.d.ts

@@ -4,4 +4,5 @@ export { default as pageMasterComponents } from "../builder/services/component";
 export { default as pageService } from "../runtime/services/service";
 export { default as buildConfig } from "../builder/build/buildConfig";
 export { default as buildUiSchema } from "../builder/build/buildUiSchema";
+export { default as buildSchema } from "../builder/build/buildSchema";
 export { default as clearPreviousCache } from "../builder/services/clearLocalStorage";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.275",
+    "version": "0.0.276",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -7,16 +7,23 @@ export const buildCard = (config,componentScope) =>{
     if (config.style) {
       card.config.style = JSON.parse(config.style)
     }
-    card.elements[0].scope = `#/properties/${config.name.replace(/ /g, "")}/value`
-    card.elements[1].scope = `#/properties/${config.name.replace(/ /g, "")}/url`
-    card.elements[2].scope = `#/properties/${config.name.replace(/ /g, "")}/description`
+    card.elements[0].scope = `#/properties/${config.name}/properties/value`
+    card.elements[1].scope = `#/properties/${config.name}/properties/url`
+    card.elements[2].scope = `#/properties/${config.name}/properties/description`
     if(config.layout){
       card.config.layout = createLayoutFormat(config.layout)
     }
-    
-    card.elements[0].config.main.heading = config.label;
-    card.elements[1].config.main.url = config.url;
-    card.elements[2].config.main.heading = config.description;
+    // if(config.label){
+    //   card.elements[0].config.main.heading = config.label;
+    // }
+    // if(config.url){
+    //   card.elements[1].config.main.url = config.url;
+    // }
+    // if(config.description){
+    //   card.elements[2].config.main.heading = config.description;
+    // }
+   
+  
     
     return card;
 }

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

@@ -7,6 +7,9 @@ export default (FormData: any) => {
   //   component.layout = createData(FormData?.layout, "layout");
   //   delete formData.layout
   // }
+  // if(!formData.type ){
+  //  component.type = "page";
+  // }
   if(formData.pageName){
     delete formData.pageName
   }
@@ -37,3 +40,10 @@ export const createLayoutFormat = (config: any[]) => {
   })
   return data;
 };
+export const flatObjectValueInArray = (config:any[])=>{
+  const keyName = Object.keys(config[0])[0]
+  const data = config.map((e)=>{
+    return e[keyName]
+  })
+  return data;
+}

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

@@ -1,11 +1,13 @@
+import { createLayoutFormat } from "./buildConfig";
 import { HorizontalBarGraph } from "./uischema/graph";
 import _ from "lodash";
 
 
 const buildHorizontalBarGraph = (config:any,componentScope:string) => {
     const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
+    horizontalBarGraph.scope = componentScope;
     if (config.layout) {
-      horizontalBarGraph.config.layout = config.layout;
+      horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
     }
     horizontalBarGraph.scope = componentScope;
     horizontalBarGraph.config.main.header = config.heading;
@@ -17,7 +19,7 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
         config.containerBackground;
     }
     if (config.height) {
-      horizontalBarGraph.config.containerStyle.height =
+      horizontalBarGraph.config.style.containerStyle.height =
         config.height;
     }
     if (config.bottomLabel) {

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

@@ -1,25 +1,32 @@
+import { flatObjectValueInArray } from "./buildConfig";
 import { LineGraph } from "./uischema/graph";
 import _ from "lodash";
 
-const buildLineGraph = (config,componentScope) =>{
-    const lineGraph: any = _.cloneDeep(LineGraph);
-    if (config.layout) {
-      lineGraph.config.layout = config.layout;
-    }
-    lineGraph.config.main.heading = config.heading;
-    if (config.containerBackground) {
-      lineGraph.config.containerStyle.background =
-        config.containerBackground;
-    }
-    if (config.height) {
-      lineGraph.config.containerStyle.height = config.height;
-    }
-    if (config.bottomLabel) {
-      lineGraph.config.main.bottomLabel = config.bottomLabel;
-    }
-    if (config.leftLabel) {
-      lineGraph.config.main.leftLabel = config.leftLabel;
-    }
-    lineGraph.scope = componentScope;
-    return lineGraph;
+export const buildLineGraph = (config, componentScope) => {
+  const lineGraph: any = _.cloneDeep(LineGraph);
+  if (config.layout) {
+    lineGraph.config.layout = config.layout;
+  }
+  lineGraph.config.main.header = config.heading;
+  if (config.height) {
+    lineGraph.config.style.containerStyle.height = config.height;
+  }
+  if (config.bottomLabel) {
+    lineGraph.config.main.bottomLabel = config.bottomLabel;
+  }
+  if (config.leftLabel) {
+    lineGraph.config.main.leftLabel = config.leftLabel;
+  }
+  if (config.legendHide) {
+    lineGraph.config.main.legendAvailabe = config.legendHide==="YES"?false:true;
+  }
+  if (config.legendLabels) {
+    lineGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  }
+
+  if (config.pieArcColors) {
+    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+  }
+  lineGraph.scope = componentScope;
+  return lineGraph;
 }

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

@@ -1,31 +1,27 @@
+import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
 import { PieGraph } from "./uischema/graph";
 import _ from "lodash";
-
+// flatObjectValueInArray
 export const buildPieGraph = (config,componentScope) =>{
     const pieGraph: any = _.cloneDeep(PieGraph);
     if (config.layout) {
-      pieGraph.config.layout = config.layout;
-    }
-    if (config.containerBackground) {
-      pieGraph.config.style.containerStyle.background =
-        config.containerBackground;
+      pieGraph.config.layout = createLayoutFormat(config.layout);
     }
     if (config.height) {
       pieGraph.config.style.containerStyle.height = config.height;
     }
-    if (config.legendAvailabe) {
-      pieGraph.config.main.legendAvailabe = config.legendAvailabe==="YES"?false:true;
+    if (config.legendHide) {
+      pieGraph.config.main.legendAvailabe = config.legendHide==="YES"?false:true;
     }
     pieGraph.scope = componentScope;
     pieGraph.config.main.header = config.heading;
-    if(config.bottomLabel){
-    pieGraph.config.main.bottomLabel = config.bottomLabel;
-    }
-    if(config.leftLabel){
-      pieGraph.config.main.leftLabel = config.leftLabel;
-      }
-      if(config.tooltipDataKey){
-        pieGraph.config.main.tooltipDataKey = config.tooltipDataKey;
+  
+      if(config.legendLabels){
+        pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
         }
+    
+        if(config.pieArcColors){
+          pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+          }
     return pieGraph;
 }

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

@@ -0,0 +1,35 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const RadioUiSchema = {
+    type: "Control",
+    scope: "#/properties/invoiceEnabled",
+
+    options: {
+      widget: "RadioInputField",
+    },
+    config: {
+      layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+      main: {
+        label: "Enabled",
+        options: ["YES", "NO"],
+        errorMessage: "Enabled is not marked as YES or NO",
+      },
+    },
+  };
+
+  export const buildRadio = (config,componentScope) => {
+    const Radio: any = _.cloneDeep(RadioUiSchema);
+    Radio.scope = componentScope;
+    Radio.config.main.heading = config.label
+    if(config.layout){
+        Radio.config.layout = createLayoutFormat(config.layout)
+    }
+    if (config.sectionLabels) {
+        Radio.config.main.options = config.sectionLabels.map(e => e.label||e.Options);
+      }
+    if (config.style) {
+        Radio.config.style = JSON.parse(config.style)
+    }
+    return Radio;
+}

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

@@ -0,0 +1,34 @@
+
+const schema = {
+    type: "object",
+    properties: {},
+    required: []
+};
+
+export const buildSchema = (config: any) => {
+    function buildRule(configObj: any) {
+        if (configObj.validation) {
+            configObj.validation.forEach((rule: any) => {
+                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)
+                }
+            });
+        }
+    }
+    buildRule(config)
+    if (config?.elements) {
+        config.elements.forEach(buildRule);
+    }
+    console.log(schema)
+    window.localStorage.setItem("schemaDemo",JSON.stringify(schema))
+    return schema;
+};
+export default buildSchema;

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

@@ -1,3 +1,4 @@
+import { createLayoutFormat } from "./buildConfig";
 import SpeedoMeter from "./uischema/speedoMeter";
 import _ from "lodash";
 
@@ -5,19 +6,31 @@ export const buildSpeedoMeter = (config:any,componentScope:string) => {
     const speedoMeter: any = _.cloneDeep(SpeedoMeter);
     speedoMeter.scope = componentScope;
     if (config.layout) {
-      speedoMeter.config.layout = config.layout;
+      speedoMeter.config.layout = createLayoutFormat(config.layout);
     }
     if (config.heading) {
       speedoMeter.config.main.header = config.heading;
     }
-
-    if (config.currentValueText) {
+    if (config.segments) {
+      speedoMeter.config.main.segments = config.segments;
+    }
+    if (config.style) {
+     const styleObj =  JSON.parse(config.style)
+     if(styleObj?.style){
+      speedoMeter.config.style = {...speedoMeter.config.style,...styleObj.style}
+      }
+      if(styleObj?.containerStyle){
+      speedoMeter.config.style.containerStyle = {...speedoMeter.config.style.containerStyle,...styleObj.containerStyle}
+      }
+      
+    }
+    if(config.width){
+      speedoMeter.config.main.width =
+      config.width;
+    }
+    if (config.speedoCaption) {
       speedoMeter.config.main.currentValueText =
-        config.currentValueText;
-    }
-    if (config.customSegmentLabels) {
-      speedoMeter.config.main.customSegmentLabels =
-        config.customSegmentLabels;
+        config.speedoCaption;
     }
     if (config.data) {
       speedoMeter.config.main.data = config.data;

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

@@ -1,10 +1,11 @@
+import { createLayoutFormat } from "./buildConfig";
 import { BarGraph } from "./uischema/graph";
 import _ from "lodash";
 
 export const buildStackbarGraph = (config:any,componentScope:string) => {
     const barGraph: any = _.cloneDeep(BarGraph);
     if (config.layout) {
-      barGraph.config.layout = config.layout;
+      barGraph.config.layout = createLayoutFormat(config.layout);
     }
     if (config.legendHide) {
       barGraph.config.main.legendAvailable = false;

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

@@ -1,3 +1,4 @@
+import { createLayoutFormat } from "./buildConfig";
 import Timer from "./uischema/timer";
 import _ from "lodash";
 
@@ -8,7 +9,7 @@ export const buildTimer = (config,componentScope)=>{
         timer.config.main.label = config.label;
       }
       if (config.layout) {
-        timer.config.layout = config.layout;
+        timer.config.layout = createLayoutFormat(config.layout);
       }
       return timer;
 }

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

@@ -1,6 +1,6 @@
 import _ from "lodash";
 import emptyBox from "./uischema/emptyBox";
-import cardSlider from "./uischema/cardSlider"; 
+import cardSlider from "./uischema/cardSlider";
 import { buildLeaderBoard } from "./buildLeaderboard";
 import { buildProgressBarCard } from "./buildProgressBarCard";
 import { buildProgressBar } from "./buildProgressBar";
@@ -31,10 +31,12 @@ import { getTextArea } from "./uischema/buildPropertiesSection";
 import { buildTextArea } from "./buildTextArea";
 import { buildSlider } from "./buildSlider";
 import { buildCheckbox } from "./buildCheckbox";
+import { buildLineGraph } from "./buildLineGraph";
+import { buildRadio } from "./buildRadio";
 
 
 
- const buildUiSchema = (config: any) => {
+const buildUiSchema = (config: any) => {
   let elements: any = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
@@ -50,15 +52,18 @@ import { buildCheckbox } from "./buildCheckbox";
     case "Text":
       elements = buildTextField(config, componentScope);
       break;
-      case "TextArea":
-        elements = buildTextArea(config,componentScope)
-        break;  
+    case "TextArea":
+      elements = buildTextArea(config, componentScope)
+      break;
     case "Date":
       elements = buildDate(config, componentScope);
       break;
     case "Select":
       elements = buildSelect(config, componentScope);
       break;
+    case "Radio":
+      elements = buildRadio(config, componentScope);
+      break;
     case "Button":
 
       elements = buildButton(config, componentScope);
@@ -71,8 +76,8 @@ import { buildCheckbox } from "./buildCheckbox";
       elements = buildLabel(config, componentScope);
       break;
     case "CheckBox":
-        elements = buildCheckbox(config, componentScope);
-        break;
+      elements = buildCheckbox(config, componentScope);
+      break;
     case "UploadFile":
       elements = buildUploadFile(config, componentScope);
       break;
@@ -96,7 +101,7 @@ import { buildCheckbox } from "./buildCheckbox";
           elements = buildStackbarGraph(config, componentScope);
           break;
         case "LineGraph":
-          elements = buildPieGraph(config, componentScope);
+          elements = buildLineGraph(config, componentScope);
           break;
         case "PieGraph":
           elements = buildPieGraph(config, componentScope);
@@ -122,7 +127,7 @@ import { buildCheckbox } from "./buildCheckbox";
       elements = buildRollAndDice(config, componentScope);
       break;
     case "Slider":
-      elements = buildSlider(config,componentScope);
+      elements = buildSlider(config, componentScope);
       break;
     case "Timer":
       elements = buildTimer(config, componentScope);
@@ -139,7 +144,7 @@ import { buildCheckbox } from "./buildCheckbox";
   }
 
   if (config?.elements) {
-    if(config?.type === "LeaderBoard"){
+    if (config?.type === "LeaderBoard") {
       return elements;
     }
     else if (config.type == "Table") {
@@ -156,9 +161,9 @@ import { buildCheckbox } from "./buildCheckbox";
           header: e.label || e.name
         }
       })
-    } 
+    }
     else {
-      elements.elements = config.elements.map((e:any, elemInd:number) => {
+      elements.elements = config.elements.map((e: any, elemInd: number) => {
         return buildUiSchema(e)
       });
     }
@@ -169,31 +174,33 @@ import { buildCheckbox } from "./buildCheckbox";
 
 export default buildUiSchema;
 
-export const buildSchema = (config:any)=>{
-  const properties = buildProperties(config)
-  return {properties}
-}
-export const buildProperties = (config: any) => {
-  let properties = {}
-  switch (config.type) {
-    case "Array":
-     properties[config.name] = buildArraySchema(config);
-     if (config?.elements) {
-       config.elements.map((e:any, elemInd:number) => {
-        properties[config.name].items.properties[e.name] = buildProperties(e)
-      });
-     }
-     break;
-    default:
-       properties =  {"type":"string"}
-}
-if(config.elements && config.type !== "Array"){
-  config.elements.map((e)=>{
-    properties =  buildProperties(e)
-  })
-}
- return properties
-}
+
+
+// export const buildSchema = (config: any) => {
+//   const properties = buildProperties(config)
+//   return { properties }
+// }
+// export const buildProperties = (config: any) => {
+//   let properties = {}
+//   switch (config.type) {
+//     case "Array":
+//       properties[config.name] = buildArraySchema(config);
+//       if (config?.elements) {
+//         config.elements.map((e: any, elemInd: number) => {
+//           properties[config.name].items.properties[e.name] = buildProperties(e)
+//         });
+//       }
+//       break;
+//     default:
+//       properties = { "type": "string" }
+//   }
+//   if (config.elements && config.type !== "Array") {
+//     config.elements.map((e) => {
+//       properties = buildProperties(e)
+//     })
+//   }
+//   return properties
+// }