impaktapps-ui-builder 0.0.275 → 0.0.277

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,15 +31,41 @@ 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";
+import { buildEmptyBox } from "./buildEmptyBox";
+export let schema =  {
+  type: "object",
+  properties: {},
+  required: []
+};
+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)
+      }
+    });
+  }
 
+}
 
 
- const buildUiSchema = (config: any) => {
+const buildUiSchema = (config: any) => {
   let elements: any = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
     case "RunnerBoyProgressBar":
       elements = RunnerBoyProgressbar(config, componentScope);
+
       break;
     case "TabSection":
       elements = buildTabSection(config, componentScope);
@@ -49,42 +75,51 @@ import { buildCheckbox } from "./buildCheckbox";
       break;
     case "Text":
       elements = buildTextField(config, componentScope);
+      buildRule(config);
+      break;
+    case "TextArea":
+      elements = buildTextArea(config, componentScope)
+      buildRule(config);
       break;
-      case "TextArea":
-        elements = buildTextArea(config,componentScope)
-        break;  
     case "Date":
       elements = buildDate(config, componentScope);
+      buildRule(config);
       break;
     case "Select":
       elements = buildSelect(config, componentScope);
+      buildRule(config);
+      break;
+    case "Radio":
+      elements = buildRadio(config, componentScope);
+      buildRule(config);
       break;
     case "Button":
 
       elements = buildButton(config, componentScope);
+      buildRule(config);
       break;
     case "Table":
       elements = buildTable(config, componentScope);
-      //return
+      buildRule(config);
       break;
     case "Box":
       elements = buildLabel(config, componentScope);
+      buildRule(config);
       break;
     case "CheckBox":
-        elements = buildCheckbox(config, componentScope);
-        break;
+      elements = buildCheckbox(config, componentScope);
+      buildRule(config);
+      break;
     case "UploadFile":
       elements = buildUploadFile(config, componentScope);
+      buildRule(config);
       break;
     case "DownloadFile":
       elements = buildDownloadFile(config, componentScope);
+      buildRule(config);
       break;
     case "EmptyBox":
-      const EmptyBox: any = _.cloneDeep(emptyBox);
-      if (config.layout) {
-        EmptyBox.config.layout = config.layout;
-      }
-      elements = EmptyBox;
+      elements = buildEmptyBox(config, componentScope);
       break;
     case "card":
       elements = buildCard(config, componentScope);
@@ -96,7 +131,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 +157,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);
@@ -130,16 +165,22 @@ import { buildCheckbox } from "./buildCheckbox";
 
     case "MultipleSelect":
       elements = buildMultiSelect(config, componentScope);
+      buildRule(config);
       break;
     case "LeaderBoard":
       elements = buildLeaderBoard(config);
       break;
     default:
+      schema = {
+        type: "object",
+        properties: {},
+        required: []
+      };
       elements = buildBasicUiSchema(config)
   }
 
   if (config?.elements) {
-    if(config?.type === "LeaderBoard"){
+    if (config?.type === "LeaderBoard") {
       return elements;
     }
     else if (config.type == "Table") {
@@ -156,45 +197,20 @@ 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)
       });
     }
   }
+  localStorage.setItem("libSchema", JSON.stringify(schema || {}))
   return elements;
 }
 
 
 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
-}
-
 
 
 

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

