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

added serverside groupging

Browse Source
This commit is contained in:
pramod.mahajan 2025-11-24 11:22:18 +05:30
parent ee1cf01743
commit e1f72828f9
2 changed files with 100 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,7 @@ export default function PmsGrid({
setPage,
setPageSize,
setGroupBy,
groupBy,
search,
setSearch,
selected,
@ -117,7 +118,7 @@ export default function PmsGrid({
};
// group & aggregate (simple client-side grouping by column key)
const groupBy = features.groupByKey || null;
// const groupBy = features.groupByKey || null;
const groupedRows = React.useMemo(() => {
if (!groupBy) return null;
const map = {};
@ -187,7 +188,10 @@ export default function PmsGrid({
<li
key={c.key}
className="dropdown-item rounded py-1 cursor-pointer"
onClick={() => setGroupBy(c.key)}
onClick={() => {
setGroupBy(c.key);
groupByKey = c.key;
}}
>
{c.title}
</li>
@ -552,7 +556,7 @@ export default function PmsGrid({
)}
</tr>
{/* 🔹 5. Expanded row content (full width) */}
{/* 5. Expanded row content (full width) */}
{isExpanded && renderExpanded && (
<tr className="table-active">
<td

129
src/services/pmsGrid/PmsHeaderOption.jsx
View File

@ -11,6 +11,8 @@
// <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
// </button>
import { useEffect } from "react";
// <ul className="dropdown-menu dropdown-menu-end border shadow rounded-3 py-2">
// <li>
// <button
@ -53,6 +55,43 @@
// };
// export default PmsHeaderOption;
const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
const toggleSubmenu = (e) => {
e.stopPropagation();
const currentSubMenu = e.currentTarget.nextElementSibling;
if (!currentSubMenu) return;
const allSubMenus = document.querySelectorAll(
".dropdown-submenu > .dropdown-menu"
);
allSubMenus.forEach((menu) => {
if (menu !== currentSubMenu) {
menu.classList.remove("show");
}
});
currentSubMenu.classList.toggle("show");
};
useEffect(() => {
const handleOutsideClick = () => {
const allSubMenus = document.querySelectorAll(
".dropdown-submenu > .dropdown-menu"
);
allSubMenus.forEach((menu) => {
menu.classList.remove("show");
});
};
document.addEventListener("click", handleOutsideClick);
return () => {
document.removeEventListener("click", handleOutsideClick);
};
}, []);
return (
<div className="dropdown" style={{ zIndex: 9999 }}>
<button
@ -69,18 +108,62 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
<button
type="button"
className="dropdown-item d-flex align-items-center justify-content-between"
onClick={(e) => {
e.stopPropagation();
e.currentTarget.nextElementSibling.classList.toggle("show");
}}
onClick={toggleSubmenu}
>
<span>
<i className="bx bx-pin me-2"></i> Pin
<i className="bx bx-left-arrow-alt me-2"></i>
Move Column
</span>
<i className="bx bx-chevron-left"></i>
</button>
<ul className="dropdown-menu border shadow rounded-3 py-2">
<li>
<button
className="dropdown-item d-flex align-items-center"
onClick={() => console.log("Move Left")}
>
<i className="bx bx-arrow-to-left me-2"></i>
Move Left
</button>
</li>
<li>
<button
className="dropdown-item d-flex align-items-center"
onClick={() => console.log("Move Right")}
>
<i className="bx bx-arrow-to-right me-2"></i>
Move Right
</button>
</li>
</ul>
</li>
<li className="dropdown-submenu dropstart">
<button
type="button"
className="dropdown-item d-flex align-items-center justify-content-between"
onClick={toggleSubmenu}
>
<span>
<i className="bx bx-pin me-2"></i> Pin Column
</span>
<i className="bx bx-chevron-right"></i>
</button>
<ul className="dropdown-menu border shadow rounded-3 py-2">
<li>
<button
className="dropdown-item d-flex align-items-center"
onClick={onUnpin}
>
{pinned !== "left" && pinned !== "right" && (
<i className="bx bx-check me-2"></i>
)}
No Pin
</button>
</li>
<li>
<button
className={`dropdown-item d-flex align-items-center ${
@ -88,50 +171,24 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
}`}
onClick={onPinLeft}
>
<i className="bx bx-left-arrow-alt me-2"></i>
Left
{pinned === "left" && <i className="bx bx-check me-2"></i>}
Pin Left
</button>
</li>
<li>
<li className="d-flex flex-row gap-2">
<button
className={`dropdown-item d-flex align-items-center ${
pinned === "right" ? "active" : ""
}`}
onClick={onPinRight}
>
<i className="bx bx-right-arrow-alt me-2"></i>
Right
{pinned === "right" && <i className="bx bx-check me-2"></i>}
Pin Right
</button>
</li>
</ul>
</li>
<li>
<button
className={`dropdown-item d-flex align-items-center ${
pinned === "left" ? "active" : ""
}`}
>
<i className="bx bx-left-arrow-alt me-2"></i>
</button>
</li>
{pinned && (
<>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<button
className="dropdown-item text-danger d-flex align-items-center"
onClick={onUnpin}
>
<i className="bx bx-x me-2"></i>
Unpin Column
</button>
</li>
</>
)}
</ul>
</div>
);