sccoreui
Version:
ui-sccore
182 lines (181 loc) • 17.9 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 button_1 = require("primereact/button");
const drag_and_drop_icon_png_1 = tslib_1.__importDefault(require("../../../assets/images/drag-and-drop-icon.png"));
const context_provider_1 = require("../context-provider");
const inputswitch_1 = require("primereact/inputswitch");
const inputtext_1 = require("primereact/inputtext");
const sidebar_1 = require("primereact/sidebar");
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
const helper_1 = require("../helper");
const utilComponents_1 = require("../utilComponents");
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
function HideColumn() {
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
const [enableManageColumnsCallbackAPI, setEnableManageColumnsCallbackAPI] = (0, react_1.useState)(false);
const [inpValue, setInputValue] = (0, react_1.useState)("");
const [storeNodes, setStoreNodes] = (0, react_1.useState)();
const [nodes, setNodes] = (0, react_1.useState)([]);
const [hidePanelNodes, setHidePanelNodes] = (0, react_1.useState)([]);
const [hasChanges, setHasChanges] = (0, react_1.useState)(false);
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySidePanel);
const addColumns = () => {
var _a;
const columns = [];
const addedColumnIds = new Set(); // Track already added columns to prevent duplicates
(_a = gridData.columnData) === null || _a === void 0 ? void 0 : _a.forEach((gColumn) => {
// Check if this column exists in columnToRender
const existsInRender = columnToRender === null || columnToRender === void 0 ? void 0 : columnToRender.some((rColumn) => gColumn.id === rColumn.id || gColumn.field === rColumn.field);
// Add column only if it exists in render and hasn't been added yet
if (existsInRender && !addedColumnIds.has(gColumn.id)) {
// Ensure hide property is a boolean (default to false if undefined)
const columnCopy = Object.assign(Object.assign({}, gColumn), { hide: gColumn.hide === true });
columns.push(columnCopy);
addedColumnIds.add(gColumn.id);
}
});
setHidePanelNodes(columns);
setNodes(columns);
setStoreNodes(columns);
};
// Display search columns
const searchHandler = (text) => {
setInputValue(text);
if (!text || text.trim() === "") {
setNodes(storeNodes);
return;
}
const searchedColumns = storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((column) => {
var _a, _b;
if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
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(text === null || text === void 0 ? void 0 : text.toLowerCase());
}
return false;
});
setNodes(searchedColumns || []);
};
const clearSearch = () => {
setNodes(storeNodes);
setInputValue("");
};
// When switch is toggled
const handleSwitchChange = (selectedColumn, value) => {
const updatedColumns = storeNodes.map((column) => {
if ((column === null || column === void 0 ? void 0 : column.id) === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.id)) {
// Value is true = visible, so hide should be !value
return Object.assign(Object.assign({}, column), { hide: !value });
}
return column;
});
// Update storeNodes (source of truth)
setStoreNodes(updatedColumns);
// If there's an active search, reapply the filter
if (inpValue && inpValue.trim() !== "") {
const searchedColumns = updatedColumns === null || updatedColumns === void 0 ? void 0 : updatedColumns.filter((column) => {
var _a, _b;
if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
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(inpValue === null || inpValue === void 0 ? void 0 : inpValue.toLowerCase());
}
return false;
});
setNodes(searchedColumns || []);
}
else {
// No search active, show all columns
setNodes(updatedColumns);
}
setHasChanges(true);
};
// Return columns needs to hide
const updateColumns = () => {
hideColumns(storeNodes);
setVisibleRight(false);
setHasChanges(false);
};
// Hide columns from grid
const hideColumns = (updatedNodes) => {
if (!gridApi)
return;
// Send only visible columns with proper seq assigned at the time of update
let seq = 1;
const visibleColumns = updatedNodes === null || updatedNodes === void 0 ? void 0 : updatedNodes.filter((col) => !col.hide).map((col) => (Object.assign(Object.assign({}, col), { seq: seq++ })));
updateColumnsForGrid({
columns: visibleColumns,
enableManageColumnsCallback: enableManageColumnsCallbackAPI,
});
// Update hidePanelNodes to reflect the saved state
setHidePanelNodes(updatedNodes.map((col) => (Object.assign({}, col))));
};
// When drag started
const handleDragStart = (index) => (event) => {
event.dataTransfer.setData("text/plain", index);
};
// When selected item dropped
const handleDrop = (index) => (event) => {
event.preventDefault();
const draggedIndex = Number(event.dataTransfer.getData("text"));
if (draggedIndex !== index) {
// Get the visible panel items to find actual storeNodes indices
const visibleCols = storeNodes.filter((col) => col.visibleInPanel);
const draggedItem = visibleCols[draggedIndex];
const dropItem = visibleCols[index];
// Find their real positions in storeNodes
const realDraggedIndex = storeNodes.findIndex((col) => col.id === draggedItem.id);
const realDropIndex = storeNodes.findIndex((col) => col.id === dropItem.id);
// Reorder in storeNodes directly
const updatedColumns = [...storeNodes];
const [removed] = updatedColumns.splice(realDraggedIndex, 1);
updatedColumns.splice(realDropIndex, 0, removed);
setNodes(updatedColumns);
setStoreNodes(updatedColumns);
setHasChanges(true);
}
};
// When drag is completed
const handleDragOver = (event) => {
event.preventDefault();
};
(0, react_1.useEffect)(() => {
addColumns();
}, [gridData.columData, columnToRender]);
(0, react_1.useEffect)(() => {
if (visibleRight) {
// Refresh column data from grid when sidebar opens
addColumns();
}
else if ((storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.length) && hasChanges) {
// When panel closes with unsaved changes, reset to original state
const resetNodes = hidePanelNodes.map((node) => (Object.assign({}, node)));
setNodes(resetNodes);
setStoreNodes(resetNodes);
setHasChanges(false);
}
}, [visibleRight]);
const hidePanel = () => {
setVisibleRight(false);
setInputValue("");
setHasChanges(false);
};
const visibleColumnsInSideBar = (0, react_1.useMemo)(() => {
return nodes.filter((y) => y === null || y === void 0 ? void 0 : y.visibleInPanel);
}, [nodes]);
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.jsx)("div", Object.assign({ onClick: () => !isDisabled && setVisibleRight(true), className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, title: "Manage Columns" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", color: "text-gray-500", size: 18 }) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4 overflow-hidden h-full ag_grid_sidebar", visible: visibleRight, position: "right", onHide: () => hidePanel() }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center px-4 py-3 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-lg font-semibold line-height-3" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.header) || "Configure Columns" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-text", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => hidePanel() }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "font-semibold", label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", disabled: !hasChanges ||
(storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => (node === null || node === void 0 ? void 0 : node.visibleInPanel) && !node.hide).length) > 15, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pb-0" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_to_all_views) || "Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: enableManageColumnsCallbackAPI, onChange: (e) => setEnableManageColumnsCallbackAPI(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm text-gray-600" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_subHeading) ||
"Apply the chosen column selection to all available views" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (inpValue === null || inpValue === void 0 ? void 0 : inpValue.length) > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: clearSearch }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
searchHandler(e.target.value);
}, disabled: false, placeholder: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.search_placeHolder) ||
"Search by column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full my-2 lh-40" })] })) }))] })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pt-0 selected_attributes" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg border-bottom-1 border-gray-100 font-semibold bg-white z-5", style: {
position: "sticky",
top: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) && "0px",
} }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) || "Selected Attributes", " ", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-500 text-lg font-normal ml-1" }, { children: [`(`, visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.filter((node) => node.hide !== undefined && node.hide === false).length, "/", visibleColumnsInSideBar.length, `)`] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 mt-0" }, { children: (visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.length) > 0 ? (visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
!(listItem === null || listItem === void 0 ? void 0 : listItem.hide) && ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3 text-gray-600 text-base", draggable: true, onDragStart: handleDragStart(idx), onDrop: handleDrop(idx), onDragOver: handleDragOver }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-center", style: { minWidth: 0 } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: drag_and_drop_icon_png_1.default, alt: "Drag and drop", className: "cursor-move flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "white-space-nowrap overflow-hidden text-overflow-ellipsis", style: { maxWidth: "200px" }, title: listItem.headerName }, { children: listItem.headerName }))] })), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: !(listItem === null || listItem === void 0 ? void 0 : listItem.hide), onChange: (e) => handleSwitchChange(listItem, e.value) })] }), idx)))) : ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column -mx-3" }, { children: (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-0 mb-2 flex align-items-center justify-content-center py-8 bg-gray-50 p-8 border-round-md mt-2 text-gray-900 font-normal" }, { children: "No results found on the search criteria" })) })) })) })) })), (0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: " mb-0 mt-0 py-2 border-bottom-1 border-gray-200 bg-white z-5", style: {
position: "sticky",
top: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) && "35px",
} }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.unselected_attributes) || "Unselected Attributes", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-500 text-lg font-normal ml-2" }, { children: [`(`, visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.filter((node) => node.hide).length, "/", visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.length, `)`] }))] })), (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 mt-2 ml-3" }, { children: visibleColumnsInSideBar === null || visibleColumnsInSideBar === void 0 ? void 0 : visibleColumnsInSideBar.map((listItem) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
(listItem === null || listItem === void 0 ? void 0 : listItem.hide) && ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3 text-gray-600 text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "white-space-nowrap overflow-hidden text-overflow-ellipsis", style: { maxWidth: "200px" }, title: listItem.headerName }, { children: listItem.headerName })), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: !listItem.hide, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), listItem.id))) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-0 mb-2 flex align-items-center justify-content-center py-8 bg-gray-50 p-8 border-round-md mt-4 text-gray-900 text-lg" }, { children: "No results found on the search criteria" })))] }))] }))] }));
}
exports.default = HideColumn;