sccoreui 6.5.0 → 6.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ const utilComponents_1 = require("../utilComponents");
|
|
|
14
14
|
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
15
15
|
function Sort() {
|
|
16
16
|
var _a, _b;
|
|
17
|
-
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
17
|
+
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, setFeatureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
18
18
|
const showShort = (0, react_1.useRef)(null);
|
|
19
19
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
20
20
|
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
@@ -64,6 +64,7 @@ function Sort() {
|
|
|
64
64
|
// Trigger action to apply
|
|
65
65
|
const applyTableSort = (e) => {
|
|
66
66
|
const getCurrentFeature = addSortDetails();
|
|
67
|
+
setFeatureDetails(getCurrentFeature);
|
|
67
68
|
callGrid(getCurrentFeature);
|
|
68
69
|
onClickSort(e);
|
|
69
70
|
};
|
|
@@ -80,6 +81,7 @@ function Sort() {
|
|
|
80
81
|
};
|
|
81
82
|
const currentFeatureDetails = Object.assign({}, featureDetails);
|
|
82
83
|
currentFeatureDetails.sort = sortDetails;
|
|
84
|
+
setFeatureDetails(currentFeatureDetails);
|
|
83
85
|
callGrid(currentFeatureDetails);
|
|
84
86
|
};
|
|
85
87
|
(0, react_1.useEffect)(() => {
|
|
@@ -109,15 +111,13 @@ function Sort() {
|
|
|
109
111
|
document.removeEventListener("scroll", handleSortingScroll, true);
|
|
110
112
|
};
|
|
111
113
|
}, [showShort]);
|
|
112
|
-
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.
|
|
114
|
+
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({ className: `icon-40x40 cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-25 ${isDisabled && "disabled"} ${isOverlayOpened || featureDetails.sort.isSortable
|
|
113
115
|
? "bg-primary-50"
|
|
114
|
-
: "bg-white"}`, title: "Column Sorting" }, { children:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
? "text-primary-400"
|
|
120
|
-
: "text-gray-500" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options overflow-hidden", id: "sorting_columns" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
116
|
+
: "bg-white"}`, title: "Column Sorting" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover border-round-md`, onClick: (event) => !isDisabled && onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02",
|
|
117
|
+
// disabled={isDisabled}
|
|
118
|
+
size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
119
|
+
? "text-primary-400"
|
|
120
|
+
: "text-gray-500" }) })) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options overflow-hidden", id: "sorting_columns" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
121
121
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
122
122
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
123
123
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName, className: `${isSelected && "bg-primary-25"} cursor-pointer br-6 flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700 hover:bg-primary-25 mb-1`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { id: "tableSort", checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `cursor-pointer line-clamp line-clamp-1 block w-15rem ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
|
|
@@ -19,7 +19,7 @@ function HideColumn() {
|
|
|
19
19
|
const [enableManageColumnsCallbackAPI, setEnableManageColumnsCallbackAPI] = (0, react_1.useState)(false);
|
|
20
20
|
const [inpValue, setInputValue] = (0, react_1.useState)("");
|
|
21
21
|
const [storeNodes, setStoreNodes] = (0, react_1.useState)();
|
|
22
|
-
const [nodes, setNodes] = (0, react_1.useState)();
|
|
22
|
+
const [nodes, setNodes] = (0, react_1.useState)([]);
|
|
23
23
|
const [hidePanelNodes, setHidePanelNodes] = (0, react_1.useState)([]);
|
|
24
24
|
const [hasChanges, setHasChanges] = (0, react_1.useState)(false);
|
|
25
25
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySidePanel);
|
|
@@ -179,6 +179,7 @@ function HideColumn() {
|
|
|
179
179
|
setInputValue("");
|
|
180
180
|
setHasChanges(false);
|
|
181
181
|
};
|
|
182
|
+
const visibleColumnsInSideBar = (0, react_1.useMemo)(() => { return nodes.filter((y) => y === null || y === void 0 ? void 0 : y.visibleInPanel); }, [nodes]);
|
|
182
183
|
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 ||
|
|
183
184
|
(storeNodes === null || storeNodes === void 0 ? void 0 : storeNodes.filter((node) => !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) ||
|
|
184
185
|
"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) => {
|
|
@@ -187,11 +188,11 @@ function HideColumn() {
|
|
|
187
188
|
"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: {
|
|
188
189
|
position: "sticky",
|
|
189
190
|
top: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) && "0px",
|
|
190
|
-
} }, { 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: [`(`,
|
|
191
|
+
} }, { 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) &&
|
|
191
192
|
!(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: {
|
|
192
193
|
position: "sticky",
|
|
193
194
|
top: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.selected_attributes) && "35px",
|
|
194
|
-
} }, { 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: [`(`,
|
|
195
|
+
} }, { 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) &&
|
|
195
196
|
(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" })))] }))] }))] }));
|
|
196
197
|
}
|
|
197
198
|
exports.default = HideColumn;
|