impaktapps-ui-builder 0.0.101-alpha.217 → 0.0.101-alpha.218

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.101-alpha.217",
+    "version": "0.0.101-alpha.218",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -14,7 +14,7 @@ import { buildWrapperSection } from "./buildWrapperSection";
 import { buildTextField } from "./buildText";
 import { buildSelect } from "./buildSelect";
 import { buildButton } from "./buildButton";
-import {  buildTable } from "./buildTable";
+import { buildTable } from "./buildTable";
 import { buildLabel } from "./buildLabel";
 import { buildUploadFile } from "./buildUplaodFile";
 import { buildDownloadFile } from "./buildDownloadFile";
@@ -343,54 +343,49 @@ const buildUiSchema = (config: any, store?: any) => {
     }
     else if (config.type == "Table") {
       const sizeMap = {}
-      // const filterMap = {}
+      const filterMap = {}
       if (config.sizeHolder) {
         config.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value
         });
       }
-      // if(config.enableColumnFilter){
-      //   config.enableColumnFilter.map((e)=>{
-      //     filterMap[e.keyName] = true
-      //   })
-      // }
+      if (config.enableColumnFilter) {
+        config.enableColumnFilter.map((e) => {
+          filterMap[e.keyName] = true
+        })
+      }
       elements.elements = config.elements.map((cellElem, elemInd) => {
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          size: sizeMap[cellElem.name] || 180,
+          enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
+          columnFilterModeOptions: config.filteringOptions,
+          enableSorting: config.enableSorting === "No" ? false : true,
+          columnKey: config.columnKey
+        }
         if (cellElem.type) {
           return {
-            accessorKey: cellElem.name,
-            header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180,
-            type: cellElem.columnFormat,
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
             elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
-            // enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
-            columnFilterModeOptions: cellElem.filteringOptions,
-            enableColumnFilter: cellElem.enableFilter === "Yes" ? true : false,
-            enableSorting: cellElem.enableSorting === "Yes" ? true : false
+            ...commonProperties
+
           }
         } else {
-          return {
-            accessorKey: cellElem.name,
-            type: cellElem.columnFormat,
-            header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180,
-            // enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
-            columnFilterModeOptions: cellElem.filteringOptions,
-            enableColumnFilter: cellElem.enableFilter === "Yes" ? true : false,
-            enableSorting: cellElem.enableSorting === "Yes" ? true : false
-          }
+          return commonProperties
         }
 
       })
     }
     else if (config.type == "Array") {
       elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
-        return buildUiSchema(e,store)
+        return buildUiSchema(e, store)
       });
     }
     else {
       elements.elements = config.elements.map((e: any, elemInd: number) => {
-        return buildUiSchema(e,store)
+        return buildUiSchema(e, store)
       });
     }
   }

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

