sccoreui 6.2.40 → 6.2.41

package/dist/pages/aggrid/AgGrid.js

@@ -0,0 +1,740 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../components/ag-grid/constants");
+const react_1 = require("react");
+const BulkAction_1 = tslib_1.__importDefault(require("./BulkAction"));
+const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const axios_1 = tslib_1.__importDefault(require("axios"));
+// import { Dropdown } from "primereact/dropdown";
+// import CustomDropDown from "../../components/ag-grid/custom-dropdown";
+// import { FakeServer } from "./fakeServer";
+// import IdCell from "./id-cell";
+// import { Dropdown } from "primereact/dropdown";
+// import { FilterDataType } from "../../components/ag-grid/constants";
+const AgGridPage = () => {
+    const [rowData, setRowData] = (0, react_1.useState)([]);
+    const [shouldRefetch, setShouldRefetch] = (0, react_1.useState)(false);
+    const [defaultFilters, setDefaultFilters] = (0, react_1.useState)([]);
+    const [storeResult, setStoreResult] = (0, react_1.useState)();
+    const [updateRowData, setUpdateRowData] = (0, react_1.useState)({
+        rowData: [],
+        shouldUpdate: false,
+    });
+    const [editMode, setEditMode] = (0, react_1.useState)(false);
+    const [editedRecords, setEditedRecords] = (0, react_1.useState)([]);
+    const [emptyCheckboxStatus, setEmptyCheckboxStatus] = (0, react_1.useState)(false);
+    // const deleteComponent = () => {
+    //   return (
+    //     <div>
+    //       <button className="bg-white" onClick={() => setShouldRefetch(true)}>
+    //         Delete
+    //       </button>
+    //     </div>
+    //   );
+    // };
+    // const AdvancedFilter = () => {
+    //   return <p>Advnaced Filter</p>;
+    // };
+    const initialConditions = {
+        displayFilter: true,
+        displayAdvancedFilter: false,
+        displaySort: true,
+        displaySearch: true,
+        displayRefresh: true,
+        displayRemoveItems: true,
+        displayBulkAction: true,
+        enableViewCreate: true,
+        displaySidePanel: true,
+        enableFillHandle: true,
+        displayBulkEdit: true,
+        displayDiscardEdit: false,
+        displaySaveEditButton: false,
+        displayRecords: false,
+        displayEditHeading: false,
+        displayFeaturesHeader: true,
+        displayCheckboxOnRight: false,
+        displayGroupCount: true,
+        displayCheckboxForGroupChild: true,
+        displayCheckboxForGroups: true,
+        displayRowGroupingElement: true,
+        isGridAutoHeight: false
+    };
+    const [conditionsToDisplay, setConditionsToDisplay] = (0, react_1.useState)(initialConditions);
+    // const updateRows = (row) => {
+    //   setUpdateRowData({ rowData: row, shouldUpdate: true })
+    // }
+    // const statusDropDwon = (params) => {
+    //   return <Dropdown
+    //     onChange={(e) => { params.data.status = e.value, console.log(e.value, 'value updating on change'), updateRows(params.data) }}
+    //     value={params.data?.status}
+    //     options={[{ id: 1, label: "Draft", value: 1 },
+    //     { id: 2, label: "Active", value: 2 },
+    //     {
+    //       id: 3,
+    //       label: "Inactive",
+    //       value: 3,
+    //     }]}
+    //   />
+    // }
+    const [shouldClearFilters, setShouldClearFilters] = (0, react_1.useState)(false);
+    // Callback for remove button click
+    const removeCallBack = (featureDetails) => {
+        console.log(featureDetails, "feature details in products on remove click");
+    };
+    // const groupColumns = [
+    //   {
+    //     id: "1",
+    //     seq: 1,
+    //     field: "rank",
+    //     headerName: "rank",
+    //     rowGroup: true,
+    //   },
+    //   {
+    //     id: "2",
+    //     seq: 2,
+    //     field: "name",
+    //     headerName: "Name",
+    //   },
+    // ];
+    const [columnDefs] = (0, react_1.useState)(
+    //   [
+    //   {
+    //     seq: 1,
+    //     // pinned: "left",
+    //     // lockPosition: "left",
+    //     // cellClass: "lock-pinned",
+    //     // suppressMovable: true,
+    //     enableHeaderCheckbox: true,
+    //     hide: false,
+    //     enableChildCheckbox: true,
+    //     id: "101",
+    //     headerName: "ID",
+    //     field: "id",
+    //     isSortable: false,
+    //     code: 1,
+    //     dataType: FilterDataType.STRING,
+    //     editable: true,
+    //     isFilterable: false,
+    //     cellStyle: { borderRight: "1px solid #ccc" },
+    //     visibleInPanel: true,
+    //     cellRendererSelector: (params) => {
+    //       if (params.node.rowPinned) {
+    //         return {
+    //           component: CustomDropDown,
+    //           params: {
+    //             style: { color: "#5577CC" },
+    //           },
+    //         };
+    //       } else {
+    //         return undefined;
+    //       }
+    //     },
+    //     suppressFillHandle: true,
+    //     isEditable: false
+    //   },
+    //   {
+    //     id: "111",
+    //     seq: 3,
+    //     headerName: "Email",
+    //     dataType: FilterDataType.STRING,
+    //     editable: true,
+    //     visibleInPanel: true,
+    //     isFilterable: false,
+    //     field: "email",
+    //     suppressFillHandle: false,
+    //     isEditable: true,
+    //     filter: "agTextColumnFilter",
+    //   },
+    //   {
+    //     seq: 3,
+    //     filter: "agTextColumnFilter",
+    //     // lockPinned: true,
+    //     hide: false,
+    //     id: "102",
+    //     headerName: "Title",
+    //     cellRendererSelector: (params) => {
+    //       if (params.node.rowPinned) {
+    //         return {
+    //           component: CustomDropDown,
+    //           params: {
+    //             style: { color: "#5577CC" },
+    //           },
+    //         };
+    //       } else {
+    //         return undefined;
+    //       }
+    //     },
+    //     field: "name",
+    //     isSortable: true,
+    //     code: 1,
+    //     dataType: FilterDataType.STRING,
+    //     editable: true,
+    //     visibleInPanel: true,
+    //     isFilterable: false,
+    //     suppressFillHandle: false,
+    //     isEditable: true
+    //   },
+    //   {
+    //     seq: 2,
+    //     hide: true,
+    //     // lockPinned: true,
+    //     id: "103",
+    //     headerName: "Body",
+    //     field: "body",
+    //     isSortable: true,
+    //     code: 1,
+    //     dataType: FilterDataType.STRING,
+    //     editable: true,
+    //     visibleInPanel: true,
+    //     isFilterable: true,
+    //     suppressFillHandle: false,
+    //     isEditable: true,
+    //     filter: "agTextColumnFilter",
+    //   },
+    //   {
+    //     seq: 4,
+    //     hide: false,
+    //     id: "104",
+    //     headerName: "Status",
+    //     field: "status",
+    //     isSortable: true,
+    //     visibleInPanel: true,
+    //     columnType: "single",
+    //     filter: true,
+    //     rowGroup: false,
+    //     filterParams: {
+    //       values: [
+    //         1,
+    //         2,
+    //         3
+    //       ]
+    //     },
+    //     options: [
+    //       { id: 1, label: "Draft", value: 1 },
+    //       { id: 2, label: "Active", value: 2 },
+    //       { id: 3, label: "Inactive", value: 3 },
+    //     ],
+    //     code: 1,
+    //     dataType: FilterDataType.SELECT,
+    //     editable: false,
+    //     isFilterable: true,
+    //     cellRenderer: statusDropDwon,
+    //     suppressFillHandle: false,
+    //     isEditable: true
+    //   },
+    //   {
+    //     seq: 6,
+    //     hide: false,
+    //     // lockPinned: true,
+    //     id: "555",
+    //     headerName: "Price",
+    //     field: "price",
+    //     isSortable: true,
+    //     code: 1,
+    //     dataType: FilterDataType.INTEGER,
+    //     editable: true,
+    //     visibleInPanel: true,
+    //     isFilterable: true,
+    //     suppressFillHandle: false,
+    //     isEditable: true,
+    //     filter: "agNumberColumnFilter",
+    //   },
+    //   {
+    //     seq: 6,
+    //     hide: false,
+    //     // lockPinned: true,
+    //     id: "666",
+    //     headerName: "Date",
+    //     field: "date",
+    //     isSortable: true,
+    //     code: 1,
+    //     dataType: FilterDataType.DATE,
+    //     editable: false,
+    //     visibleInPanel: true,
+    //     isFilterable: true,
+    //     suppressFillHandle: false,
+    //     isEditable: true,
+    //     filter: true,
+    //   },
+    //   {
+    //     seq: 5,
+    //     id: "105",
+    //     hide: false,
+    //     isEditable: false,
+    //     // pinned: "right",
+    //     // lockPosition: "rigth",
+    //     // cellClass: "lock-pinned",
+    //     visibleInPanel: false,
+    //     suppressFillHandle: true,
+    //     cellRendererSelector: (params) => {
+    //       if (params.node.rowPinned) {
+    //         return () => null;
+    //       } else {
+    //         return { component: deleteComponent };
+    //       }
+    //     },
+    //   },
+    // ]
+    []);
+    const [columnsToDisplay, setColumnsToDisplay] = (0, react_1.useState)([]);
+    const commonFieldsTemplate = (row, field) => {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ title: row[field], className: "overflow-hidden white-space-nowrap text-overflow-ellipsis max-w-16rem text-base line-heignt-3" }, { children: row[field] ? row[field] : "--" })));
+    };
+    // const statusData = () => {
+    //   return (
+    //     <>
+    //       <p>{"cell renderer"}</p>
+    //     </>
+    //   );
+    // };
+    const DeleteRow = (params) => {
+        console.log(params, 'params in delete');
+        return (0, jsx_runtime_1.jsx)("p", Object.assign({ onClick: () => deleteRow(params) }, { children: "delete" }));
+    };
+    const AddRow = (params) => {
+        return (0, jsx_runtime_1.jsx)("p", Object.assign({ onClick: () => addRow(params) }, { children: "Add" }));
+    };
+    const deleteRow = (params) => {
+        const { node } = params;
+        const api = params === null || params === void 0 ? void 0 : params.api;
+        api.applyTransaction({ remove: [node.data] });
+    };
+    const addRow = (params) => {
+        const api = params.api;
+        const newRow = { id: "101", status: 3, name: "New Product" };
+        api.applyTransaction({ add: [newRow] });
+    };
+    const fillDynamicColumns = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const result = yield axios_1.default.get("https://productservice.easyfastnow.com/products/views/66b25ea28f4115f40bb7587f");
+        const options = yield axios_1.default.post("https://productservice.easyfastnow.com/options", []);
+        let x = result.data.response.gridColumns.map((col, index) => {
+            console.log(col, "columns in page for status");
+            let obj = {
+                headerName: col.fieldDisplayName,
+                suppressMovable: true,
+                enableHeaderCheckbox: col.enableHeaderCheckbox,
+                enableChildCheckbox: col.enableChildCheckbox,
+                hide: col.fieldName === "status" ? false : col.hide,
+                isFilterable: col.isFilterable,
+                isSortable: col.isSortable,
+                field: col.fieldName,
+                visibleInPanel: true,
+                dataType: col.datatype,
+                id: index + index,
+                seq: index,
+                attributeType: col.isCustomAttribute ? 2 : 1,
+                body: (data) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: commonFieldsTemplate(data.data, col.fieldName) })),
+                // cellRenderer: statusData,
+            };
+            if (col.isCustomAttribute) {
+                obj = Object.assign(Object.assign({}, obj), { visibleInPanel: true, field: col.fieldID, isFilterable: true });
+            }
+            if (col.pinned) {
+                obj = Object.assign(Object.assign({}, obj), { pinned: "left", lockPosition: "left", cellClass: "lock-pinned", minWidth: 350 });
+            }
+            if (col.datatype === 14 || col.datatype === 12) {
+                obj["options"] = [
+                    { id: 1, label: "Draft", value: "DRAFT" },
+                    { id: 2, label: "Active", value: "Active" },
+                    { id: 3, label: "Inactive", value: "Inactive" },
+                ];
+            }
+            return obj;
+        });
+        options.data.response.data.filter((x) => !x.isMerged).map((option) => {
+            let obj = {
+                headerName: option.name,
+                suppressMovable: true,
+                enableHeaderCheckbox: false,
+                enableChildCheckbox: false,
+                hide: true,
+                isFilterable: true,
+                isSortable: false,
+                field: option.id,
+                dataType: 14,
+                visibleInPanel: false,
+                attributeType: 3,
+                options: option.optionValues ? option.optionValues.map((option1) => (Object.assign(Object.assign({}, option1), { label: option1.name, value: option1.id, minWidth: 200 }))) : []
+            };
+            x.push(obj);
+            return obj;
+        });
+        const deleteColumn = {
+            cellRenderer: DeleteRow
+        };
+        const addColumn = {
+            cellRenderer: AddRow
+        };
+        x.splice(3, x.length - 1);
+        x.push(deleteColumn);
+        x.push(addColumn);
+        setColumnsToDisplay(x);
+    });
+    (0, react_1.useEffect)(() => {
+        fillDynamicColumns();
+    }, []);
+    const noRowsOverlayComponent = () => {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { children: "No Rows, message from products" }) }));
+    };
+    const updateCell = (selectedRowsToUpdate) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(selectedRowsToUpdate, "selected rows to update");
+        setRowData(rowData);
+        setStoreResult(rowData);
+        const output = {
+            isSuccess: true,
+        };
+        return output;
+    });
+    // const [selectedCity, setSelectedCity] = useState(null);
+    const pinnedTopRowData = (0, react_1.useMemo)(() => {
+        return [{ id: "1", name: "nitesh", body: "working out" }];
+    }, []);
+    // Update columns based on hide panel
+    const updateColumns = (updatedColumns) => {
+        console.log(updatedColumns, "updated columns in products");
+        setColumnsToDisplay(updatedColumns.columns);
+    };
+    console.log(setColumnsToDisplay);
+    // Remove items from - button
+    // const removeItem = (checkboxSelectionDetails) => {
+    //   const unSelectedData = checkboxSelectionDetails?.excludedRecords;
+    //   const selectedData = checkboxSelectionDetails?.includedRecords;
+    //   const isIternminite = checkboxSelectionDetails?.isIndeterminate;
+    //   console.log(checkboxSelectionDetails, "coming in remove item products");
+    //   let updatedRowData = [];
+    //   if (isIternminite) {
+    //     updatedRowData = unSelectedData;
+    //   } else if (selectedData?.length && !isIternminite) {
+    //     const childIds = new Set(selectedData?.map((child) => child.id));
+    //     updatedRowData = rowData.filter((parent) => !childIds.has(parent.id));
+    //   }
+    //   console.log(updatedRowData, "result data from remove items in products");
+    //   return updatedRowData;
+    // };
+    const getCheckedRows = (checkedRows) => {
+        console.log(checkedRows, "checked rows in products");
+    };
+    // const updateForFillOperation =(fillSelected)=>{
+    //   console.log('store row data in update fill',storeResult,fillSelected)
+    //   const updatedResult = JSON.parse(JSON.stringify(storeResult.rowData))?.map((item)=>{
+    //     fillSelected.childRows?.filter((fillItem)=>{
+    //       console.log(item.id ,fillItem.id)
+    //       if(item.id===fillItem.id){
+    //         console.log('coming in satisfied item')
+    //         console.log(item[fillSelected.column.field],fillItem[fillSelected.column.field],'field in item and fill item')
+    //         item[fillSelected.column.field] = fillSelected.parentRow[fillSelected.column.field]
+    //       }
+    //     })
+    //     return item
+    //   })
+    //   const newOutput = {
+    //     rowData : updatedResult,
+    //     totalRecords:storeResult.totalRecords
+    //   }
+    //   console.log(updatedResult,'updated result on fill')
+    //   return newOutput
+    // //  const updatedRowData =  storeResult.rowData.map
+    // }
+    const SaveEdit = (params) => {
+        console.log(params, "params in save edit");
+        console.log(editedRecords, "edited records in page");
+        const saveChanges = () => {
+            setEmptyCheckboxStatus(true);
+            console.log("changes saved", editedRecords);
+            setColumnsToDisplay(columnDefs);
+            setShouldRefetch(true);
+            setEditMode(false);
+            setConditionsToDisplay(initialConditions);
+        };
+        return ((0, jsx_runtime_1.jsx)("button", Object.assign({ disabled: !editedRecords.length, onClick: saveChanges, className: "bg-white" }, { children: "Save Changes" })));
+    };
+    // Discard component for bulk edit
+    const DiscardEdit = () => {
+        const discard = () => {
+            setColumnsToDisplay(columnDefs);
+            setShouldRefetch(true);
+            setEditMode(false);
+            setConditionsToDisplay(initialConditions);
+        };
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ onClick: discard }, { children: "Discard" })) }));
+    };
+    // Edit headeing details
+    const EditHeadingDetails = () => {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { children: "Bulk Edit 4 products 4 variants" }) }));
+    };
+    // Bulk edit component
+    const BulkEdit = () => {
+        const updateColumns = () => {
+            const tempColumns = [...columnsToDisplay].filter((column) => column.isEditable);
+            console.log(tempColumns, "temp columsn");
+            setColumnsToDisplay(tempColumns);
+            setShouldRefetch(true);
+            setEditMode(true);
+            const tempConditions = conditionsToDisplay;
+            tempConditions.displayFilter = false;
+            tempConditions.displaySort = false;
+            tempConditions.displayBulkAction = false;
+            tempConditions.enableFillHandle = true;
+            tempConditions.displayDiscardEdit = true;
+            tempConditions.displayRefresh = false;
+            tempConditions.displayRemoveItems = false;
+            tempConditions.displayBulkEdit = false;
+            tempConditions.displaySaveEditButton = true;
+            tempConditions.displayEditHeading = true;
+            setConditionsToDisplay(tempConditions);
+        };
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ onClick: updateColumns }, { children: "Bulk Edit" })) }));
+    };
+    // const getRowData = async (startRow, endRow, featureDetails, params?: any) => {
+    const getRowData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        // const dummyRecordForGroup =  [
+        //   {name:"nitesh",rank:1,id:"01"},
+        //   {name:"pawan",rank:1,id:"02"},
+        //   {name:"harish",rank:2,id:"03"},
+        //   {name:"nitesh",rank:3,id:"04"},
+        //   {name:"nitesh",rank:2,id:"05"},
+        //   {name:"nitesh",rank:3,id:"06"},
+        //   {name:"nitesh",rank:3,id:"07"},
+        //   {name:"nitesh",rank:3,id:"08"},
+        // ]
+        // console.log(params, "params in page");
+        // console.log(featureDetails, "feature details in page for filter queries");
+        var _a, _b, _c;
+        // if(featureDetails?.fillSelected?.childRows?.length){
+        //   return updateForFillOperation(featureDetails.fillSelected)
+        // }
+        // const features: Features = featureDetails;
+        // const conditionToRemoveItem = features.checkBoxSelection.allBoxChecked || features.checkBoxSelection.isIndeterminate || features.checkBoxSelection.includedRecords.length || features.checkBoxSelection.excludedRecords.length
+        // if (featureDetails.isRemoveClicked) {
+        //   const result = removeItem(features.checkBoxSelection);
+        //   const output = {
+        //     totalRecords: result.length,
+        //     rowData: result,
+        //   };
+        //   return await output;
+        // }
+        // let totalRecords = 500;
+        // const serverSideUrl = `https://jsonplaceholder.typicode.com/comments?_start=${startRow}&_end=${endRow}`;
+        // const clientSideUrl = "https://jsonplaceholder.typicode.com/comments?_limit=200";
+        // console.log(serverSideUrl, clientSideUrl);
+        //     const { startRow, featureDetails } = payload
+        //   const stringWithoutZeros = String(startRow).replace(/00/g, '');
+        //   const numberWithoutZeros = parseInt(stringWithoutZeros) + 1
+        //   const requestObject: any = { pageIndex: numberWithoutZeros, pageSize: 100 }
+        // debugger
+        //   // Add sort info if given any by gird component
+        //   if (featureDetails?.sort?.isSortable) {
+        //     const sortInfo = featureDetails?.sort
+        //     requestObject.sortOrder = {
+        //       direction: sortInfo?.orderToSort?.sortId,
+        //       propertyName: sortInfo?.columnToSort?.field
+        //     }
+        //   }
+        //   // Add search info if given any by gird component
+        //   if (featureDetails?.searchedText?.length) {
+        //     requestObject.searchString = featureDetails?.searchedText
+        //   }
+        //   // Add filter info if given any by gird component
+        //   const filterFromGrid = featureDetails?.filterQueries ?? [];
+        //   if (filterFromGrid.length > 0) {
+        //     const requestFilters: any[] = filterFromGrid.map((element: any) => ({
+        //       fieldName: element?.selectedColumn?.code,
+        //       fieldValue: element?.value.toString(),
+        //       conditionalOperator: element?.selectedOperation,
+        //       logicalOperator: element.logicalOperator
+        //     }));
+        //     requestObject.filters = requestFilters;
+        //   }
+        const result = yield axios_1.default.post("https://productservice.easyfastnow.com/products/search", {});
+        console.log("resulttt in ag grid", result);
+        const treeData = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map((row, idx) => {
+            // row.orgHierarchy = [row.id]
+            if (idx < 4) {
+                row.orgHierarchy = [row.id];
+            }
+            else {
+                row.orgHierarchy = [row.id];
+            }
+            return row;
+        });
+        console.log(result, treeData, "row data api call");
+        // debugger
+        // Enable row group local server
+        // const grouping = false;
+        // const outputData = result?.data
+        //   .map((item, idx) => {
+        //     if (idx == 2 || idx == 3) {
+        //       item.type = 2
+        //       item.price = "--"
+        //     } else {
+        //       item.type = 1
+        //       item.status = 3
+        //       item.price = 500;
+        //     }
+        //     delete item.postId;
+        //     return item;
+        //   });
+        // const dummyData = [
+        //   {status:3,name:"product 1", id:1},
+        //   {status:4,name:"product 2", id:2},
+        //   {status:5,name:"product 3", id:3},
+        //   {status:2,name:"product 4", id:4},
+        //   {status:1,name:"product 5", id:5},
+        //   {status:3,name:"product 6", id:6},
+        // ]
+        //   const dummy = treeData.map((item, index) => {
+        //     return {
+        //         ...item,
+        //         status:index % 2 == 0 ? "--" : item.status 
+        //     };
+        // });
+        const dummy = treeData.splice(0, 6);
+        console.log(dummy);
+        let output = {
+            totalRecords: dummy,
+            rowData: dummy,
+        };
+        // Performs when grouping is present
+        // if (grouping) {
+        //   const result: any = await axios.get(serverSideUrl);
+        //   result?.data.map((item) => {
+        //     item.status = "Active";
+        //     return item;
+        //   });
+        //   let fakeServer = FakeServer(result.data, ["status"]);
+        //   const groupingResponse = fakeServer.getData(params);
+        //   console.log(groupingResponse, 'grouping response')
+        //   const lastRow =
+        //     params.groupKeys?.length == 0
+        //       ? groupingResponse?.lastRow
+        //       : totalRecords;
+        //   output.rowData = groupingResponse.rows;
+        //   output.totalRecords = lastRow;
+        // }
+        setStoreResult(output);
+        setRowData(result.data);
+        setShouldRefetch(false);
+        setShouldClearFilters(false);
+        return output;
+    });
+    const style = {
+        height: "900px",
+        width: "100%",
+    };
+    console.log(pinnedTopRowData, defaultFilters);
+    const createView = (viewDetails) => {
+        console.log(viewDetails, "parsed value for create view");
+    };
+    console.log(storeResult, "sotred result");
+    const selectFilter = () => {
+        const defaultFilters = [
+            {
+                columnName: {
+                    name: "Body",
+                    code: "body",
+                    dataType: "string",
+                },
+                condition: 5,
+                value: "data",
+                id: "0.028544677566825438",
+                isActive: true,
+                logicalOperator: 1, // number
+            },
+        ];
+        setShouldRefetch(true);
+        setDefaultFilters(defaultFilters);
+    };
+    const dynamicText = {
+        filterModelText: {
+            header: "Filter",
+            subHeader: "Streamline Your Search With Filters",
+            resetFilterAction: "Reset Filter",
+            createViewInputPlaceHolder: "Enter",
+            createViewAction: "Create View",
+            applyAction: "Apply",
+            elementOnePlaceHolder: "Select",
+            elementTwoPlaceHolder: "Select",
+            elementThreePlaceHolder_Input: "Enter Text",
+            elementThreePlaceHolder_Input_Number: "Enter Number",
+            elementThreePlaceHolder_DropDown: "Select",
+            elementThreePlaceHolder_MultiSelect: "Select",
+            elementThreePlaceHolder_Calender: "Select Date",
+            onSelectedFilter: "Selected",
+        },
+        sortModelText: {
+            header: "Column Sorting",
+            clearAction: "Clear",
+            applyAction: "Apply",
+            onSelectedSort: "Selected",
+        },
+        recordDetailModelText: {
+            totalRecordHeader: "Total Records",
+        },
+        sidePanelText: {
+            header: "Configure Columns",
+            disacrd_button: "Discard",
+            update_button: "Update",
+            apply_to_all_views: "Apply to all views",
+            apply_subHeading: "Apply the chosen column selection to all available views",
+            search_placeHolder: "Search by column name",
+            selected_attributes: "Selected Attributes",
+            unselected_attributes: "Unselected Attributes",
+        },
+        bulkEditAction: {
+            discard: "Discard",
+            save: "Save Changes",
+        },
+    };
+    // const GroupHeaderComponent = (params) =>{
+    //   console.log(params)
+    //   return <><p>Group Header</p> </>
+    // }
+    const getGroupedColumnsWithOrder = (params) => {
+        var _a;
+        // Get all row group columns in the order they are grouped
+        const rowGroupColumns = ((_a = params === null || params === void 0 ? void 0 : params.api) === null || _a === void 0 ? void 0 : _a.getRowGroupColumns()) || [];
+        // Extract column details including ID and field
+        const groupedColumnsInOrder = rowGroupColumns.map(col => ({
+            field: col.getColDef().headerName
+        }));
+        console.log("Grouped Columns in Order:", rowGroupColumns);
+        return groupedColumnsInOrder;
+    };
+    const GroupHeaderName = (props) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const { params } = props;
+        // const level = params.node.level;
+        const groupId = params.node.key; // The unique key for the current group
+        const parentGroupId = (_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.key; // The unique key for the parent group, if available
+        // Get the grouped columns with their details
+        const columnsSelectedForGroup = getGroupedColumnsWithOrder(params);
+        // Custom names for groups and subgroups
+        const customNames = {
+            group1: `GROUP BY - ${(_c = (_b = columnsSelectedForGroup[0]) === null || _b === void 0 ? void 0 : _b.field) === null || _c === void 0 ? void 0 : _c.toUpperCase()} : ${groupId}`,
+            group2: `${(_e = (_d = columnsSelectedForGroup[1]) === null || _d === void 0 ? void 0 : _d.field) === null || _e === void 0 ? void 0 : _e.toUpperCase()} BY ${parentGroupId}`,
+        };
+        // Determine the group name based on the level
+        // const groupName = params?.node?.level === 0 ? customNames.group1 : customNames.group2;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_f = params === null || params === void 0 ? void 0 : params.node) === null || _f === void 0 ? void 0 : _f.level) === 0 && customNames.group1, ((_g = params === null || params === void 0 ? void 0 : params.node) === null || _g === void 0 ? void 0 : _g.level) === 1 && customNames.group2] }));
+    };
+    // Store ref and update grid
+    const getGridRef = (gridRef) => {
+        console.log(gridRef, 'grid ref in products');
+        const newRow = { name: "nitesh", id: "101", status: "199" };
+        console.log(newRow);
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            // gridRef.current?.api?.applyTransaction({ add: [newRow] })
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: selectFilter }, { children: "Select Filter" })), (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: () => setShouldClearFilters(true) }, { children: "clear filter" })), columnsToDisplay.length > 0 && ((0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { columnData: columnsToDisplay, style: style, getRowData: getRowData, conditionsToDisplay: conditionsToDisplay, rowModelType: constants_1.ROWMODELTYPE.CLIENT_SIDE, pinnedTopRowData: pinnedTopRowData, bulkActionComponent: BulkAction_1.default, getCheckedRows: getCheckedRows, shouldRefetch: shouldRefetch, noRowsOverlayComponent: noRowsOverlayComponent, defaultFilters: defaultFilters, createView: createView, dynamicText: dynamicText, sortOptions: constants_1.COLUMN_SORT_OPTIONS, filterConditions: [
+                    { id: 1, label: "AND" },
+                    { id: 2, label: "OR" },
+                ], enableManageColumnsCallback: true, clearFilters: shouldClearFilters, updateColumnsForGrid: updateColumns, updateCell: updateCell, BulkEditComponent: BulkEdit, updateRowData: updateRowData, setUpdateRowData: setUpdateRowData, editMode: editMode, discardEditComponent: DiscardEdit, SaveEdit: SaveEdit, setEditedRecords: setEditedRecords, editedRecords: editedRecords, emptyCheckboxStatus: emptyCheckboxStatus, EditHeadingDetails: EditHeadingDetails, groupName: "status", enableTree: false, treeHeaderName: "Product Name", groupField: "name", 
+                // GroupHeaderComponent={GroupHeaderComponent}
+                enableCheckboxForGroupHeader: true, 
+                // AdvancedFilter={AdvancedFilter}
+                removeCallBack: removeCallBack, rowGroupHeaderComponent: GroupHeaderName, serverSideInitialRowCount: 3, getGridRef: getGridRef }))] }));
+};
+exports.default = AgGridPage;