@@ -46,6 +46,7 @@ export const APISection = {
       scope: "#/properties/headers",
       layout: 11.5,
       options: {
+        "elementLabelProp": "key",
         detail: {
           type: "HorizontalLayout",
           elements: [
@@ -95,6 +96,7 @@ export const APISection = {
       scope: "#/properties/body",
       layout: 11.5,
       options: {
+        "elementLabelProp": "key",
         detail: {
           type: "HorizontalLayout",
           elements: [

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

@@ -1,5 +1,58 @@
+
 import _ from "lodash";
+const EmptyBox =  {
+  type: "Control",
+  scope: `#/properties/empty`,
 
+  options: {
+    widget: "EmptyBox",
+  },
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5,
+    },
+    main: {
+      
+    },
+  },
+};
+const getArrayControl = (parentScope:string,childScope:string,childLabel?:string,) =>{
+  return  {
+    type: "Control",
+    scope: `#/properties/${parentScope}`,
+    layout: 11.5,
+    options: {
+      "elementLabelProp": childScope,
+      detail: {
+        type: "HorizontalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: `#/properties/${childScope}`,
+  
+            options: {
+              widget: "InputField",
+            },
+            config: {
+              layout: {
+                xs: 11,
+                sm: 11,
+                md: 5.5,
+                lg: 5.5,
+              },
+              main: {
+                label: childLabel||"Labels for Tab",
+              },
+            },
+          },
+        ],
+      },
+    },
+  }
+}
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -97,16 +150,6 @@ export const getSelectField = (scope: string, label: string, options: { label: s
   }
 }
 
-const emptyBox = {
-  type: "Control",
-  scope: "#/properties/proc",
-  config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-  },
-  options: {
-    widget: "EmptyBox",
-  },
-};
 
 const GraphSection = {
   type: "HorizontalLayout",
@@ -115,9 +158,16 @@ const GraphSection = {
 
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(GraphSection);
-
-  if (type === "SpeedoMeter" || type === "RankCard" || type === "Timer") {
-    
+if(type === "SpeedoMeter" ){
+  uiSchema.elements = [
+  getInputField("segments", "Segments Count"),
+  getInputField("heading", "Container Heading"),
+  getInputField("heading", "Container Heading"),
+  getInputField("speedoCaption", "Speedometer Caption"),
+  getInputField("width","Speedometer Width")
+  ]
+}
+  else if ( type === "RankCard") {
     uiSchema.elements = [
     getInputField("rank", "Rank"),
     getInputField("image", "Image Url"), 
@@ -158,7 +208,12 @@ export const buildPropertiesSection = function (type: String) {
         { label: "Button With Text", value: "Button" },
         { label: "Button With Icon", value: "IconButton" },
         { label: "Button With Icon and Text", value: "ButtonWithIconAndText" },
-      ]), iconName,size,caption
+      ]), iconName,size,caption,
+      getSelectField("defaultStyle","Default Style",[
+        { label: "Apply Default Style", value: "true" },
+        { label: "No Style", value: "false" },
+      ]),
+      JSON.parse(JSON.stringify(EmptyBox))
     ];
   } else if (type === "Graph") {
     const height = getInputField("height", "Height");
@@ -166,57 +221,36 @@ export const buildPropertiesSection = function (type: String) {
     const leftLabel = getInputField("leftLabel", "Left Label");
     const bottomLabel = getInputField("bottomLabel", "Bottom Label");
    const legendAvailabe = getRadioInputField("legendHide","Legend Hide",["YES","No"])
+
     uiSchema.elements = [
       heading,
       height,
       getSelectField("graphType","Graph Type",[
         { label: "Bar Graph", value: "BarGraph" },
         { label: "Stack Bar Graph", value: "StackBarGraph" },
+        { label: "Line Graph", value: "LineGraph" },
         { label: "Pie Graph", value: "PieGraph" },
         { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
       ]),
       leftLabel,
       bottomLabel,
       legendAvailabe,
+      getArrayControl("legendLabels","label"),
+      getArrayControl("pieArcColors","color"),
     ];
   }else if(type === "WrapperSection"){
    uiSchema.elements = [getRadioInputField("divider","Divider",["YES","No"]),getRadioInputField("heading","Page Heading",["YES","No"])]
   }
   else if(type === "TabSection"){
      uiSchema.elements =[
-      {
-        type: "Control",
-        scope: "#/properties/sectionLabels",
-        layout: 11.5,
-        options: {
-          detail: {
-            type: "HorizontalLayout",
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/label",
-      
-                options: {
-                  widget: "InputField",
-                },
-                config: {
-                  layout: {
-                    xs: 11,
-                    sm: 11,
-                    md: 5.5,
-                    lg: 5.5,
-                  },
-                  main: {
-                    label: "Labels for Tab",
-                  },
-                },
-              },
-            ],
-          },
-        },
-      }
+      getArrayControl("sectionLabels","label"),
      ]
   }
+  else if(type === "Radio"){
+    uiSchema.elements =[
+      getArrayControl("sectionLabels","label","Options Of Radio"),
+    ]
+ }
 
   return uiSchema;
 };

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

@@ -17,9 +17,10 @@ export default  {
       color: "info",
       type: "text",
       startIcon:"",
+      styleDefault:false,
       icon:"",
       onClick: "onClick",
-      size: "large",
+      size: "small",
     },
     style: {
     },

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

@@ -7,7 +7,7 @@ export default {
   },
   elements:[],
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: 12,
     main: {
     },
   },

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

@@ -25,6 +25,7 @@ export const CoreSection = {
             { label: "Text Area", value: "TextArea" },
             { label: "Button", value: "Button" },
             { label: "Card", value: "card" },
+            { label: "Radio", value: "Radio" },
             { label: "Rank", value: "Rank" },
             { label: "SpeedoMeter", value: "SpeedoMeter" },
             { label: "ProgressBar", value: "ProgressBar" },
@@ -96,14 +97,16 @@ export const CoreSection = {
       scope: "#/properties/layout",
       layout: 11.5,
       options: {
+        "elementLabelProp": "key",
         detail: {
           type: "HorizontalLayout",
+          
           elements: [
             {
               type: "Control",
               scope: "#/properties/key",
               options: {
-                widget: "InputField",
+                widget: "SelectInputField",
               },
               config: {
                 layout: {
@@ -128,7 +131,7 @@ export const CoreSection = {
               scope: "#/properties/value",
 
               options: {
-                widget: "InputField",
+                widget: "MultipleSelect",
               },
               config: {
                 layout: {
@@ -139,6 +142,12 @@ export const CoreSection = {
                 },
                 main: {
                   label: "Value",
+                  options: [
+                    { label: "3", value: "3" },
+                    { label: "5.5", value: "5.5" },
+                    { label: "8", value: "8" },
+                    { label: "12", value: "12" },
+                  ],
                 },
               },
             },

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

@@ -126,6 +126,7 @@ export const LineGraph = {
     widget: "Graph",
   },
   config: {
+    layout:12,
     main: {
       type: "LineGraph",
       header: "Quartely Incentive in Thousand",

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

@@ -7,10 +7,13 @@ export default {
             label: "LeaderBoard",
             divider: true,
         },
+        style:{wrapperStyle:{
+            height: {xs:850,sm:1000}
+        }},
         wrapperStyle: {
             position: "relative",
             width: "100%",
-            height: 1000
+            // height: {xs:800,sm:1000}
         }
     },
     elements: [

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

@@ -5,10 +5,12 @@ export default  {
       widget: "SpeedoMeter",
     },
    config:{
-    layout:12,
+    layout:{xs:12,sm:12,md:11.7,lg:11.7},
+    width:350,
+    segments:"5",
     main:{
-     currentValueText:"",
-        customSegmentLabels:{}, 
+     currentValueText:"Your Score",
+     customSegmentLabels:[], 
         data:{  
             maxValue:100000,
             value:50000,
@@ -23,7 +25,6 @@ export default  {
         needleColor:"#3f51b5",
         startColor:"red",
         textColor:"black",
-        segments:5,
         endColor:"green",
 
         containerStyle:{

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

@@ -0,0 +1,88 @@
+export const ValidationSection = {
+  type: "HorizontalLayout",
+  elements: [
+    // {
+    //   type: "Control",
+    //   scope: "#/properties/validationType",
+
+    //   options: {
+    //     widget: "SelectInputField",
+    //   },
+    //   config: {
+    //     layout: {
+    //       xs: 11,
+    //       sm: 11,
+    //       md: 5.5,
+    //       lg: 5.5,
+    //     },
+    //     main: {
+    //       label: "Validation Type",
+    //       options: [
+    //         { value: "String", label: "string" },
+    //         { value: "minLength", label: "Minimum Length" },
+    //         { value: "maxLength", label: "Maximum Length" },
+    //         { value: "pattern", label: "Pattern" },
+    //       ]
+    //     },
+    //   },
+    // },
+    {
+      type: "Control",
+      scope: "#/properties/validation",
+      layout: 11.5,
+      options: {
+        "elementLabelProp": "validationType",
+        detail: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/validationType",
+
+              options: {
+                widget: "SelectInputField",
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5,
+                },
+                main: {
+                  label: "Validation Type",
+                  options: [
+                    { value: "required", label: "Required" },
+                    { value: "minLength", label: "Minimum Length" },
+                    { value: "maxLength", label: "Maximum Length" },
+                    { value: "pattern", label: "Pattern" },
+                  ]
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/validationValue",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5,
+                },
+                main: {
+                  label: "Validation Value",
+                },
+              },
+            }
+          ],
+        },
+      },
+
+    },
+  ]
+};

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts

@@ -72,6 +72,47 @@ export const ComponentSchema:any = {
         },
       },
     },
+    legendLabels: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+         
+        },
+      },
+    },
+    pieArcColors: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+         
+        },
+      },
+    },
+    validation: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          componentName: {
+            type: "string",
+          },
+          validationType:{
+              type: "string",
+          },
+          validationValue: {
+            type: "string",
+          },
+        },
+      },
+    }
   },
   
 };

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts

@@ -82,7 +82,7 @@ export const componentBasicUiSchema: any = {
         main: {
           tabLabels: ["Core"],
           defaultStyle: true,
-          id:"component"
+          id:`component`
         },
       },
 
@@ -110,6 +110,7 @@ export const componentBasicUiSchema: any = {
                     { label: "Container", value: "WrapperSection" },
                     { label: "Tabs", value: "TabSection" },
                     { label: "Text", value: "Text" },
+                    { label: "Radio", value: "Radio" },
                     { label: "Text Area", value: "TextArea" },
                     { label: "Button", value: "Button" },
                     { label: "Card", value: "card" },
@@ -224,7 +225,7 @@ export const componentBasicUiSchema: any = {
                       scope: "#/properties/value",
 
                       options: {
-                        widget: "InputField",
+                        widget: "MultipleSelect",
                       },
                       config: {
                         layout: {
@@ -235,6 +236,12 @@ export const componentBasicUiSchema: any = {
                         },
                         main: {
                           label: "Value",
+                          options: [
+                            { label: "3", value: "3" },
+                            { label: "5.5", value: "5.5" },
+                            { label: "8", value: "8" },
+                            { label: "12", value: "12" },
+                          ],
                         },
                       },
                     },