sccoreui 5.7.6 → 5.7.8
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 +3 -0
- package/dist/assets/sccoreui.css +1 -1
- package/dist/components/ag-grid/AgGrid.js +1 -1
- package/dist/components/ag-grid/ParentForGrid.js +14 -14
- package/dist/components/ag-grid/Types.js +23 -9
- package/dist/components/ag-grid/advancedFeature/advanced-feature.js +2 -4
- package/dist/components/ag-grid/advancedFeature/bulkActions/bulk-actions.js +19 -7
- package/dist/components/ag-grid/advancedFeature/bulkActions/input-box.js +2 -2
- package/dist/components/ag-grid/advancedFeature/custom-sort.js +44 -19
- package/dist/components/ag-grid/advancedFeature/filter/filter.js +73 -3
- package/dist/components/ag-grid/advancedFeature/filter/querty.js +120 -2
- package/dist/components/ag-grid/constants.js +35 -21
- package/dist/types/components/ag-grid/Types.d.ts +46 -9
- package/dist/types/components/ag-grid/advancedFeature/advanced-feature.d.ts +2 -2
- package/dist/types/components/ag-grid/advancedFeature/bulkActions/bulk-actions.d.ts +1 -0
- package/dist/types/components/ag-grid/advancedFeature/custom-sort.d.ts +2 -1
- package/dist/types/components/ag-grid/advancedFeature/filter/filter.d.ts +8 -2
- package/dist/types/components/ag-grid/advancedFeature/filter/querty.d.ts +9 -1
- package/dist/types/components/ag-grid/constants.d.ts +3 -19
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
@import url("./assets/flex.css");
|
|
5
5
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
// variables
|
|
9
|
+
|
|
7
10
|
@font-face {
|
|
8
11
|
font-family: 'RobotoBold';
|
|
9
12
|
src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype');
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -12,6 +12,6 @@ const infinite_row_model_1 = require("@ag-grid-community/infinite-row-model");
|
|
|
12
12
|
core_1.ModuleRegistry.registerModules([client_side_row_model_1.ClientSideRowModelModule, range_selection_1.RangeSelectionModule, infinite_row_model_1.InfiniteRowModelModule]);
|
|
13
13
|
core_2.LicenseManager.setLicenseKey("Using_this_{AG_Grid}_Enterprise_key_{AG-056800}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Sellers_Commerce_LLC}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{SellersCommerce}_only_for_{2}_Front-End_JavaScript_developers___All_Front-End_JavaScript_developers_working_on_{SellersCommerce}_need_to_be_licensed___{SellersCommerce}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{14_April_2025}____[v3]_[01]_MTc0NDU4NTIwMDAwMA==895f2234e1659afcfba586110daf0549");
|
|
14
14
|
const AgGrid = ({ style, gridOptions, onGridReady }) => {
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-quartz ", style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, Object.assign({ onGridReady: onGridReady }, gridOptions)) })) }) }));
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-quartz ", style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, Object.assign({ onGridReady: onGridReady, reactiveCustomComponents: true }, gridOptions)) })) }) }));
|
|
16
16
|
};
|
|
17
17
|
exports.default = AgGrid;
|
|
@@ -17,15 +17,11 @@ function ParentForGrid(props) {
|
|
|
17
17
|
const [featureDetails, setFeatureDetails] = (0, react_1.useState)({
|
|
18
18
|
searchedText: "",
|
|
19
19
|
filterQueries: [],
|
|
20
|
-
sort: {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
bulkAction: {
|
|
26
|
-
columnData: {},
|
|
27
|
-
updatedValue: "",
|
|
28
|
-
},
|
|
20
|
+
sort: {}
|
|
21
|
+
// bulkAction: {
|
|
22
|
+
// columnData: {},
|
|
23
|
+
// updatedValue: "",
|
|
24
|
+
// },
|
|
29
25
|
});
|
|
30
26
|
const defaultColDef = (0, react_1.useMemo)(() => {
|
|
31
27
|
return {
|
|
@@ -38,8 +34,7 @@ function ParentForGrid(props) {
|
|
|
38
34
|
}, []);
|
|
39
35
|
// Callback to products for getting data
|
|
40
36
|
const getData = (startRow, endRow) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
41
|
-
const response = (yield props.getRowData(startRow, endRow)) || [];
|
|
42
|
-
console.log(response.length, 'length of data');
|
|
37
|
+
const response = (yield props.getRowData(startRow, endRow, featureDetails)) || [];
|
|
43
38
|
return response.rowData;
|
|
44
39
|
});
|
|
45
40
|
// Gets call onLoad,scroll and whenever any featureDetails changed
|
|
@@ -68,6 +63,7 @@ function ParentForGrid(props) {
|
|
|
68
63
|
const selectedNodes = api === null || api === void 0 ? void 0 : api.getSelectedNodes();
|
|
69
64
|
const selectedData = selectedNodes.map((node) => node.data);
|
|
70
65
|
setCheckedRow(selectedData);
|
|
66
|
+
console.log(checkedRow, 'checked row');
|
|
71
67
|
console.log(selectedData, "selected from checkbox"); // Send a callback to products
|
|
72
68
|
}
|
|
73
69
|
};
|
|
@@ -84,11 +80,15 @@ function ParentForGrid(props) {
|
|
|
84
80
|
rowHeight: 60,
|
|
85
81
|
rowModelType: "infinite", // Infinite scroll
|
|
86
82
|
};
|
|
83
|
+
// Fucntion to call the grid
|
|
84
|
+
const callGrid = () => {
|
|
85
|
+
onGridReady(gridReadyEvent);
|
|
86
|
+
};
|
|
87
87
|
(0, react_1.useEffect)(() => {
|
|
88
88
|
if (api && gridReadyEvent) {
|
|
89
|
-
|
|
89
|
+
callGrid();
|
|
90
90
|
}
|
|
91
|
-
}, [featureDetails]);
|
|
92
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: style.height, width: style.width } }, { children: [(0, jsx_runtime_1.jsx)(advanced_feature_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, columnData: gridData.columnData,
|
|
91
|
+
}, [featureDetails.searchedText]);
|
|
92
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: style.height, width: style.width } }, { children: [(0, jsx_runtime_1.jsx)(advanced_feature_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, columnData: gridData.columnData, props: props, callGrid: callGrid }), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady })] })));
|
|
93
93
|
}
|
|
94
94
|
exports.default = ParentForGrid;
|
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
exports.ATTRIBUTEDATATYPES = void 0;
|
|
4
|
+
// enum columnDatatype {
|
|
5
|
+
// STRING=0,
|
|
6
|
+
// NUMBER=1,
|
|
7
|
+
// BOOLEAN=2,
|
|
8
|
+
// SELECT=4,
|
|
9
|
+
// CHECKBOX=5,
|
|
10
|
+
// MULTISELECT=6
|
|
11
|
+
// }
|
|
12
|
+
var ATTRIBUTEDATATYPES;
|
|
13
|
+
(function (ATTRIBUTEDATATYPES) {
|
|
14
|
+
ATTRIBUTEDATATYPES["STRING"] = "string";
|
|
15
|
+
ATTRIBUTEDATATYPES["DATE"] = "date";
|
|
16
|
+
ATTRIBUTEDATATYPES["INTEGER"] = "integer";
|
|
17
|
+
ATTRIBUTEDATATYPES["IMAGE"] = "image";
|
|
18
|
+
ATTRIBUTEDATATYPES["PRICE"] = "price";
|
|
19
|
+
ATTRIBUTEDATATYPES["BOOLEAN"] = "boolean";
|
|
20
|
+
ATTRIBUTEDATATYPES["DATE_AND_TIME"] = "dateandtime";
|
|
21
|
+
ATTRIBUTEDATATYPES["DECIMAL"] = "decimal";
|
|
22
|
+
ATTRIBUTEDATATYPES["PERCENT"] = "percent";
|
|
23
|
+
ATTRIBUTEDATATYPES["SELECT"] = "select";
|
|
24
|
+
ATTRIBUTEDATATYPES["MULTI_SELECT"] = "multiselect";
|
|
25
|
+
})(ATTRIBUTEDATATYPES = exports.ATTRIBUTEDATATYPES || (exports.ATTRIBUTEDATATYPES = {}));
|
|
12
26
|
// export type { ColDef as gridColType} from "@ag-grid-community/core"
|
|
@@ -5,10 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const global_search_1 = tslib_1.__importDefault(require("./global-search"));
|
|
6
6
|
const custom_sort_1 = tslib_1.__importDefault(require("./custom-sort"));
|
|
7
7
|
const record_detail_1 = tslib_1.__importDefault(require("./record-detail"));
|
|
8
|
-
const bulk_actions_1 = tslib_1.__importDefault(require("./bulkActions/bulk-actions"));
|
|
9
8
|
const filter_1 = tslib_1.__importDefault(require("./filter/filter"));
|
|
10
|
-
function AdvancedFeatures({ featureDetails, setFeatureDetails, columnData,
|
|
11
|
-
|
|
12
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(global_search_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (0, jsx_runtime_1.jsx)(filter_1.default, {})] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex " }, { children: [checkedRow.length > 1 && (0, jsx_runtime_1.jsx)(bulk_actions_1.default, { columnData: columnData }), (0, jsx_runtime_1.jsx)(custom_sort_1.default, { columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails }), (0, jsx_runtime_1.jsx)(record_detail_1.default, { totalLength: (props === null || props === void 0 ? void 0 : props.totalRowLength) || 100 })] }))] })));
|
|
9
|
+
function AdvancedFeatures({ featureDetails, setFeatureDetails, columnData, props, callGrid }) {
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(global_search_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (0, jsx_runtime_1.jsx)(filter_1.default, { columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callBackForSelect: props === null || props === void 0 ? void 0 : props.myInputData, callGrid: callGrid })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex " }, { children: [(0, jsx_runtime_1.jsx)(custom_sort_1.default, { columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callGrid: callGrid }), (0, jsx_runtime_1.jsx)(record_detail_1.default, { totalLength: (props === null || props === void 0 ? void 0 : props.totalRowLength) || 100 })] }))] })));
|
|
13
11
|
}
|
|
14
12
|
exports.default = AdvancedFeatures;
|
|
@@ -6,6 +6,8 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/
|
|
|
6
6
|
const overlaypanel_1 = require("primereact/overlaypanel");
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const input_box_1 = tslib_1.__importDefault(require("./input-box"));
|
|
9
|
+
require("./bulk-actions.scss");
|
|
10
|
+
const button_1 = tslib_1.__importDefault(require("../../../button/button"));
|
|
9
11
|
function BulkActions({ columnData }) {
|
|
10
12
|
const [activeOption, setActiveOption] = (0, react_1.useState)({});
|
|
11
13
|
const [bulkOptions, setBulkOptions] = (0, react_1.useState)([]);
|
|
@@ -22,12 +24,22 @@ function BulkActions({ columnData }) {
|
|
|
22
24
|
});
|
|
23
25
|
setBulkOptions(columns);
|
|
24
26
|
};
|
|
25
|
-
console.log(columnData, activeOption,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
console.log(columnData, activeOption, "column data in bulk action");
|
|
28
|
+
const BulkActionHeader = (props) => {
|
|
29
|
+
const { header: { label } } = props;
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-between p-4 border-bottom-1 border-gray-200" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-4 text-gray-900" }, { children: label })) })));
|
|
31
|
+
};
|
|
32
|
+
const BulkActionFooter = (props) => {
|
|
33
|
+
const { footer: { totalRecords, discardLabel, assignLabel } } = props;
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between border-top-1 border-gray-200 p-4" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900" }, { children: totalRecords })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.default, { text: true, className: "h-auto p-0", label: discardLabel }), (0, jsx_runtime_1.jsx)(button_1.default, { label: assignLabel })] }))] })));
|
|
35
|
+
};
|
|
36
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "cursor-pointer p-1 sc_icon_hover", onClick: (e) => actionRef.current.toggle(e) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "settings-01", size: 20 }) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: actionRef, className: "w-30rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: { label: "Bulk Actions" } }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: " border-right-1 p-1 border-gray-200 min-w-max flex flex-column pb-0" }, { children: bulkOptions.map((option, index) => {
|
|
37
|
+
{
|
|
38
|
+
console.log(option, "option data in map");
|
|
39
|
+
}
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ text: activeOption ? true : false, className: `text-lg px-3 focus:shadow-none border-round-lg mb-1 cursor-pointer font-medium p-button-secondary line-height-4 text-gray-600 ${(activeOption === null || activeOption === void 0 ? void 0 : activeOption.field) === (option === null || option === void 0 ? void 0 : option.field)
|
|
41
|
+
? "bg-primary-50"
|
|
42
|
+
: ""}`, onClick: () => setActiveOption(option) }, { children: option.headerName }), index));
|
|
43
|
+
}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-6 w-full" }, { children: (0, jsx_runtime_1.jsx)(input_box_1.default, { activeOption: activeOption }) }))] })), (0, jsx_runtime_1.jsx)(BulkActionFooter, { footer: { totalRecords: "204 Total Records", discardLabel: "Discard", assignLabel: "Assign" } })] }))] }));
|
|
32
44
|
}
|
|
33
45
|
exports.default = BulkActions;
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
// import { Button } from "primereact/button"
|
|
5
|
-
|
|
5
|
+
// import { Button } from "primereact/button"
|
|
6
6
|
const inputtext_1 = require("primereact/inputtext");
|
|
7
7
|
function BoxOfInput({ activeOption }) {
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " text-gray-900 flex lext-lg font-semibold line-height-4 mb-1 align-items-center" }, { children: ["Change ", activeOption.headerName] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", className: "
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " text-gray-900 flex lext-lg font-semibold line-height-4 mb-1 align-items-center" }, { children: ["Change ", activeOption.headerName] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", className: "w-full", placeholder: activeOption.headerName }), (0, jsx_runtime_1.jsx)("div", { className: `flex bg-white gap-2 pl-2 pr-2 justify-content-between align-items-center mt-3 absolute ` })] })) })
|
|
9
9
|
// <div>
|
|
10
10
|
// <div className=" text-gray-900 flex lext-lg font-semibold line-height-4 mb-1 align-items-center">Change Status</div>
|
|
11
11
|
// {/* <Dropdown
|
|
@@ -9,38 +9,63 @@ 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
11
|
const constants_1 = require("../constants");
|
|
12
|
-
function Sort({ columnData, featureDetails, setFeatureDetails }) {
|
|
12
|
+
function Sort({ columnData, featureDetails, setFeatureDetails, callGrid }) {
|
|
13
13
|
var _a;
|
|
14
|
-
const [sortValue, setSortValue] = (0, react_1.useState)(
|
|
15
|
-
const [sortBy, setSortBy] = (0, react_1.useState)(
|
|
14
|
+
const [sortValue, setSortValue] = (0, react_1.useState)();
|
|
15
|
+
const [sortBy, setSortBy] = (0, react_1.useState)({});
|
|
16
16
|
const [isOverlayOpened, setIsOverlayOpened] = (0, react_1.useState)(false);
|
|
17
17
|
const showShort = (0, react_1.useRef)(null);
|
|
18
18
|
const shortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
|
|
19
19
|
const disableApply = (sortBy && sortValue) === null;
|
|
20
|
-
const
|
|
20
|
+
const onClickSort = (event) => {
|
|
21
21
|
showShort.current.toggle(event);
|
|
22
22
|
};
|
|
23
23
|
// Add selected row to state
|
|
24
|
-
const
|
|
24
|
+
const onSelectSortValue = (eachColumn) => {
|
|
25
25
|
if (eachColumn.headerName !== (sortValue === null || sortValue === void 0 ? void 0 : sortValue.headerName)) {
|
|
26
|
+
const sortDetails = {
|
|
27
|
+
isSortable: false,
|
|
28
|
+
columnToSort: eachColumn,
|
|
29
|
+
orderToSort: sortBy,
|
|
30
|
+
};
|
|
31
|
+
if ((Object === null || Object === void 0 ? void 0 : Object.keys(sortBy).length) > 0) {
|
|
32
|
+
sortDetails.isSortable = true;
|
|
33
|
+
}
|
|
34
|
+
addSortDetails(sortDetails);
|
|
26
35
|
setSortValue(eachColumn);
|
|
27
|
-
setSortBy(
|
|
36
|
+
// setSortBy();
|
|
28
37
|
}
|
|
29
38
|
};
|
|
30
|
-
|
|
31
|
-
const applyTableSort = (e) => {
|
|
39
|
+
const onSelectSortType = (column) => {
|
|
32
40
|
const sortDetails = {
|
|
33
|
-
isSortable:
|
|
34
|
-
columnToSort: sortValue
|
|
35
|
-
orderToSort:
|
|
41
|
+
isSortable: false,
|
|
42
|
+
columnToSort: sortValue,
|
|
43
|
+
orderToSort: column,
|
|
36
44
|
};
|
|
37
|
-
|
|
45
|
+
if ((Object === null || Object === void 0 ? void 0 : Object.keys(sortValue).length) > 0) {
|
|
46
|
+
sortDetails.isSortable = true;
|
|
47
|
+
}
|
|
48
|
+
addSortDetails(sortDetails);
|
|
49
|
+
setSortBy(column);
|
|
50
|
+
};
|
|
51
|
+
// Add sort details to parent component state
|
|
52
|
+
const addSortDetails = (sortDetails) => {
|
|
53
|
+
if (!((sortDetails === null || sortDetails === void 0 ? void 0 : sortDetails.isSortable) &&
|
|
54
|
+
(sortDetails === null || sortDetails === void 0 ? void 0 : sortDetails.columnToSort) &&
|
|
55
|
+
(sortDetails === null || sortDetails === void 0 ? void 0 : sortDetails.orderToSort))) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
38
58
|
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { sort: sortDetails }));
|
|
39
|
-
|
|
59
|
+
};
|
|
60
|
+
// Trigger action to apply
|
|
61
|
+
const applyTableSort = (e) => {
|
|
62
|
+
callGrid();
|
|
63
|
+
onClickSort(e);
|
|
64
|
+
// clearSort(e)
|
|
40
65
|
};
|
|
41
66
|
// Trigger action to clear
|
|
42
67
|
const clearSort = (e) => {
|
|
43
|
-
|
|
68
|
+
onClickSort(e);
|
|
44
69
|
setSortBy(null);
|
|
45
70
|
setSortValue(null);
|
|
46
71
|
const sortDetails = {
|
|
@@ -52,21 +77,21 @@ function Sort({ columnData, featureDetails, setFeatureDetails }) {
|
|
|
52
77
|
};
|
|
53
78
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer p-1 sc_icon_hover flex align-items-center border-round-lg ${isOverlayOpened || featureDetails.sort.isSortable
|
|
54
79
|
? "bg-primary-50"
|
|
55
|
-
: ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 px-1" }, { children: ` Selected` }))), (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (event) =>
|
|
80
|
+
: ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 px-1" }, { children: ` Selected` }))), (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (event) => onClickSort(event) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 20, color: isOverlayOpened || featureDetails.sort.isSortable
|
|
56
81
|
? "#243DC6"
|
|
57
82
|
: "#667085" }) }))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold line-height-3 text-gray-900" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
|
|
58
83
|
if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
|
|
59
84
|
const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
|
|
60
|
-
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: () =>
|
|
85
|
+
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: `${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
|
|
61
86
|
}
|
|
62
87
|
else {
|
|
63
88
|
return null;
|
|
64
89
|
}
|
|
65
|
-
}) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1" }, { children: (_a = constants_1.COLUMN_SORT_OPTIONS
|
|
66
|
-
.filter((each) => each.dataType === shortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
|
|
90
|
+
}) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "m-0" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1" }, { children: (_a = constants_1.COLUMN_SORT_OPTIONS.filter((each) => each.dataType === shortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
|
|
67
91
|
const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
|
|
68
92
|
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${seletedSort && "bg-primary-25"} cursor-pointer border-round-md pl-0 px-3 py-2 flex align-items-center gap-2`, onClick: () => {
|
|
69
|
-
|
|
93
|
+
onSelectSortType(eachOption);
|
|
94
|
+
// setSortBy(eachOption);
|
|
70
95
|
} }, { 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));
|
|
71
96
|
}) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { id: "column_sort" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-5 py-2" }, { 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: disableApply, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: "Apply" }))] }))] }))] })));
|
|
72
97
|
}
|
|
@@ -1,7 +1,77 @@
|
|
|
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
|
-
|
|
5
|
+
const button_1 = require("primereact/button");
|
|
6
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/svg-component"));
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const overlaypanel_1 = require("primereact/overlaypanel");
|
|
9
|
+
const querty_1 = tslib_1.__importDefault(require("./querty"));
|
|
10
|
+
function FilterParent({ columnData, featureDetails, setFeatureDetails, callBackForSelect, callGrid }) {
|
|
11
|
+
const filterRef = (0, react_1.useRef)(null);
|
|
12
|
+
const [queryCount, setQueryCount] = (0, react_1.useState)(1);
|
|
13
|
+
const [queries, setQueries] = (0, react_1.useState)([0]);
|
|
14
|
+
// Filter header
|
|
15
|
+
const BulkActionHeader = (props) => {
|
|
16
|
+
const { header: { label, description }, } = props;
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-between p-4 border-bottom-1 border-gray-200" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "text-lg line-height-4 text-gray-900" }, { children: [(0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "my-0" }, { children: label })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-gray-600 text-sm" }, { children: description }))] })) })));
|
|
18
|
+
};
|
|
19
|
+
// Filter footer
|
|
20
|
+
const BulkActionFooter = (props) => {
|
|
21
|
+
const { footer: { resetFilters, createLabel, applyLabel }, } = props;
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between border-top-1 border-gray-200 p-4" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 cursor-pointer", onClick: resettingFilters }, { children: resetFilters })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ text: true, className: "h-auto p-0 text-primary-400" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400" }), " ", createLabel] })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: applyLabel, onClick: applyFilters })] }))] })));
|
|
23
|
+
};
|
|
24
|
+
// Reset saved filters
|
|
25
|
+
const resettingFilters = () => {
|
|
26
|
+
emptyFilterQuries();
|
|
27
|
+
filterRef.current.toggle(false);
|
|
28
|
+
setQueryCount(1), setQueries([0]);
|
|
29
|
+
};
|
|
30
|
+
// Toggle the pop display
|
|
31
|
+
const togglePopup = (e) => {
|
|
32
|
+
var _a;
|
|
33
|
+
(_a = filterRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e);
|
|
34
|
+
setQueryCount(1), setQueries([0]);
|
|
35
|
+
};
|
|
36
|
+
// Empty filterQuries
|
|
37
|
+
const emptyFilterQuries = () => {
|
|
38
|
+
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: [] }));
|
|
39
|
+
};
|
|
40
|
+
// OnClick to +
|
|
41
|
+
const actionOnPlus = () => {
|
|
42
|
+
setQueryCount((prevCount) => prevCount + 1);
|
|
43
|
+
setQueries((prevQueries) => [...prevQueries, queryCount]);
|
|
44
|
+
};
|
|
45
|
+
// OnClick to -
|
|
46
|
+
const actionOnMinus = (index) => {
|
|
47
|
+
var _a;
|
|
48
|
+
const filterQuries = (_a = featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.filter((query) => query.idx !== index);
|
|
49
|
+
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: filterQuries }));
|
|
50
|
+
setQueryCount((prevCount) => prevCount - 1);
|
|
51
|
+
setQueries((prevQueries) => prevQueries.filter((query) => query !== index));
|
|
52
|
+
};
|
|
53
|
+
// Display query by count
|
|
54
|
+
const RenderQuery = () => {
|
|
55
|
+
return queries.map((queryIndex) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-6 flex" }, { children: (0, jsx_runtime_1.jsx)(querty_1.default, { queryId: queryIndex, columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callBackForSelect: callBackForSelect, actionOnMinus: actionOnMinus, actionOnPlus: actionOnPlus }) }), queryIndex)));
|
|
56
|
+
};
|
|
57
|
+
const applyFilters = () => {
|
|
58
|
+
if (!featureDetails.filterQueries.length) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
callGrid();
|
|
62
|
+
resettingFilters();
|
|
63
|
+
};
|
|
64
|
+
(0, react_1.useEffect)(() => {
|
|
65
|
+
var _a;
|
|
66
|
+
console.log(filterRef.current, (_a = filterRef.current) === null || _a === void 0 ? void 0 : _a.toggle, 'filter ref data');
|
|
67
|
+
}, [filterRef.current]);
|
|
68
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "hover:bg-primary-25 ml-2", onClick: (e) => { togglePopup(e); } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: filterRef, onHide: emptyFilterQuries, className: "w-45rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: {
|
|
69
|
+
label: "Filters",
|
|
70
|
+
description: "Streamline your search with filter",
|
|
71
|
+
} }), RenderQuery(), (0, jsx_runtime_1.jsx)(BulkActionFooter, { footer: {
|
|
72
|
+
resetFilters: "Reset Filters",
|
|
73
|
+
createLabel: "Create View",
|
|
74
|
+
applyLabel: "Apply",
|
|
75
|
+
} })] }))] }));
|
|
6
76
|
}
|
|
7
|
-
exports.default =
|
|
77
|
+
exports.default = FilterParent;
|
|
@@ -1,7 +1,125 @@
|
|
|
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
|
-
|
|
5
|
+
const dropdown_1 = require("primereact/dropdown");
|
|
6
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/svg-component"));
|
|
7
|
+
const button_1 = require("primereact/button");
|
|
8
|
+
const react_1 = require("react");
|
|
9
|
+
const constants_1 = require("../../constants");
|
|
10
|
+
const Types_1 = require("../../Types");
|
|
11
|
+
const inputnumber_1 = require("primereact/inputnumber");
|
|
12
|
+
const calendar_1 = require("primereact/calendar");
|
|
13
|
+
const multiselect_1 = require("primereact/multiselect");
|
|
14
|
+
function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBackForSelect, actionOnMinus, actionOnPlus, }) {
|
|
15
|
+
var _a, _b, _c;
|
|
16
|
+
const [filterOperations, setFilterOperations] = (0, react_1.useState)([]);
|
|
17
|
+
const [thirdElementValue, setThirdElementValue] = (0, react_1.useState)();
|
|
18
|
+
const [currentFilter, setCurrentFilter] = (0, react_1.useState)({
|
|
19
|
+
currentColumn: {},
|
|
20
|
+
currentOperation: {},
|
|
21
|
+
currentValue: "",
|
|
22
|
+
});
|
|
23
|
+
const [thirdElementOptions, setThirdElementOptions] = (0, react_1.useState)([]);
|
|
24
|
+
// Assign selected columns
|
|
25
|
+
const assignSelectedColumn = (column) => {
|
|
26
|
+
console.log(column, "column on selected dropdown");
|
|
27
|
+
setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentColumn: column }));
|
|
28
|
+
getFilterOperations(column);
|
|
29
|
+
// if(column?.dataType == ATTRIBUTEDATATYPES.SELECT ,column?.dataType == ATTRIBUTEDATATYPES.MULTI_SELECT){
|
|
30
|
+
// }
|
|
31
|
+
};
|
|
32
|
+
// Get operation list based on selected column datatype
|
|
33
|
+
const getFilterOperations = (column) => {
|
|
34
|
+
const filterList = constants_1.conditionsList
|
|
35
|
+
.filter(({ datatypes }) => datatypes.includes(column === null || column === void 0 ? void 0 : column.dataType))
|
|
36
|
+
.map((_a) => {
|
|
37
|
+
var { name } = _a, rest = tslib_1.__rest(_a, ["name"]);
|
|
38
|
+
return (Object.assign(Object.assign({}, rest), { name: name.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase()) }));
|
|
39
|
+
});
|
|
40
|
+
setFilterOperations(filterList);
|
|
41
|
+
};
|
|
42
|
+
// Assign selected operation
|
|
43
|
+
const assignOperation = (operation) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
44
|
+
var _d;
|
|
45
|
+
const currentColumnDataType = (_d = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _d === void 0 ? void 0 : _d.dataType;
|
|
46
|
+
setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentOperation: operation }));
|
|
47
|
+
if (currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.SELECT || currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.MULTI_SELECT) {
|
|
48
|
+
let options = yield callBackForSelect(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn, operation);
|
|
49
|
+
setThirdElementOptions(options);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
// Render element based on the current column datatype
|
|
53
|
+
const renderUIElement = (type, value, onChange, options) => {
|
|
54
|
+
switch (type) {
|
|
55
|
+
case Types_1.ATTRIBUTEDATATYPES.STRING:
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value) }));
|
|
57
|
+
case Types_1.ATTRIBUTEDATATYPES.DATE:
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: value, onChange: (e) => onChange(e.value), showIcon: true }));
|
|
59
|
+
case Types_1.ATTRIBUTEDATATYPES.INTEGER:
|
|
60
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: value, onChange: (e) => onChange(e.value), useGrouping: false }));
|
|
61
|
+
case Types_1.ATTRIBUTEDATATYPES.PRICE:
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: value, onValueChange: (e) => onChange(e.value), minFractionDigits: 2 }));
|
|
63
|
+
case Types_1.ATTRIBUTEDATATYPES.BOOLEAN:
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }));
|
|
65
|
+
case Types_1.ATTRIBUTEDATATYPES.DATE_AND_TIME:
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: value, onChange: (e) => onChange(e.value), showTime: true, hourFormat: "12" }));
|
|
67
|
+
case Types_1.ATTRIBUTEDATATYPES.DECIMAL:
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: value, onValueChange: (e) => onChange(e.value), useGrouping: false, minFractionDigits: 2 }));
|
|
69
|
+
case Types_1.ATTRIBUTEDATATYPES.PERCENT:
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { inputId: "withoutgrouping", value: value, onValueChange: (e) => onChange(e.value), useGrouping: false, minFractionDigits: 2, max: 100, maxLength: 6, suffix: "%" }));
|
|
71
|
+
case Types_1.ATTRIBUTEDATATYPES.SELECT:
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: value, onChange: (e) => onChange(e.value), options: options, optionLabel: "label", placeholder: "Select an option" }));
|
|
73
|
+
case Types_1.ATTRIBUTEDATATYPES.MULTI_SELECT:
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: value, onChange: (e) => onChange(e.value), options: options, optionLabel: "label", placeholder: "Select options", maxSelectedLabels: 3 }));
|
|
75
|
+
default:
|
|
76
|
+
return null;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
// Disable condition for plus button
|
|
80
|
+
const disableStatusPlusButton = (index) => {
|
|
81
|
+
var _a, _b;
|
|
82
|
+
console.log(index, queryId, "index and query id");
|
|
83
|
+
let status = true;
|
|
84
|
+
if (((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName) &&
|
|
85
|
+
((_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation) === null || _b === void 0 ? void 0 : _b.name)) {
|
|
86
|
+
status = false;
|
|
87
|
+
}
|
|
88
|
+
console.log(status, "status of action");
|
|
89
|
+
return status;
|
|
90
|
+
};
|
|
91
|
+
// Disable condition for minus button
|
|
92
|
+
const disableStatusMinusButton = (index) => {
|
|
93
|
+
let status = true;
|
|
94
|
+
if (index > 0) {
|
|
95
|
+
status = false;
|
|
96
|
+
}
|
|
97
|
+
return status;
|
|
98
|
+
};
|
|
99
|
+
(0, react_1.useEffect)(() => {
|
|
100
|
+
setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentValue: thirdElementValue }));
|
|
101
|
+
}, [thirdElementValue]);
|
|
102
|
+
(0, react_1.useEffect)(() => {
|
|
103
|
+
var _a, _b;
|
|
104
|
+
const columnName = (_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName;
|
|
105
|
+
const operationName = (_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation) === null || _b === void 0 ? void 0 : _b.name;
|
|
106
|
+
const updatedValue = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentValue;
|
|
107
|
+
console.log(columnName, operationName, updatedValue, "all conditions");
|
|
108
|
+
if (columnName && operationName && updatedValue) {
|
|
109
|
+
const newQuery = {
|
|
110
|
+
idx: queryId,
|
|
111
|
+
selectedColumn: currentFilter.currentColumn,
|
|
112
|
+
selectedOperation: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation,
|
|
113
|
+
value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentValue,
|
|
114
|
+
};
|
|
115
|
+
const presentQueries = featureDetails.filterQueries;
|
|
116
|
+
presentQueries[queryId] = newQuery;
|
|
117
|
+
// presentQueries.push(newQuery)
|
|
118
|
+
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: presentQueries }));
|
|
119
|
+
}
|
|
120
|
+
}, [currentFilter]);
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 w-30rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: currentFilter.currentColumn, placeholder: "Select", options: columnData, optionLabel: "headerName", onChange: (e) => assignSelectedColumn(e.value) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation, className: "border-left-none", placeholder: "Select", options: filterOperations, optionLabel: "name", onChange: (e) => assignOperation(e.value), disabled: !((_a = currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName) }), renderUIElement(((_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _b === void 0 ? void 0 : _b.dataType)
|
|
122
|
+
? (_c = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _c === void 0 ? void 0 : _c.dataType
|
|
123
|
+
: Types_1.ATTRIBUTEDATATYPES.STRING, thirdElementValue, setThirdElementValue, thirdElementOptions)] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, disabled: disableStatusPlusButton(queryId), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 18 }), onClick: () => actionOnPlus(queryId) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: disableStatusMinusButton(queryId), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 18 }), onClick: () => actionOnMinus(queryId) })] }))] })));
|
|
6
124
|
}
|
|
7
125
|
exports.default = Querty;
|
|
@@ -1,25 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
|
|
5
|
-
(function (ATTRIBUTEDATATYPES) {
|
|
6
|
-
ATTRIBUTEDATATYPES["STRING"] = "string";
|
|
7
|
-
ATTRIBUTEDATATYPES["DATE"] = "date";
|
|
8
|
-
ATTRIBUTEDATATYPES["INTEGER"] = "integer";
|
|
9
|
-
ATTRIBUTEDATATYPES["IMAGE"] = "image";
|
|
10
|
-
ATTRIBUTEDATATYPES["CURRENCY"] = "currency";
|
|
11
|
-
ATTRIBUTEDATATYPES["BOOLEAN"] = "boolean";
|
|
12
|
-
ATTRIBUTEDATATYPES["DATE_AND_TIME"] = "dateandtime";
|
|
13
|
-
ATTRIBUTEDATATYPES["DECIMAL"] = "decimal";
|
|
14
|
-
ATTRIBUTEDATATYPES["PERCENT"] = "percent";
|
|
15
|
-
ATTRIBUTEDATATYPES["SELECT"] = "select";
|
|
16
|
-
ATTRIBUTEDATATYPES["MULTI_SELECT"] = "multiselect";
|
|
17
|
-
})(ATTRIBUTEDATATYPES = exports.ATTRIBUTEDATATYPES || (exports.ATTRIBUTEDATATYPES = {}));
|
|
3
|
+
exports.conditionsList = exports.COLUMN_SORT_OPTIONS = void 0;
|
|
4
|
+
const Types_1 = require("./Types");
|
|
18
5
|
exports.COLUMN_SORT_OPTIONS = [
|
|
19
|
-
{ id: 1, label: "Low - High", sortId: 1, dataType: ATTRIBUTEDATATYPES.INTEGER },
|
|
20
|
-
{ id: 2, label: "High - Low", sortId: 2, dataType: ATTRIBUTEDATATYPES.INTEGER },
|
|
21
|
-
{ id: 3, label: "A - Z", sortId: 1, dataType: ATTRIBUTEDATATYPES.STRING },
|
|
22
|
-
{ id: 4, label: "Z - A", sortId: 2, dataType: ATTRIBUTEDATATYPES.STRING },
|
|
23
|
-
{ id: 5, sortId: 1, label: "Min -Max", dataType: ATTRIBUTEDATATYPES.DATE },
|
|
24
|
-
{ id: 6, sortId: 2, label: "Max - Min", dataType: ATTRIBUTEDATATYPES.DATE },
|
|
6
|
+
{ id: 1, label: "Low - High", sortId: 1, dataType: Types_1.ATTRIBUTEDATATYPES.INTEGER },
|
|
7
|
+
{ id: 2, label: "High - Low", sortId: 2, dataType: Types_1.ATTRIBUTEDATATYPES.INTEGER },
|
|
8
|
+
{ id: 3, label: "A - Z", sortId: 1, dataType: Types_1.ATTRIBUTEDATATYPES.STRING },
|
|
9
|
+
{ id: 4, label: "Z - A", sortId: 2, dataType: Types_1.ATTRIBUTEDATATYPES.STRING },
|
|
10
|
+
{ id: 5, sortId: 1, label: "Min -Max", dataType: Types_1.ATTRIBUTEDATATYPES.DATE },
|
|
11
|
+
{ id: 6, sortId: 2, label: "Max - Min", dataType: Types_1.ATTRIBUTEDATATYPES.DATE },
|
|
12
|
+
];
|
|
13
|
+
exports.conditionsList = [
|
|
14
|
+
{ name: "contains all of", datatypes: ["boolean", "select"], code: "1" },
|
|
15
|
+
{ name: "contains any of ", datatypes: ["string", "select"], code: "2" },
|
|
16
|
+
{ name: "doesn’t contain all of ", datatypes: ["boolean"], code: "3" },
|
|
17
|
+
{ name: "doesn’t contain any of", datatypes: ["string"], code: "4" },
|
|
18
|
+
{ name: "ends with any of", datatypes: ["string"], code: "5" },
|
|
19
|
+
{ name: "is after", datatypes: ["date"], code: "6" },
|
|
20
|
+
{ name: "is any of", datatypes: ["boolean"], code: "7" },
|
|
21
|
+
{ name: "is before", datatypes: ["date"], code: "8" },
|
|
22
|
+
{ name: "is between", datatypes: ["integer", "date"], code: "9" },
|
|
23
|
+
{ name: "is (not) equal to", datatypes: ["integer", "date"], code: "10" },
|
|
24
|
+
{ name: "is (not) equal to all of", datatypes: ["boolean"], code: "11" },
|
|
25
|
+
{ name: "is (not) equal to any of", datatypes: ["string"], code: "12" },
|
|
26
|
+
{ name: "is greater than", datatypes: ["integer"], code: "13" },
|
|
27
|
+
{ name: "is greater than or equalto", datatypes: ["integer"], code: "14" },
|
|
28
|
+
{ name: "is known", datatypes: ["boolean", "integer", "string"], code: "15" },
|
|
29
|
+
{ name: "is less than", datatypes: ["integer", "date"], code: "16" },
|
|
30
|
+
{ name: "is less than or equal to", datatypes: ["integer"], code: "17" },
|
|
31
|
+
{ name: "is more than", datatypes: ["integer", "date"], code: "18" },
|
|
32
|
+
{ name: "is none of", datatypes: ["boolean"], code: "19" },
|
|
33
|
+
{ name: "is not between", datatypes: ["integer", "date"], code: "20" },
|
|
34
|
+
{ name: "is unknown", datatypes: ["boolean", "integer", "string"], code: "21" },
|
|
35
|
+
{ name: "starts with any of ", datatypes: ["string"], code: "22" },
|
|
36
|
+
{ name: "is equal to", datatypes: ["integer", "date"], code: "23" },
|
|
37
|
+
{ name: "is equal to all of", datatypes: ["boolean"], code: "24" },
|
|
38
|
+
{ name: "is equal to any of", datatypes: ["string"], code: "25" }
|
|
25
39
|
];
|
|
@@ -21,15 +21,52 @@ export interface StatusOptions {
|
|
|
21
21
|
name: string;
|
|
22
22
|
value: number;
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
export interface SortType {
|
|
25
|
+
id: number;
|
|
26
|
+
label: string;
|
|
27
|
+
sortId: number;
|
|
28
|
+
dataType: string;
|
|
29
|
+
}
|
|
30
|
+
export interface Sort {
|
|
31
|
+
isSortable: boolean;
|
|
32
|
+
columnToSort: ColumnDef;
|
|
33
|
+
orderToSort: SortType;
|
|
34
|
+
}
|
|
35
|
+
export interface Operation {
|
|
36
|
+
name: string;
|
|
37
|
+
datatypes: string[];
|
|
38
|
+
code: string | number;
|
|
39
|
+
}
|
|
40
|
+
export interface Filter {
|
|
41
|
+
idx: number;
|
|
42
|
+
selectedColumn: ColumnDef;
|
|
43
|
+
selectedOperation: Operation;
|
|
44
|
+
value: any;
|
|
45
|
+
}
|
|
46
|
+
export interface Features {
|
|
47
|
+
searchedText: string;
|
|
48
|
+
filterQueries: Filter[] | [];
|
|
49
|
+
sort: Sort | {};
|
|
50
|
+
}
|
|
51
|
+
export interface ParentProp {
|
|
52
|
+
}
|
|
53
|
+
export declare enum ATTRIBUTEDATATYPES {
|
|
54
|
+
STRING = "string",
|
|
55
|
+
DATE = "date",
|
|
56
|
+
INTEGER = "integer",
|
|
57
|
+
IMAGE = "image",
|
|
58
|
+
PRICE = "price",
|
|
59
|
+
BOOLEAN = "boolean",
|
|
60
|
+
DATE_AND_TIME = "dateandtime",
|
|
61
|
+
DECIMAL = "decimal",
|
|
62
|
+
PERCENT = "percent",
|
|
63
|
+
SELECT = "select",
|
|
64
|
+
MULTI_SELECT = "multiselect"
|
|
31
65
|
}
|
|
32
66
|
export interface ColumnDef extends ColDef {
|
|
33
|
-
dataType:
|
|
67
|
+
dataType: ATTRIBUTEDATATYPES.STRING | ATTRIBUTEDATATYPES.INTEGER | ATTRIBUTEDATATYPES.BOOLEAN | ATTRIBUTEDATATYPES.SELECT | ATTRIBUTEDATATYPES.MULTI_SELECT;
|
|
68
|
+
isFilterable: boolean;
|
|
69
|
+
isSortable: boolean;
|
|
70
|
+
maxLength?: number;
|
|
71
|
+
code?: number;
|
|
34
72
|
}
|
|
35
|
-
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
declare function AdvancedFeatures({ featureDetails, setFeatureDetails, columnData,
|
|
1
|
+
declare function AdvancedFeatures({ featureDetails, setFeatureDetails, columnData, props, callGrid }: {
|
|
2
2
|
featureDetails: any;
|
|
3
3
|
setFeatureDetails: any;
|
|
4
4
|
columnData: any;
|
|
5
|
-
checkedRow: any;
|
|
6
5
|
props: any;
|
|
6
|
+
callGrid: any;
|
|
7
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export default AdvancedFeatures;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
declare function Sort({ columnData, featureDetails, setFeatureDetails }: {
|
|
1
|
+
declare function Sort({ columnData, featureDetails, setFeatureDetails, callGrid }: {
|
|
2
2
|
columnData: any;
|
|
3
3
|
featureDetails: any;
|
|
4
4
|
setFeatureDetails: any;
|
|
5
|
+
callGrid: any;
|
|
5
6
|
}): import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default Sort;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
declare function
|
|
2
|
-
|
|
1
|
+
declare function FilterParent({ columnData, featureDetails, setFeatureDetails, callBackForSelect, callGrid }: {
|
|
2
|
+
columnData: any;
|
|
3
|
+
featureDetails: any;
|
|
4
|
+
setFeatureDetails: any;
|
|
5
|
+
callBackForSelect: any;
|
|
6
|
+
callGrid: any;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default FilterParent;
|
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
declare function Querty(
|
|
1
|
+
declare function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBackForSelect, actionOnMinus, actionOnPlus, }: {
|
|
2
|
+
queryId: any;
|
|
3
|
+
columnData: any;
|
|
4
|
+
featureDetails: any;
|
|
5
|
+
setFeatureDetails: any;
|
|
6
|
+
callBackForSelect: any;
|
|
7
|
+
actionOnMinus: any;
|
|
8
|
+
actionOnPlus: any;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
2
10
|
export default Querty;
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
INTEGER = "integer",
|
|
5
|
-
IMAGE = "image",
|
|
6
|
-
CURRENCY = "currency",
|
|
7
|
-
BOOLEAN = "boolean",
|
|
8
|
-
DATE_AND_TIME = "dateandtime",
|
|
9
|
-
DECIMAL = "decimal",
|
|
10
|
-
PERCENT = "percent",
|
|
11
|
-
SELECT = "select",
|
|
12
|
-
MULTI_SELECT = "multiselect"
|
|
13
|
-
}
|
|
14
|
-
export declare const COLUMN_SORT_OPTIONS: {
|
|
15
|
-
id: number;
|
|
16
|
-
label: string;
|
|
17
|
-
sortId: number;
|
|
18
|
-
dataType: ATTRIBUTEDATATYPES;
|
|
19
|
-
}[];
|
|
1
|
+
import { Operation, SortType } from "./Types";
|
|
2
|
+
export declare const COLUMN_SORT_OPTIONS: SortType[];
|
|
3
|
+
export declare const conditionsList: Operation[];
|