sccoreui 5.9.43 → 5.9.45
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 +37 -0
- package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js +5 -5
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +8 -4
- package/dist/components/ag-grid/context-provider.js +1 -1
- package/dist/components/ag-grid/parent-for-grid.js +11 -5
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -44,13 +44,19 @@
|
|
|
44
44
|
--fs-14: 14px;
|
|
45
45
|
--grey-bg: #101828;
|
|
46
46
|
--border-none: border-none;
|
|
47
|
+
--box-shadow-none: none;
|
|
47
48
|
}
|
|
48
49
|
|
|
50
|
+
|
|
51
|
+
|
|
49
52
|
// height and width utility classes
|
|
50
53
|
|
|
51
54
|
.h-40 {
|
|
52
55
|
height: 40px;
|
|
53
56
|
}
|
|
57
|
+
.h-44 {
|
|
58
|
+
height: 44px !important;
|
|
59
|
+
}
|
|
54
60
|
|
|
55
61
|
// @font-face {
|
|
56
62
|
// font-family: "Lato";
|
|
@@ -859,6 +865,34 @@ button[aria-expanded="true"] {
|
|
|
859
865
|
}
|
|
860
866
|
}
|
|
861
867
|
|
|
868
|
+
.sc_icon_hover {
|
|
869
|
+
&:hover {
|
|
870
|
+
svg {
|
|
871
|
+
transform: scale(1.1);
|
|
872
|
+
transition: 0.3s all;
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
|
|
878
|
+
.hide-focus {
|
|
879
|
+
&:not(.p-disabled) {
|
|
880
|
+
&.p-focus {
|
|
881
|
+
box-shadow: var(--box-shadow-none);
|
|
882
|
+
border: 1px solid var(--gray-300);
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
&:enabled {
|
|
886
|
+
&:focus {
|
|
887
|
+
box-shadow: var(--box-shadow-none);
|
|
888
|
+
border: 1px solid var(--gray-300);
|
|
889
|
+
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
|
|
895
|
+
|
|
862
896
|
.sc_multiSelect_panel {
|
|
863
897
|
.p-multiselect-items {
|
|
864
898
|
padding: 4px !important;
|
|
@@ -1946,6 +1980,9 @@ button[aria-expanded="true"] {
|
|
|
1946
1980
|
.w-25 {
|
|
1947
1981
|
width: 25%;
|
|
1948
1982
|
}
|
|
1983
|
+
.lh-44 {
|
|
1984
|
+
line-height: 44px;
|
|
1985
|
+
}
|
|
1949
1986
|
|
|
1950
1987
|
/* conditions */
|
|
1951
1988
|
.filter-dropdowns {
|
|
@@ -50,7 +50,7 @@ const Condtions = (props) => {
|
|
|
50
50
|
const dataType = (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.type) ? selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.type : selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.dataType;
|
|
51
51
|
switch (dataType === null || dataType === void 0 ? void 0 : dataType.toLowerCase()) {
|
|
52
52
|
case "string": {
|
|
53
|
-
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem mb-2 focus:shadow-none lh-44 h-44", value: value, placeholder: "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
|
|
54
54
|
}
|
|
55
55
|
case "integer": {
|
|
56
56
|
const handleOnchangeEvent = (eventValue) => {
|
|
@@ -80,7 +80,7 @@ const Condtions = (props) => {
|
|
|
80
80
|
setEnbleApply(false); // Set enableApply to false when the input is invalid
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
|
-
if (
|
|
83
|
+
if (condition === "9" || condition === "20") {
|
|
84
84
|
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left mb-2 w-12rem dropdown-focus-none", value: value.includes(",") ? value.replace(",", "-") : value, placeholder: "Enter", onChange: (event) => handleOnchangeEvent(event.target.value) })
|
|
85
85
|
// <div className="flex">
|
|
86
86
|
// <InputNumber
|
|
@@ -100,7 +100,7 @@ const Condtions = (props) => {
|
|
|
100
100
|
// </div>
|
|
101
101
|
);
|
|
102
102
|
}
|
|
103
|
-
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem mb-2
|
|
103
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem mb-2 remove-focus", value: value, type: "number", placeholder: "Enter", onChange: (event) => { var _a; return handleDynamicFieldState((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace("-", '')); } }));
|
|
104
104
|
}
|
|
105
105
|
case "single": {
|
|
106
106
|
// let optionValue = selectedColumn?.options.find((each: any) => each[selectedColumn['key']] === value)
|
|
@@ -125,7 +125,7 @@ const Condtions = (props) => {
|
|
|
125
125
|
let valueString = value.length === 2 ? value.map(convertDateToISO).join(",") : value;
|
|
126
126
|
handleDynamicFieldState(valueString);
|
|
127
127
|
};
|
|
128
|
-
if (
|
|
128
|
+
if (condition === "9" || condition === "20") {
|
|
129
129
|
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: true, disabled: !condition, selectionMode: "range", placeholder: "Select", className: "condtion-dropdown border-noround-left mb-2 filter-calendar", value: (value === null || value === void 0 ? void 0 : value.includes(",")) ? (_a = value === null || value === void 0 ? void 0 : value.split(",")) === null || _a === void 0 ? void 0 : _a.map((date) => date ? new Date(date) : null) : null, onChange: (event) => handleOnchangeEvent(event.value) }));
|
|
130
130
|
}
|
|
131
131
|
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: "single", placeholder: "Select", className: "condtion-dropdown border-noround-left mb-2 filter-calendar", value: value, onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
@@ -143,6 +143,6 @@ const Condtions = (props) => {
|
|
|
143
143
|
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem mb-2 dropdown-focus-none", options: [], value: value, optionLabel: "name", placeholder: "Select", disabled: true }));
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex filter-dropdowns align-items-center" }, { children: [index !== 0 ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown w-5rem mb-2 mr-2
|
|
146
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex filter-dropdowns align-items-center" }, { children: [index !== 0 ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown w-5rem mb-2 mr-2 remove-focus", options: conditionTypes, optionLabel: "label", placeholder: "Select", value: conditionType, disabled: index !== 1, onChange: (event) => handleConditionType(event.target.value) }) : "", (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: `condtion-dropdown dropdown-focus-none border-noround-right w-12rem mb-2`, options: columnsArray, optionLabel: "name", placeholder: "Select", value: columnName, onChange: (event) => onUpdateColumnName(event.value) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround mb-2 remove-focus border-x-none w-12rem", 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: "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-15rem" }), renderDynamicField(columnName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex ml-1 gap-1 px-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "mb-2 focus:shadow-none p-1 sc_icon_hover", onClick: () => onAddCondtion(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: condtionslenght === 1, className: "mb-2 focus:shadow-none p-1 sc_icon_hover", onClick: () => onRemoveCondtion(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
|
|
147
147
|
};
|
|
148
148
|
exports.default = Condtions;
|
|
@@ -11,6 +11,7 @@ const constants_1 = tslib_1.__importDefault(require("../../constants"));
|
|
|
11
11
|
const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"));
|
|
12
12
|
// import "./TableFilter.module.scss";
|
|
13
13
|
const context_provider_1 = require("../../context-provider");
|
|
14
|
+
const inputtext_1 = require("primereact/inputtext");
|
|
14
15
|
const TableFilter = () => {
|
|
15
16
|
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
17
|
const columnId = "field";
|
|
@@ -35,8 +36,8 @@ const TableFilter = () => {
|
|
|
35
36
|
};
|
|
36
37
|
const applyAdvancedFilter = (array) => {
|
|
37
38
|
const allQueries = array.map((query) => {
|
|
38
|
-
const column = {
|
|
39
|
-
const operation =
|
|
39
|
+
const column = { code: query.columnName.code };
|
|
40
|
+
const operation = query.condition;
|
|
40
41
|
let queryToAdd = {
|
|
41
42
|
selectedColumn: column,
|
|
42
43
|
selectedOperation: operation,
|
|
@@ -106,6 +107,9 @@ const TableFilter = () => {
|
|
|
106
107
|
createView(viewDetails);
|
|
107
108
|
showFilter.current.toggle(false);
|
|
108
109
|
};
|
|
110
|
+
const filterLogoToggle = () => {
|
|
111
|
+
setIsOverlayOpened(false), setDisplayInput(false), setViewName("");
|
|
112
|
+
};
|
|
109
113
|
(0, react_1.useEffect)(() => {
|
|
110
114
|
if (conditionsArray.length === 0) {
|
|
111
115
|
setConditionsArray([defaultCondtion]);
|
|
@@ -131,8 +135,8 @@ const TableFilter = () => {
|
|
|
131
135
|
: "bg-white"}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => onClickFilter(e) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 20, color: isOverlayOpened ||
|
|
132
136
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
133
137
|
? "#243DC6"
|
|
134
|
-
: "#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" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} Selected`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: onresetFilter }, { 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:
|
|
138
|
+
: "#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" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} Selected`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: onresetFilter }, { 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: "Filters" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: "Specify your search parameters." }))] })), (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-4 pr-0" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-auto" }, { children: conditionsArray.map((eachCondition, index) => {
|
|
135
139
|
return ((0, jsx_runtime_1.jsx)("div", { children: renderCondtion(eachCondition, index) }, index));
|
|
136
|
-
}) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "focus:shadow-none", label: "Reset Filter", onClick: onresetFilter }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 focus:shadow-none mr-3", label: "Create View", onClick: () => setDisplayInput(true), disabled: !allFieldsFilled, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && (0, jsx_runtime_1.
|
|
140
|
+
}) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "focus:shadow-none", label: "Reset Filter", onClick: onresetFilter }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 focus:shadow-none mr-3", label: "Create View", onClick: () => setDisplayInput(true), disabled: !allFieldsFilled, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-suffix` }, { children: [displayInput && ((0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setViewName(""), className: "p-0 h-auto", disabled: !viewName.length, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) })] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Enter", value: viewName, onChange: (e) => setViewName(e.target.value), className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full px-3 mr-3" })] }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold text-gray-600 p-1 focus:shadow-none text-white w-4rem", label: "Apply", onClick: onApplyFilter, disabled: !allFieldsFilled })] }))] }))] }) }))] }));
|
|
137
141
|
};
|
|
138
142
|
exports.default = TableFilter;
|
|
@@ -39,7 +39,7 @@ function MyProvider({ children, value }) {
|
|
|
39
39
|
(0, react_1.useEffect)(() => {
|
|
40
40
|
if (defaultFilters.length)
|
|
41
41
|
setGlobalFilters(defaultFilters);
|
|
42
|
-
}, []);
|
|
42
|
+
}, [defaultFilters]);
|
|
43
43
|
return ((0, jsx_runtime_1.jsx)(exports.FeatureContext.Provider, Object.assign({ value: {
|
|
44
44
|
sortValue,
|
|
45
45
|
setSortValue,
|
|
@@ -12,7 +12,6 @@ const constants_1 = require("./constants");
|
|
|
12
12
|
const loading_component_1 = tslib_1.__importDefault(require("./loading-component"));
|
|
13
13
|
const helper_1 = require("./helper");
|
|
14
14
|
function ParentForGrid(props) {
|
|
15
|
-
var _a;
|
|
16
15
|
const [gridData, setGridData] = (0, react_1.useState)({
|
|
17
16
|
rowData: [],
|
|
18
17
|
columnData: props === null || props === void 0 ? void 0 : props.columnData,
|
|
@@ -22,7 +21,7 @@ function ParentForGrid(props) {
|
|
|
22
21
|
const [totalRecords, setTotalRecords] = (0, react_1.useState)(0);
|
|
23
22
|
const [gridReadyEvent, setGridReadyEvent] = (0, react_1.useState)();
|
|
24
23
|
const [defaultSelectedRows, setDefaultSelectedRows] = (0, react_1.useState)([]);
|
|
25
|
-
const [defaultFilters] = (0, react_1.useState)((
|
|
24
|
+
const [defaultFilters, setDefaultFilters] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.defaultFilters) || []);
|
|
26
25
|
const [emptyResponse] = (0, react_1.useState)({
|
|
27
26
|
totalRecords: 0,
|
|
28
27
|
rowData: [],
|
|
@@ -173,11 +172,11 @@ function ParentForGrid(props) {
|
|
|
173
172
|
else if (props.rowModelType === constants_1.ROWMODELTYPE.INFINITE) {
|
|
174
173
|
const dataSource = {
|
|
175
174
|
getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
176
|
-
var
|
|
175
|
+
var _a;
|
|
177
176
|
const startRow = params.startRow;
|
|
178
177
|
const endRow = params.endRow;
|
|
179
178
|
const result = yield getData(startRow, endRow, currentFeatures);
|
|
180
|
-
if (((
|
|
179
|
+
if (((_a = result === null || result === void 0 ? void 0 : result.rowData) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
181
180
|
gridRef.current.api.hideOverlay();
|
|
182
181
|
params.successCallback(result === null || result === void 0 ? void 0 : result.rowData, result === null || result === void 0 ? void 0 : result.actualEndRow);
|
|
183
182
|
}
|
|
@@ -232,8 +231,15 @@ function ParentForGrid(props) {
|
|
|
232
231
|
}
|
|
233
232
|
}, [featureDetails.searchedText]);
|
|
234
233
|
(0, react_1.useEffect)(() => {
|
|
234
|
+
var _a;
|
|
235
235
|
if (api && gridReadyEvent && (props === null || props === void 0 ? void 0 : props.shouldRefetch)) {
|
|
236
|
-
|
|
236
|
+
let currentFeature = featureDetails;
|
|
237
|
+
if ((_a = props === null || props === void 0 ? void 0 : props.defaultFilters) === null || _a === void 0 ? void 0 : _a.length) {
|
|
238
|
+
currentFeature.filterQueries = (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters);
|
|
239
|
+
setDefaultFilters(props.defaultFilters);
|
|
240
|
+
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters) }));
|
|
241
|
+
}
|
|
242
|
+
callGrid(currentFeature);
|
|
237
243
|
}
|
|
238
244
|
}, [props === null || props === void 0 ? void 0 : props.shouldRefetch]);
|
|
239
245
|
// Remove all checkbox selection if any feature added
|