sccoreui
Version:
ui-sccore
188 lines (187 loc) • 16.8 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 isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySidePanel);
const addColumns = () => {
var _a;
const columns = [];
(_a = gridData.columnData) === null || _a === void 0 ? void 0 : _a.filter((gColumn) => {
columnToRender === null || columnToRender === void 0 ? void 0 : columnToRender.filter((rColumn) => {
if (gColumn.id === rColumn.id || gColumn.field === rColumn.field) {
columns.push(gColumn);
}
});
});
setHidePanelNodes(columns);
assignInitialValues(columns);
};
const assignInitialValues = (panelColumns) => {
var _a;
const columnsInBar = [];
(_a = JSON.parse(JSON.stringify(panelColumns))) === null || _a === void 0 ? void 0 : _a.map((column) => {
if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
column.checked = !(column === null || column === void 0 ? void 0 : column.hide);
if (column.hide) {
column.selected = false;
column.unSelected = true;
}
else {
column.selected = true;
column.unSelected = false;
}
}
columnsInBar.push(column);
});
setNodes(columnsInBar);
setStoreNodes(columnsInBar);
};
// Display search columns
const searchHandler = (text) => {
setInputValue(text);
const searchedColumns = [];
storeNodes.filter((column) => {
var _a, _b;
if (column === null || column === void 0 ? void 0 : column.visibleInPanel) {
if ((_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())) {
searchedColumns.push(column);
}
}
});
setNodes(searchedColumns);
};
const clearSearch = () => {
setNodes(storeNodes);
setInputValue("");
};
// When radio button is switched
const handleSwitchChange = (selectedColumn, value) => {
const updatedColumns = [...storeNodes];
updatedColumns === null || updatedColumns === void 0 ? void 0 : updatedColumns.map((column) => {
if ((column === null || column === void 0 ? void 0 : column.id) === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.id)) {
column.checked = value;
}
return column;
});
// setNodes(updatedColumns)
setStoreNodes(updatedColumns);
};
// Return columns needs to hide
const updateColumns = () => {
const columnsToHide = storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((col) => col.hasOwnProperty("checked") && !col.checked);
const updatedNodes = storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.map((node, idx) => {
const newSeq = idx + 1;
if (node.seq !== newSeq) {
node.seq = newSeq;
}
if (node.hasOwnProperty("checked")) {
node.selected = node.checked;
node.unSelected = !node.checked;
}
return node;
});
setNodes(updatedNodes);
setStoreNodes(updatedNodes);
hideColumns(columnsToHide, updatedNodes);
setVisibleRight(false);
};
// Hide columns from grid
const hideColumns = (columnsToHide, updatedSeq) => {
if (!gridApi)
return;
const updatedColumnDefs = hidePanelNodes.map((colDef) => {
const colToHide = columnsToHide.find((col) => col.id === colDef.id);
colDef.hide = (colDef === null || colDef === void 0 ? void 0 : colDef.visibleInPanel) ? !!colToHide : colDef === null || colDef === void 0 ? void 0 : colDef.hide;
const updatedCol = updatedSeq.find((col) => col.id === colDef.id);
if (updatedCol) {
colDef.seq = updatedCol.seq;
}
return colDef;
});
updateColumnsForGrid({
columns: updatedColumnDefs,
enableManageColumnsCallback: enableManageColumnsCallbackAPI,
});
};
// 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 = event.dataTransfer.getData("text");
if (draggedIndex !== index.toString()) {
const updatedColumns = [...storeNodes];
const [draggedItem] = updatedColumns.splice(draggedIndex, 1);
console.log(draggedItem, "dragged item", draggedIndex);
updatedColumns.splice(index, 0, draggedItem);
console.log(updatedColumns, draggedIndex, draggedItem, "data of dragging");
for (let i = 0; i < updatedColumns.length; i++) {
const currentColumn = updatedColumns[i];
console.log(i, currentColumn, "columns in loop");
}
setNodes(updatedColumns);
setStoreNodes(updatedColumns);
}
};
// When drag is completed
const handleDragOver = (event) => {
event.preventDefault();
};
(0, react_1.useEffect)(() => {
addColumns();
}, [gridData.columData, columnToRender]);
(0, react_1.useEffect)(() => {
if (!visibleRight && (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.length)) {
const fixNodes = [...storeNodes].map((node) => {
if ((node === null || node === void 0 ? void 0 : node.checked) !== (node === null || node === void 0 ? void 0 : node.selected)) {
node.checked = node.selected;
}
return node;
});
console.log(storeNodes, "store nodes in use effect");
setNodes(fixNodes);
setStoreNodes(fixNodes);
}
}, [visibleRight]);
const hidePanel = () => {
setVisibleRight(false);
setInputValue("");
};
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: (storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => node.checked).length) > 15
? true
: false, 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: [`(`, nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.selected).length, "/", nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected || node.selected).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: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ? (nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
(listItem === null || listItem === void 0 ? void 0 : listItem.selected) && ((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" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: drag_and_drop_icon_png_1.default, alt: "Drag and drop", className: "cursor-move" }), (0, jsx_runtime_1.jsx)("span", { children: listItem.headerName })] })), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem === null || listItem === void 0 ? void 0 : listItem.checked, 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: [`(`, nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected).length, "/", nodes === null || nodes === void 0 ? void 0 : nodes.filter((node) => node.unSelected || node.selected).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: nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
(listItem === null || listItem === void 0 ? void 0 : listItem.unSelected) && ((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", { children: listItem.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem.checked, 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;