impaktapps-ui-builder 1.0.3 → 1.0.9-4.card.1

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

@@ -15,13 +15,14 @@ const sectionLabels = {
   Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Properties" , "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
   ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
   RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -29,7 +30,7 @@ const sectionLabels = {
   Timer: ["Core", "Events", "Style", "Validation"],
   Rank: ["Core", "Events", "Style", "Validation"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components", "Validation"],
+  Array: ["Core", "Components",  "Properties","Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -39,7 +40,12 @@ const sectionLabels = {
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style", "Validation"],
+  Date: ["Core", "Properties", "Events", "Style", "Validation"],
+  DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
+  Image: ["Core", "Properties","Style"],
+  FileInput: ["Core","Properties","Events", "Style", "Validation"],
+
 }
 
 export function refreshPage(type: string, store: any) {
@@ -67,7 +73,7 @@ export function refreshPage(type: string, store: any) {
 
   const parentObj = _.get(currentConfig, parentPath)
 
-  if(parentObj?.type === "Table"){
+  if(parentObj?.type === "Table" || parentObj?.type === "ColumnGroup"){
     UiSchema.elements[0].elements[0].elements[4] = 
     {
       type: "Control",

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

@@ -19,7 +19,8 @@ interface funcParamsProps {
   service: any,
   userValue: any,
   pageDataProvider: any,
-  functionsProvider?: Record<string, any>
+  functionsProvider?: Record<string, any>,
+  initFormData?: any
 }
 let pageData: any = false;
 export const extractEvents = (eventConfig: any) => {
@@ -65,13 +66,13 @@ export default (funcParams: funcParamsProps) => {
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider },eventGroups,
+    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider }, eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
     setPage: async function () {
       funcParams.store.setAdditionalErrors([]);
-      funcParams.store.setFormdata({});
+      funcParams.store.setFormdata(funcParams?.initFormData() || {});
       funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
       eventGroups = {};
@@ -79,131 +80,19 @@ export default (funcParams: funcParamsProps) => {
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
-        detail: { pageName: config.label }
+        detail: { pageName: config.label, hasBackIcon: config.hasBackIcon === "NO" ? false : true }
       });
       window.dispatchEvent(event)
       const theme = funcParams?.store?.theme?.myTheme;
-      uiSchema.elements.push(
-        {
-          type: "HorizontalLayout",
-          config: {
-            main: {
-              direction: "row",
-            },
-            style: {
-              flexDirection: "row",
-              position: "absolute",
-              bottom: 0,
-              height: "fit-content",
-              overflow: "hidden",
-              zIndex: 1000,
-              width: "inherit",
-            },
-          },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/FooterText",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  heading: "Copywriter@ACT21.IO",
-                },
-                style: {
-                  color: theme?.palette?.text?.disabled || "#AFAFAF",
-                  fontSize: "11px",
-                  textAlign: "center",
-                  lineHeight: 2,
-                  width: "fit-content",
-                  left: "50%",
-                  position: "relative",
-                  margin: 0,
-                  flexGrow: 1,
-                  height: 0,
-                  transform: "translate(-50%, 0%)",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackIcon",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  iconName: "PrevIcon",
-                  onClick: "backHandler",
-                  width: "fit-content",
-                },
-                style: {
-                  fill: theme?.palette?.primary?.main,
-                  width: 20,
-                  height: 0,
-                  top: 0,
-                  right: { xs: "12px", sm: "84px" },
-                  position: "absolute",
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  ":hover": {
-                    fill: theme?.palette?.primary?.dark,
-                  },
-                  marginRight: "20px",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackHandlerText",
-              options: {
-                widget: "Box",
-              },
-              config: {
-                main: {
-                  heading: "Previous Page",
-                  onClick: "backHandler",
-                },
-                style: {
-                  display: { xs: "none", sm: "flex" },
-                  textAlign: "left",
-                  lineHeight: 1,
-                  height: 0,
-                  width: "fit-content",
-                  color: theme?.palette?.primary?.main,
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  marginLeft: "2px",
-
-                  top: 3,
-                  right: "12px",
-                  position: "absolute",
-                  ":hover": {
-                    color: theme?.palette?.primary?.dark,
-                  },
-                  marginRight: "4px",
-                },
-              },
-            },
-          ],
-        }
-      );
       const schema = pageData?.schema ?? { type: "object", properties: {} };
-      const newEventGroups = extractEvents(config);
-      console.log("newEventGroups", newEventGroups,eventGroups)
-      eventGroups = newEventGroups;
+      eventGroups = extractEvents(config);
       executeEventsParameters = {
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
-        serviceHolder: this, eventGroups: newEventGroups, formDataHolder
+        serviceHolder: this, eventGroups, formDataHolder
       }
-      await executeRefreshHandler({
-        config: {}, componentName: "",
-        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups: newEventGroups, formDataHolder: {}
-      })
+
       funcParams.store.setSchema(
         (pre: any) => {
           return {
@@ -212,6 +101,12 @@ export default (funcParams: funcParamsProps) => {
           }
         }
       )
+      await executeRefreshHandler({
+        config: {}, componentName: "",
+        store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
+        serviceHolder: this, eventGroups, formDataHolder: {}
+      })
+  
       uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(uiSchema);
     },
@@ -235,6 +130,12 @@ export default (funcParams: funcParamsProps) => {
     onClick: function () {
       this.callHandler("onClick")
     },
+    onKeyDown: function () {
+      this.callHandler("onKeyDown")
+    },
+    onFileDelete: async function () {
+      this.callHandler("onFileDelete")
+    },
     onMount: function () {
       this.callHandler("onMount")
     },
@@ -262,8 +163,9 @@ export default (funcParams: funcParamsProps) => {
         { key: "size", value: paginationValues.pagination.pageSize },
         { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
-        { key: "filters", value: paginationValues.tableColumnConfig|| [] },
-        { key: "globalFilter", value: paginationValues.globalFilter ?? '' }
+        { key: "filters", value: paginationValues.tableColumnConfig || [] },
+        { key: "globalFilter", value: paginationValues.globalFilter ?? '' },
+        { key: "expandedRowIds", value: paginationValues.expandedRowIds ?? []}
       ]
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
@@ -299,7 +201,8 @@ export default (funcParams: funcParamsProps) => {
     },
     callExecuteEvents: async function (paramValue, apiBody, eventType: string) {
       let LastCallResponse = undefined;
-      for (const eventConfig of eventGroups?.[eventType]?.[paramValue.path]) {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      for (const eventConfig of cloneEventGroup?.[eventType]?.[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -340,7 +243,7 @@ export default (funcParams: funcParamsProps) => {
       }
     },
     callHandler: async function (eventType: string, functionParameters?: any) {
-      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[0];
+      const path = funcParams.dynamicData?.tableButtonPath || funcParams.dynamicData.path.split(".")[funcParams.dynamicData.path.split(".").length - 1];
       if (eventGroups?.[eventType]?.[path] !== undefined) {
         Promise.all(eventGroups?.[eventType]?.[path].map((eventConfig) => {
           executeEventsParameters.store.functionParameters = functionParameters