impaktapps-ui-builder 0.0.275 → 0.0.276

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

@@ -1,5 +1,37 @@
 import _ from "lodash";
-
+const getArrayControl = (parentScope:string,childScope:string,childLabel?:string,) =>{
+  return  {
+    type: "Control",
+    scope: `#/properties/${parentScope}`,
+    layout: 11.5,
+    options: {
+      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 +129,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 +137,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"), 
@@ -166,57 +195,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/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" },

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:0,sm:12,md:12,lg:12},
+    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,75 @@
+export const ValidationSection = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/validation",
+      layout: 11.5,
+      options: {
+        detail: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/validationType",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5,
+                },
+                main: {
+                  label: "Validation Type",
+                },
+              },
+            },
+            {
+                type: "Control",
+                scope: "#/properties/validationValue",
+  
+                options: {
+                  widget: "InputField",
+                },
+                config: {
+                  layout: {
+                    xs: 11,
+                    sm: 11,
+                    md: 5.5,
+                    lg: 5.5,
+                  },
+                  main: {
+                    label: "Validation Value",
+                  },
+                },
+              }
+          ],
+        },
+      },
+      
+    },
+]};
+
+// export const ValidationSchema = {
+//   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/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" },

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

@@ -104,6 +104,7 @@ export const EventUiSchema: any = {
                   type: "text",
                   options: [
                     { label: "Click Event", value: "onClick" },
+                    { label: "onStart", value: "onStart" },
                     { label: "Load Event", value: "onLoad" },
                     { label: "Change Event", value: "onChange" },
                     { label: "Success", value: "Success" },

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -8,29 +8,31 @@ import { buildPropertiesSection } from "../build/uischema/buildPropertiesSection
 import { StyleSection } from "../build/uischema/styleSection";
 import { TableSection } from "../build/uischema/tableSection";
 import { ValueTab } from "../build/uischema/valueTab";
+import { ValidationSection } from "../build/uischema/validationSections";
 
 const sectionLabels = {
-  Select: ["Core", "Value", "style", "Event"],
-  MultipleSelect: ["Core", "Value", "style", "Event"],
-  Table: ["Core", "Components", "style", "Event"],
-  LeaderBoard: ["Core", "Components", "Properties", "style", "Event"],
-  WrapperSection: ["Core", "Components","Properties", "style"],
-  TabSection: ["Core", "Components", "Properties", "style"],
-  SpeedoMeter:["Core", "Properties", "style", "Event"],
-  card:["Core", "Properties", "style", "Event"],
-  UploadFile:["Core",  "style", "Event"],
-  Graph:["Core", "Properties", "style", "Event"],
-  DownloadFile:["Core",  "style", "Event"],
-  Box: ["Core", "Properties", "style", "Event"],
-  Properties: ["Core", "Properties", "style", "Event"],
-  ProgressBarCard: ["Core", "Properties", "style", "Event"],
-  RankCard: ["Core", "Properties", "style", "Event"],
-  Slider: ["Core", "Components","Properties", "style", "Event"],
-  Timer: ["Core", "Properties", "style", "Event"],
-  Rank: ["Core", "Properties", "style", "Event"],
-  Button: ["Core", "Properties", "style", "Event"],
-  Array:["Core","Components",],
-
+  Select: ["Core", "Value", "style", "Event","Validation"],
+  MultipleSelect: ["Core", "Value", "style", "Event","Validation"],
+  Table: ["Core", "Components", "style", "Event","Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "style", "Event","Validation"],
+  WrapperSection: ["Core", "Components","Properties", "style","Validation"],
+  TabSection: ["Core", "Components", "Properties", "style","Validation"],
+  SpeedoMeter:["Core", "Properties", "style", "Event","Validation"],
+  card:["Core", "Properties", "style", "Event","Validation"],
+  UploadFile:["Core",  "style", "Event","Validation"],
+  Graph:["Core", "Properties", "style", "Event","Validation"],
+  DownloadFile:["Core",  "style", "Event","Validation"],
+  Box: ["Core", "Properties", "style", "Event","Validation"],
+  Properties: ["Core", "Properties", "style", "Event","Validation"],
+  ProgressBarCard: ["Core", "Properties", "style", "Event","Validation"],
+  RankCard: ["Core", "Properties", "style", "Event","Validation"],
+  Slider: ["Core", "Components","Properties", "style", "Event","Validation"],
+  Timer: ["Core", "Properties", "style", "Event","Validation"],
+  Rank: ["Core", "Properties", "style", "Event","Validation"],
+  Button: ["Core", "Properties", "style", "Event","Validation"],
+  Array:["Core","Components","Validation"],
+  Radio:["Core", "Properties", "style", "Event","Validation"],
+  Text:["Core", "Event","Validation"]
 }
 
 export const refreshPage = (type:string,store:any) => {
@@ -42,12 +44,13 @@ export const refreshPage = (type:string,store:any) => {
     style: StyleSection,
     Event: EventSection,
     Components: TableSection,
-    Properties: buildPropertiesSection(type)
+    Properties: buildPropertiesSection(type),
+    Validation:ValidationSection
   
   }
   const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-  UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event"];
-  UiSchema.elements[1].elements = elements || [CoreSection, StyleSection,EventSection];
+  UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event","Validation"];
+  UiSchema.elements[1].elements = elements || [CoreSection, StyleSection,EventSection,ValidationSection];
  
 }
 store.setUiSchema(UiSchema);

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

@@ -5,4 +5,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/src/impaktapps-ui-builder/runtime/services/events.ts

@@ -35,6 +35,15 @@ const executetOnLoadEvent = async (
 ) => {
 
   try {
+    const startEvent = config?.events.filter(e => e.eventType === "onStart");
+    if(startEvent.length > 0){
+      const { response } = await executeEventsHandler(config, componentName,
+        store, dynamicData, userValue,
+        service, serviceHolder, eventGroups, parentEventOutput);
+        if(response){
+          return;
+        }
+    }
     const { response } = await executeEventsHandler(config, componentName,
       store, dynamicData, userValue,
       service, serviceHolder, eventGroups, parentEventOutput)
@@ -132,12 +141,14 @@ async function executeInBuiltFunctionHandler(refreshHandlerConfig: any, componen
 async function executeCustomHandler(customHandlerConfig: any, componentName: string,
   store: any, dynamicData: any, userValue: any,
   service: any, serviceHolder: any, parentEventOutput?: any) {
-  const makeFunc = eval(customHandlerConfig.eventCode)
-  makeFunc(store, dynamicData, userValue, parentEventOutput, service);
-  return { response: undefined, events: customHandlerConfig?.events };
+    console.log(service)
+  const makeFunc =  eval(customHandlerConfig.eventCode)
+  const response = await makeFunc(store, dynamicData, userValue, parentEventOutput, service,componentName);
+  return { response: response, events: customHandlerConfig?.events };
 }
 
 async function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any) {
+  
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse)&&handlerResponse)) {
     store.setSchema((pre) => {
       return {
@@ -217,10 +228,81 @@ export function getRefreshElements(eventConfig: any, eventGropus: any) {
     result = eventConfig.refreshElements.map((e) => {
       return e.value
     })
+   
   } else {
     if (eventGropus?.onLoad) {
       result = Object.keys(eventGropus?.onLoad)
+    //  const firstElem = result.shift();
+     result.push(result[0]);
     }
   }
   return result;
-}
+}
+
+
+
+// const  changeServerToFormData = async (res) => {
+//   // store.formData = res?.data?.payload?.config?.features?.rule?.id;
+//   const Api =
+//     "/master/getDetailById?masterName=com.act21.hyperform3.entity.master.rule.Rule&id=" +
+//     res?.data?.payload?.config?.features?.rule?.id;
+
+//   const data = await service.get(Api).then((response: any) => {
+//     const reportData = res?.data?.payload?.config?.features?.Reports?.names?.map(
+//         (elem: any) => {
+//           if (typeof elem === "string" || typeof elem === "number") {
+//             return { label: elem, value: elem };
+//           }
+//           return elem;
+//         }
+//       );
+//     const newData = {
+//       id: res.data.payload.id,
+//       name: res.data.payload.name,
+//       program: JSON.stringify(res.data.payload.program),
+//       startDate: res.data.payload.startDate,
+//       endDate: res.data.payload.endDate,
+//       downloadWorkflowFile:
+//         res.data.payload.config.features.workflow.externalFileName,
+//       uploadWorkflowFileId:
+//         res.data.payload.config.features.workflow.externalDataId,
+//       processDefKey1:
+//         res.data.payload.config.features.workflow.processDefKey,
+//       downloadInvoiceFile:
+//         res.data.payload.config.features.invoice.externalFileName,
+//       uploadInvoiceFileId:
+//         res.data.payload.config.features.invoice.externalDataId,
+//       invoiceEnabled: res.data.payload.config.features.invoice.enabled,
+//       groupId: response?.data?.payload?.groupId,
+//       project: response?.data?.payload?.artifactId,
+//       version: response?.data?.payload?.version,
+//       reportNames: reportData,
+//       clawbackEnabled: res.data.payload.config.features.Clawback.enabled,
+//       loadTimeout: res.data.payload.config.features?.timeouts?.loadTimeOut,
+//       computeTimeout:
+//         res.data.payload.config.features?.timeouts?.computeTimeOut,
+//       adjustments: res.data.payload.config.features?.Adjustments,
+//     };
+//     return newData;
+//   });
+//   return data;
+// };
+// const action = store.searchParams?.get("id");
+// console.log(action)
+//   if (action) {
+//     const Api =
+//       "/master/getDetailById?masterName=com.act21.hyperform3.entity.program.ProgramCycleStaging";
+//       await service
+//       .get(`${Api}&id=${action}`)
+//       .then(async (res) => {
+// console.log("response", res)
+//         const newData = await changeServerToFormData(res);
+//          store.setFormdata((pre)=>{return {...pre,...newData}});
+//       })
+//       .catch(() => {});
+//   }
+
+
+
+
+

package/src/impaktapps-ui-builder/runtime/services/service.ts

@@ -55,6 +55,7 @@ export default (funcParams:funcParamsProps) => {
         { Handler: "refresh",eventType:"onPageRefresh"}, "all",
         funcParams.store, funcParams.dynamicData, funcParams.userValue, funcParams.service,
         this, eventGroups)
+        // funcParams.store.setSchema(JSON.parse(localStorage.getItem("schemaDemo")))
         funcParams.uiSchema.elements.push(notifyUiSchema);
         funcParams.store.setUiSchema(funcParams.uiSchema);     
     },