sccoreui
Version:
ui-sccore
213 lines (212 loc) • 17.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
const overlaypanel_1 = require("primereact/overlaypanel");
const inputtext_1 = require("primereact/inputtext");
const drag_and_drop_icon_png_1 = tslib_1.__importDefault(require("../../../assets/images/drag-and-drop-icon.png"));
const checkbox_1 = require("primereact/checkbox");
const button_1 = require("primereact/button");
const context_provider_1 = require("../context-provider");
const helper_1 = require("../helper");
const utilComponents_1 = require("../utilComponents");
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
// import { ColumnDef } from "../Types";
const ColumnGroup = (props) => {
var _a, _b, _c, _d;
const { dataFromProps } = props;
const columnGroupRef = (0, react_1.useRef)(null);
const btnRef = (0, react_1.useRef)(null);
const [searchText, setSearchedText] = (0, react_1.useState)("");
const [checkedColumns, setCheckedColumns] = (0, react_1.useState)(new Set());
const { gridApi, setGridData, setSelectedGroup, setFeatureDetails, featureDetails, initialCheckBoxData, intialColumns, conditionsToDisplay,
// setIntialColumns,
} = (0, react_1.useContext)(context_provider_1.FeatureContext);
const [columns, setColumns] = (0, react_1.useState)([]);
const [renderColumns, setRenderColumns] = (0, react_1.useState)([]);
const [columnsSelectedForGroup, setColumnsSelectedForGroup] = (0, react_1.useState)([]);
const [selectedCheckBoxesLength, setSelectedCheckBoxesLength] = (0, react_1.useState)(null);
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRowGroupingElement);
console.log("intiallllllllll", intialColumns, selectedCheckBoxesLength);
// const [featureDetails, setFeatureDetails] = useState<Features>({
// searchedText: "",
// filterQueries: [],
// sort: {
// isSortable: false,
// columnToSort: {},
// orderToSort: {},
// },
// checkBoxSelection: initialCheckBoxData,
// isRemoveClicked: false,
// });
const showColumnOptions = (e) => {
columnGroupRef.current.toggle(e);
};
const onDragStart = (e, index) => {
e.dataTransfer.setData("draggedIndex", index);
};
const onDragOver = (e) => {
e.preventDefault(); // Allows the drop
};
const onDrop = (e, dropIndex) => {
const draggedIndex = e.dataTransfer.getData("draggedIndex");
const draggedItem = renderColumns[draggedIndex];
// Create a new list with the items rearranged
const updatedItems = [...renderColumns];
updatedItems.splice(draggedIndex, 1); // Remove dragged item
updatedItems.splice(dropIndex, 0, draggedItem); // Insert at the drop position
setRenderColumns(updatedItems);
setColumns(updatedItems);
};
const onSelectedCheckbox = (item, e) => {
const isChecked = e.checked;
const updatedCheckedColumns = new Set(checkedColumns);
if (isChecked) {
updatedCheckedColumns.add(item.id);
}
else {
updatedCheckedColumns.delete(item.id);
}
setCheckedColumns(updatedCheckedColumns);
const updatedColumns = renderColumns.map((listItem) => listItem.id === item.id ? Object.assign(Object.assign({}, listItem), { rowGroup: isChecked }) : listItem);
// Sort columns: checked (true) come before unchecked (false)
const sortedColumns = updatedColumns.sort((a, b) => (b.rowGroup ? 1 : 0) - (a.rowGroup ? 1 : 0));
// setColumns(sortedColumns);
setRenderColumns(sortedColumns);
const lengthOfSelectedCheckBoxes = sortedColumns.filter((col) => col.rowGroup).length;
setSelectedCheckBoxesLength(lengthOfSelectedCheckBoxes);
};
(0, react_1.useEffect)(() => {
// Filter columns based on search text
const filteredColumns = columns === null || columns === void 0 ? void 0 : columns.filter((column) => { var _a, _b; return (_b = (_a = column === null || column === void 0 ? void 0 : column.headerName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(searchText === null || searchText === void 0 ? void 0 : searchText.toLowerCase()); });
// Ensure checked columns are first in the filtered list
const sortedFilteredColumns = [...filteredColumns].sort((a, b) => {
if (checkedColumns.has(a.id) && !checkedColumns.has(b.id))
return -1;
if (!checkedColumns.has(a.id) && checkedColumns.has(b.id))
return 1;
return 0;
});
setRenderColumns(sortedFilteredColumns);
}, [searchText, columns, checkedColumns]);
const clearSearchAndSaveGrouping = (e) => {
const sortedFilteredColumns = [...columns].sort((a, b) => {
if (checkedColumns.has(a.id) && !checkedColumns.has(b.id))
return -1;
if (!checkedColumns.has(a.id) && checkedColumns.has(b.id))
return 1;
return 0;
});
setRenderColumns(sortedFilteredColumns);
setSearchedText("");
saveGrouping(e, sortedFilteredColumns);
};
console.log("columns innnnnnnn", dataFromProps);
// Save Grouping
const saveGrouping = (e, renderColumns) => {
var _a, _b;
// Clear previously selected groups
setSelectedGroup([]);
const groupedColumns = [];
// Update feature details
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData }));
// Log the renderColumns and checkedColumns for debugging
// console.log("Rendering Columns:", renderColumns);
// console.log("Checked Columns:", checkedColumns);
// Deep clone the render columns to avoid mutation
const columnsData = (0, helper_1.deepClone)(renderColumns);
// Iterate over the columns to identify grouped and pinned columns
const updateColumns = columnsData.map((column) => {
const newColumn = Object.assign({}, column); // Create a new object to avoid direct mutation
// Set rowGroup to true or false based on checked columns
if (checkedColumns.has(newColumn.id)) {
newColumn.rowGroup = true; // Group this column
groupedColumns.push(newColumn);
}
else {
newColumn.rowGroup = false; // Ungroup this column
}
// Handle hiding of pinned columns
if (newColumn.pinned) {
newColumn.hide = true;
}
return newColumn;
});
// Update the grid's column definitions with the modified columns
(_a = gridApi.current) === null || _a === void 0 ? void 0 : _a.api.setColumnDefs(updateColumns);
// Apply the grouping order based on the updated columns
const groupedColumnIds = groupedColumns.map((col) => col.colId); // Get the IDs of grouped columns
(_b = gridApi.current) === null || _b === void 0 ? void 0 : _b.api.setRowGroupColumns(groupedColumnIds.slice(0, 2)); // Ensure max 2 columns are grouped
// Update the grid's data state to reflect the new column configuration
setGridData((prev) => (Object.assign(Object.assign({}, prev), { columnData: updateColumns })));
// Store the grouped columns in the state for future reference
setColumnsSelectedForGroup(groupedColumns);
// Update the render columns state to reflect the new configuration
setRenderColumns(updateColumns);
// Hide the column grouping UI element if it exists
if (columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current) {
columnGroupRef.current.hide(e);
}
// Log updated columns for debugging
};
// Remove grouping
const clearListItems = (e) => {
e.stopPropagation();
setSelectedGroup([]);
setCheckedColumns(new Set());
setSearchedText("");
if (gridApi) {
// Use deep copy of `intialColumns` to ensure no unintended mutation
const clonedInitialColumns = (0, helper_1.deepClone)(intialColumns);
// console.log("clonedInitialColumns", clonedInitialColumns);
// Update grid's column definitions
gridApi.current.api.setColumnDefs(clonedInitialColumns);
gridApi.current.columnApi.setRowGroupColumns([]);
// Reflect the new column configuration in the state
setGridData((prev) => (Object.assign(Object.assign({}, prev), { columnData: clonedInitialColumns.filter((d) => d.grouping === true || !("grouping" in d)) })));
// Reset states accordingly
setColumnsSelectedForGroup([]);
setRenderColumns(clonedInitialColumns);
setSelectedCheckBoxesLength(0);
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData }));
if (columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current) {
columnGroupRef.current.hide();
}
}
};
const handleHide = () => {
var _a, _b, _c;
// Reset the renderColumns when the OverlayPanel is hidden
const columns = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs;
setRenderColumns(columns);
const intialLength = columns === null || columns === void 0 ? void 0 : columns.filter((col) => col.rowGroup).length;
setColumns(columns);
setSelectedCheckBoxesLength(intialLength);
};
(0, react_1.useEffect)(() => {
var _a, _b, _c, _d, _e, _f, _g, _h;
// Get columns from grid
if ((_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length) {
// Deep clone columns from the grid to avoid mutation
const columnsFromGrid = (_h = (_g = (_f = (_e = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _e === void 0 ? void 0 : _e.api) === null || _f === void 0 ? void 0 : _f.columnModel) === null || _g === void 0 ? void 0 : _g.columnDefs) === null || _h === void 0 ? void 0 : _h.map((column) => {
return Object.assign(Object.assign({}, column), { rowGroup: false }); // Create a shallow copy with `rowGroup` set to false
}).filter((d) => d.grouping === true || !("grouping" in d));
// Update state with the cloned columns
setColumns(columnsFromGrid);
setRenderColumns(columnsFromGrid);
}
}, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
? "bg-primary-50 px-3"
: "bg-white icon-40x40 px-2"} hover:bg-primary-25 br-8 sc_icon_hover h-40 cursor-pointer flex align-items-cente gap-1 zoom_animate ${isDisabled && "disabled"}`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e), title: "Column Grouping" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18,
// disabled={isDisabled}
color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
? "text-primary-400"
: "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0 sc_icon_hover", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center pl-2" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
? "col-gr-icon-active mr-2"
: "col-gr-icon" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
!checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-18rem line-clamp line-clamp-1 inline-block text-truncate", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id)))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-w-20rem p-6 text-center" }, { children: "No results found on the search criteria" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-text", label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
};
exports.default = ColumnGroup;