impaktapps-ui-builder 0.0.100 → 0.0.101

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

@@ -3,7 +3,6 @@ import buildUiSchema from "./buildUiSchema";
 import _ from "lodash";
 import { createLayoutFormat } from "./buildConfig";
 
-
 export const buildLeaderBoard = (config) => {
     const LeaderBoard: any = _.cloneDeep(leaderBoard)
     if (config.elements) {
@@ -14,29 +13,35 @@ export const buildLeaderBoard = (config) => {
             const widgetSchema = { widget: buildUiSchema(e), accessorKey: e.name, header: e.label || e.name, };
             return { ...widgetSchema };
         })
-        LeaderBoard.elements[9].elements = modifyColumns;
+        LeaderBoard.elements = modifyColumns;
     }
     LeaderBoard.config.main.label = config.label
     if (config.name) {
-        LeaderBoard.elements[0].scope = `#/properties/${config.name}/properties/firstImage`;
-        LeaderBoard.elements[3].scope = `#/properties/${config.name}/properties/firstName`
-        LeaderBoard.elements[1].scope = `#/properties/${config.name}/properties/secondImage`;
-        LeaderBoard.elements[4].scope = `#/properties/${config.name}/properties/secondName`
-        LeaderBoard.elements[2].scope = `#/properties/${config.name}/properties/thirdImage`;
-        LeaderBoard.elements[5].scope = `#/properties/${config.name}/properties/thirdName`
-        LeaderBoard.elements[9].scope = `#/properties/${config.name}/properties/table`
+        LeaderBoard.scope=`#/properties/${config.name}`
     }
     if (config.firstImage) {
-        LeaderBoard.elements[0].config.main.url = config.firstImage;
+        LeaderBoard.config.main.firstImage = config.firstImage;
     }
     if (config.secondImage) {
-        LeaderBoard.elements[1].config.main.url = config.secondImage;
+        LeaderBoard.config.main.secondImage = config.secondImage;
     }
-    if (config.secondImage) {
-        LeaderBoard.elements[2].config.main.url = config.thirdImage;
+    if (config.thirdImage) {
+        LeaderBoard.config.main.thirdImage = config.thirdImage;
+    }
+    if (config.nameKey) {
+        LeaderBoard.config.main.nameKey = config.nameKey;
+    }
+    if (config.imageKey) {
+        LeaderBoard.config.main.imageKey = config.imageKey;
+    }
+    if (config.scoreKey) {
+        LeaderBoard.config.main.scoreKey = config.scoreKey;
     }
     if (config.layout) {
         LeaderBoard.config.layout = createLayoutFormat(config.layout);
     }
+    if (config.style) {
+        LeaderBoard.config.style = JSON.parse(config.style)
+    }
     return LeaderBoard
 }

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

