impaktapps-ui-builder 0.0.409-h → 0.0.409-k

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

@@ -18,6 +18,9 @@ export declare const CoreSection: {
             main: {
                 label: string;
                 type: string;
+                options?: undefined;
+                color?: undefined;
+                required?: undefined;
             };
         };
         layout?: undefined;
@@ -39,6 +42,33 @@ export declare const CoreSection: {
             main: {
                 label: string;
                 type?: undefined;
+                options?: undefined;
+                color?: undefined;
+                required?: undefined;
+            };
+        };
+        layout?: undefined;
+    } | {
+        type: string;
+        scope: string;
+        options: {
+            widget: string;
+            elementLabelProp?: undefined;
+            detail?: undefined;
+        };
+        config: {
+            layout: {
+                xs: number;
+                sm: number;
+                md: number;
+                lg: number;
+            };
+            main: {
+                label: string;
+                options: any[];
+                color: string;
+                required: boolean;
+                type?: undefined;
             };
         };
         layout?: undefined;

package/dist/src/impaktapps-ui-builder/runtime/services/events.d.ts

@@ -1,10 +1,9 @@
 import { handlersProps } from "./interface";
-export declare const executeEvents: (params: handlersProps) => any;
-export declare function getRefreshElements(eventConfig: any, eventGropus: any): string[];
-export declare function executeRefreshHandler(params: handlersProps): Promise<any[][]>;
-export declare function executeApiRequest(params: any): any;
-export declare function shouldEventExecute(params: handlersProps): any;
-export declare function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service: any): {
+export declare const executeEvents: (params: handlersProps) => Promise<any>;
+export declare function executeRefreshHandler(params: handlersProps): Promise<void>;
+export declare function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service: any): Promise<{
     body: any;
     headers: any;
-};
+}>;
+export declare function getRefreshElements(eventConfig: any, eventGropus: any): string[];
+export declare function asyncOperation(): Promise<unknown>;

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

@@ -1,19 +1,18 @@
+export declare const extractEvents: (eventConfig: any) => any;
 interface funcParamsProps {
     store: any;
     dynamicData: any;
+    config: any;
+    uiSchema: any;
+    schema: any;
     service: any;
     userValue: any;
-    functionsProvider?: Record<string, any>;
 }
-export declare const extractEvents: (eventConfig: any) => any;
 declare const _default: (funcParams: funcParamsProps) => {
     setPage: () => Promise<void>;
-    onCellRenderer: (cellParams: any) => {};
-    onClick: () => void;
-    onMount: () => void;
-    onFileDownload: () => void;
-    onFileUpload: () => void;
-    backHandler: () => void;
+    onClick: () => Promise<void>;
+    onFileDownload: () => Promise<void>;
+    onFileUpload: () => Promise<void>;
     onPaginationChange: (paginationValues: any) => Promise<any>;
     getSelectOptions: (param: any) => Promise<any>;
     onChange: () => Promise<void>;

package/package.json

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

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

@@ -170,7 +170,7 @@ const buildUiSchema = (config: any) => {
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
     case "TreeMap":
-      elements = buildTreeMap(config,componentScope)
+      elements = buildTreeMap(config, componentScope)
       break;
     case "DateTime":
       elements = buildDateTime(config, componentScope);
@@ -316,23 +316,53 @@ const buildUiSchema = (config: any) => {
           sizeMap[e.keyName] = e.value
         });
       }
