admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

fixed client side searching

Browse Source
This commit is contained in:
pramod.mahajan 2025-12-27 18:45:39 +05:30
parent 526929d298
commit 2ceb38b496
4 changed files with 138 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/collections/PmGridCollection.jsx
View File

@ -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 ? (
// <span className="badge bg-label-primary">
// <span className="badge badge-dot bg-primary me-1"></span>
// Active
// </span>
// ) : (
// <span className="badge bg-label-danger">
// <span className="badge badge-dot bg-danger me-1"></span>
// In-Active
// </span>
// ),
// })),
// total: api.totalEntities,
// };
// };
function useGridCollectionQuery({
projectId,
fromDate,
@ -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 (
// <PmsGrid
// columns={columns}
// serverMode
// fetcher={fetcher}
// rowKey="id"
// features={{
// search: true,
// pagination: true,
// pinning: true,
// resizing: true,
// selection: false,
// reorder: true,
// columnVisibility: true,
// pageSizeSelector: true,
// grouping: true,
// groupByKey: "clientSubmitedDate",
// aggregation: true,
// IsNumbering: true,
// actions: [
// {
// label: "Edit",
// icon: "bx-edit ",
// onClick: (row) => console.log("Edit", row, col),
// },
// {
// label: "Delete",
// icon: "bx-trash text-danger",
// onClick: (row) => console.log("Delete", row),
// },
// ],
// }}
// />
<PmsGrid
columns={columns}
grid={grid}
@ -268,6 +182,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
columnVisibility: true,
pageSizeSelector: true,
IsNumbering: true,
expand: false,
actions: [
{
label: "Edit",
@ -281,6 +196,11 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
},
],
}}
renderExpanded={(row) => (
<div className="p-3 bg-white ">
<h6 className="fw-semibold mb-2">Item Details</h6>
</div>
)}
/>
);
};

43
src/services/pmsGrid/BasicTable.jsx
View File

@ -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,
const grid = useGridCore({
columns: boqColumns,
serverMode: false,
initialPageSize: 12,
data: boqData.map((r) => ({
...r,
amount: r.quantity * r.rate,
}))
});
return () => ps.destroy();
}, []);
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 (
<div className="container-fluid py-3">
@ -738,10 +743,7 @@ export default function DemoBOQGrid() {
</div>
<PmsGrid
data={boqData.map((r) => ({
...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",

2
src/services/pmsGrid/PmsGrid.jsx
View File

@ -147,7 +147,7 @@ export default function PmsGrid({
isFullScreen ? "card card-action card-fullscreen p-4" : ""
}`}
>
<div className="row px-4">
<div className="row ">
<div className="col-8">
<div className="d-flex flex-row gap-2 gap-2 ">
<div>

75
src/services/pmsGrid/useGridCore.js
View File

@ -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,18 +82,15 @@ export function useGridCore({
}, [search]);
/* ---------------- CLIENT MODE ---------------- */
const clientRows = useMemo(() => {
const filteredData = useMemo(() => {
if (serverMode) return [];
let filtered = data;
if (search) {
const q = search.toLowerCase();
filtered = filtered.filter((r) =>
Object.values(r).some((v) =>
String(v ?? "")
.toLowerCase()
.includes(q)
String(v ?? "").toLowerCase().includes(q)
)
);
}
@ -79,14 +105,23 @@ export function useGridCore({
);
}
setTotalRows(filtered.length);
return filtered;
}, [data, search, sortBy, serverMode]);
const pagedRows = useMemo(() => {
const start = (page - 1) * pageSize;
return filtered.slice(start, start + pageSize);
}, [data, search, sortBy, page, pageSize, serverMode]);
return filteredData.slice(start, start + pageSize);
}, [filteredData, page, pageSize]);
useEffect(() => {
if (!serverMode) setRows(clientRows);
}, [clientRows, serverMode]);
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,
};