sccoreui 6.3.99 → 6.4.0

package/dist/pages/aggrid/AgGrid.js

@@ -0,0 +1,837 @@
+"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"));
+const inputtext_1 = require("primereact/inputtext");
+const type_1 = require("../../components/types/type");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+// 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 treeData = [
+    {
+        orgHierarchy: ["Testing configuable products"],
+        id: "66d8352fb870ddafea4cbb77",
+        code: "Testingconfiguableproducts",
+        type: 2,
+        totalSkuCount: 6,
+    },
+    {
+        orgHierarchy: [
+            "Testing configuable products",
+            "Testingconfiguableproducts-Blue-cc1234-fbdfb",
+        ],
+        id: "66d86873bc124aba35f15190",
+        code: "Testingconfiguableproducts-Blue-cc1234-fbdfb",
+    },
+    {
+        orgHierarchy: [
+            "Testing configuable products",
+            "Testingconfiguableproducts-Blue-cc1234-red",
+        ],
+        id: "66d86873bc124aba35f1518e",
+        code: "Testingconfiguableproducts-Blue-cc1234-red",
+    },
+];
+const AgGridPage = () => {
+    const [rowData, setRowData] = (0, react_1.useState)([]);
+    const [shouldRefetch, setShouldRefetch] = (0, react_1.useState)(false);
+    const [defaultFilters] = (0, react_1.useState)([]);
+    const [storeResult, setStoreResult] = (0, react_1.useState)();
+    // const deleteComponent = () => {
+    //   return (
+    //     <div>
+    //       <button className="bg-white" onClick={() => setShouldRefetch(true)}>
+    //         Delete
+    //       </button>
+    //     </div>
+    //   );
+    // };
+    // const AdvancedFilter = () => {
+    //   return <p>Advnaced Filter</p>;
+    // };
+    const initialConditions = {
+        displayFilter: type_1.VisibilityState.ENABLE,
+        displayAdvancedFilter: type_1.VisibilityState.ENABLE,
+        displaySort: type_1.VisibilityState.DISABLE,
+        displaySearch: type_1.VisibilityState.ENABLE,
+        displayRefresh: type_1.VisibilityState.DISABLE,
+        displayRemoveItems: type_1.VisibilityState.DISABLE,
+        displayBulkAction: type_1.VisibilityState.HIDE,
+        enableViewCreate: true,
+        displaySidePanel: type_1.VisibilityState.ENABLE,
+        enableFillHandle: true,
+        displayBulkEdit: type_1.VisibilityState.DISABLE,
+        displayDiscardEdit: false,
+        displaySaveEditButton: false,
+        displayRecords: type_1.VisibilityState.ENABLE,
+        displayEditHeading: type_1.VisibilityState.ENABLE,
+        displayFeaturesHeader: true,
+        displayCheckboxOnRight: false,
+        displayGroupCount: true,
+        displayCheckboxForGroupChild: false,
+        displayCheckboxForGroups: false,
+        displayRowGroupingElement: type_1.VisibilityState.ENABLE,
+        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] = 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 inputText = (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: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: row[field], onChange: (e) => setRowData3((prev) => [
+                    ...prev.map((x) => {
+                        if (x.id === row.id) {
+                            return Object.assign(Object.assign({}, x), { name: e.target.value });
+                        }
+                        return x;
+                    }),
+                ]) }) })));
+    };
+    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://paymentconfig_queriesapi.easyfastnow.com/api/grid/get-meta-data?screenId=1&viewId=1");
+        const options = { data: { response: { data: [] } } };
+        let x = result.data.response.columns.map((col, index) => {
+            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,
+                filter: true,
+                visibleInPanel: true,
+                dataType: col.datatype,
+                id: index + index,
+                seq: index,
+                grouping: index === 0,
+                attributeType: col.isCustomAttribute ? 2 : 1,
+                cellRenderer: (data) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data.data ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: col.fieldName === "name" ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inputText(data.data, col.fieldName) })) : ((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);
+    });
+    const [rowData3, setRowData3] = (0, react_1.useState)([]);
+    const fetchData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const result = yield axios_1.default.post("https://paymentconfig_queriesapi.easyfastnow.com/api/grid/get-data", {
+            pageIndex: 1,
+            pageSize: 100,
+            screenId: 1,
+        });
+        console.log("resulttt in ag grid", result);
+        const treeData = (_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.map((row, idx) => {
+            // row.orgHierarchy = [row.id]
+            if (idx < 4) {
+                row.orgHierarchy = [row.id];
+            }
+            else {
+                row.orgHierarchy = [row.id];
+            }
+            return row;
+        });
+        setRowData3(treeData);
+    });
+    (0, react_1.useEffect)(() => {
+        fetchData();
+        fillDynamicColumns();
+    }, []);
+    const noRowsOverlayComponent = () => {
+        // const displayedRowCount = getGridRef?.current!.api?.getDisplayedRowCount();
+        // const text = getGridRef?.current!.api?.getQuickFilter();
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { children: "No Rows, message from products" }) }));
+    };
+    console.log(rowData3, "rowdara");
+    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 (
+    //     <button
+    //       disabled={!editedRecords.length}
+    //       onClick={saveChanges}
+    //       className="bg-white"
+    //     >
+    //       Save Changes
+    //     </button>
+    //   );
+    // };
+    // Discard component for bulk edit
+    // const DiscardEdit = () => {
+    //   const discard = () => {
+    //     setColumnsToDisplay(columnDefs);
+    //     setShouldRefetch(true);
+    //     setEditMode(false);
+    //     setConditionsToDisplay(initialConditions);
+    //   };
+    //   return (
+    //     <div>
+    //       <p onClick={discard}>Discard</p>
+    //     </div>
+    //   );
+    // };
+    // Edit headeing details
+    // const EditHeadingDetails = () => {
+    //   return (
+    //     <div>
+    //       <p>Bulk Edit 4 products 4 variants</p>
+    //     </div>
+    //   );
+    // };
+    // 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 = type_1.VisibilityState.ENABLE;
+            tempConditions.displaySort = type_1.VisibilityState.DISABLE;
+            tempConditions.displayBulkAction = type_1.VisibilityState.HIDE;
+            tempConditions.enableFillHandle = true;
+            tempConditions.displayDiscardEdit = true;
+            tempConditions.displayRefresh = type_1.VisibilityState.DISABLE;
+            tempConditions.displayRemoveItems = type_1.VisibilityState.DISABLE;
+            tempConditions.displayBulkEdit = type_1.VisibilityState.DISABLE;
+            tempConditions.displaySaveEditButton = true;
+            tempConditions.displayEditHeading = type_1.VisibilityState.ENABLE;
+            setConditionsToDisplay(tempConditions);
+        };
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: updateColumns, className: "disabled" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "edit-02", color: "text-gray-500" }) })));
+    };
+    // const getRowData = async (startRow, endRow, featureDetails, params?: any) => {
+    // const getRowData = async () => {
+    //   console.log("called");
+    //   // 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");
+    //   // 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: any = await axios.post(
+    //     "https://productservice.easyfastnow.com/products/search",
+    //     {}
+    //   );
+    //   console.log("resulttt in ag grid", result);
+    //   const treeData = result?.data?.response?.data?.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: "100vh",
+        width: "100%",
+    };
+    console.log(pinnedTopRowData, defaultFilters);
+    // const createView = (viewDetails) => {
+    //   console.log(viewDetails, "parsed value for create view");
+    // };
+    console.log(storeResult, "sotred result");
+    const selectFilter = () => {
+        var _a;
+        (_a = getGridRef.current.api) === null || _a === void 0 ? void 0 : _a.showAdvancedFilterBuilder();
+        // const defaultFilters = [
+        //   {
+        //     columnName: {
+        //       name: "Body",
+        //       code: "body",
+        //       dataType: "string",
+        //     },
+        //     condition: 5, // Convert to type number
+        //     value: "data", // type can be anything
+        //     id: "0.028544677566825438", // "string"
+        //     isActive: true, // boolean
+        //     logicalOperator: 1, // number
+        //   },
+        // ];
+        // setShouldRefetch(true);
+        // setDefaultFilters(defaultFilters);
+        // setRowData3([...rowData3.slice(1)]);
+    };
+    // 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) => {
+    //   // Get all row group columns in the order they are grouped
+    //   const rowGroupColumns = params?.api?.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) => {
+    //   const { params } = props;
+    //   // const level = params.node.level;
+    //   const groupId = params.node.key; // The unique key for the current group
+    //   const parentGroupId = params?.node?.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 - ${columnsSelectedForGroup[0]?.field?.toUpperCase()} : ${groupId}`,
+    //     group2: `${columnsSelectedForGroup[1]?.field?.toUpperCase()} BY ${parentGroupId}`,
+    //   };
+    //   // Determine the group name based on the level
+    //   // const groupName = params?.node?.level === 0 ? customNames.group1 : customNames.group2;
+    //   return (
+    //     <>
+    //       {params?.node?.level === 0 && customNames.group1}
+    //       {params?.node?.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?.current) {
+    //     // gridRef.current?.api?.applyTransaction({ add: [newRow] })
+    //   }
+    // };
+    const ChildComponentForGroup = () => {
+        return (0, jsx_runtime_1.jsx)("p", { children: "hhhh" });
+    };
+    const GroupHeaderComponent = () => {
+        return (0, jsx_runtime_1.jsx)("h3", { children: "MODULES" });
+    };
+    const RowGroupHeaderComponent = () => {
+        return (0, jsx_runtime_1.jsx)("span", { children: "ttt" });
+    };
+    const getGridRef = (0, react_1.useRef)(null);
+    const loadingOverlayComponentParams = (0, react_1.useMemo)(() => {
+        return { loadingMessage: "One moment please..." };
+    }, []);
+    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}
+                rowData: treeData, conditionsToDisplay: conditionsToDisplay, rowModelType: constants_1.ROWMODELTYPE.CLIENT_SIDE, pinnedTopRowData: pinnedTopRowData, bulkActionComponent: BulkAction_1.default, getCheckedRows: getCheckedRows, shouldRefetch: shouldRefetch, noRowsOverlayComponent: noRowsOverlayComponent, enableManageColumnsCallback: true, clearFilters: shouldClearFilters, updateColumnsForGrid: updateColumns, updateCell: updateCell, BulkEditComponent: BulkEdit, getGridRef: getGridRef, enableAdvancedFilter: false, ChildComponentForGroup: ChildComponentForGroup, displayRowGroupingElement: true, GroupHeaderComponent: GroupHeaderComponent, rowGroupColumnWidth: 200, displayCheckboxForGroups: true, displayCheckboxForGroupChild: false, displayCheckboxOnRight: false, rowGroupHeaderComponent: RowGroupHeaderComponent, enableCheckboxForGroupHeader: false, enableChildCheckbox: false, enableHeaderCheckbox: false, onRowClicked: (data) => {
+                    console.log(data, "data");
+                }, loadingOverlayComponentParams: loadingOverlayComponentParams }))] }));
+};
+exports.default = AgGridPage;