-      elements.elements = config.elements.map((e, elemInd) => {
-        if (e.type && e.type !== "date" && e.type !== "dateTime" && e.type !== "amount") {
+      function nodeProvider(element) {
+        if (element.type) {
           return {
-            accessorKey: e.name,
-            header: e.label || e.name,
-            size: sizeMap[e.name] || 180,
-            type: e.type,
-            widget: buildUiSchema(e)
-          }
+            accessorKey: element.name,
+            type: element.columnFormat,
+            header: element.label || element.name,
+            size: sizeMap[element.name] || 180,
+            widget: buildUiSchema(element)
+
+          };
         }
         return {
-          type: e.type,
-          accessorKey: e.name,
-          header: e.label || e.name,
-          size: sizeMap[e.name] || 180
+          accessorKey: element.name,
+          type: element.columnFormat,
+          header: element.label || element.name,
+          size: sizeMap[element.name] || 180,
         }
-      })
+      }
+
+      function buildHierarchy(elements, parentName = null) {
+        const result = [];
+        for (const element of elements) {
+          if (element?.parent === parentName) {
+            const children = buildHierarchy(elements, element.name);
+            const node: any = nodeProvider(element)
+            if (children.length > 0) {
+              node.columns = children;
+              node.type = "group";
+            }
+            result.push(node);
+          }
+        }
+        return result;
+      }
+
+      function transformConfigToOutput(config) {
+        const output = [];
+        const hierarchy = buildHierarchy(config.elements, config.name);
+        for (const element of config.elements) {
+          const parentExists = config.elements.some(e => e.name === element.parent);
+          if (!parentExists && element.parent !== config.name) {
+            output.push(nodeProvider(element))
+          }
+        }
+        return [ ...hierarchy,...output,];
+      }
+      elements.elements = transformConfigToOutput(config)
     }
     else if (config.type == "Array") {
       elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
@@ -378,9 +408,51 @@ export default buildUiSchema;
 
 
 
+function nodeProvider(element, sizeMap) {
+  if (element.type) {
+    return {
+      accessorKey: element.name,
+      type: element.columnFormat,
+      header: element.label || element.name,
+      size: sizeMap[element.name] || 180,
+      widget: buildUiSchema(element)
 
+    };
+  }
+  return {
+    accessorKey: element.name,
+    type: element.columnFormat,
+    header: element.label || element.name,
+    size: sizeMap[element.name] || 180,
+  }
+}
 
+function buildHierarchy(elements, parentName = null, sizeMap) {
+  const result = [];
+  for (const element of elements) {
+    if (element?.parent === parentName) {
+      const children = buildHierarchy(elements, element.name, sizeMap);
+      const node: any = nodeProvider(element, sizeMap)
+      if (children.length > 0) {
+        node.columns = children;
+        node.type = "group";
+      }
+      result.push(node);
+    }
+  }
+  return result;
+}
 
-
+function transformConfigToOutput(config, sizeMap) {
+  const output = [];
+  const hierarchy = buildHierarchy(config.elements, config.name,schema);
+  for (const element of config.elements) {
+    const parentExists = config.elements.some(e => e.name === element.parent);
+    if (!parentExists && element.parent !== config.name) {
+      output.push(nodeProvider(element,sizeMap))
+    }
+  }
+  return [...hierarchy, ...output,];
+}
 
 

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

@@ -54,6 +54,47 @@ export const CoreSection = {
         },
       },
     },
