sccoreui 6.1.2 → 6.1.4
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.
- package/dist/App.scss +4 -0
- package/dist/assets/images/drag-and-drop-icon.png +0 -0
- package/dist/components/ag-grid/advancedFeature/hide-column.js +13 -9
- package/dist/components/ag-grid/grid-checkbox.js +1 -1
- package/dist/components/ag-grid/helper.js +41 -1
- package/dist/components/ag-grid/parent-for-grid.js +17 -1
- package/dist/components/list-box-dropdown/list-box-dropdown.js +7 -3
- package/dist/types/components/ag-grid/helper.d.ts +1 -0
- package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts +1 -1
- package/dist/types/components/types/type.d.ts +1 -0
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
Binary file
|
|
@@ -9,11 +9,12 @@ const sidebar_1 = require("primereact/sidebar");
|
|
|
9
9
|
const inputswitch_1 = require("primereact/inputswitch");
|
|
10
10
|
const inputtext_1 = require("primereact/inputtext");
|
|
11
11
|
const context_provider_1 = require("../context-provider");
|
|
12
|
+
const drag_and_drop_icon_png_1 = tslib_1.__importDefault(require("../../../assets/images/drag-and-drop-icon.png"));
|
|
12
13
|
function HideColumn() {
|
|
13
14
|
const { gridData, gridApi, updateColumnsForGrid, sidePanelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
14
15
|
const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
|
|
15
16
|
const [checked, setChecked] = (0, react_1.useState)(false);
|
|
16
|
-
|
|
17
|
+
const [inpValue, setInpValue] = (0, react_1.useState)("");
|
|
17
18
|
const [storeNodes, setStoreNodes] = (0, react_1.useState)();
|
|
18
19
|
const [nodes, setNodes] = (0, react_1.useState)();
|
|
19
20
|
const assignInitialValues = () => {
|
|
@@ -38,6 +39,7 @@ function HideColumn() {
|
|
|
38
39
|
};
|
|
39
40
|
// Display search columns
|
|
40
41
|
const searchHandler = (text) => {
|
|
42
|
+
setInpValue(text);
|
|
41
43
|
const searchedColumns = [];
|
|
42
44
|
storeNodes.filter((column) => {
|
|
43
45
|
var _a;
|
|
@@ -49,6 +51,10 @@ function HideColumn() {
|
|
|
49
51
|
});
|
|
50
52
|
setNodes(searchedColumns);
|
|
51
53
|
};
|
|
54
|
+
const clearSearch = () => {
|
|
55
|
+
setNodes(storeNodes);
|
|
56
|
+
setInpValue("");
|
|
57
|
+
};
|
|
52
58
|
// When radio button is switched
|
|
53
59
|
const handleSwitchChange = (selectedColumn, value) => {
|
|
54
60
|
const updatedColumns = [...storeNodes];
|
|
@@ -138,14 +144,12 @@ function HideColumn() {
|
|
|
138
144
|
setStoreNodes(fixNodes);
|
|
139
145
|
}
|
|
140
146
|
}, [visibleRight]);
|
|
141
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 20 }) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-
|
|
142
|
-
// value={inpValue}
|
|
143
|
-
onChange: (e) => {
|
|
147
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", size: 20 }) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-4", visible: visibleRight, position: "right", onHide: () => setVisibleRight(false) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between px-4 py-2 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("h3", { 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, { text: true, label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.disacrd_button) || "Discard", onClick: () => setVisibleRight(false) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.update_button) || "Update", onClick: () => updateColumns() })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-3 mb-2 border-round border-1 border-gray-300" }, { 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: checked, onChange: (e) => setChecked(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { 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: "py-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 sc_icon_hover", 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) => {
|
|
144
148
|
searchHandler(e.target.value);
|
|
145
|
-
}, 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" })] })) })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-
|
|
146
|
-
|
|
147
|
-
(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", draggable: true, onDragStart: handleDragStart(idx), onDrop: handleDrop(idx), onDragOver: handleDragOver }, { children: [(0, jsx_runtime_1.
|
|
148
|
-
|
|
149
|
-
(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" }, { 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)))) }))] }))] }))] }));
|
|
149
|
+
}, 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 lh-40" })] })) })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-semibold border-bottom-1 border-gray-200" }, { 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-sm" }, { 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 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ?
|
|
150
|
+
nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
|
|
151
|
+
(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", 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.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-0 mb-2" }, { children: "Not Found" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0" }, { children: "No results found on the search criteria" }))] })) })) })) })), (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-6 mb-0 pb-2 border-bottom-1 border-gray-200" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.unselected_attributes) || "Unselected Attributes" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 ?
|
|
152
|
+
nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
|
|
153
|
+
(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" }, { 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)("li", { children: "No Data" })) }))] }))] }))] }));
|
|
150
154
|
}
|
|
151
155
|
exports.default = HideColumn;
|
|
@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const checkbox_1 = require("primereact/checkbox");
|
|
6
6
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
7
|
const GridCheckBOx = ({ checked, onChange, isIndeterminate }) => {
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { icon: isIndeterminate && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { icon: isIndeterminate && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus", color: "#111c5b" }), onChange: onChange, checked: checked, className: "" }));
|
|
9
9
|
};
|
|
10
10
|
exports.default = GridCheckBOx;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.sortColumns = exports.parseIfNeeded = exports.applyDefaultFilters = void 0;
|
|
3
|
+
exports.fillOperation = exports.sortColumns = exports.parseIfNeeded = exports.applyDefaultFilters = void 0;
|
|
4
4
|
const applyDefaultFilters = (defaultFilters) => {
|
|
5
5
|
console.log(defaultFilters, 'deafult filters');
|
|
6
6
|
const filters = defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.map((item) => {
|
|
@@ -44,3 +44,43 @@ const sortColumns = (columns) => {
|
|
|
44
44
|
return sortedColumns;
|
|
45
45
|
};
|
|
46
46
|
exports.sortColumns = sortColumns;
|
|
47
|
+
const fillOperation = (params, api, initialDragRowIndex, callBack) => {
|
|
48
|
+
const { finalRange } = params;
|
|
49
|
+
const { startRow, endRow, columns, startColumn } = finalRange;
|
|
50
|
+
const columnDetails = columns[0].colDef;
|
|
51
|
+
const selectedColumn = (startColumn === null || startColumn === void 0 ? void 0 : startColumn.userProvidedColDef) || columnDetails;
|
|
52
|
+
// Determine the parent row based on the drag direction
|
|
53
|
+
let parentRowIndex;
|
|
54
|
+
if (initialDragRowIndex <= endRow.rowIndex) {
|
|
55
|
+
parentRowIndex = initialDragRowIndex;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
parentRowIndex = endRow.rowIndex;
|
|
59
|
+
}
|
|
60
|
+
const parentRowData = api.getDisplayedRowAtIndex(parentRowIndex).data;
|
|
61
|
+
// Collect all selected rows
|
|
62
|
+
const selectedRows = [];
|
|
63
|
+
for (let i = Math.min(startRow.rowIndex, endRow.rowIndex); i <= Math.max(startRow.rowIndex, endRow.rowIndex); i++) {
|
|
64
|
+
const rowNode = api.getDisplayedRowAtIndex(i);
|
|
65
|
+
const rowData = rowNode.data;
|
|
66
|
+
console.log(rowData, 'row data in loop of fill');
|
|
67
|
+
// Update the cell value with the value from the parent row
|
|
68
|
+
rowData[columnDetails.field] = parentRowData[columnDetails.field];
|
|
69
|
+
if (rowData && rowData !== parentRowData) {
|
|
70
|
+
selectedRows.push(rowData);
|
|
71
|
+
}
|
|
72
|
+
// Reflect the change in the row node directly
|
|
73
|
+
rowNode.setDataValue(columnDetails.field, rowData[columnDetails.field]);
|
|
74
|
+
}
|
|
75
|
+
// Refresh the cells to show the updated data
|
|
76
|
+
api.refreshCells({ force: true });
|
|
77
|
+
const selectedRowsToUpdate = {
|
|
78
|
+
column: selectedColumn,
|
|
79
|
+
parentRow: parentRowData,
|
|
80
|
+
childRows: selectedRows,
|
|
81
|
+
};
|
|
82
|
+
if (callBack) {
|
|
83
|
+
callBack(selectedRowsToUpdate);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
exports.fillOperation = fillOperation;
|
|
@@ -22,6 +22,7 @@ function ParentForGrid(props) {
|
|
|
22
22
|
const [totalRecords, setTotalRecords] = (0, react_1.useState)(0);
|
|
23
23
|
const [gridReadyEvent, setGridReadyEvent] = (0, react_1.useState)();
|
|
24
24
|
const [defaultSelectedRows, setDefaultSelectedRows] = (0, react_1.useState)([]);
|
|
25
|
+
const [initialDragRowIndex, setInitialDragRowIndex] = (0, react_1.useState)(null);
|
|
25
26
|
const [defaultFilters, setDefaultFilters] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.defaultFilters) || []);
|
|
26
27
|
const [emptyResponse] = (0, react_1.useState)({
|
|
27
28
|
totalRecords: 0,
|
|
@@ -216,6 +217,16 @@ function ParentForGrid(props) {
|
|
|
216
217
|
params.api.setGridOption("serverSideDatasource", dataSource);
|
|
217
218
|
}
|
|
218
219
|
});
|
|
220
|
+
// Get the direction of selected range
|
|
221
|
+
const onCellMouseDown = (event) => {
|
|
222
|
+
setInitialDragRowIndex(event.node.rowIndex);
|
|
223
|
+
};
|
|
224
|
+
// Update cell from front end and give a call back to products
|
|
225
|
+
const wrapperToFillOpertation = (params) => {
|
|
226
|
+
(0, helper_1.fillOperation)(params, api, initialDragRowIndex, props === null || props === void 0 ? void 0 : props.updateCell);
|
|
227
|
+
};
|
|
228
|
+
// Give unique id for rows to grid
|
|
229
|
+
const getRowId = (prams) => prams.data.id;
|
|
219
230
|
// Options that grid should have
|
|
220
231
|
const gridOptions = {
|
|
221
232
|
columnDefs: gridData.columnData.map((column) => {
|
|
@@ -245,7 +256,12 @@ function ParentForGrid(props) {
|
|
|
245
256
|
loadingOverlayComponent: loading_component_1.default,
|
|
246
257
|
suppressCellFocus: true,
|
|
247
258
|
suppressPropertyNamesCheck: true,
|
|
248
|
-
suppressServerSideFullWidthLoadingRow: true
|
|
259
|
+
suppressServerSideFullWidthLoadingRow: true,
|
|
260
|
+
enableRangeSelection: true,
|
|
261
|
+
enableFillHandle: true,
|
|
262
|
+
onFillEnd: wrapperToFillOpertation,
|
|
263
|
+
onCellMouseDown: onCellMouseDown,
|
|
264
|
+
getRowId: getRowId
|
|
249
265
|
};
|
|
250
266
|
// Fucntion to call the grid
|
|
251
267
|
const callGrid = (featureDetails) => {
|
|
@@ -11,7 +11,7 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
|
|
|
11
11
|
// import { Checkbox } from "primereact/checkbox";
|
|
12
12
|
const ListBoxDropdown = ({ selectAll,
|
|
13
13
|
// onSelectAll,
|
|
14
|
-
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }) => {
|
|
14
|
+
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, }) => {
|
|
15
15
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
16
16
|
// const [inpValue, setInpValue] = useState<any>();
|
|
17
17
|
const optionsMenuRef = (0, react_1.useRef)();
|
|
@@ -20,8 +20,12 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
20
20
|
// setChecked(e.value.length===listItems.length)
|
|
21
21
|
console.log(e.value.length);
|
|
22
22
|
console.log(listItems.length);
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
if (confirmationOption === true)
|
|
24
|
+
onChange(e);
|
|
25
|
+
else {
|
|
26
|
+
setSelectedItems(e.value);
|
|
27
|
+
onChange(e);
|
|
28
|
+
}
|
|
25
29
|
};
|
|
26
30
|
(0, react_1.useEffect)(() => {
|
|
27
31
|
setSelectedItems(values);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const applyDefaultFilters: (defaultFilters: any) => any;
|
|
2
2
|
export declare const parseIfNeeded: (value: any) => any;
|
|
3
3
|
export declare const sortColumns: (columns: any) => any;
|
|
4
|
+
export declare const fillOperation: (params: any, api: any, initialDragRowIndex: any, callBack: any) => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ListBoxDropdownTypes } from "../types/type";
|
|
2
|
-
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ListBoxDropdown;
|