sccoreui 5.9.62 → 5.9.63
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/components/ag-grid/advancedFeature/custom-sort.js +5 -6
- package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js +13 -12
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +5 -5
- package/dist/components/ag-grid/advancedFeature/record-detail.js +2 -2
- package/dist/components/ag-grid/context-provider.js +7 -3
- package/dist/components/ag-grid/parent-for-grid.js +9 -4
- package/dist/types/components/ag-grid/Types.d.ts +38 -0
- package/dist/types/components/ag-grid/context-provider.d.ts +6 -1
- package/package.json +1 -1
|
@@ -8,11 +8,10 @@ const overlaypanel_1 = require("primereact/overlaypanel");
|
|
|
8
8
|
const radiobutton_1 = require("primereact/radiobutton");
|
|
9
9
|
const button_1 = require("primereact/button");
|
|
10
10
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
11
|
-
const constants_1 = require("../constants");
|
|
12
11
|
const context_provider_1 = require("../context-provider");
|
|
13
12
|
function Sort() {
|
|
14
13
|
var _a;
|
|
15
|
-
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
14
|
+
const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
15
|
const showShort = (0, react_1.useRef)(null);
|
|
17
16
|
const [sortInfo, setSortInfo] = (0, react_1.useState)();
|
|
18
17
|
const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
@@ -89,9 +88,9 @@ function Sort() {
|
|
|
89
88
|
}, [sortValue, sortBy]);
|
|
90
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 ${isOverlayOpened || featureDetails.sort.isSortable
|
|
91
90
|
? "bg-primary-50"
|
|
92
|
-
: ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "icon-32x32 hover:bg-primary-50", text: true, 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
|
+
: ""}` }, { 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, { className: "icon-32x32 hover:bg-primary-50", text: true, 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
|
|
93
92
|
? "text-gray-700"
|
|
94
|
-
: "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: "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
|
+
: "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) => {
|
|
95
94
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
96
95
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
97
96
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${isSelected && "bg-primary-25"} cursor-pointer border-round-md flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700`, 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 ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
|
|
@@ -99,12 +98,12 @@ function Sort() {
|
|
|
99
98
|
else {
|
|
100
99
|
return null;
|
|
101
100
|
}
|
|
102
|
-
}) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_a =
|
|
101
|
+
}) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
|
|
103
102
|
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
|
|
104
103
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer border-round-md pl-0 px-3 py-2 flex align-items-center gap-2`, onClick: () => {
|
|
105
104
|
onSelectSortType(eachOption);
|
|
106
105
|
// setSortBy(eachOption);
|
|
107
106
|
} }, { 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));
|
|
108
|
-
}) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: "Apply" }))] }))] }))] })));
|
|
107
|
+
}) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.clearAction) ? sortModelText.clearAction : "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.applyAction) ? sortModelText.applyAction : "Apply" }))] }))] }))] })));
|
|
109
108
|
}
|
|
110
109
|
exports.default = Sort;
|
|
@@ -11,7 +11,7 @@ const inputnumber_1 = require("primereact/inputnumber");
|
|
|
11
11
|
const calendar_1 = require("primereact/calendar");
|
|
12
12
|
const multi_select_dropdown_1 = tslib_1.__importDefault(require("../../../../multi-select-dropdown/multi-select-dropdown"));
|
|
13
13
|
const Condtions = (props) => {
|
|
14
|
-
const { columnName, condition, value, columnsArray, conditionsArray, index, id, setEnbleApply, updateconditionsArray, removeConditionFromArray, addEmptyCondition, condtionslenght, conditionType, conditionTypes, handleConditionType } = props;
|
|
14
|
+
const { columnName, condition, value, columnsArray, conditionsArray, index, id, setEnbleApply, updateconditionsArray, removeConditionFromArray, addEmptyCondition, condtionslenght, conditionType, conditionTypes, handleConditionType, filterModelText } = props;
|
|
15
15
|
const onAddCondtion = (index) => {
|
|
16
16
|
addEmptyCondition(index);
|
|
17
17
|
};
|
|
@@ -50,7 +50,7 @@ const Condtions = (props) => {
|
|
|
50
50
|
const dataType = (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.columnType) ? selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.columnType : 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: "border-noround-left w-12rem focus:shadow-none lh-44 h-44", value: value, placeholder: "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem 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) }));
|
|
54
54
|
}
|
|
55
55
|
case "integer": {
|
|
56
56
|
const handleOnchangeEvent = (eventValue) => {
|
|
@@ -81,7 +81,7 @@ const Condtions = (props) => {
|
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
if (condition === "9" || condition === "20") {
|
|
84
|
-
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left lh-44 h-44 w-12rem dropdown-focus-none", value: value.includes(",") ? value.replace(",", "-") : value, placeholder: "Enter", onChange: (event) => handleOnchangeEvent(event.target.value) })
|
|
84
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left lh-44 h-44 w-12rem dropdown-focus-none", value: value.includes(",") ? value.replace(",", "-") : value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input) ? filterModelText.elementThreePlaceHolder_Input : "Enter", onChange: (event) => handleOnchangeEvent(event.target.value) })
|
|
85
85
|
// <div className="flex">
|
|
86
86
|
// <InputNumber
|
|
87
87
|
// disabled={!condition}
|
|
@@ -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 lh-44 h-44 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("-", '')); } }));
|
|
103
|
+
return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem lh-44 h-44 remove-focus", value: value, type: "number", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input_Number) ? filterModelText.elementThreePlaceHolder_Input_Number : "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)
|
|
@@ -109,7 +109,7 @@ const Condtions = (props) => {
|
|
|
109
109
|
handleDynamicFieldState(`${value}`);
|
|
110
110
|
// }
|
|
111
111
|
};
|
|
112
|
-
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left dropdown-focus-none", value: parseInt(value), options: selectedColumn.options, optionLabel: "label", placeholder: "Select", disabled: !condition, onChange: (event) => handleOnchangeEvent(event.value) }));
|
|
112
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left dropdown-focus-none", value: parseInt(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) => handleOnchangeEvent(event.value) }));
|
|
113
113
|
}
|
|
114
114
|
case "date": {
|
|
115
115
|
const convertDateToISO = (date) => {
|
|
@@ -126,23 +126,24 @@ const Condtions = (props) => {
|
|
|
126
126
|
handleDynamicFieldState(valueString);
|
|
127
127
|
};
|
|
128
128
|
if (condition === "9" || condition === "20") {
|
|
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 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) }));
|
|
129
|
+
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: true, disabled: !condition, selectionMode: "range", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: "condtion-dropdown border-noround-left 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
|
-
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 filter-calendar", value: value, onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
131
|
+
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: "single", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: "condtion-dropdown border-noround-left filter-calendar", value: value, onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
132
132
|
}
|
|
133
133
|
case "multi": {
|
|
134
|
-
return ((0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, { className: "filter-multi-dropdown w-12rem ", value: value, hidePanelHeader: true, maxSelectedLabels: 1, onChange: (event) => handleDynamicFieldState(event.value), placeholder: "Select", options: selectedColumn.options, dropdownType: "default", optionLabel: "name" }));
|
|
134
|
+
return ((0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, { className: "filter-multi-dropdown w-12rem ", 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, dropdownType: "default", optionLabel: "name" }));
|
|
135
135
|
}
|
|
136
136
|
case "decimal": {
|
|
137
|
-
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { className: "border-noround-left w-12rem filter-input-decimal", value: value, placeholder: "Enter", onChange: (event) => handleDynamicFieldState(event.target.value), maxFractionDigits: 2 }));
|
|
137
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { className: "border-noround-left w-12rem filter-input-decimal", value: value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input_Number) ? filterModelText.elementThreePlaceHolder_Input_Number : "Enter", onChange: (event) => handleDynamicFieldState(event.target.value), maxFractionDigits: 2 }));
|
|
138
138
|
}
|
|
139
139
|
case "percent": {
|
|
140
|
-
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", value: value, options: [], optionLabel: "name", placeholder: "Select", onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
140
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", value: value, options: [], optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", onChange: (event) => handleDynamicFieldState(event.value) }));
|
|
141
141
|
}
|
|
142
142
|
default:
|
|
143
|
-
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", options: [], value: value, optionLabel: "name", placeholder: "Select", disabled: true }));
|
|
143
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", options: [], value: value, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", disabled: true }));
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
-
|
|
146
|
+
console.log(filterModelText);
|
|
147
|
+
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-6rem 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`, 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) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround 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: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementTwoPlaceHolder) ? filterModelText.elementTwoPlaceHolder : "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-15rem" }), renderDynamicField(columnName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center ml-4 gap-3 mr-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "focus:shadow-none sc_icon_hover h-auto p-0", 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: "focus:shadow-none sc_icon_hover h-auto p-0", onClick: () => onRemoveCondtion(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
|
|
147
148
|
};
|
|
148
149
|
exports.default = Condtions;
|
|
@@ -13,7 +13,7 @@ const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"))
|
|
|
13
13
|
const context_provider_1 = require("../../context-provider");
|
|
14
14
|
const inputtext_1 = require("primereact/inputtext");
|
|
15
15
|
const TableFilter = () => {
|
|
16
|
-
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
16
|
+
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
17
17
|
const columnId = "field";
|
|
18
18
|
const columnName = "headerName";
|
|
19
19
|
const showFilter = (0, react_1.useRef)(null);
|
|
@@ -97,7 +97,7 @@ const TableFilter = () => {
|
|
|
97
97
|
};
|
|
98
98
|
const renderCondtion = (conditions, key) => {
|
|
99
99
|
const { columnName, condition, value, id } = conditions;
|
|
100
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-end" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnbleApply: (value) => setEnbleApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: updateconditionsArray, addEmptyCondition: addEmptyCondition, removeConditionFromArray: removeConditionFromArray, condtionslenght: conditionsArray.length }, key) })));
|
|
100
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-end" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnbleApply: (value) => setEnbleApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: updateconditionsArray, addEmptyCondition: addEmptyCondition, removeConditionFromArray: removeConditionFromArray, condtionslenght: conditionsArray.length, filterModelText: filterModelText }, key) })));
|
|
101
101
|
};
|
|
102
102
|
const createViewFromFilters = () => {
|
|
103
103
|
const newFilters = conditionsArray.map((condition) => {
|
|
@@ -143,12 +143,12 @@ const TableFilter = () => {
|
|
|
143
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 ||
|
|
144
144
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
145
145
|
? "#243DC6"
|
|
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} Selected`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
|
|
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) => {
|
|
147
147
|
e.preventDefault();
|
|
148
148
|
e.stopPropagation();
|
|
149
149
|
onresetFilter();
|
|
150
|
-
} }, { 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: "
|
|
150
|
+
} }, { 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) ? filterModelText.subHeader : "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-4 pr-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-auto flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
|
|
151
151
|
return ((0, jsx_runtime_1.jsx)("div", { children: renderCondtion(eachCondition, index) }, index));
|
|
152
|
-
}) })) })), (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 font-semibold", 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
|
|
152
|
+
}) })) })), (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 font-semibold", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.resetFilterAction) ? filterModelText.resetFilterAction : "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: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewAction) ? filterModelText.createViewAction : "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: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewInputPlaceHolder) ? filterModelText.createViewInputPlaceHolder : "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: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.applyAction) ? filterModelText.applyAction : "Apply", onClick: onApplyFilter, disabled: !allFieldsFilled })] }))] }))] }) }))] }));
|
|
153
153
|
};
|
|
154
154
|
exports.default = TableFilter;
|
|
@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const context_provider_1 = require("../context-provider");
|
|
6
6
|
function RecordDetail() {
|
|
7
|
-
const { totalRecords } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-2" }, { children: `Total ${totalRecords} records` })));
|
|
7
|
+
const { totalRecords, recordDetailModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-2" }, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader) ? `${recordDetailModelText.totalRecordHeader} ${totalRecords} ` : `Total ${totalRecords} records` })));
|
|
9
9
|
}
|
|
10
10
|
exports.default = RecordDetail;
|
|
@@ -6,7 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const helper_1 = require("./helper");
|
|
7
7
|
exports.FeatureContext = (0, react_1.createContext)(null);
|
|
8
8
|
function MyProvider({ children, value }) {
|
|
9
|
-
const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate } = value;
|
|
9
|
+
const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions } = value;
|
|
10
10
|
// States for sort
|
|
11
11
|
const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
|
|
12
12
|
const [sortValue, setSortValue] = (0, react_1.useState)({});
|
|
@@ -20,7 +20,7 @@ function MyProvider({ children, value }) {
|
|
|
20
20
|
// Returns based on length of filterQueries present
|
|
21
21
|
return length === 0 ? [0] : Array.from({ length }, (_, index) => index);
|
|
22
22
|
});
|
|
23
|
-
const conditionTypes = [{ id: 1, label: "AND" }, { id: 2, label: "OR" }];
|
|
23
|
+
const conditionTypes = filterConditions ? filterConditions : [{ id: 1, label: "AND" }, { id: 2, label: "OR" }];
|
|
24
24
|
const [conditionType, setConditionType] = (0, react_1.useState)((defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.logicalOperator) ? conditionTypes.find((item) => item.id === (defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.logicalOperator)) :
|
|
25
25
|
conditionTypes[0]);
|
|
26
26
|
const [globalFilters, setGlobalFilters] = (0, react_1.useState)([]);
|
|
@@ -71,7 +71,11 @@ function MyProvider({ children, value }) {
|
|
|
71
71
|
setViewName,
|
|
72
72
|
viewName,
|
|
73
73
|
createView,
|
|
74
|
-
enableViewCreate
|
|
74
|
+
enableViewCreate,
|
|
75
|
+
filterModelText,
|
|
76
|
+
sortModelText,
|
|
77
|
+
recordDetailModelText,
|
|
78
|
+
sortOptions
|
|
75
79
|
} }, { children: children })));
|
|
76
80
|
}
|
|
77
81
|
exports.default = MyProvider;
|
|
@@ -12,7 +12,7 @@ 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;
|
|
15
|
+
var _a, _b, _c, _d;
|
|
16
16
|
const [gridData, setGridData] = (0, react_1.useState)({
|
|
17
17
|
rowData: [],
|
|
18
18
|
columnData: props === null || props === void 0 ? void 0 : props.columnData,
|
|
@@ -173,11 +173,11 @@ function ParentForGrid(props) {
|
|
|
173
173
|
else if (props.rowModelType === constants_1.ROWMODELTYPE.INFINITE) {
|
|
174
174
|
const dataSource = {
|
|
175
175
|
getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
176
|
-
var
|
|
176
|
+
var _e;
|
|
177
177
|
const startRow = params.startRow;
|
|
178
178
|
const endRow = params.endRow;
|
|
179
179
|
const result = yield getData(startRow, endRow, currentFeatures);
|
|
180
|
-
if (((
|
|
180
|
+
if (((_e = result === null || result === void 0 ? void 0 : result.rowData) === null || _e === void 0 ? void 0 : _e.length) > 0) {
|
|
181
181
|
gridRef.current.api.hideOverlay();
|
|
182
182
|
params.successCallback(result === null || result === void 0 ? void 0 : result.rowData, result === null || result === void 0 ? void 0 : result.actualEndRow);
|
|
183
183
|
}
|
|
@@ -267,7 +267,12 @@ function ParentForGrid(props) {
|
|
|
267
267
|
initialFeature,
|
|
268
268
|
defaultFilters,
|
|
269
269
|
createView: props === null || props === void 0 ? void 0 : props.createView,
|
|
270
|
-
enableViewCreate: (_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.enableViewCreate
|
|
270
|
+
enableViewCreate: (_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.enableViewCreate,
|
|
271
|
+
filterModelText: (_b = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _b === void 0 ? void 0 : _b.filterModelText,
|
|
272
|
+
sortModelText: (_c = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _c === void 0 ? void 0 : _c.sortModelText,
|
|
273
|
+
recordDetailModelText: (_d = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _d === void 0 ? void 0 : _d.recordDetailModelText,
|
|
274
|
+
sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions) ? props.sortOptions : constants_1.COLUMN_SORT_OPTIONS,
|
|
275
|
+
filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions
|
|
271
276
|
} }, { children: (0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props }) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady, gridRef: gridRef })] }) })) }) }));
|
|
272
277
|
}
|
|
273
278
|
exports.default = ParentForGrid;
|
|
@@ -98,6 +98,9 @@ export interface PropsFromProduct {
|
|
|
98
98
|
shouldRefetch?: boolean;
|
|
99
99
|
noRowsOverlayComponent?: React.FC;
|
|
100
100
|
createView?: () => void;
|
|
101
|
+
dynamicText?: DynamicText;
|
|
102
|
+
sortOptions?: any[];
|
|
103
|
+
filterConditions?: FilterCondition[];
|
|
101
104
|
}
|
|
102
105
|
export interface ResoponseFromCallback {
|
|
103
106
|
totalRecords: number;
|
|
@@ -117,3 +120,38 @@ export interface ViewFilterResponse {
|
|
|
117
120
|
viewName: string;
|
|
118
121
|
viewFilter: any[];
|
|
119
122
|
}
|
|
123
|
+
interface DynamicText {
|
|
124
|
+
filterModelText: FilterModelText;
|
|
125
|
+
sortModelText: SortModelText;
|
|
126
|
+
recordDetailModelText: RecordDetailModelText;
|
|
127
|
+
}
|
|
128
|
+
export interface FilterModelText {
|
|
129
|
+
header: string;
|
|
130
|
+
subHeader: string;
|
|
131
|
+
resetFilterAction: string;
|
|
132
|
+
createViewInputPlaceHolder: string;
|
|
133
|
+
createViewAction: string;
|
|
134
|
+
applyAction: string;
|
|
135
|
+
elementOnePlaceHolder: string;
|
|
136
|
+
elementTwoPlaceHolder: string;
|
|
137
|
+
elementThreePlaceHolder_Input: string;
|
|
138
|
+
elementThreePlaceHolder_Input_Number: string;
|
|
139
|
+
elementThreePlaceHolder_DropDown: string;
|
|
140
|
+
elementThreePlaceHolder_MultiSelect: string;
|
|
141
|
+
elementThreePlaceHolder_Calender: string;
|
|
142
|
+
onSelectedFilter: string;
|
|
143
|
+
}
|
|
144
|
+
export interface SortModelText {
|
|
145
|
+
header: string;
|
|
146
|
+
clearAction: string;
|
|
147
|
+
applyAction: string;
|
|
148
|
+
onSelectedSort: string;
|
|
149
|
+
}
|
|
150
|
+
export interface RecordDetailModelText {
|
|
151
|
+
totalRecordHeader: string;
|
|
152
|
+
}
|
|
153
|
+
export interface FilterCondition {
|
|
154
|
+
id: number | string;
|
|
155
|
+
label: string;
|
|
156
|
+
}
|
|
157
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Features, GridData } from "./Types";
|
|
1
|
+
import { Features, FilterCondition, FilterModelText, GridData, RecordDetailModelText, SortModelText } from "./Types";
|
|
2
2
|
export declare const FeatureContext: import("react").Context<any>;
|
|
3
3
|
interface MyProviderProps {
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -12,6 +12,11 @@ interface MyProviderProps {
|
|
|
12
12
|
defaultFilters: any;
|
|
13
13
|
createView: () => void;
|
|
14
14
|
enableViewCreate: boolean;
|
|
15
|
+
filterModelText: FilterModelText;
|
|
16
|
+
sortModelText: SortModelText;
|
|
17
|
+
recordDetailModelText: RecordDetailModelText;
|
|
18
|
+
sortOptions: any[];
|
|
19
|
+
filterConditions: FilterCondition[];
|
|
15
20
|
};
|
|
16
21
|
}
|
|
17
22
|
declare function MyProvider({ children, value }: MyProviderProps): import("react/jsx-runtime").JSX.Element;
|