@@ -11,6 +11,11 @@ export const buildLineGraph = (config, componentScope) => {
   if (config.height) {
     lineGraph.config.style.containerStyle.height = config.height;
   }
+  if (config.leftMargin) {
+    lineGraph.config.style.labelStyle.margin ={
+        left: config.leftMargin
+      }
+  }
   if (config.bottomLabel) {
     lineGraph.config.main.bottomLabel = config.bottomLabel;
   }
@@ -24,10 +29,13 @@ export const buildLineGraph = (config, componentScope) => {
     lineGraph.config.main.leftLabel = config.leftLabel;
   }
   if (config.legendHide) {
-    lineGraph.config.main.legendAvailabe = config.legendHide==="YES"?false:true;
+    lineGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
+  }
+  if (config.bottomAxisAngle) {
+    lineGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
   }
   if (config.legendLabels) {
-    lineGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+    lineGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
   }
 
   if (config.pieArcColors) {

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

@@ -7,33 +7,22 @@ export const buildPieGraph = (config, componentScope) => {
     pieGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.height) {
-    pieGraph.config.style =
-    {
-      containerStyle: {
-        height: config.height
-      }
-    };
-
+    pieGraph.config.style.containerStyle.height = config.height;
   }
   if (config.legendHide) {
-    pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+    pieGraph.config.main.legendAvailable = config.legendHide === "YES" ? false : true;
   }
   pieGraph.scope = componentScope;
   pieGraph.config.main.header = config.heading;
 
   if (config.legendLabels) {
-    pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+    pieGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
   }
   if (config.xAxisValue) {
     pieGraph.config.main.xAxisValue = config.xAxisValue;
   }
   if (config.pieArcColors) {
-    pieGraph.config.style = {
-      pieStyle: {
-        colorRange: flatObjectValueInArray(config.pieArcColors)
-      }
-    }
-
+    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
   }
   return pieGraph;
 }

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

@@ -6,17 +6,11 @@ export const buildRankCard = (config,componentScope) =>{
     const rankCard: any = _.cloneDeep(RankCard);
     rankCard.scope = componentScope;
 
-    if(config.image){
-      rankCard.config.main.url = config.image;
-    }
-    if(config.title){
-      rankCard.config.main.title = config.title
-    }
-    if(config.description){
-      rankCard.config.main.description = config.description
-    }
     if(config.rank){
-      rankCard.config.main.rank = `#${config.rank}`
+      rankCard.config.main.rank = `${config.rank}`
+    }
+    if(config.height){
+      rankCard.config.main.height = `${config.height}px`
     }
     if(config.layout){
       rankCard.config.layout = createLayoutFormat(config.layout)

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

@@ -1,4 +1,4 @@
-import { createLayoutFormat } from "./buildConfig";
+import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
 import { BarGraph } from "./uischema/graph";
 import _ from "lodash";
 
@@ -9,11 +9,18 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     }
     if (config.legendHide) {
       barGraph.config.main.legendAvailable = config.legendHide;
+      barGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
     }
-    barGraph.config.main.type = config.graphType;
+    if (config.bottomAxisAngle) {
+      barGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
+    }
+    barGraph.config.main.type = config?.graphType ?? "BarGraph";
     barGraph.config.main.header = config.heading;
-    if (config.barColor) {
-      barGraph.config.barStyle.color = config.barColor;
+    if (config.legendLabels) {
+      barGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
+    }
+    if (config.pieArcColors) {
+      barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
     }
     if (config.xAxisValue) {
       barGraph.config.main.xAxisValue = config.xAxisValue;
@@ -21,6 +28,11 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     if (config.height) {
       barGraph.config.style.containerStyle.height = config.height;
     }
+    if (config.leftMargin) {
+      barGraph.config.style.labelStyle.margin ={
+          left: config.leftMargin
+        }
+    }
     if (config.bottomLabel) {
       barGraph.config.main.bottomLabel = config.bottomLabel;
     }

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

@@ -0,0 +1,22 @@
+import Thought from "./uischema/thoughtOfTheDay";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildThoughtOfTheDay = (config,componentScope) =>{
+    const thought: any = _.cloneDeep(Thought);
+    thought.scope = componentScope;
+
+    if(config.thought){
+      thought.config.main.thought = `${config.thought}`
+    }
+    if(config.layout){
+      thought.config.layout = createLayoutFormat(config.layout)
+    }
+    if(config.label){
+      thought.config.main.label = config.label;
+    }
+    if (config.style) {
+      thought.config.style = JSON.parse(config.style)
+    }
+    return thought;
+}

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

@@ -39,6 +39,7 @@ import { buildPopUp } from "./buildPop";
 import { buildDataGrid } from "./buildDataGrid";
 import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
+import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
 export let schema = {
   type: "object",
   properties: {},
@@ -264,6 +265,9 @@ const buildUiSchema = (config: any, store?: any) => {
         case "HorizontalStackBarGraph":
           elements = buildHorizontalBarGraph(config, componentScope);
           break;
+        default:
+          elements = buildStackbarGraph(config, componentScope);
+          break;
       }
       break;
     case "ProgressBar":
@@ -300,6 +304,9 @@ const buildUiSchema = (config: any, store?: any) => {
     case "LeaderBoard":
       elements = buildLeaderBoard(config);
       break;
+    case "Thought":
+      elements = buildThoughtOfTheDay(config, componentScope);
+      break;
     default:
       schema = {
         type: "object",

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

@@ -2,23 +2,20 @@ import { uploadFile } from "./uischema/file";
 import _ from "lodash";
 import { createLayoutFormat } from "./buildConfig";
 
-export const buildUploadFile = (config,componentScope)=>{
-    const UploadFile: any = _.cloneDeep(uploadFile);
-    
-    UploadFile.scope = componentScope;
-      UploadFile.config.main.label = config.label;
-      if (config.layout) {
-        UploadFile.config.layout = config.layout;
-      }
-      if(config.layout){
-        uploadFile.config.layout = createLayoutFormat(config.layout)
-      }
-      if (config.style) {
-        UploadFile.config.style = config.style;
-      }
-      if (config.required) {
-        UploadFile.config.main.required = true;
-      }
-      UploadFile.config.main.errorMessage = config.errorMessage;
-      return UploadFile;
+export const buildUploadFile = (config, componentScope) => {
+  const UploadFile: any = _.cloneDeep(uploadFile);
+
+  UploadFile.scope = componentScope;
+  UploadFile.config.main.label = config.label;
+  if (config.layout) {
+    UploadFile.config.layout = createLayoutFormat(config.layout)
+  }
+  if (config.style) {
+    UploadFile.config.style = config.style;
+  }
+  if (config.required) {
+    UploadFile.config.main.required = true;
+  }
+  UploadFile.config.main.errorMessage = config.errorMessage;
+  return UploadFile;
 }

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

@@ -172,7 +172,7 @@ export const buildWrapper = (label: string, elements: any[]) => {
         width: "108%"
       },
       componentsBoxStyle: {
-        marginLeft: "24px",
+        marginLeft: "12px",
       },
       defaultStyle: true
     },
@@ -343,19 +343,18 @@ export const buildPropertiesSection = function (type: String) {
     case "RankCard":
       uiSchema.elements = [
         getInputField("rank", "Rank"),
-        getInputField("image", "Image Url"),
-        getInputField("title", "Card Title"),
-        getInputField("description", "Card Description"),
-        emptyBox("RankCardEmpty1"), emptyBox("RankCardEmpty2")];
+        getInputField("height", "Height"),
+        emptyBox("RankCardEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 })];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
-        getInputField("valueLabel", "Value Label"),
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        emptyBox("LeaderBoardEmpty1"), emptyBox("LeaderBoardEmpty2"),
-        getTextArea("functionCode", "Write Compare Code", false),
+        getInputField("nameKey", "Key for Name"),
+        getInputField("imageKey", "Key for Image"),
+        getInputField("scoreKey", "Key for comparing parameter"),
+        emptyBox("LeaderBoardEmpty1", {xs: 6, sm: 6, md: 0, lg: 0 }),
       ];
       break;
     case "CardSlider":
@@ -376,8 +375,9 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
+        getInputField("titleIcon", "Unicode of Icon for title"),
         getInputField("description", "Description"),
-        emptyBox("cardEmpty", {xs: 6, sm: 6, md: 0, lg: 0 })
+        emptyBox("cardEmpty", {xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
     case "Button":
@@ -411,7 +411,9 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
-        emptyBox("GraphEmpty2"),
+        getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
+        getInputField("leftMargin", "Left Margin"),
+        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -483,6 +485,11 @@ export const buildPropertiesSection = function (type: String) {
         emptyBox("MultipleSelectEmpty2")
       ]
       break;
+    case "Thought":
+      uiSchema.elements = [
+        getTextArea("thought", "Today's thought", false),
+      ]
+      break;
   }
   return uiSchema;
 };

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

@@ -9,7 +9,6 @@ export default  {
     main: {
       name: "Compare",
       variant: "contained",
-      color: "info",
       type: "text",
       startIcon:"",
       styleDefault:false,

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

@@ -2,34 +2,39 @@ export default function Card(theme){
   const uiSchema = {
     type: "WrapperLayout",
     config: {
-      main: {
-      },
+      main: {},
       wrapperStyle: {
-  
+        position: "relative",
+        top: "50%",
+        transform: "translateY(-50%)"
       },
       componentsBoxStyle: {
+        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
         flexDirection: "row",
         flexWrap: "nowrap",
-        width: "100%",
+        width: "100% !important",
         background: "transparent",
-        border: `1.5px solid ${theme.palette.primary.main}`,
-        borderRadius: "20px",
-        padding: "0px 20px 0px 20px",
+        border: `1.5px solid ${theme.palette.primary.light}`,
+        borderRadius: "8px",
+        padding: "0px 4px",
+        height: "100%",
+        alignItems: "center",
+        marginLeft: "0px",
         "&: hover": {
-        background: `${theme.palette.primary.main}`,
-        border: `1.5px solid black`,
-        "& p": {
-          color: "white"
-        }
-        }
+          background: `${theme.palette.primary.main}`,
+          border: `1.5px solid black`,
+          "& p": {
+            color: "white",
+          },
+        },
       },
-      layout: { xs: 12, sm: 12, md: 6, lg: 6, },
+      layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     },
     elements: [
       {
         type: "HorizontalLayout",
         config: {
-          layout: 8
+          layout: 8,
         },
         elements: [
           {
@@ -37,17 +42,16 @@ export default function Card(theme){
             config: {
               main: {
                 columnSpacing: 0,
-                gap: 0
+                gap: 0,
               },
               wrapperStyle: {
-                marginTop: "4px",
-                background: "transparent"
+                background: "transparent",
               },
               componentsBoxStyle: {
                 flexDirection: "column",
                 flexWrap: "nowrap",
-                width: '100%',
-                height: 'inherit',
+                width: "100%",
+                height: "inherit",
                 background: "transparent",
                 borderRadius: "0px",
               },
@@ -55,27 +59,80 @@ export default function Card(theme){
             },
             elements: [
               {
-                type: "Control",
-                scope: "#/properties/programType",
+                type: "WrapperLayout",
                 config: {
                   main: {
-                    heading: "$5000.00",
+                    columnSpacing: 0,
+                    gap: 0,
                   },
-                  style: {
-                    color: "black",
-                    display: "flex",
-                    fontSize: { xs: "24px", md: "28px" },
-                    fontWeight: "bold",
-                    background: "inherit",
-                    justifyContent: "flex-start",
-                    width: "calc(100%+8px)",
-                    margin: "-8px",
+                  wrapperStyle: {
+                    background: "transparent",
+                  },
+                  componentsBoxStyle: {
+                    flexDirection: "row",
+                    flexWrap: "nowrap",
+                    width: "100%",
+                    height: "0",
+                    background: "transparent",
+                    borderRadius: "0px",
+                    marginLeft: "-10px",
+                    marginTop: "-8px",
+                    justifyContent: "start",
+                    position: "relative"
                   },
                   layout: 12,
                 },
-                options: {
-                  widget: "Box",
-                },
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: "",
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "28px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        height: 0
+                      },
+                      // layout: 1,
+                    },
+                    options: {
+                      widget: "Box",
+                    },
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: "5000.00",
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "28px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        position: "absolute",
+                        left: "8px"
+                      },
+                      // layout: 11,
+                    },
+                    options: {
+                      widget: "Box",
+                    },
+                  },
+                ],
               },
               {
                 type: "Control",
@@ -90,20 +147,21 @@ export default function Card(theme){
                     justifyContent: "center",
                     textWrap: "wrap",
                     background: "inherit",
-                    width: "calc(100%+8pc)",
+                    width: "calc(100%+8px)",
                     margin: "-8px",
-                    lineHeight: "1"
+                    marginTop: "12px",
+                    lineHeight: "1",
                   },
                   layout: 12,
                 },
-    
+
                 options: {
                   widget: "Box",
                 },
               },
-            ]
+            ],
           },
-        ]
+        ],
       },
       {
         type: "Control",
@@ -114,16 +172,15 @@ export default function Card(theme){
           },
           style: {
             containerStyle: {
-              height: '100%',
+              height: "100%",
               display: "flex",
-              justifyContent: "center"
+              justifyContent: "end",
             },
             imageStyle: {
-              // width: "none",
-              height: '100%',
               fontSize: "none",
               padding: "4px",
-              marginLeft: "8px"
+              margin: "0px 0px 0px 8px",
+              height: "64px",
             },
           },
           layout: 4,
@@ -132,7 +189,6 @@ export default function Card(theme){
           widget: "Image",
         },
       },
-      
     ],
   };
 

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

@@ -35,6 +35,29 @@ export const EventSection = (theme)=>{
                     },
                   }
                 },
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Paste_Event",
+
+                    options: {
+                      widget: "IconButton",
+                    },
+                    config: {
+                      main: {
+                        // color: "info",
+                        onClick: "copyPasteElement",
+                        size: "small",
+                        icon: "PasteIcon",
+                        iconLabel: "Paste",
+                        styleDefault: true,
+                      },
+                      style: {
+                        mt: "6px",
+                      },
+                    },
+                  }
+                },
               ]
             },  
             disableAction: true,
@@ -98,6 +121,27 @@ export const EventSection = (theme)=>{
               },
             },
           },
+          {
+            header: "Copy",
+            field: "Copy_Event",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/Copy_Event",
+              options: {
+                widget: "IconButton",
+              },
+              config: {
+                main: {
+                  icon: "FileCopyIcon",
+                  // color: "error",
+                  onClick: "copyPasteElement",
+                  tooltipMessage: "Reject This Record",
+                  styleDefault: true,
+                },
+              },
+            },
+          },
         ]
       }]}
       return uiSchema