From 2ceb38b496c7414ee7ac031a2ed124752053da2f Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Sat, 27 Dec 2025 18:45:39 +0530 Subject: [PATCH] fixed client side searching --- .../collections/PmGridCollection.jsx | 152 +++++------------- src/services/pmsGrid/BasicTable.jsx | 45 +++--- src/services/pmsGrid/PmsGrid.jsx | 2 +- src/services/pmsGrid/useGridCore.js | 113 ++++++++----- 4 files changed, 138 insertions(+), 174 deletions(-) diff --git a/src/components/collections/PmGridCollection.jsx b/src/components/collections/PmGridCollection.jsx index 84c1a0df..dcf407f9 100644 --- a/src/components/collections/PmGridCollection.jsx +++ b/src/components/collections/PmGridCollection.jsx @@ -1,4 +1,4 @@ -import React, { useMemo,useEffect } from "react"; +import React, { useMemo, useEffect } from "react"; import { PmsGrid, useGridCore } from "../../services/pmsGrid"; import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatFigure } from "../../utils/appUtils"; @@ -50,57 +50,6 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { { key: "isActive", title: "Status", enableAdvancedFilter: false }, ]; - // const fetcher = async ({ page, pageSize, search, filter }) => { - // const response = await CollectionRepository.getCollections( - // selectedProject, - // search || "", - // fromDate, - // toDate, - // pageSize, - // page, - // true, // isActive - // isPending, - // filter - // ); - - // const api = response.data; - - // return { - // rows: api.data.map((item) => ({ - // id: item.id, - // invoiceNumber: item.invoiceNumber, - // title: item.title, - - // clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate), - // exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate), - - // totalAmount: formatFigure(item.basicAmount + item.taxAmount, { - // type: "currency", - // currency: "INR", - // }), - - // balanceAmount: formatFigure(item.balanceAmount, { - // type: "currency", - // currency: "INR", - // }), - - // isActive: item.isActive ? ( - // - // - // Active - // - // ) : ( - // - // - // In-Active - // - // ), - // })), - - // total: api.totalEntities, - // }; - // }; - function useGridCollectionQuery({ projectId, fromDate, @@ -141,38 +90,38 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { const api = res.data; return { - rows: api.data.map((item) => ({ - id: item.id, - invoiceNumber: item.invoiceNumber, - title: item.title, + rows: api.data.map((item) => ({ + id: item.id, + invoiceNumber: item.invoiceNumber, + title: item.title, - clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate), - exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate), + clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate), + exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate), - totalAmount: formatFigure(item.basicAmount + item.taxAmount, { - type: "currency", - currency: "INR", - }), + totalAmount: formatFigure(item.basicAmount + item.taxAmount, { + type: "currency", + currency: "INR", + }), - balanceAmount: formatFigure(item.balanceAmount, { - type: "currency", - currency: "INR", - }), + balanceAmount: formatFigure(item.balanceAmount, { + type: "currency", + currency: "INR", + }), - isActive: item.isActive ? ( - - - Active - - ) : ( - - - In-Active - - ), - })), + isActive: item.isActive ? ( + + + Active + + ) : ( + + + In-Active + + ), + })), - total: api.totalEntities, + total: api.totalEntities, }; }, keepPreviousData: true, @@ -181,7 +130,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { const grid = useGridCore({ columns, serverMode: true, - initialPageSize: 25, + initialPageSize: 10, }); const filterPayload = useMemo(() => { @@ -210,6 +159,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { toDate, isPending, }); + useEffect(() => { if (data) { grid.setRows(data.rows); @@ -218,42 +168,6 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { }, [data]); return ( - // console.log("Edit", row, col), - // }, - // { - // label: "Delete", - // icon: "bx-trash text-danger", - // onClick: (row) => console.log("Delete", row), - // }, - // ], - // }} - // /> - { columnVisibility: true, pageSizeSelector: true, IsNumbering: true, + expand: false, actions: [ { label: "Edit", @@ -281,6 +196,11 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => { }, ], }} + renderExpanded={(row) => ( +
+
Item Details
+
+ )} /> ); }; diff --git a/src/services/pmsGrid/BasicTable.jsx b/src/services/pmsGrid/BasicTable.jsx index 595db4da..86af3572 100644 --- a/src/services/pmsGrid/BasicTable.jsx +++ b/src/services/pmsGrid/BasicTable.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from "react"; -import { PmsGrid } from "./index"; +import { PmsGrid, useGrid, useGridCore } from "./index"; import { initPopover } from "./GridService"; import PmsHeaderOption from "./PmsHeaderOption"; @@ -705,22 +705,27 @@ const boqColumns = [ * DEMO COMPONENT */ export default function DemoBOQGrid() { - useEffect(() => { - initPopover(); - }, []); - const wrapperRef = useRef(); - useEffect(() => { - if (!wrapperRef.current) return; - const ps = new PerfectScrollbar(wrapperRef.current, { - wheelPropagation: false, - suppressScrollX: false, - }); - return () => ps.destroy(); - }, []); + const grid = useGridCore({ + columns: boqColumns, + serverMode: false, + initialPageSize: 12, + data: boqData.map((r) => ({ + ...r, + amount: r.quantity * r.rate, + })) + }); - const container = document.getElementById("mainContainer"); - const trigger = document.getElementById("dropdownBtn"); - const dropdown = document.getElementById("dropdownMenu"); + useEffect(() => { + if (!boqData || boqData.length === 0) return; + grid.setRows( + boqData.map((r) => ({ + ...r, + amount: r.quantity * r.rate, + })) + ); + + grid.setTotalRows(boqData.length); + }, [boqData]); return (
@@ -738,10 +743,7 @@ export default function DemoBOQGrid() {
({ - ...r, - amount: r.quantity * r.rate, - }))} + grid={grid} columns={boqColumns} features={{ search: true, @@ -761,7 +763,8 @@ export default function DemoBOQGrid() { { label: "Edit", icon: "bx-edit ", - onClick: (row,ind,column) => console.log("Edit", row,ind,column), + onClick: (row, ind, column) => + console.log("Edit", row, ind, column), }, { label: "Delete", diff --git a/src/services/pmsGrid/PmsGrid.jsx b/src/services/pmsGrid/PmsGrid.jsx index 67dad1f1..e0d0d4a5 100644 --- a/src/services/pmsGrid/PmsGrid.jsx +++ b/src/services/pmsGrid/PmsGrid.jsx @@ -147,7 +147,7 @@ export default function PmsGrid({ isFullScreen ? "card card-action card-fullscreen p-4" : "" }`} > -
+
diff --git a/src/services/pmsGrid/useGridCore.js b/src/services/pmsGrid/useGridCore.js index 92ebc87f..e419cfed 100644 --- a/src/services/pmsGrid/useGridCore.js +++ b/src/services/pmsGrid/useGridCore.js @@ -43,6 +43,35 @@ export function useGridCore({ })) ); + /* ---------------- SELECTION ---------------- */ + const toggleSelect = useCallback((id) => { + setSelected((prev) => { + const s = new Set(prev); + s.has(id) ? s.delete(id) : s.add(id); + return s; + }); + }, []); + const selectAllOnPage = useCallback( + (rows) => { + setSelected((prev) => { + const s = new Set(prev); + rows.forEach((r) => s.add(r[rowKey])); + return s; + }); + }, + [rowKey] + ); + const deselectAllOnPage = useCallback( + (rows) => { + setSelected((prev) => { + const s = new Set(prev); + rows.forEach((r) => s.delete(r[rowKey])); + return s; + }); + }, + [rowKey] + ); + /* ---------------- SEARCH (DEBOUNCE) ---------------- */ useEffect(() => { const t = setTimeout(() => { @@ -53,40 +82,46 @@ export function useGridCore({ }, [search]); /* ---------------- CLIENT MODE ---------------- */ - const clientRows = useMemo(() => { - if (serverMode) return []; +const filteredData = useMemo(() => { + if (serverMode) return []; + let filtered = data; - let filtered = data; + if (search) { + const q = search.toLowerCase(); + filtered = filtered.filter((r) => + Object.values(r).some((v) => + String(v ?? "").toLowerCase().includes(q) + ) + ); + } - if (search) { - const q = search.toLowerCase(); - filtered = filtered.filter((r) => - Object.values(r).some((v) => - String(v ?? "") - .toLowerCase() - .includes(q) - ) - ); - } + if (sortBy.key) { + const dir = sortBy.dir === "asc" ? 1 : -1; + filtered = [...filtered].sort( + (a, b) => + String(a[sortBy.key] ?? "").localeCompare( + String(b[sortBy.key] ?? "") + ) * dir + ); + } - if (sortBy.key) { - const dir = sortBy.dir === "asc" ? 1 : -1; - filtered = [...filtered].sort( - (a, b) => - String(a[sortBy.key] ?? "").localeCompare( - String(b[sortBy.key] ?? "") - ) * dir - ); - } + return filtered; +}, [data, search, sortBy, serverMode]); - setTotalRows(filtered.length); - const start = (page - 1) * pageSize; - return filtered.slice(start, start + pageSize); - }, [data, search, sortBy, page, pageSize, serverMode]); - useEffect(() => { - if (!serverMode) setRows(clientRows); - }, [clientRows, serverMode]); + +const pagedRows = useMemo(() => { + const start = (page - 1) * pageSize; + return filteredData.slice(start, start + pageSize); +}, [filteredData, page, pageSize]); + +useEffect(() => { + if (!serverMode) { + setRows(pagedRows); + setTotalRows(filteredData.length); + } +}, [serverMode, page, pageSize, filteredData.length]); + /* ---------------- ADVANCED FILTER ---------------- */ const setColumnAdvanceFilter = useCallback((column, filter) => { @@ -148,35 +183,41 @@ export function useGridCore({ setSearch, debouncedSearch, - /* sorting */ + /* ----------sorting------ */ sortBy, changeSort, - /* grouping */ + /* --------------grouping---------------- */ groupBy, setGroupBy, - /* advanced filter */ + /* --------------advanced filter----------------- */ advanceFilters, setColumnAdvanceFilter, - /* selection */ + /*--------- selection ---------------------- */ selected, setSelected, + toggleSelect, + selectAllOnPage, + deselectAllOnPage, + + // *------------- Expanding Row --------------*/ expanded, setExpanded, - /* columns */ + /* --------------columns--------------------- */ colState, visibleColumns, updateColumn, setColState, toggleExpand, - /* data */ + + /* ---------------data---------------------- */ rows, setRows, setTotalRows, - + /*------------Key and grid-mode-------------*/ serverMode, rowKey, };