sccoreui 6.2.77 → 6.2.79
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.js +1 -1
- package/dist/App.scss +45 -5
- package/dist/components/ag-grid/advancedFeature/advanced-feature.js +5 -5
- package/dist/components/ag-grid/advancedFeature/bulk-edit-action.js +3 -1
- package/dist/components/ag-grid/advancedFeature/column-group.js +4 -3
- package/dist/components/ag-grid/advancedFeature/custom-sort.js +7 -4
- package/dist/components/ag-grid/advancedFeature/global-search.js +2 -1
- package/dist/components/ag-grid/advancedFeature/gridS-search.js +2 -1
- package/dist/components/ag-grid/advancedFeature/hide-column.js +2 -1
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +5 -4
- package/dist/components/ag-grid/advancedFeature/record-detail.js +3 -1
- package/dist/components/ag-grid/advancedFeature/refresh-grid.js +2 -1
- package/dist/components/ag-grid/advancedFeature/remove-items.js +2 -1
- package/dist/components/ag-grid/parent-for-grid.js +15 -12
- package/dist/components/skeletons/FeatureSkeleton.js +8 -0
- package/dist/types/components/skeletons/FeatureSkeleton.d.ts +2 -0
- package/package.json +1 -1
package/dist/App.js
CHANGED
package/dist/App.scss
CHANGED
|
@@ -187,9 +187,17 @@
|
|
|
187
187
|
color: var(--_primary-400);
|
|
188
188
|
padding: 8px 14px;
|
|
189
189
|
border: 0 !important;
|
|
190
|
+
display: flex;
|
|
191
|
+
gap: 4px;
|
|
192
|
+
align-items: center;
|
|
190
193
|
&:hover {
|
|
191
194
|
background-color: var(--_primary-25) !important;
|
|
192
195
|
color: var(--_primary-600) !important;
|
|
196
|
+
svg {
|
|
197
|
+
path {
|
|
198
|
+
stroke: var(--primary-600);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
193
201
|
}
|
|
194
202
|
&:focus {
|
|
195
203
|
background-color: var(--_primary-25) !important;
|
|
@@ -198,6 +206,12 @@
|
|
|
198
206
|
&:disabled {
|
|
199
207
|
color: var(--_gray-300);
|
|
200
208
|
}
|
|
209
|
+
|
|
210
|
+
svg {
|
|
211
|
+
path {
|
|
212
|
+
stroke: var(--primary-400);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
201
215
|
}
|
|
202
216
|
}
|
|
203
217
|
|
|
@@ -381,6 +395,12 @@ code {
|
|
|
381
395
|
}
|
|
382
396
|
}
|
|
383
397
|
|
|
398
|
+
.disabled {
|
|
399
|
+
cursor: not-allowed;
|
|
400
|
+
pointer-events: none;
|
|
401
|
+
opacity: 0.2;
|
|
402
|
+
}
|
|
403
|
+
|
|
384
404
|
// CUSTOM multiselect style started
|
|
385
405
|
.Multi_select_dropdown_panel {
|
|
386
406
|
.p-multiselect-header {
|
|
@@ -1054,6 +1074,31 @@ button[aria-expanded="true"] {
|
|
|
1054
1074
|
width: 30px !important;
|
|
1055
1075
|
}
|
|
1056
1076
|
|
|
1077
|
+
.icon-38x38 {
|
|
1078
|
+
height: 38px !important;
|
|
1079
|
+
width: 38px !important;
|
|
1080
|
+
display: flex;
|
|
1081
|
+
justify-content: center;
|
|
1082
|
+
align-items: center;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.icon-40x40 {
|
|
1086
|
+
height: 40px !important;
|
|
1087
|
+
width: 40px !important;
|
|
1088
|
+
display: flex;
|
|
1089
|
+
justify-content: center;
|
|
1090
|
+
align-items: center;
|
|
1091
|
+
&.feature-hover {
|
|
1092
|
+
&:hover {
|
|
1093
|
+
svg {
|
|
1094
|
+
path {
|
|
1095
|
+
stroke: var(--primary-400);
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1057
1102
|
.list_box_dropdown {
|
|
1058
1103
|
.p-listbox-header {
|
|
1059
1104
|
padding: 12px !important;
|
|
@@ -2514,11 +2559,6 @@ button[aria-expanded="true"] {
|
|
|
2514
2559
|
height: 32px;
|
|
2515
2560
|
}
|
|
2516
2561
|
|
|
2517
|
-
.icon-38x38 {
|
|
2518
|
-
width: 32px;
|
|
2519
|
-
height: 32px;
|
|
2520
|
-
}
|
|
2521
|
-
|
|
2522
2562
|
.h-38 {
|
|
2523
2563
|
height: 38px;
|
|
2524
2564
|
}
|
|
@@ -28,10 +28,10 @@ function AdvancedFeatures({ props }) {
|
|
|
28
28
|
const AdvanceFilterWrapper = () => {
|
|
29
29
|
return AdvancedFilter && (0, jsx_runtime_1.jsx)(AdvancedFilter, {});
|
|
30
30
|
};
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props === null || props === void 0 ? void 0 : props.editMode) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children:
|
|
32
|
-
(props === null || props === void 0 ? void 0 : props.EditHeadingDetails)
|
|
33
|
-
(props === null || props === void 0 ? void 0 : props.BulkEditComponent)
|
|
34
|
-
(props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}),
|
|
35
|
-
(props === null || props === void 0 ? void 0 : props.bulkActionComponent)
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props === null || props === void 0 ? void 0 : props.editMode) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayEditHeading) &&
|
|
32
|
+
(props === null || props === void 0 ? void 0 : props.EditHeadingDetails) && (0, jsx_runtime_1.jsx)(EditDetails, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(gridS_search_1.default, {})) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && ((0, jsx_runtime_1.jsx)(hide_column_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
|
|
33
|
+
(props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), (props === null || props === void 0 ? void 0 : props.editMode) && (0, jsx_runtime_1.jsx)(bulk_edit_action_1.default, { props: props })] }))] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && ((0, jsx_runtime_1.jsx)(table_filter_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayAdvancedFilter) && ((0, jsx_runtime_1.jsx)(AdvanceFilterWrapper, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRowGroupingElement) && (0, jsx_runtime_1.jsx)(column_group_1.default, { dataFromProps: props })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySidePanel) && ((0, jsx_runtime_1.jsx)(hide_column_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && ((0, jsx_runtime_1.jsx)(remove_items_1.default, { removeCallBack: props.removeCallBack })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkEdit) &&
|
|
34
|
+
(props === null || props === void 0 ? void 0 : props.BulkEditComponent) && (0, jsx_runtime_1.jsx)(BulkEdit, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkAction) &&
|
|
35
|
+
(props === null || props === void 0 ? void 0 : props.bulkActionComponent) && ((0, jsx_runtime_1.jsx)(BulkAction, { checkBoxSelection: featureDetails.checkBoxSelection })), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && ((0, jsx_runtime_1.jsx)(refresh_grid_1.default, {})), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), isComponentVisible(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRecords) && ((0, jsx_runtime_1.jsx)(record_detail_1.default, {}))] }))] }))) }));
|
|
36
36
|
}
|
|
37
37
|
exports.default = AdvancedFeatures;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
3
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
5
|
const button_1 = require("primereact/button");
|
|
5
6
|
const utilComponents_1 = require("../utilComponents");
|
|
7
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
6
8
|
function BulkEditAction({ props }) {
|
|
7
9
|
var _a, _b, _c;
|
|
8
10
|
const { dynamicText } = props;
|
|
@@ -16,6 +18,6 @@ function BulkEditAction({ props }) {
|
|
|
16
18
|
return;
|
|
17
19
|
props === null || props === void 0 ? void 0 : props.discardBulkEdit();
|
|
18
20
|
};
|
|
19
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
21
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((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: "text-base font-semibold", text: true, onClick: onDiscard, label: ((_a = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _a === void 0 ? void 0 : _a.discard) || "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold", disabled: !((_b = props === null || props === void 0 ? void 0 : props.bulkEditedRecords) === null || _b === void 0 ? void 0 : _b.length), onClick: onSave, label: ((_c = dynamicText === null || dynamicText === void 0 ? void 0 : dynamicText.bulkEditAction) === null || _c === void 0 ? void 0 : _c.save) || "Update Changes" })] })));
|
|
20
22
|
}
|
|
21
23
|
exports.default = BulkEditAction;
|
|
@@ -12,6 +12,7 @@ const button_1 = require("primereact/button");
|
|
|
12
12
|
const context_provider_1 = require("../context-provider");
|
|
13
13
|
const helper_1 = require("../helper");
|
|
14
14
|
const utilComponents_1 = require("../utilComponents");
|
|
15
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
15
16
|
// import { ColumnDef } from "../Types";
|
|
16
17
|
const ColumnGroup = (props) => {
|
|
17
18
|
var _a, _b, _c, _d;
|
|
@@ -197,9 +198,9 @@ const ColumnGroup = (props) => {
|
|
|
197
198
|
setRenderColumns(columnsFromGrid);
|
|
198
199
|
}
|
|
199
200
|
}, [(_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]);
|
|
200
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
201
|
-
|
|
202
|
-
|
|
201
|
+
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.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 ? "bg-primary-50" : "bg-white"} hover:bg-primary-25 br-8 icon-40x40 sc_icon_hover cursor-pointer px-2 flex align-items-cente gap-1 zoom_animate ${isDisabled && "disabled"}`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e), title: "Column Grouping" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18,
|
|
202
|
+
// disabled={isDisabled}
|
|
203
|
+
color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
203
204
|
? "text-primary-400"
|
|
204
205
|
: "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { 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 align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_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) => setSearchedText(e.target.value), value: searchText, 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 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((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, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
|
|
205
206
|
? "col-gr-icon-active mr-2"
|
|
@@ -11,6 +11,7 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg
|
|
|
11
11
|
const context_provider_1 = require("../context-provider");
|
|
12
12
|
const helper_1 = require("../helper");
|
|
13
13
|
const utilComponents_1 = require("../utilComponents");
|
|
14
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
14
15
|
function Sort() {
|
|
15
16
|
var _a, _b;
|
|
16
17
|
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
@@ -89,13 +90,15 @@ function Sort() {
|
|
|
89
90
|
setIsApplyDisable(true);
|
|
90
91
|
}
|
|
91
92
|
}, [sortValue, sortBy]);
|
|
92
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
93
|
+
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.jsxs)("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
|
|
93
94
|
? "bg-primary-50"
|
|
94
|
-
: "bg-white"}
|
|
95
|
+
: "bg-white"}`, title: "Column Sorting" }, { 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)
|
|
95
96
|
? sortModelText.onSelectedSort
|
|
96
|
-
: `Selected` }))), (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",
|
|
97
|
+
: `Selected` }))), (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",
|
|
98
|
+
// disabled={isDisabled}
|
|
99
|
+
size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
97
100
|
? "text-primary-400"
|
|
98
|
-
: "text-gray-
|
|
101
|
+
: "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" }, { 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) => {
|
|
99
102
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
100
103
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
101
104
|
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));
|
|
@@ -10,6 +10,7 @@ const hooks_1 = require("primereact/hooks");
|
|
|
10
10
|
const constants_1 = require("../constants");
|
|
11
11
|
const helper_1 = require("../helper");
|
|
12
12
|
const utilComponents_1 = require("../utilComponents");
|
|
13
|
+
const skeleton_1 = require("primereact/skeleton");
|
|
13
14
|
function Search({ searchPlaceHolder }) {
|
|
14
15
|
const { featureDetails, setFeatureDetails, rowModelType, gridApi, quickSearch, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
15
16
|
const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
|
|
@@ -32,7 +33,7 @@ function Search({ searchPlaceHolder }) {
|
|
|
32
33
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: deboucedValue }));
|
|
33
34
|
}
|
|
34
35
|
}, [deboucedValue]);
|
|
35
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
36
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", width: "336px" })) : ((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, disabled: isDisabled }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
|
|
36
37
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }));
|
|
37
38
|
setInputValue("");
|
|
38
39
|
}, 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) => !isDisabled && setInputValue(e.target.value), className: "w-21rem", placeholder: searchPlaceHolder || "Search by name or code", disabled: isDisabled })] })));
|
|
@@ -8,6 +8,7 @@ const inputtext_1 = require("primereact/inputtext");
|
|
|
8
8
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
9
9
|
const helper_1 = require("../helper");
|
|
10
10
|
const utilComponents_1 = require("../utilComponents");
|
|
11
|
+
const skeleton_1 = require("primereact/skeleton");
|
|
11
12
|
function GridSearch() {
|
|
12
13
|
const { gridApi, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
13
14
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displaySearch);
|
|
@@ -17,6 +18,6 @@ function GridSearch() {
|
|
|
17
18
|
(_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _a === void 0 ? void 0 : _a.setGridOption("quickFilterText", document.getElementById("filter-text-box").value);
|
|
18
19
|
}
|
|
19
20
|
}, []);
|
|
20
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
21
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", width: "336px" })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-20rem" }, { 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", size: 20, disabled: isDisabled }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", id: "filter-text-box", placeholder: "Search", onInput: onFilterTextBoxChanged, disabled: isDisabled, className: "text-lg font-normal text-gray-500 hover:text-gray-900 lh-40 w-full" })] })));
|
|
21
22
|
}
|
|
22
23
|
exports.default = GridSearch;
|
|
@@ -12,6 +12,7 @@ const sidebar_1 = require("primereact/sidebar");
|
|
|
12
12
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
13
13
|
const helper_1 = require("../helper");
|
|
14
14
|
const utilComponents_1 = require("../utilComponents");
|
|
15
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
15
16
|
function HideColumn() {
|
|
16
17
|
const { columnToRender, gridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, sidePanelText, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
17
18
|
const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
|
|
@@ -167,7 +168,7 @@ function HideColumn() {
|
|
|
167
168
|
setVisibleRight(false);
|
|
168
169
|
setInputValue("");
|
|
169
170
|
};
|
|
170
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
171
|
+
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: "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
|
|
171
172
|
? true
|
|
172
173
|
: false, onClick: () => updateColumns() })] }))] })), enableManageColumnsCallback && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 pb-0" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: [(sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_to_all_views) || "Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: enableManageColumnsCallbackAPI, onChange: (e) => setEnableManageColumnsCallbackAPI(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: (sidePanelText === null || sidePanelText === void 0 ? void 0 : sidePanelText.apply_subHeading) ||
|
|
173
174
|
"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) => {
|
|
@@ -13,6 +13,7 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/
|
|
|
13
13
|
const constants_1 = tslib_1.__importDefault(require("../../constants"));
|
|
14
14
|
const helper_1 = require("../../helper");
|
|
15
15
|
const utilComponents_1 = require("../../utilComponents");
|
|
16
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../../skeletons/FeatureSkeleton"));
|
|
16
17
|
// import "./TableFilter.module.scss";
|
|
17
18
|
const TableFilter = () => {
|
|
18
19
|
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
@@ -163,19 +164,19 @@ const TableFilter = () => {
|
|
|
163
164
|
});
|
|
164
165
|
setAllFieldsFilled(isAllFieldsFilled && enbleApply);
|
|
165
166
|
}, [conditionsArray, enbleApply]);
|
|
166
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
167
|
+
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.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 icon-40x40 sc_icon_hover flex align-items-center gap-2 border-round-lg ${isDisabled && "disabled"} ${isOverlayOpened ||
|
|
167
168
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
168
169
|
? "bg-primary-50"
|
|
169
|
-
: "bg-white"}
|
|
170
|
+
: "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
|
|
170
171
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
171
172
|
? "#243DC6"
|
|
172
|
-
: "#667085"
|
|
173
|
+
: "#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)
|
|
173
174
|
? filterModelText.onSelectedFilter
|
|
174
175
|
: "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
|
|
175
176
|
e.preventDefault();
|
|
176
177
|
e.stopPropagation();
|
|
177
178
|
onresetFilter();
|
|
178
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
|
|
179
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay mt-5 -ml-2" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
|
|
179
180
|
? filterModelText.subHeader
|
|
180
181
|
: "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-y-auto overflow-x-hidden flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
|
|
181
182
|
return ((0, jsx_runtime_1.jsx)("div", { children: renderCondition(eachCondition, index) }, index));
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
3
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
5
|
const react_1 = require("react");
|
|
5
6
|
const context_provider_1 = require("../context-provider");
|
|
6
7
|
const utilComponents_1 = require("../utilComponents");
|
|
8
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
7
9
|
function RecordDetail() {
|
|
8
10
|
const { totalRecords, recordDetailModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
9
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
11
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, { width: "100px" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader)
|
|
10
12
|
? `${recordDetailModelText.totalRecordHeader} ${totalRecords} `
|
|
11
13
|
: `Total ${totalRecords} records` }));
|
|
12
14
|
}
|
|
@@ -7,6 +7,7 @@ const context_provider_1 = require("../context-provider");
|
|
|
7
7
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
8
8
|
const helper_1 = require("../helper");
|
|
9
9
|
const utilComponents_1 = require("../utilComponents");
|
|
10
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
10
11
|
function RefreshGrid() {
|
|
11
12
|
const { removeFeaturesAndRefresh, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
12
13
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayRefresh);
|
|
@@ -15,6 +16,6 @@ function RefreshGrid() {
|
|
|
15
16
|
removeFeaturesAndRefresh();
|
|
16
17
|
}
|
|
17
18
|
};
|
|
18
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
19
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, onClick: refreshHandler, title: "Refresh" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "refresh-ccw-01", color: "text-gray-500" }) })));
|
|
19
20
|
}
|
|
20
21
|
exports.default = RefreshGrid;
|
|
@@ -7,6 +7,7 @@ const context_provider_1 = require("../context-provider");
|
|
|
7
7
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
8
8
|
const helper_1 = require("../helper");
|
|
9
9
|
const utilComponents_1 = require("../utilComponents");
|
|
10
|
+
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../skeletons/FeatureSkeleton"));
|
|
10
11
|
function RemoveItems(props) {
|
|
11
12
|
const { featureDetails, conditionsToDisplay } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
12
13
|
const { removeCallBack } = props;
|
|
@@ -18,6 +19,6 @@ function RemoveItems(props) {
|
|
|
18
19
|
removeCallBack(currentFeature);
|
|
19
20
|
}
|
|
20
21
|
};
|
|
21
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(
|
|
22
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rounded_btn sc_icon_hover icon-40x40 ${isDisabled && "disabled"}`, onClick: removeItemsCallBack, title: "Remove" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", color: "text-red-800", size: 18 }) })));
|
|
22
23
|
}
|
|
23
24
|
exports.default = RemoveItems;
|
|
@@ -14,7 +14,7 @@ const context_provider_1 = tslib_1.__importDefault(require("./context-provider")
|
|
|
14
14
|
const group_checkbox_1 = tslib_1.__importDefault(require("./group-checkbox"));
|
|
15
15
|
const utilComponents_1 = require("./utilComponents");
|
|
16
16
|
function ParentForGrid(props) {
|
|
17
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18
18
|
const { gridProps = {} } = props;
|
|
19
19
|
const [gridData, setGridData] = (0, react_1.useState)({
|
|
20
20
|
rowData: [],
|
|
@@ -118,12 +118,12 @@ function ParentForGrid(props) {
|
|
|
118
118
|
};
|
|
119
119
|
// Callback to products for getting data
|
|
120
120
|
const getData = (startRow, endRow, currentFeatures, params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
121
|
-
var
|
|
121
|
+
var _s, _t;
|
|
122
122
|
if (!(props === null || props === void 0 ? void 0 : props.getRowData)) {
|
|
123
123
|
return emptyResponse; // If callback function to get row data is not provided
|
|
124
124
|
}
|
|
125
125
|
if (props.rowModelType !== constants_1.ROWMODELTYPE.SERVER_SIDE) {
|
|
126
|
-
(
|
|
126
|
+
(_t = (_s = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _s === void 0 ? void 0 : _s.api) === null || _t === void 0 ? void 0 : _t.showLoadingOverlay();
|
|
127
127
|
}
|
|
128
128
|
const response = yield (props === null || props === void 0 ? void 0 : props.getRowData(startRow, endRow, currentFeatures, params));
|
|
129
129
|
setGridData(Object.assign(Object.assign({}, gridData), { rowData: [] }));
|
|
@@ -145,8 +145,8 @@ function ParentForGrid(props) {
|
|
|
145
145
|
});
|
|
146
146
|
// Gets call onLoad,scroll and whenever any featureDetails changed
|
|
147
147
|
const onGridReady = (params, updatedFeatures) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
148
|
-
var
|
|
149
|
-
params.api.setGridOption(
|
|
148
|
+
var _u, _v;
|
|
149
|
+
params.api.setGridOption("rowSelection", "multiple");
|
|
150
150
|
params && setApi(params === null || params === void 0 ? void 0 : params.api);
|
|
151
151
|
setGridReadyEvent(params);
|
|
152
152
|
let currentFeatures = updatedFeatures;
|
|
@@ -159,21 +159,21 @@ function ParentForGrid(props) {
|
|
|
159
159
|
if (result.rowData) {
|
|
160
160
|
setGridData(Object.assign(Object.assign({}, gridData), { rowData: result.rowData }));
|
|
161
161
|
gridRef.current.api.hideOverlay();
|
|
162
|
-
(
|
|
162
|
+
(_u = params === null || params === void 0 ? void 0 : params.api) === null || _u === void 0 ? void 0 : _u.applyTransaction({ add: result.rowData });
|
|
163
163
|
}
|
|
164
164
|
else {
|
|
165
|
-
(
|
|
165
|
+
(_v = params === null || params === void 0 ? void 0 : params.api) === null || _v === void 0 ? void 0 : _v.applyTransaction({ add: [] });
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
else if (props.rowModelType === constants_1.ROWMODELTYPE.SERVER_SIDE) {
|
|
169
169
|
const dataSource = {
|
|
170
170
|
getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
171
|
-
var
|
|
171
|
+
var _w, _x, _y;
|
|
172
172
|
const startRow = params.request.startRow;
|
|
173
173
|
const endRow = params.request.endRow;
|
|
174
174
|
// Scroll should not exit MAX_RECORDS_TO_LOAD
|
|
175
175
|
if (endRow > maxLength && maxLength > 0) {
|
|
176
|
-
(
|
|
176
|
+
(_w = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.api) === null || _w === void 0 ? void 0 : _w.hideOverlay();
|
|
177
177
|
// supply rows for requested block to grid
|
|
178
178
|
params.success({
|
|
179
179
|
rowData: gridData.rowData,
|
|
@@ -185,7 +185,7 @@ function ParentForGrid(props) {
|
|
|
185
185
|
const response = yield getData(startRow, endRow, currentFeatures, params);
|
|
186
186
|
console.log(response, "response");
|
|
187
187
|
// simulating real server call with a 500ms delay
|
|
188
|
-
if (((
|
|
188
|
+
if (((_x = response.rowData) === null || _x === void 0 ? void 0 : _x.length) > 0) {
|
|
189
189
|
setGridData(Object.assign(Object.assign({}, gridData), { rowData: response.rowData }));
|
|
190
190
|
gridRef.current.api.hideOverlay();
|
|
191
191
|
// supply rows for requested block to grid
|
|
@@ -195,7 +195,7 @@ function ParentForGrid(props) {
|
|
|
195
195
|
else {
|
|
196
196
|
// params.fail();
|
|
197
197
|
const gridRows = startRow >= constants_1.BLOCK_SIZE ? gridData.rowData : [];
|
|
198
|
-
if (!((
|
|
198
|
+
if (!((_y = params === null || params === void 0 ? void 0 : params.parentNode) === null || _y === void 0 ? void 0 : _y.id))
|
|
199
199
|
gridRef.current.api.showNoRowsOverlay();
|
|
200
200
|
params.success({ rowData: gridRows });
|
|
201
201
|
return;
|
|
@@ -421,6 +421,9 @@ function ParentForGrid(props) {
|
|
|
421
421
|
defaultFilters, createView: props === null || props === void 0 ? void 0 : props.createView, enableViewCreate: (_k = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _k === void 0 ? void 0 : _k.enableViewCreate, filterModelText: (_l = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _l === void 0 ? void 0 : _l.filterModelText, sortModelText: (_m = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _m === void 0 ? void 0 : _m.sortModelText, recordDetailModelText: (_o = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _o === void 0 ? void 0 : _o.recordDetailModelText, sidePanelText: (_p = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _p === void 0 ? void 0 : _p.sidePanelText, sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions)
|
|
422
422
|
? props.sortOptions
|
|
423
423
|
: constants_1.COLUMN_SORT_OPTIONS, filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions, clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters, setGridData, gridApi: gridRef, updateColumnsForGrid: props === null || props === void 0 ? void 0 : props.updateColumnsForGrid, enableManageColumnsCallback: props.enableManageColumnsCallback, columnToRender: gridData.columnData, selectedGroup: selectedGroup, setSelectedGroup: setSelectedGroup, initialCheckBoxData: initialCheckBoxData, intialColumns,
|
|
424
|
-
setIntialColumns, enableAdvancedFilter: props === null || props === void 0 ? void 0 : props.enableAdvancedFilter }, ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })), { conditionsToDisplay: props === null || props === void 0 ? void 0 : props.conditionsToDisplay }) }, { children: ((_q = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _q === void 0 ? void 0 : _q.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle,
|
|
424
|
+
setIntialColumns, enableAdvancedFilter: props === null || props === void 0 ? void 0 : props.enableAdvancedFilter }, ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })), { conditionsToDisplay: props === null || props === void 0 ? void 0 : props.conditionsToDisplay }) }, { children: ((_q = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _q === void 0 ? void 0 : _q.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: Object.assign(Object.assign({}, gridStyle), { height: ((_r = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _r === void 0 ? void 0 : _r.displayFeaturesHeader) &&
|
|
425
|
+
gridStyle.height
|
|
426
|
+
? gridStyle.height - constants_1.ROW_HEIGHT
|
|
427
|
+
: gridStyle.height }), gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef })] }) })) }) }));
|
|
425
428
|
}
|
|
426
429
|
exports.default = ParentForGrid;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const skeleton_1 = require("primereact/skeleton");
|
|
5
|
+
const FeatureSkeleton = ({ height, width }) => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: height ? height : "30px", width: width ? width : "30px" }));
|
|
7
|
+
};
|
|
8
|
+
exports.default = FeatureSkeleton;
|