+    {
+      type: "Control",
+      scope: "#/properties/parent",
+
+      options: {
+        widget: "InputField",
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 6,
+          lg: 6,
+        },
+        main: {
+          label: "parent",
+          options: [],
+          color: "secondary",
+          required: true,
+        },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 5.5,
+          lg: 5.5,
+        },
+        main: {
+          label: "Column Format",
+
+        },
+      },
+    },
     {
       type: "Control",
       scope: "#/properties/proc",

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

@@ -4,7 +4,7 @@ export const ComponentSchema: any = {
     type: {
       // type: "string",
       oneOf: [
-        { title: "AadharcardText", const: "AadharcardText"},
+        { title: "AadharcardText", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
         { title: "Card", const: "card" },
@@ -12,7 +12,7 @@ export const ComponentSchema: any = {
         { title: "Container", const: "WrapperSection" },
         { title: "DataGrid", const: "DataGrid" },
         { title: "Date", const: "Date" },
-        { title: "DateTime", const: "DateTime"},
+        { title: "DateTime", const: "DateTime" },
         { title: "Download File", const: "DownloadFile" },
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File", const: "FileInput" },
@@ -39,20 +39,25 @@ export const ComponentSchema: any = {
         { title: "Text Area", const: "TextArea" },
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },
-        { title: "Text Area", const: "TextArea" },
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },
+
+        { title: "TreeMap", const: "TreeMap" },
+      ]
+    },
+    columnFormat: {
+      oneOf: [
         { title: "Date Column", const: "date" },
         { title: "DateTime Column", const: "dateTime" },
         { title: "Amount Column", const: "amount" },
-        { title: "TreeMap", const: "TreeMap" },
       ]
     },
-    orientation:{
+    orientation: {
       oneOf: [
-      { title: "Horizontal", const: "horizontal" },
-      { title: "Vertical", const: "vertical" },
-    ]},
+        { title: "Horizontal", const: "horizontal" },
+        { title: "Vertical", const: "vertical" },
+      ]
+    },
     method: {
       type: "string",
       oneOf: [
@@ -78,7 +83,7 @@ export const ComponentSchema: any = {
           },
           value: {
             // type: "string",
-      
+
           },
         },
       },
@@ -99,7 +104,7 @@ export const ComponentSchema: any = {
           },
           value: {
             // type: "string",
-      
+
           },
         },
       },
@@ -181,8 +186,8 @@ export const ComponentSchema: any = {
           keyName: {
             type: "string",
           },
-          value:{
-            type:"string"
+          value: {
+            type: "string"
           }
         },
       },
@@ -272,9 +277,9 @@ export const ComponentSchema: any = {
         { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
       ]
     },