@@ -71,7 +71,7 @@ export const ComponentSchema: any = {
       type: "array",
       items: {
         type: "object",
-        properties: { 
+        properties: {
           key: {
             type: "string",
             oneOf: [
@@ -192,7 +192,7 @@ export const ComponentSchema: any = {
         },
       },
     },
-    enableColumnFilter:{
+    enableColumnFilter: {
       type: "array",
       items: {
         type: "object",
@@ -203,22 +203,23 @@ export const ComponentSchema: any = {
         },
       },
     },
-    filteringOptions:{
-        oneOf: [
-          { const: 'fuzzy', title: 'Fuzzy' },
-          { const: 'contains', title: 'Contain' },
-          { const: 'startsWith', title: 'Starts with' },
-          { const: 'endsWith', title: 'Ends with' },
-          { const: 'equals', title: 'Equals' },
-          { const: 'notEquals', title: 'Not Equals' },
-          { const: 'between', title: 'Between' },
-          { const: 'betweenInclusive', title: 'Between inclusive' },
-          { const: 'greaterThan', title: 'Greater than' },
-          { const: 'greaterThanOrEqualTo', title: 'Greater than or equal to' },
-          { const: 'lessThan', title: 'Less than' },
-          { const: 'lessThanOrEqualTo', title: 'Less than or equal to' },
-        ]
+    filteringOptions: {
+      oneOf: [
+        { const: 'fuzzy', title: 'Fuzzy' },
+        { const: 'contains', title: 'Contain' },
+        { const: 'startsWith', title: 'Starts with' },
+        { const: 'endsWith', title: 'Ends with' },
+        { const: 'equals', title: 'Equals' },
+        { const: 'notEquals', title: 'Not Equals' },
+        { const: 'between', title: 'Between' },
+        { const: 'betweenInclusive', title: 'Between inclusive' },
+        { const: 'greaterThan', title: 'Greater than' },
+        { const: 'greaterThanOrEqualTo', title: 'Greater than or equal to' },
+        { const: 'lessThan', title: 'Less than' },
+        { const: 'lessThanOrEqualTo', title: 'Less than or equal to' },
+      ]
     },
+
     legendLabels: {
       type: "array",
       items: {
@@ -344,7 +345,7 @@ export const ComponentSchema: any = {
       type: "string",
     },
     label: { type: 'string' },
-    RemoveItemButton:{
+    RemoveItemButton: {
       disabled: true,
     },
   },

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

@@ -1,4 +1,4 @@
-export const componentBasicUiSchema: any = (theme)=>{
+export const componentBasicUiSchema: any = (theme) => {
   const uiSchema = {
   type: "HorizontalLayout",
   heading: "Page-Component",

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

@@ -42,7 +42,7 @@ const sectionLabels = {
   Thought: ["Core", "Properties", "Events", "Style", "Validation"]
 }
 
-export function refreshPage (type: string, store: any) {
+export function refreshPage(type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (type) {
@@ -164,7 +164,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     getSchema: function () {
       const schema = _.cloneDeep(ComponentSchema);
-      if (sessionStorage.getItem("copiedConfig") ) {
+      if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
       
@@ -281,22 +281,22 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
       const rowId = dynamicData.path.split(".")[1];
-      sessionStorage.setItem('rowId',rowId);
+      sessionStorage.setItem('rowId', rowId);
       store.updateDialog("popUpEventSection");
     },
 
-    copyPasteElement: function(paramStore: any, setPage: any = this.setPage.bind(this) ){
+    copyPasteElement: function (paramStore: any, setPage: any = this.setPage.bind(this)) {
       const [actionType, elementType] = dynamicData.path.split('.').pop()?.split('_');
       actionType === "Copy" ? this.CopyElement(paramStore, elementType) : this.PasteElement(setPage, elementType);
     },
-    CopyElement: function(paramStore: any = store, elementType: string){
-      const schema = cloneDeep(paramStore.schema );
-      const uiSchema = cloneDeep(paramStore.uiSchema );
+    CopyElement: function (paramStore: any = store, elementType: string) {
+      const schema = cloneDeep(paramStore.schema);
+      const uiSchema = cloneDeep(paramStore.uiSchema);
       schema.properties.RemoveItemButton.disabled = false;
 
       const rowId = dynamicData.path.split(".")[1];
@@ -312,9 +312,9 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       })
       store.setSchema(schema);
       store.setUiSchema(uiSchema);
-    }, 
-    PasteElement: function( setPage: any , elementType: string){
-      if (!sessionStorage.getItem("copiedConfig") ) {
+    },
+    PasteElement: function (setPage: any, elementType: string) {
+      if (!sessionStorage.getItem("copiedConfig")) {
         store.setNotify({
           FailMessage: "No item has been copied.",
           Fail: true,
@@ -322,15 +322,15 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         return;
       }
       const pastedElementParentPath = store.searchParams?.get("path");
-      if (!Array.isArray(store.formData.elements) ) {
+      if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
       saveFormdataInSessionStorage(store.ctx.core.data, pastedElementParentPath);
-      const formData =  getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex =  elementType === "Component" ? formData.elements.length : formData.events.length;
+      const formData = getFormdataFromSessionStorage(pastedElementParentPath);
+      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
 
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
@@ -338,7 +338,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         Events: " The Events cannot be integrated into the component section.",
         Component: "The component cannot be integrated into the Events section."
       };
-      if(copiedConfig.Handler && elementType === "Component"){
+      if (copiedConfig.Handler && elementType === "Component") {
         store.setNotify({
           FailMessage: notificationMessages.Events,
           Fail: true,
@@ -350,13 +350,13 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
           Fail: true,
         });
       }
-      else{
+      else {
         saveFormdataInSessionStorage(copiedConfig, pastedElementPath);
         setPage();
       }
-    },    
-    RemoveItemButton: function(paramStore: any = store){
-      const schema = cloneDeep(paramStore.schema );
+    },
+    RemoveItemButton: function (paramStore: any = store) {
+      const schema = cloneDeep(paramStore.schema);
       const uiSchema = cloneDeep(paramStore.uiSchema);
       schema.properties.RemoveItemButton.disabled = true;
       uiSchema.elements[2].elements[1].config.main.heading = `No element copied`;
@@ -364,13 +364,13 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       store.setSchema(schema);
       store.setUiSchema(uiSchema);
     },
-    elementPathHandler: function(parentPath: string, rowId: any, elementType: string){
-      if(elementType === "Component"){
-         return parentPath ? `${parentPath}.elements[${rowId}]`  : `elements[${rowId}]`;
+    elementPathHandler: function (parentPath: string, rowId: any, elementType: string) {
+      if (elementType === "Component") {
+        return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
       }
-      return parentPath ? `${parentPath}.events[${rowId}]`  : `events[${rowId}]`;
+      return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
-    ElementPathSetter: function(uiSchema: any,copiedFormData?: any){
+    ElementPathSetter: function (uiSchema: any, copiedFormData?: any) {
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
       if(uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
         uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;