sccoreui 6.1.73 → 6.1.75
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 +79 -0
- package/dist/assets/App.css +96 -0
- package/dist/assets/App.css.map +1 -0
- package/dist/components/ag-grid/advancedFeature/column-group.js +89 -16
- package/dist/components/ag-grid/advancedFeature/custom-sort.js +5 -5
- package/dist/components/ag-grid/advancedFeature/global-search.js +1 -1
- package/dist/components/ag-grid/advancedFeature/hide-column.js +6 -7
- package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js +5 -5
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +1 -1
- package/dist/components/ag-grid/advancedFeature/refresh-grid.js +1 -1
- package/dist/components/ag-grid/helper.js +6 -4
- package/dist/components/ag-grid/parent-for-grid.js +23 -8
- package/dist/components/list-box-dropdown/list-box-dropdown.js +0 -1
- package/dist/types/components/ag-grid/Types.d.ts +2 -0
- package/dist/types/components/ag-grid/helper.d.ts +6 -5
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -2063,6 +2063,10 @@ button[aria-expanded="true"] {
|
|
|
2063
2063
|
line-height: 40px;
|
|
2064
2064
|
}
|
|
2065
2065
|
|
|
2066
|
+
.br-8 {
|
|
2067
|
+
border-radius: 8px;
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2066
2070
|
/* conditions */
|
|
2067
2071
|
.filter-dropdowns {
|
|
2068
2072
|
padding: 2px;
|
|
@@ -2147,6 +2151,7 @@ button[aria-expanded="true"] {
|
|
|
2147
2151
|
border-top-left-radius: 0;
|
|
2148
2152
|
border-bottom-left-radius: 0;
|
|
2149
2153
|
height: 44px;
|
|
2154
|
+
line-height: 44px;
|
|
2150
2155
|
box-shadow: none !important;
|
|
2151
2156
|
|
|
2152
2157
|
&:focus {
|
|
@@ -2268,6 +2273,31 @@ button[aria-expanded="true"] {
|
|
|
2268
2273
|
animation: prixClipFix 2s linear infinite;
|
|
2269
2274
|
}
|
|
2270
2275
|
|
|
2276
|
+
.br-6 {
|
|
2277
|
+
border-radius: 6px;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
.line-clamp {
|
|
2281
|
+
display: -webkit-box;
|
|
2282
|
+
-webkit-box-orient: vertical;
|
|
2283
|
+
overflow: hidden;
|
|
2284
|
+
text-overflow: ellipsis;
|
|
2285
|
+
}
|
|
2286
|
+
|
|
2287
|
+
.line-clamp-1 {
|
|
2288
|
+
-webkit-line-clamp: 1;
|
|
2289
|
+
line-clamp: 1;
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
.line-clamp-2 {
|
|
2293
|
+
-webkit-line-clamp: 2;
|
|
2294
|
+
line-clamp: 2;
|
|
2295
|
+
}
|
|
2296
|
+
|
|
2297
|
+
.pd-9 {
|
|
2298
|
+
padding: 10px;
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2271
2301
|
.custom_grid_checkbox {
|
|
2272
2302
|
&.custom_grid_indeterminate {
|
|
2273
2303
|
.p-checkbox-box {
|
|
@@ -2340,6 +2370,55 @@ button[aria-expanded="true"] {
|
|
|
2340
2370
|
// }
|
|
2341
2371
|
// }
|
|
2342
2372
|
|
|
2373
|
+
// .ag_grid_sidebar {
|
|
2374
|
+
// .p-sidebar-content {
|
|
2375
|
+
// padding-right: 16px;
|
|
2376
|
+
// }
|
|
2377
|
+
// }
|
|
2378
|
+
|
|
2379
|
+
.filter-dropdown-grid {
|
|
2380
|
+
.p-placeholder {
|
|
2381
|
+
margin-top: 3px;
|
|
2382
|
+
}
|
|
2383
|
+
|
|
2384
|
+
}
|
|
2385
|
+
|
|
2386
|
+
.zoom_animate {
|
|
2387
|
+
transition: all .4s ease-in-out;
|
|
2388
|
+
animation: zoomin .20s linear;
|
|
2389
|
+
}
|
|
2390
|
+
|
|
2391
|
+
|
|
2392
|
+
@keyframes zoomin {
|
|
2393
|
+
0% {
|
|
2394
|
+
opacity: 0;
|
|
2395
|
+
transform: scale3d(0.3, 0.3, 0.3);
|
|
2396
|
+
}
|
|
2397
|
+
100% {
|
|
2398
|
+
opacity: 1;
|
|
2399
|
+
}
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
.slide_animate {
|
|
2403
|
+
overflow: hidden; /* Ensures content is not visible outside of the height */
|
|
2404
|
+
height: 0; /* Start with height 0 */
|
|
2405
|
+
opacity: 0; /* Start with full transparency */
|
|
2406
|
+
animation: slide_down 0.5s ease-in-out forwards; /* Run the animation on load */
|
|
2407
|
+
}
|
|
2408
|
+
|
|
2409
|
+
@keyframes slide_down {
|
|
2410
|
+
0% {
|
|
2411
|
+
height: 0;
|
|
2412
|
+
// margin-top: -30px; /* Start 30px above the final position */
|
|
2413
|
+
opacity: 0; /* Fully transparent */
|
|
2414
|
+
}
|
|
2415
|
+
100% {
|
|
2416
|
+
height: 90px; /* The final height */
|
|
2417
|
+
// margin-top: 0px; /* Move to the final position */
|
|
2418
|
+
opacity: 1; /* Fully opaque */
|
|
2419
|
+
}
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2343
2422
|
.pd-r-2 {
|
|
2344
2423
|
padding-right: 2px;
|
|
2345
2424
|
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
@import url("./assets/theme.css");
|
|
2
|
+
@import url("./assets/sccoreui.css");
|
|
3
|
+
@import url("./assets/sccoreicons.css");
|
|
4
|
+
@import url("./assets/flex.css");
|
|
5
|
+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
|
|
6
|
+
:root {
|
|
7
|
+
--fw-600: 600;
|
|
8
|
+
--fw-400: 400;
|
|
9
|
+
--fs-24: 24px;
|
|
10
|
+
--fs-18: 18px;
|
|
11
|
+
--fs-16: 16px;
|
|
12
|
+
--lh: 24px;
|
|
13
|
+
--fs-14: 14px;
|
|
14
|
+
--grey-bg: #101828;
|
|
15
|
+
--border-none: border-none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
font-family: "Lato", sans-serif;
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
-moz-osx-font-smoothing: grayscale;
|
|
22
|
+
line-height: var(--lh);
|
|
23
|
+
padding: 0;
|
|
24
|
+
margin: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
code {
|
|
28
|
+
font-family: "Lato", sans-serif;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h1 {
|
|
32
|
+
font-size: var(--fs-24);
|
|
33
|
+
font-weight: var(--fw-600);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h2 {
|
|
37
|
+
font-size: var(--fs-18);
|
|
38
|
+
font-weight: var(--fw-600);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
h3 {
|
|
42
|
+
font-size: var(--fs-16);
|
|
43
|
+
font-weight: var(--fw-400);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.progress-container {
|
|
47
|
+
isolation: isolate;
|
|
48
|
+
}
|
|
49
|
+
.progress-container::before {
|
|
50
|
+
content: "";
|
|
51
|
+
background-color: var(--gray-200);
|
|
52
|
+
position: absolute;
|
|
53
|
+
z-index: -1;
|
|
54
|
+
}
|
|
55
|
+
.progress-container.horizontal::before {
|
|
56
|
+
height: 2px;
|
|
57
|
+
width: 100%;
|
|
58
|
+
top: 11%;
|
|
59
|
+
}
|
|
60
|
+
.progress-container.vertical::before {
|
|
61
|
+
height: 100%;
|
|
62
|
+
width: 2px;
|
|
63
|
+
left: 5%;
|
|
64
|
+
top: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.progressbar {
|
|
68
|
+
z-index: -1;
|
|
69
|
+
transition: all 0.6s ease;
|
|
70
|
+
}
|
|
71
|
+
.progressbar.horizontal {
|
|
72
|
+
left: 0;
|
|
73
|
+
height: 2px;
|
|
74
|
+
top: 11%;
|
|
75
|
+
}
|
|
76
|
+
.progressbar.vertical {
|
|
77
|
+
width: 2px;
|
|
78
|
+
left: 5%;
|
|
79
|
+
top: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.progress-step-item.horizontal:nth-of-type(1) {
|
|
83
|
+
transform: translateX(-50%);
|
|
84
|
+
}
|
|
85
|
+
.progress-step-item.horizontal:last-child {
|
|
86
|
+
transform: translateX(50%);
|
|
87
|
+
}
|
|
88
|
+
.progress-step-item.vertical {
|
|
89
|
+
transform: translateY(50%);
|
|
90
|
+
}
|
|
91
|
+
.progress-step-item.vertical:nth-of-type(1) {
|
|
92
|
+
transform: translateY(-5%);
|
|
93
|
+
}
|
|
94
|
+
.progress-step-item.vertical:last-child {
|
|
95
|
+
transform: translateY(100%);
|
|
96
|
+
}/*# sourceMappingURL=App.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["App.scss","App.css"],"names":[],"mappings":"AAAQ,iCAAA;AACA,oCAAA;AACA,uCAAA;AACA,gCAAA;AACA,kGAAA;AAER;EACE,aAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,UAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;ACAF;;ADmBA;EACE,+BAAA;EACA,mCAAA;EACA,kCAAA;EACA,sBAAA;EACA,UAAA;EACA,SAAA;AChBF;;ADmBA;EACE,+BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADqBA;EACE,kBAAA;AClBF;ADoBE;EACE,WAAA;EACA,iCAAA;EACA,kBAAA;EACA,WAAA;AClBJ;ADqBE;EACE,WAAA;EACA,WAAA;EACA,QAAA;ACnBJ;ADsBE;EACE,YAAA;EACA,UAAA;EACA,QAAA;EACA,MAAA;ACpBJ;;ADwBA;EACE,WAAA;EACA,yBAAA;ACrBF;ADuBE;EACE,OAAA;EACA,WAAA;EACA,QAAA;ACrBJ;ADwBE;EACE,UAAA;EACA,QAAA;EACA,MAAA;ACtBJ;;AD8BI;EACE,2BAAA;AC3BN;AD8BI;EACE,0BAAA;AC5BN;ADgCE;EACE,0BAAA;AC9BJ;ADgCI;EACE,0BAAA;AC9BN;ADiCI;EACE,2BAAA;AC/BN","file":"App.css"}
|
|
@@ -9,16 +9,18 @@ const inputtext_1 = require("primereact/inputtext");
|
|
|
9
9
|
const drag_and_drop_icon_png_1 = tslib_1.__importDefault(require("../../../assets/images/drag-and-drop-icon.png"));
|
|
10
10
|
const checkbox_1 = require("primereact/checkbox");
|
|
11
11
|
const button_1 = require("primereact/button");
|
|
12
|
+
const context_provider_1 = require("../context-provider");
|
|
13
|
+
// import { ColumnDef } from "../Types";
|
|
12
14
|
const ColumnGroup = () => {
|
|
15
|
+
var _a, _b, _c, _d;
|
|
13
16
|
const columnGroupRef = (0, react_1.useRef)(null);
|
|
14
17
|
const btnRef = (0, react_1.useRef)(null);
|
|
15
18
|
const [inpVlaue, setInpValue] = (0, react_1.useState)("");
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
]);
|
|
19
|
+
const { gridApi, setGridData } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
20
|
+
const [columns, setColumns] = (0, react_1.useState)([]);
|
|
21
|
+
const [renderColumns, setRenderColumns] = (0, react_1.useState)([]);
|
|
22
|
+
const [columnsSelectedForGroup, setColumnsSelectedForGroup] = (0, react_1.useState)([]);
|
|
23
|
+
const [selectedCheckBoxesLength, setSelectedCheckBoxesLength] = (0, react_1.useState)(null);
|
|
22
24
|
const showColumnOptions = (e) => {
|
|
23
25
|
columnGroupRef.current.toggle(e);
|
|
24
26
|
};
|
|
@@ -30,23 +32,94 @@ const ColumnGroup = () => {
|
|
|
30
32
|
};
|
|
31
33
|
const onDrop = (e, dropIndex) => {
|
|
32
34
|
const draggedIndex = e.dataTransfer.getData("draggedIndex");
|
|
33
|
-
const draggedItem =
|
|
35
|
+
const draggedItem = renderColumns[draggedIndex];
|
|
34
36
|
// Create a new list with the items rearranged
|
|
35
|
-
const updatedItems = [...
|
|
37
|
+
const updatedItems = [...renderColumns];
|
|
36
38
|
updatedItems.splice(draggedIndex, 1); // Remove dragged item
|
|
37
39
|
updatedItems.splice(dropIndex, 0, draggedItem); // Insert at the drop position
|
|
38
|
-
|
|
40
|
+
setRenderColumns(updatedItems);
|
|
41
|
+
setColumns(updatedItems);
|
|
39
42
|
};
|
|
40
|
-
const onSelectedCheckbox = (item) => {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
const onSelectedCheckbox = (item, e) => {
|
|
44
|
+
const isChecked = e.checked;
|
|
45
|
+
const updatedColumns = renderColumns.map((listItem) => listItem.id === item.id
|
|
46
|
+
? Object.assign(Object.assign({}, listItem), { rowGroup: isChecked }) : listItem);
|
|
47
|
+
// Sort columns: checked (true) come before unchecked (false)
|
|
48
|
+
const sortedColumns = updatedColumns.sort((a, b) => (b.rowGroup ? 1 : 0) - (a.rowGroup ? 1 : 0));
|
|
49
|
+
// setColumns(sortedColumns);
|
|
50
|
+
setRenderColumns(sortedColumns);
|
|
51
|
+
const lengthOfSelectedCheckBoxes = sortedColumns.filter((col) => col.rowGroup).length;
|
|
52
|
+
setSelectedCheckBoxesLength(lengthOfSelectedCheckBoxes);
|
|
44
53
|
};
|
|
45
54
|
const searchResults = (e) => {
|
|
55
|
+
// console.log
|
|
56
|
+
setRenderColumns(() => columns.filter((column) => {
|
|
57
|
+
var _a, _b, _c;
|
|
58
|
+
return (_b = (_a = column.headerName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = e.target.value) === null || _c === void 0 ? void 0 : _c.toLowerCase());
|
|
59
|
+
}));
|
|
46
60
|
setInpValue(e.target.value);
|
|
47
61
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
62
|
+
// Save Grouping
|
|
63
|
+
const saveGrouping = (e) => {
|
|
64
|
+
var _a, _b;
|
|
65
|
+
const groupedColumns = [];
|
|
66
|
+
// Iterate over the columns to identify grouped and pinned columns
|
|
67
|
+
const updateColumns = renderColumns.map((column) => {
|
|
68
|
+
// Collect columns that are marked for grouping
|
|
69
|
+
if (column.rowGroup) {
|
|
70
|
+
groupedColumns.push(column);
|
|
71
|
+
}
|
|
72
|
+
// Hide columns that are pinned
|
|
73
|
+
if (column.pinned) {
|
|
74
|
+
column.hide = true;
|
|
75
|
+
}
|
|
76
|
+
return column;
|
|
77
|
+
});
|
|
78
|
+
// Update the grid's column definitions with the modified columns
|
|
79
|
+
(_a = gridApi.current) === null || _a === void 0 ? void 0 : _a.api.setGridOption("columnDefs", updateColumns);
|
|
80
|
+
// Apply the grouping order based on the updated columns
|
|
81
|
+
(_b = gridApi.current) === null || _b === void 0 ? void 0 : _b.columnApi.setRowGroupColumns(updateColumns);
|
|
82
|
+
// Update the grid's data state to reflect the new column configuration
|
|
83
|
+
setGridData((prev) => {
|
|
84
|
+
return { rowData: prev.rowData, columnData: updateColumns };
|
|
85
|
+
});
|
|
86
|
+
// Store the grouped columns in the state for future reference
|
|
87
|
+
setColumnsSelectedForGroup(groupedColumns);
|
|
88
|
+
// Update the render columns state to reflect the new configuration
|
|
89
|
+
setRenderColumns(updateColumns);
|
|
90
|
+
// Hide the column grouping UI element if it exists
|
|
91
|
+
(columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current) && (columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current.hide(e));
|
|
92
|
+
};
|
|
93
|
+
// Remove grouping
|
|
94
|
+
const clearListItems = (e) => {
|
|
95
|
+
var _a;
|
|
96
|
+
setColumnsSelectedForGroup([]);
|
|
97
|
+
e.stopPropagation();
|
|
98
|
+
(_a = gridApi.current) === null || _a === void 0 ? void 0 : _a.api.setGridOption("columnDefs", columns);
|
|
99
|
+
setRenderColumns(columns);
|
|
100
|
+
(columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current) && (columnGroupRef === null || columnGroupRef === void 0 ? void 0 : columnGroupRef.current.hide(e));
|
|
101
|
+
};
|
|
102
|
+
const handleHide = () => {
|
|
103
|
+
var _a, _b, _c;
|
|
104
|
+
// Reset the renderColumns when the OverlayPanel is hidden
|
|
105
|
+
const columns = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs;
|
|
106
|
+
setRenderColumns(columns);
|
|
107
|
+
const intialLength = columns === null || columns === void 0 ? void 0 : columns.filter((col) => col.rowGroup).length;
|
|
108
|
+
setColumns(columns);
|
|
109
|
+
setSelectedCheckBoxesLength(intialLength);
|
|
110
|
+
};
|
|
111
|
+
(0, react_1.useEffect)(() => {
|
|
112
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
113
|
+
// Get columns from grd
|
|
114
|
+
if ((_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length) {
|
|
115
|
+
const columnsFromGrid = (_h = (_g = (_f = (_e = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _e === void 0 ? void 0 : _e.api) === null || _f === void 0 ? void 0 : _f.columnModel) === null || _g === void 0 ? void 0 : _g.columnDefs) === null || _h === void 0 ? void 0 : _h.map((column) => {
|
|
116
|
+
column.rowGroup = false;
|
|
117
|
+
return column;
|
|
118
|
+
});
|
|
119
|
+
setColumns(columnsFromGrid);
|
|
120
|
+
setRenderColumns(columnsFromGrid);
|
|
121
|
+
}
|
|
122
|
+
}, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
|
|
123
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 ? "bg-primary-50" : "bg-white"} hover:bg-primary-50 br-8 cursor-pointer pd-9 flex align-items-cente gap-1 zoom_animate`, ref: btnRef, onClick: showColumnOptions }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18, color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 ? "text-primary-400" : "text-gray-500" }), (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2 text-primary-400 font-semibold" }, { children: ["Selected", (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: clearListItems, className: "h-auto p-0", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { 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 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => searchResults(e), value: inpVlaue, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 mt-1 mr-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 pl-2" }, { children: [column.rowGroup && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20 })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${column.rowGroup && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: column.rowGroup, onChange: (e) => onSelectedCheckbox(column, e), disabled: selectedCheckBoxesLength === 2 && !column.rowGroup }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-28rem line-clamp line-clamp-1 inline-block", title: column.headerName }, { children: column.headerName }))] }))] }), column.id))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", text: true, label: "Remove Grouping" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: saveGrouping })] }))] }))] }));
|
|
51
124
|
};
|
|
52
125
|
exports.default = ColumnGroup;
|
|
@@ -10,7 +10,7 @@ const button_1 = require("primereact/button");
|
|
|
10
10
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
11
11
|
const context_provider_1 = require("../context-provider");
|
|
12
12
|
function Sort() {
|
|
13
|
-
var _a;
|
|
13
|
+
var _a, _b;
|
|
14
14
|
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
15
|
const showShort = (0, react_1.useRef)(null);
|
|
16
16
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
@@ -87,19 +87,19 @@ function Sort() {
|
|
|
87
87
|
}
|
|
88
88
|
}, [sortValue, sortBy]);
|
|
89
89
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer sc_icon_hover flex align-items-center border-round hover:bg-primary-50 ${isOverlayOpened || featureDetails.sort.isSortable
|
|
90
|
-
? "bg-primary-50" : "bg-white"}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort) ? sortModelText.onSelectedSort : `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: `p-button-secondary focus:border-0 focus:shadow-none border-none icon-32x32 hover:bg-primary-50`, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
90
|
+
? "bg-primary-50" : "bg-white"}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort) ? sortModelText.onSelectedSort : `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: `p-button-secondary focus:border-0 focus:shadow-none border-none icon-32x32 hover:bg-primary-50 zoom_animate`, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
91
91
|
? "text-primary-400"
|
|
92
92
|
: "text-gray-700" }) })] })), (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" }, { 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) => {
|
|
93
93
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
94
94
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
95
|
-
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${isSelected && "bg-primary-25"} cursor-pointer
|
|
95
|
+
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));
|
|
96
96
|
}
|
|
97
97
|
else {
|
|
98
98
|
return null;
|
|
99
99
|
}
|
|
100
|
-
}) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (
|
|
100
|
+
}) })), ((_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.length) > 0 && (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200 slide_animate" : ""}` }, { children: (_b = sortOptions.filter((each) => each.dataType === sortType)) === null || _b === void 0 ? void 0 : _b.map((eachOption, index) => {
|
|
101
101
|
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
|
|
102
|
-
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer
|
|
102
|
+
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachOption.label, className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer br-6 pl-0 px-3 py-2 flex align-items-center gap-2 hover:bg-primary-25 mb-1`, onClick: () => {
|
|
103
103
|
onSelectSortType(eachOption);
|
|
104
104
|
// setSortBy(eachOption);
|
|
105
105
|
} }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === 0 ? "arrow-down" : "arrow-up", size: 20 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${seletedSort && "text-primary-400 font-semibold"} text-gray-700 font-medium text-base` }, { children: eachOption.label }))] }), index));
|
|
@@ -13,7 +13,7 @@ function Search({ searchPlaceHolder }) {
|
|
|
13
13
|
(0, react_1.useEffect)(() => {
|
|
14
14
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
|
|
15
15
|
}, [deboucedValue]);
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0 && "p-input-icon-right"}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18 }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer", onClick: () => {
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0 && "p-input-icon-right"}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix zoom_animate" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18 }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
|
|
17
17
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" })),
|
|
18
18
|
setInputValue("");
|
|
19
19
|
}, title: "Clear" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) }))), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: inputValue, onChange: (e) => setInputValue(e.target.value), className: "w-21rem", placeholder: searchPlaceHolder || "Search by name or code" })] })));
|
|
@@ -164,13 +164,12 @@ function HideColumn() {
|
|
|
164
164
|
setVisibleRight(false);
|
|
165
165
|
setInputValue("");
|
|
166
166
|
};
|
|
167
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true),
|
|
168
|
-
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "
|
|
169
|
-
|
|
170
|
-
|
|
167
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), className: "p-button-secondary bg-white focus:border-0 focus:shadow-none border-0 icon-32x32 hover:bg-primary-50 zoom_animate", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02", 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: "sticky top-0 z-5 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: "font-semibold", text: true, 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 &&
|
|
168
|
+
(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" }, { 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) => {
|
|
169
|
+
searchHandler(e.target.value);
|
|
170
|
+
}, 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" }, { children: [(0, jsx_runtime_1.jsxs)("div", 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-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 -mt-2" }, { 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 ?
|
|
171
171
|
nodes === null || nodes === void 0 ? void 0 : nodes.map((listItem, idx) => (listItem === null || listItem === void 0 ? void 0 : listItem.visibleInPanel) &&
|
|
172
|
-
(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.
|
|
173
|
-
|
|
174
|
-
(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" })) }))] }))] }))] }));
|
|
172
|
+
(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" }, { 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) &&
|
|
173
|
+
(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" }))] }))] }))] }));
|
|
175
174
|
}
|
|
176
175
|
exports.default = HideColumn;
|
|
@@ -50,7 +50,7 @@ const Conditions = (props) => {
|
|
|
50
50
|
var _a, _b, _c, _d, _e, _f;
|
|
51
51
|
switch (selectedColumn.dataType) {
|
|
52
52
|
case Types_1.FilterDataType.STRING: {
|
|
53
|
-
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left col-4 focus:shadow-none lh-44 h-44", value: value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input) ? filterModelText.elementThreePlaceHolder_Input : "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left col-4 focus:shadow-none lh-44 h-44 flex align-items-center pl-3", value: value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input) ? filterModelText.elementThreePlaceHolder_Input : "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
|
|
54
54
|
}
|
|
55
55
|
case Types_1.FilterDataType.DECIMAL:
|
|
56
56
|
case Types_1.FilterDataType.PERCENT:
|
|
@@ -73,7 +73,7 @@ const Conditions = (props) => {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
case Types_1.FilterDataType.SELECT: {
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "border-noround-left col-4 focus:shadow-none lh-44 h-44
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "border-noround-left col-4 focus:shadow-none lh-44 h-44 flex align-items-center dropdown-focus-none pl-3", value: value, options: selectedColumn.options, optionLabel: "label", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", disabled: !condition, onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
77
77
|
}
|
|
78
78
|
case Types_1.FilterDataType.DATE:
|
|
79
79
|
case Types_1.FilterDataType.DATEANDTIME: {
|
|
@@ -90,7 +90,7 @@ const Conditions = (props) => {
|
|
|
90
90
|
let valueString = value.length === 2 ? value.map(convertDateToISO) : convertDateToISO(value);
|
|
91
91
|
handleDynamicFieldState(valueString);
|
|
92
92
|
};
|
|
93
|
-
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: condition === Types_1.FilteredConditionTypes.IS_BETWEEN || condition === Types_1.FilteredConditionTypes.IS_NOT_BETWEEN ? "range" : "single", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: " border-noround-left border-noround-left col-4 focus:shadow-none lh-44 h-44 p-0
|
|
93
|
+
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: condition === Types_1.FilteredConditionTypes.IS_BETWEEN || condition === Types_1.FilteredConditionTypes.IS_NOT_BETWEEN ? "range" : "single", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: " border-noround-left border-noround-left col-4 focus:shadow-none lh-44 h-44 flex align-items-center p-0 filter-calendar", value: condition === (Types_1.FilteredConditionTypes.IS_BETWEEN || condition === Types_1.FilteredConditionTypes.IS_NOT_BETWEEN) && value && value.length === 2 ? value === null || value === void 0 ? void 0 : value.map((date) => date ? new Date(date) : null) : value ? new Date(value) : null,
|
|
94
94
|
// panelClassName="mx-0 lh-44 h-44 filter-calendar"
|
|
95
95
|
onChange: (event) => handleOnchangeEvent(event.value) }));
|
|
96
96
|
}
|
|
@@ -98,10 +98,10 @@ const Conditions = (props) => {
|
|
|
98
98
|
return ((0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, { className: "filter-multi-dropdown border-noround-left p-0 col-4 focus:shadow-none lh-44 h-44", value: value, hidePanelHeader: true, maxSelectedLabels: 1, onChange: (event) => handleDynamicFieldState(event.value), placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_MultiSelect) ? filterModelText.elementThreePlaceHolder_MultiSelect : "Select", options: selectedColumn.options ? selectedColumn.options.map((x) => { return Object.assign(Object.assign({}, x), { name: x.label }); }) : [], dropdownType: "default", optionLabel: "label" }));
|
|
99
99
|
}
|
|
100
100
|
default:
|
|
101
|
-
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "border-noround-left col-4 focus:shadow-none lh-44 h-44
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "border-noround-left col-4 focus:shadow-none lh-44 h-44 flex align-items-center dropdown-focus-none pl-3", options: [], value: value, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", disabled: true }));
|
|
102
102
|
}
|
|
103
103
|
};
|
|
104
104
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-1 align-items-center" }, { children: [index !== 0 ?
|
|
105
|
-
(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "operator-type col-2 w-
|
|
105
|
+
(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "operator-type col-2 w-7rem mx-4 border-1 mb-1 border-gray-300 lh-44 h-44", options: conditionTypes, optionLabel: "label", placeholder: "Select", value: conditionType, disabled: index !== 1, onChange: (event) => handleConditionType(event.target.value) }) : (0, jsx_runtime_1.jsx)("div", { className: "col-2 w-7rem mx-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-9 grid filter-dropdowns overflow-y-hidden" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: `condition-dropdown dropdown-focus-none border-noround-right col-4 pl-3`, options: columnsArray, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementOnePlaceHolder) ? filterModelText.elementOnePlaceHolder : "Select", value: columnsArray.find((item) => item.code === columnName.code), onChange: (event) => onUpdateColumnName(event.value), panelClassName: "w-14rem" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround remove-focus border-x-none filter-dropdown-grid col-4", options: conditionsArray.filter((each) => each.datatypes.includes(columnName === null || columnName === void 0 ? void 0 : columnName.dataType)).map((option) => { return Object.assign(Object.assign({}, option), { name: option.name.toLowerCase().split(' ').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') }); }), value: condition, disabled: columnName === '', optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementTwoPlaceHolder) ? filterModelText.elementTwoPlaceHolder : "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-14rem" }), renderDynamicField(columnName)] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-start gap-1 col-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "focus:shadow-none sc_icon_hover mb-2 h-auto p-0", onClick: () => onAddCondition(index), disabled: false }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 20, color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, disabled: conditionsLength === 1, className: "focus:shadow-none sc_icon_hover h-auto p-0 mb-2", onClick: () => onRemoveCondition(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
|
|
106
106
|
};
|
|
107
107
|
exports.default = Conditions;
|
|
@@ -140,7 +140,7 @@ const TableFilter = () => {
|
|
|
140
140
|
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-50 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isOverlayOpened ||
|
|
141
141
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
142
142
|
? "bg-primary-50"
|
|
143
|
-
: "bg-white"}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => onClickFilter(e), className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
|
|
143
|
+
: "bg-white"}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => onClickFilter(e), className: "flex zoom_animate" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
|
|
144
144
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
145
145
|
? "#243DC6"
|
|
146
146
|
: "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter) ? filterModelText.onSelectedFilter : "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
|
|
@@ -8,6 +8,6 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg
|
|
|
8
8
|
const button_1 = require("primereact/button");
|
|
9
9
|
function RefreshGrid() {
|
|
10
10
|
const { removeFeaturesAndRefresh } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-button-secondary bg-white focus:border-0 focus:shadow-none border-0 icon-32x32 hover:bg-primary-50", onClick: removeFeaturesAndRefresh, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-700" }) }) }));
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-button-secondary bg-white focus:border-0 focus:shadow-none border-0 icon-32x32 hover:bg-primary-50 zoom_animate", onClick: removeFeaturesAndRefresh, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-700" }) }) }));
|
|
12
12
|
}
|
|
13
13
|
exports.default = RefreshGrid;
|
|
@@ -159,7 +159,7 @@ const mergeArrays = (currentUpdatedRows, updatedRecords) => {
|
|
|
159
159
|
// Convert map back to array
|
|
160
160
|
return Array.from(mergedMap.values());
|
|
161
161
|
};
|
|
162
|
-
const autoGroupColumnDef = (isTreeEnable, headerName, groupField, GroupHeaderComponent, headerCheckboxRenderer, enableCheckboxForGroupHeader, ChildRendererForGroup) => {
|
|
162
|
+
const autoGroupColumnDef = (isTreeEnable, headerName, groupField, GroupHeaderComponent, headerCheckboxRenderer, enableCheckboxForGroupHeader, displayGroupCount, ChildRendererForGroup) => {
|
|
163
163
|
if (isTreeEnable) {
|
|
164
164
|
return {
|
|
165
165
|
headerName: headerName ? headerName : "Group",
|
|
@@ -173,17 +173,19 @@ const autoGroupColumnDef = (isTreeEnable, headerName, groupField, GroupHeaderCom
|
|
|
173
173
|
else {
|
|
174
174
|
return {
|
|
175
175
|
field: groupField || "group",
|
|
176
|
-
headerComponent: enableCheckboxForGroupHeader
|
|
176
|
+
headerComponent: enableCheckboxForGroupHeader
|
|
177
|
+
? () => headerCheckboxRenderer("", GroupHeaderComponent)
|
|
178
|
+
: GroupHeaderComponent,
|
|
177
179
|
cellRenderer: "agGroupCellRenderer",
|
|
178
180
|
cellRendererParams: (params) => {
|
|
179
|
-
if (!params.node.group) {
|
|
181
|
+
if (!params.node.group && ChildRendererForGroup) {
|
|
180
182
|
return {
|
|
181
183
|
suppressCount: true,
|
|
182
184
|
innerRenderer: ChildRendererForGroup, // Apply the custom renderer only for child rows
|
|
183
185
|
};
|
|
184
186
|
}
|
|
185
187
|
// Return specific params for group rows to use default rendering
|
|
186
|
-
return { suppressCount: true
|
|
188
|
+
return { suppressCount: typeof (displayGroupCount) === "boolean" ? !displayGroupCount : true };
|
|
187
189
|
},
|
|
188
190
|
};
|
|
189
191
|
}
|
|
@@ -222,23 +222,38 @@ function ParentForGrid(props) {
|
|
|
222
222
|
}, []);
|
|
223
223
|
// Render group child conditionally with/without checkbox
|
|
224
224
|
const RenderGroupChild = () => {
|
|
225
|
+
var _a;
|
|
225
226
|
// Cell renderer with checkbox
|
|
226
227
|
const cellRendererConditionally = (params) => {
|
|
227
|
-
var _a, _b;
|
|
228
|
+
var _a, _b, _c;
|
|
228
229
|
if ((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxForGroupChild) {
|
|
229
|
-
|
|
230
|
+
if (((_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.displayCheckboxForGroupChild) && !(props === null || props === void 0 ? void 0 : props.ChildComponentForGroup)) {
|
|
231
|
+
console.log(params, 'params to render data');
|
|
232
|
+
return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [cellCheckBoxRenderer(params), (0, jsx_runtime_1.jsx)("p", { children: params.data[props === null || props === void 0 ? void 0 : props.groupField] })] }));
|
|
233
|
+
}
|
|
234
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_c = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _c === void 0 ? void 0 : _c.displayCheckboxOnRight) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params), cellCheckBoxRenderer(params)] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [cellCheckBoxRenderer(params), props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params)] }))) }));
|
|
230
235
|
}
|
|
231
236
|
else {
|
|
232
237
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params) });
|
|
233
238
|
}
|
|
234
239
|
};
|
|
235
240
|
// Group default values
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
241
|
+
if ((props === null || props === void 0 ? void 0 : props.ChildComponentForGroup) || ((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxForGroupChild)) {
|
|
242
|
+
return (0, helper_1.autoGroupColumnDef)((props === null || props === void 0 ? void 0 : props.enableTree) ? true : false, // If tree enable
|
|
243
|
+
props === null || props === void 0 ? void 0 : props.treeHeaderName, // Tree header name
|
|
244
|
+
props === null || props === void 0 ? void 0 : props.groupField, // Group field
|
|
245
|
+
props === null || props === void 0 ? void 0 : props.GroupHeaderComponent, // Header component
|
|
246
|
+
headerCheckBoxRenderer, //
|
|
247
|
+
props === null || props === void 0 ? void 0 : props.enableCheckboxForGroupHeader, props.conditionsToDisplay.displayGroupCount, cellRendererConditionally);
|
|
248
|
+
}
|
|
249
|
+
else {
|
|
250
|
+
return (0, helper_1.autoGroupColumnDef)((props === null || props === void 0 ? void 0 : props.enableTree) ? true : false, // If tree enable
|
|
251
|
+
props === null || props === void 0 ? void 0 : props.treeHeaderName, // Tree header name
|
|
252
|
+
props === null || props === void 0 ? void 0 : props.groupField, // Group field
|
|
253
|
+
props === null || props === void 0 ? void 0 : props.GroupHeaderComponent, // Header component
|
|
254
|
+
headerCheckBoxRenderer, //
|
|
255
|
+
props === null || props === void 0 ? void 0 : props.enableCheckboxForGroupHeader, props.conditionsToDisplay.displayGroupCount);
|
|
256
|
+
}
|
|
242
257
|
};
|
|
243
258
|
// Options that grid should have
|
|
244
259
|
const gridOptions = {
|
|
@@ -19,7 +19,6 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
19
19
|
const [buttonPosition, setButtonPosition] = (0, react_1.useState)(null);
|
|
20
20
|
const buttonRef = (0, react_1.useRef)(null);
|
|
21
21
|
const onSelectOption = (e) => {
|
|
22
|
-
debugger;
|
|
23
22
|
if (confirmationOption === true)
|
|
24
23
|
onChange(e);
|
|
25
24
|
else {
|
|
@@ -96,6 +96,8 @@ export interface ConditionsToDisplay {
|
|
|
96
96
|
displayFeaturesHeader?: boolean;
|
|
97
97
|
displayCheckboxOnRight?: boolean;
|
|
98
98
|
displayCheckboxForGroupChild?: boolean;
|
|
99
|
+
enableCheckboxForGroupHeader?: boolean;
|
|
100
|
+
displayGroupCount?: boolean;
|
|
99
101
|
}
|
|
100
102
|
export interface PropsFromProduct {
|
|
101
103
|
columnData: ColumnDef[];
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
export declare const applyDefaultFilters: (defaultFilters: any) => any;
|
|
2
3
|
export declare const parseIfNeeded: (value: any) => any;
|
|
3
4
|
export declare const sortColumns: (columns: any) => any;
|
|
4
5
|
export declare const getCheckedStatus: (row: any, featureDetails: any, GRID_CHECKBOX_STATUS: any, setFeatureDetails: any) => any;
|
|
5
6
|
export declare const updateCells: (updatedRowData: any, setUpdateRowData: any, api: any) => void;
|
|
6
7
|
export declare const fillOperation: (params: any, api: any, editedRecords: any, setEditedRecords: any) => Promise<void>;
|
|
7
|
-
export declare const autoGroupColumnDef: (isTreeEnable:
|
|
8
|
-
headerName:
|
|
8
|
+
export declare const autoGroupColumnDef: (isTreeEnable: boolean, headerName: string, groupField: string, GroupHeaderComponent: React.FC, headerCheckboxRenderer: React.FC, enableCheckboxForGroupHeader: boolean, displayGroupCount: boolean, ChildRendererForGroup?: React.FC) => {
|
|
9
|
+
headerName: string;
|
|
9
10
|
minWidth: number;
|
|
10
11
|
cellRendererParams: {
|
|
11
12
|
suppressCount: boolean;
|
|
@@ -14,12 +15,12 @@ export declare const autoGroupColumnDef: (isTreeEnable: any, headerName: any, gr
|
|
|
14
15
|
headerComponent?: undefined;
|
|
15
16
|
cellRenderer?: undefined;
|
|
16
17
|
} | {
|
|
17
|
-
field:
|
|
18
|
-
headerComponent: any;
|
|
18
|
+
field: string;
|
|
19
|
+
headerComponent: React.FC<{}> | (() => React.ReactElement<any, any>);
|
|
19
20
|
cellRenderer: string;
|
|
20
21
|
cellRendererParams: (params: any) => {
|
|
21
22
|
suppressCount: boolean;
|
|
22
|
-
innerRenderer:
|
|
23
|
+
innerRenderer: React.FC<{}>;
|
|
23
24
|
} | {
|
|
24
25
|
suppressCount: boolean;
|
|
25
26
|
innerRenderer?: undefined;
|