-    iconName:{
-      type:"string",
-      oneOf:[
+    iconName: {
+      type: "string",
+      oneOf: [
         { title: "Search Icon", const: "SearchIcon" },
         { title: "Edit Icon", const: "EditIcon" },
         { title: "Add Icon", const: "AddIcon" },
@@ -294,8 +299,8 @@ export const ComponentSchema: any = {
         { title: "Exception Icon", const: "ExceptionIcon" },
       ]
     },
-    color:{
-      type:"string",
+    color: {
+      type: "string",
       oneOf: [
         { title: "Primary", const: "primary" },
         { title: "Secondary", const: "secondary" },
@@ -309,6 +314,6 @@ export const ComponentSchema: any = {
     },
     label: { type: 'string' }
   },
- 
-  required: [ "name", ]
+
+  required: ["name",]
 };

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

@@ -149,6 +149,47 @@ export const componentBasicUiSchema: any = {
               },
             },
           
+            {
+              type: "Control",
+              scope: "#/properties/parent",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: {
+                  xs: 12,
+                  sm: 12,
+                  md: 6,
+                  lg: 6,
+                },
+                main: {
+                  label: "parent",
+                  options: [],
+                  color: "secondary",
+                  required: true,
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/columnFormat",
+              options: {
+                widget: "SelectInputField",
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5,
+                },
+                main: {
+                  label: "Column Format",
+        
+                },
+              },
+            },
             {
               type: "Control",
               scope: "#/properties/proc",

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

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { ComponentSchema } from "../elements/UiSchema/Component/schema"; 
+import { ComponentSchema } from "../elements/UiSchema/Component/schema";
 import { componentBasicUiSchema } from "../elements/UiSchema/Component/uiSchema";
 import { CoreSection } from "../build/uischema/coreSection";
 import { EventSection } from "../build/uischema/eventSection";
@@ -10,57 +10,57 @@ import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
 import { getFormdataFromLocalStorage, okHandler, saveFormdataInLocalStorage, saveHandler } from "./utils";
 const sectionLabels = {
-  Select: ["Core", "Properties","Value", "style", "Event","Validation"],
-  MultipleSelect: ["Core", "Properties","Value", "style", "Event","Validation"],
-  Table: ["Core", "Components",  "Properties","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", "style", "Event","Validation"],
-  Properties: ["Core", "Properties", "style", "Event","Validation"],
-  ProgressBarCard: ["Core", "Properties", "style", "Event","Validation"],
-  RankCard: ["Core", "Properties", "style", "Event","Validation"],
-  Slider: ["Core", "Components", "style", "Event","Validation"],
-  Timer: ["Core", "style", "Event","Validation"],
-  Rank: ["Core","style", "Event","Validation"],
-  Button: ["Core", "Properties", "style", "Event","Validation"],
-  Array:["Core","Components","Validation"],
-  Radio:["Core", "Properties", "style", "Event","Validation"],
-  Text:["Core","Properties","style", "Event","Validation"],
-  TextArea:["Core","Properties","style", "Event","Validation"],
-  PopUp: ["Core", "Components","Properties", "style"],
-  Stepper: ["Core", "Components","Properties","Event", "style"],
-  DataGrid: ["Core", "Components","Properties","Event", "style"],
-  InputSlider:["Core","Properties","style", "Event","Validation"],
- TreeMap:["Core", "Components","Properties","style", "Event"],
+  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
+  card: ["Core", "Properties", "Event", "Style", "Validation"],
+  UploadFile: ["Core", "Event", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
+  DownloadFile: ["Core", "Event", "Style", "Validation"],
+  Box: ["Core", "Event", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
+  Slider: ["Core", "Components", "Event", "Style", "Validation"],
+  Timer: ["Core", "Event", "Style", "Validation"],
+  Rank: ["Core", "Event", "Style", "Validation"],
+  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  Array: ["Core", "Components", "Validation"],
+  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
+  Text: ["Core", "Properties", "Event", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  PopUp: ["Core", "Components", "Properties", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
+  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Event", "Style",],
 }
 
 
 
-export const refreshPage = (type:string,store:any) => {
+export const refreshPage = (type: string, store: any) => {
   const UiSchema = _.cloneDeep(componentBasicUiSchema)
-  if(type){
-  const sectionUiSchema = {
-    Core: CoreSection,
-    Value: ValueTab,
-    style: StyleSection,
-    Event: EventSection,
-    Components: TableSection,
-    Properties: buildPropertiesSection(type),
-    Validation:ValidationSection
-  
+  if (type) {
+    const sectionUiSchema = {
+      Core: CoreSection,
+      Value: ValueTab,
+      Style: StyleSection,
+      Event: EventSection,
+      Components: TableSection,
+      Properties: buildPropertiesSection(type),
+      Validation: ValidationSection
+
+    }
+    const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+
   }
-  const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-  UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style","Event","Validation"];
-  UiSchema.elements[1].elements = elements || [CoreSection, StyleSection,EventSection,ValidationSection];
- 
-}
-store.setUiSchema(UiSchema);
+  store.setUiSchema(UiSchema);
 }
 
 export default (store: any, dynamicData: any, submitHandler: any, service: any) => {
@@ -69,26 +69,26 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const formdata = await this.getFormdata();
       store.setFormdata(formdata);
       const schema = this.getSchema();
-      store.setSchema(schema); 
-     this.refreshPage(formdata?.type, store);
-    
+      store.setSchema(schema);
+      this.refreshPage(formdata?.type, store);
+
     },
-    refreshPage:refreshPage,
+    refreshPage: refreshPage,
     getFormdata: function () {
       const path = store.searchParams?.get("path");
-      return getFormdataFromLocalStorage(path) 
+      return getFormdataFromLocalStorage(path)
     },
     getSchema: function () {
       return ComponentSchema;
     },
-    okHandler:()=>okHandler(store),
-    saveHandler: async ()=> await saveHandler(store,service,submitHandler,"PageMaster"),
+    okHandler: () => okHandler(store),
+    saveHandler: async () => await saveHandler(store, service, submitHandler, "PageMaster"),
     onChange: function () {
       if (
         store?.formData?.type !== store?.newData?.type &&
         store?.newData?.type !== undefined
       ) {
-        this.refreshPage(store?.newData?.type,store);
+        this.refreshPage(store?.newData?.type, store);
       }
     },
     editComponents: function () {