sccoreui
Version:
ui-sccore
37 lines (36 loc) • 3.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const inputtext_1 = require("primereact/inputtext");
const tree_1 = require("primereact/tree");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
const react_1 = require("react");
const overlaypanel_1 = require("primereact/overlaypanel");
const checkbox_1 = require("primereact/checkbox");
function Grouping() {
const columns = [{ hederName: "title" }, { hederName: "gender" }];
const data2 = columns.map((col, idx) => {
let object = {
key: idx,
label: col.hederName,
};
return object;
});
const columnGroupRef = (0, react_1.useRef)(null);
const [nodes, setNodes] = (0, react_1.useState)(data2 || []);
const [checked, setChecked] = (0, react_1.useState)(false);
const togglerTemplate = (node) => {
if (!node) {
return false;
}
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "drag-and-drop" }) }) })));
};
// column group functions
const nodeTemplate = (node) => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-center w-full border-round block w-full p-3 text-primary-400 font-semibold ${checked && "bg-primary-25"}` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => setChecked(e.checked), checked: checked }), (0, jsx_runtime_1.jsx)("span", { children: node.label })] })));
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "h-40 text-primary-400", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01" }), onClick: (e) => columnGroupRef.current.toggle(e) }), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column_group_overlay w-20rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { 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" }, { children: "Select any 2 grouping options only" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 border-bottom-1 border-top-1 border-gray-200 bg-gray-50" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Search by column or attribute name", className: "w-full" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 border-top-1 border-gray-200 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Remove Grouping", className: "btn-text" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-primary", label: "Save Grouping", disabled: true })] }))] }))] }));
}
exports.default = Grouping;