sccoreui 6.2.99 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/App.js +3 -2
- package/dist/App.scss +15 -7
- package/dist/assets/sccoreui.css +10 -0
- package/dist/components/ag-grid/advancedFeature/column-group.js +3 -1
- package/dist/components/ag-grid/advancedFeature/grid-view-list-view.js +1 -1
- package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +1 -1
- package/dist/pages/RowGroupingServerside/DragandDropFeatures.js +49 -0
- package/dist/pages/RowGroupingServerside/RowGroupingServerSide.js +125 -0
- package/dist/pages/RowGroupingServerside/dummyData.js +226 -0
- package/dist/pages/aggrid/AgGrid.js +837 -0
- package/dist/pages/aggrid/BulkAction.js +9 -0
- package/dist/pages/aggrid/RowGroupTrail.js +125 -0
- package/dist/pages/aggrid/Template.js +11 -0
- package/dist/pages/aggrid/TestingWIthAdminConfig.js +250 -0
- package/dist/pages/aggrid/fakeServer.js +95 -0
- package/dist/pages/aggrid/id-cell.js +9 -0
- package/dist/pages/aggrid/interface.js +2 -0
- package/dist/pages/avatar/avatar.js +338 -0
- package/dist/pages/badges/badge.js +73 -0
- package/dist/pages/breadcrumb/breadcrumb.js +14 -0
- package/dist/pages/button/button.js +10 -0
- package/dist/pages/button-group/button-group.js +10 -0
- package/dist/pages/chart/chart.js +257 -0
- package/dist/pages/checkbox/checkbox.js +26 -0
- package/dist/pages/checkbox-group/checkbox-group-component.js +21 -0
- package/dist/pages/color-picker/color-picker.js +13 -0
- package/dist/pages/content-dividers/content-dividers.js +11 -0
- package/dist/pages/custom-color-picker/custom-color-picker.js +12 -0
- package/dist/pages/custom-multiselect/CustomMultiSelect.js +37 -0
- package/dist/pages/date-picker/date-picker.js +20 -0
- package/dist/pages/dropdown/dropdown-component.js +39 -0
- package/dist/pages/file-upload/file-upload.js +34 -0
- package/dist/pages/flex.js +15 -0
- package/dist/pages/formulaTemplate/formulaTemplate.js +154 -0
- package/dist/pages/frolaTextEditor/froala-text-editor.js +12 -0
- package/dist/pages/home.js +55 -0
- package/dist/pages/input/input-text.js +112 -0
- package/dist/pages/list-box-dropdown/listboxdropdown.js +55 -0
- package/dist/pages/loader-indicator/loader-indicator.js +10 -0
- package/dist/pages/mega-mennu/mega-menu.js +84 -0
- package/dist/pages/multi-select-dropdown/multi-select-dropdown.js +51 -0
- package/dist/pages/not-found/not-found.js +10 -0
- package/dist/pages/paginator/pagination.js +122 -0
- package/dist/pages/progress-bar/progress-bar.js +27 -0
- package/dist/pages/progress-steps/progress-steps.js +24 -0
- package/dist/pages/radio-button/radio-button-component.js +11 -0
- package/dist/pages/shadows/shadows.js +7 -0
- package/dist/pages/slideout-menus/slideout-menus.js +104 -0
- package/dist/pages/sliders/slider.js +39 -0
- package/dist/pages/tabels/table-data.js +2193 -0
- package/dist/pages/tabels/table.js +98 -0
- package/dist/pages/tabs/tabs.js +9 -0
- package/dist/pages/tags/tags.js +70 -0
- package/dist/pages/testingcomponents/NormalAgGrid.js +58 -0
- package/dist/pages/testingcomponents/TestComponent.js +71 -0
- package/dist/pages/testingcomponents/data.js +326 -0
- package/dist/pages/testingcomponents/fom-feild-testing/MainformComp.js +16 -0
- package/dist/pages/toast/toast.js +47 -0
- package/dist/pages/toggle/toggle.js +10 -0
- package/dist/pages/tooltip/tooltip.js +13 -0
- package/dist/pages/treeDropdownSelect/treedropdowselect.js +34 -0
- package/dist/pages/types/type.js +2 -0
- package/dist/types/directives/svg-component.d.ts +1 -1
- package/dist/types/pages/RowGroupingServerside/DragandDropFeatures.d.ts +4 -0
- package/dist/types/pages/RowGroupingServerside/RowGroupingServerSide.d.ts +4 -0
- package/dist/types/pages/RowGroupingServerside/dummyData.d.ts +9 -0
- package/dist/types/pages/aggrid/AgGrid.d.ts +2 -0
- package/dist/types/pages/aggrid/BulkAction.d.ts +2 -0
- package/dist/types/pages/aggrid/RowGroupTrail.d.ts +4 -0
- package/dist/types/pages/aggrid/Template.d.ts +2 -0
- package/dist/types/pages/aggrid/TestingWIthAdminConfig.d.ts +2 -0
- package/dist/types/pages/aggrid/fakeServer.d.ts +7 -0
- package/dist/types/pages/aggrid/id-cell.d.ts +2 -0
- package/dist/types/pages/aggrid/interface.d.ts +12 -0
- package/dist/types/pages/avatar/avatar.d.ts +2 -0
- package/dist/types/pages/badges/badge.d.ts +3 -0
- package/dist/types/pages/breadcrumb/breadcrumb.d.ts +2 -0
- package/dist/types/pages/button/button.d.ts +2 -0
- package/dist/types/pages/button-group/button-group.d.ts +2 -0
- package/dist/types/pages/chart/chart.d.ts +2 -0
- package/dist/types/pages/checkbox/checkbox.d.ts +2 -0
- package/dist/types/pages/checkbox-group/checkbox-group-component.d.ts +3 -0
- package/dist/types/pages/color-picker/color-picker.d.ts +2 -0
- package/dist/types/pages/content-dividers/content-dividers.d.ts +2 -0
- package/dist/types/pages/custom-color-picker/custom-color-picker.d.ts +2 -0
- package/dist/types/pages/custom-multiselect/CustomMultiSelect.d.ts +2 -0
- package/dist/types/pages/date-picker/date-picker.d.ts +2 -0
- package/dist/types/pages/dropdown/dropdown-component.d.ts +2 -0
- package/dist/types/pages/file-upload/file-upload.d.ts +3 -0
- package/dist/types/pages/flex.d.ts +2 -0
- package/dist/types/pages/formulaTemplate/formulaTemplate.d.ts +2 -0
- package/dist/types/pages/frolaTextEditor/froala-text-editor.d.ts +2 -0
- package/dist/types/pages/home.d.ts +2 -0
- package/dist/types/pages/input/input-text.d.ts +3 -0
- package/dist/types/pages/list-box-dropdown/listboxdropdown.d.ts +2 -0
- package/dist/types/pages/loader-indicator/loader-indicator.d.ts +3 -0
- package/dist/types/pages/mega-mennu/mega-menu.d.ts +2 -0
- package/dist/types/pages/multi-select-dropdown/multi-select-dropdown.d.ts +2 -0
- package/dist/types/pages/not-found/not-found.d.ts +2 -0
- package/dist/types/pages/paginator/pagination.d.ts +2 -0
- package/dist/types/pages/progress-bar/progress-bar.d.ts +3 -0
- package/dist/types/pages/progress-steps/progress-steps.d.ts +2 -0
- package/dist/types/pages/radio-button/radio-button-component.d.ts +2 -0
- package/dist/types/pages/shadows/shadows.d.ts +2 -0
- package/dist/types/pages/slideout-menus/slideout-menus.d.ts +2 -0
- package/dist/types/pages/sliders/slider.d.ts +1 -0
- package/dist/types/pages/tabels/table-data.d.ts +3 -0
- package/dist/types/pages/tabels/table.d.ts +2 -0
- package/dist/types/pages/tabs/tabs.d.ts +3 -0
- package/dist/types/pages/tags/tags.d.ts +3 -0
- package/dist/types/pages/testingcomponents/NormalAgGrid.d.ts +4 -0
- package/dist/types/pages/testingcomponents/TestComponent.d.ts +4 -0
- package/dist/types/pages/testingcomponents/data.d.ts +1 -0
- package/dist/types/pages/testingcomponents/fom-feild-testing/MainformComp.d.ts +2 -0
- package/dist/types/pages/toast/toast.d.ts +2 -0
- package/dist/types/pages/toggle/toggle.d.ts +2 -0
- package/dist/types/pages/tooltip/tooltip.d.ts +2 -0
- package/dist/types/pages/treeDropdownSelect/treedropdowselect.d.ts +2 -0
- package/dist/types/pages/types/type.d.ts +64 -0
- package/package.json +1 -1
- package/dist/App copy.scss +0 -2862
package/dist/App.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
3
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
5
|
require("./App.scss");
|
|
5
|
-
|
|
6
|
+
const home_1 = tslib_1.__importDefault(require("./pages/home"));
|
|
6
7
|
const App = () => {
|
|
7
|
-
return (0, jsx_runtime_1.jsx)("div", {});
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(home_1.default, {}) }) }));
|
|
8
9
|
};
|
|
9
10
|
exports.default = App;
|
package/dist/App.scss
CHANGED
|
@@ -833,7 +833,8 @@ div:has(ul.date_filter) .p-datepicker-footer {
|
|
|
833
833
|
|
|
834
834
|
.errorField {
|
|
835
835
|
color: var(--red-500);
|
|
836
|
-
height:
|
|
836
|
+
height: auto;
|
|
837
|
+
line-height: 20px;
|
|
837
838
|
}
|
|
838
839
|
|
|
839
840
|
.full_form_field {
|
|
@@ -2314,12 +2315,6 @@ button[aria-expanded="true"] {
|
|
|
2314
2315
|
display: none !important;
|
|
2315
2316
|
}
|
|
2316
2317
|
|
|
2317
|
-
.ag-row-hover {
|
|
2318
|
-
background-color: var(--primary-25) !important;
|
|
2319
|
-
transform: scale(1.1);
|
|
2320
|
-
transition: transform 0.4s ease-in-out;
|
|
2321
|
-
}
|
|
2322
|
-
|
|
2323
2318
|
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
|
|
2324
2319
|
border: 0;
|
|
2325
2320
|
border-color: initial;
|
|
@@ -2594,6 +2589,10 @@ button[aria-expanded="true"] {
|
|
|
2594
2589
|
height: 38px;
|
|
2595
2590
|
}
|
|
2596
2591
|
|
|
2592
|
+
.border-round-6 {
|
|
2593
|
+
border-radius: 6px !important;
|
|
2594
|
+
}
|
|
2595
|
+
|
|
2597
2596
|
// loader styles
|
|
2598
2597
|
.loader-wrapper {
|
|
2599
2598
|
width: 60px;
|
|
@@ -2653,6 +2652,15 @@ button[aria-expanded="true"] {
|
|
|
2653
2652
|
border-radius: 50%;
|
|
2654
2653
|
position: relative;
|
|
2655
2654
|
animation: rotate 1s linear infinite;
|
|
2655
|
+
&:nth-child(2) {
|
|
2656
|
+
width: 90%;
|
|
2657
|
+
}
|
|
2658
|
+
&:nth-child(3) {
|
|
2659
|
+
width: 80%;
|
|
2660
|
+
}
|
|
2661
|
+
&:nth-child(4) {
|
|
2662
|
+
width: 70%;
|
|
2663
|
+
}
|
|
2656
2664
|
}
|
|
2657
2665
|
|
|
2658
2666
|
.loader-main::before {
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -1074,11 +1074,13 @@ a {
|
|
|
1074
1074
|
height: 20px;
|
|
1075
1075
|
width: 20px;
|
|
1076
1076
|
padding-top: 0px;
|
|
1077
|
+
transition: rotate 0.4s ease-in-out;
|
|
1077
1078
|
}
|
|
1078
1079
|
|
|
1079
1080
|
.p-inputgroup > .p-dropdown .p-dropdown-trigger {
|
|
1080
1081
|
width: 1rem;
|
|
1081
1082
|
padding-top: 0px;
|
|
1083
|
+
transition: rotate 0.4s ease-in-out;
|
|
1082
1084
|
}
|
|
1083
1085
|
.p-dropdown .p-dropdown-clear-icon {
|
|
1084
1086
|
color: #6c757d;
|
|
@@ -8134,6 +8136,7 @@ a {
|
|
|
8134
8136
|
font-size: 14px;
|
|
8135
8137
|
line-height: 20px;
|
|
8136
8138
|
color: var(--gray-800);
|
|
8139
|
+
transition: rotate 0.4s ease-in-out;
|
|
8137
8140
|
}
|
|
8138
8141
|
|
|
8139
8142
|
.p-paginator .p-paginator-prev .pi.pi-angle-left {
|
|
@@ -8374,6 +8377,10 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8374
8377
|
rotate: 180deg;
|
|
8375
8378
|
}
|
|
8376
8379
|
|
|
8380
|
+
.p-dropdown-trigger {
|
|
8381
|
+
transition: rotate 0.4s ease-in-out;
|
|
8382
|
+
}
|
|
8383
|
+
|
|
8377
8384
|
.p-dropdown-item.p-highlight {
|
|
8378
8385
|
display: flex;
|
|
8379
8386
|
align-items: center;
|
|
@@ -8601,6 +8608,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8601
8608
|
}
|
|
8602
8609
|
.p-paginator > .p-dropdown > .p-dropdown-trigger {
|
|
8603
8610
|
padding-top: 0px;
|
|
8611
|
+
transition: rotate 0.4s ease-in-out;
|
|
8604
8612
|
}
|
|
8605
8613
|
.p-paginator > .p-dropdown {
|
|
8606
8614
|
display: flex;
|
|
@@ -8641,6 +8649,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8641
8649
|
}
|
|
8642
8650
|
.p-dropdown-badge > .p-dropdown-trigger {
|
|
8643
8651
|
padding-top: 2px;
|
|
8652
|
+
transition: rotate 0.4s ease-in-out;
|
|
8644
8653
|
}
|
|
8645
8654
|
|
|
8646
8655
|
/* Input components changes classes for styling the input components */
|
|
@@ -8748,6 +8757,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8748
8757
|
|
|
8749
8758
|
.p-dropdown-xl.p-dropdown .p-dropdown-trigger {
|
|
8750
8759
|
padding-top: 0px;
|
|
8760
|
+
transition: rotate 0.4s ease-in-out;
|
|
8751
8761
|
}
|
|
8752
8762
|
|
|
8753
8763
|
.tab-view-bg-dark.p-tabview-nav-container.p-tabview-nav-content {
|
|
@@ -198,7 +198,9 @@ const ColumnGroup = (props) => {
|
|
|
198
198
|
setRenderColumns(columnsFromGrid);
|
|
199
199
|
}
|
|
200
200
|
}, [(_d = (_c = (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.columnModel) === null || _c === void 0 ? void 0 : _c.columnDefs) === null || _d === void 0 ? void 0 : _d.length]);
|
|
201
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
201
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${(columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
202
|
+
? "bg-primary-50 px-3"
|
|
203
|
+
: "bg-white icon-40x40 px-2"} hover:bg-primary-25 br-8 sc_icon_hover h-40 cursor-pointer flex align-items-cente gap-1 zoom_animate ${isDisabled && "disabled"}`, ref: btnRef, onClick: (e) => !isDisabled && showColumnOptions(e), title: "Column Grouping" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", size: 18,
|
|
202
204
|
// disabled={isDisabled}
|
|
203
205
|
color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
|
|
204
206
|
? "text-primary-400"
|
|
@@ -8,7 +8,7 @@ const context_provider_1 = require("../context-provider");
|
|
|
8
8
|
const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
|
|
9
9
|
const GridViewListView = () => {
|
|
10
10
|
const { gridViewFun, gridView } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
11
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex border-1 border-gray-300 border-round-
|
|
11
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex border-1 border-gray-300 border-round-6" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: `border-round-sm border-noround-right sc_icon_hover ${!gridView
|
|
12
12
|
? "focus:shadow-none"
|
|
13
13
|
: "bg-primary-50 focus:shadow-none border-right-1 border-gray-300"} `, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "grid-01", color: !gridView ? "text-gray-600" : "text-primary-400", size: 18 }), outlined: true, onClick: () => gridViewFun(true), title: "Grid View" }), (0, jsx_runtime_1.jsx)(button_1.Button, { title: "List View", className: `sc_icon_hover border-round-sm border-noround-left border-left-none ${!gridView
|
|
14
14
|
? "bg-primary-50 focus:shadow-none"
|
|
@@ -164,7 +164,7 @@ const TableFilter = () => {
|
|
|
164
164
|
});
|
|
165
165
|
setAllFieldsFilled(isAllFieldsFilled && enbleApply);
|
|
166
166
|
}, [conditionsArray, enbleApply]);
|
|
167
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-
|
|
167
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-6 ${isDisabled && "disabled"} ${isOverlayOpened ||
|
|
168
168
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
169
169
|
? "bg-primary-50"
|
|
170
170
|
: "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
require("@ag-grid-community/styles/ag-grid.css");
|
|
7
|
+
require("@ag-grid-community/styles/ag-theme-quartz.css");
|
|
8
|
+
const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
|
|
9
|
+
const constants_1 = require("../../components/ag-grid/constants");
|
|
10
|
+
const type_1 = require("../../components/types/type");
|
|
11
|
+
const dummyData_1 = require("./dummyData");
|
|
12
|
+
const DragAndDropFeatureTesting = () => {
|
|
13
|
+
const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
|
|
14
|
+
const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
|
|
15
|
+
const [columnDefs] = (0, react_1.useState)([
|
|
16
|
+
{ field: "employeeId", rowDrag: true, suppressFillHandle: true },
|
|
17
|
+
{ field: "employeeName", },
|
|
18
|
+
{ field: "jobTitle" },
|
|
19
|
+
{ field: "employmentType" },
|
|
20
|
+
]);
|
|
21
|
+
const defaultColDef = (0, react_1.useMemo)(() => {
|
|
22
|
+
return {
|
|
23
|
+
width: 240,
|
|
24
|
+
flex: 1,
|
|
25
|
+
sortable: false,
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
const getRowData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
29
|
+
debugger;
|
|
30
|
+
var allRows = yield (0, dummyData_1.getNormalData)();
|
|
31
|
+
const result = { rowData: allRows };
|
|
32
|
+
return result;
|
|
33
|
+
});
|
|
34
|
+
const initialConditions = {
|
|
35
|
+
displayAdvancedFilter: false,
|
|
36
|
+
displaySort: true,
|
|
37
|
+
displayFeaturesHeader: true,
|
|
38
|
+
displaySearch: type_1.VisibilityState.ENABLE,
|
|
39
|
+
displayFilter: type_1.VisibilityState.ENABLE
|
|
40
|
+
};
|
|
41
|
+
const gridApi = (0, react_1.useRef)(null);
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" },
|
|
43
|
+
// rowData={dummyData}
|
|
44
|
+
getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.CLIENT_SIDE, shouldRefetch: false, filterConditions: [
|
|
45
|
+
{ id: 1, label: "AND" },
|
|
46
|
+
{ id: 2, label: "OR" },
|
|
47
|
+
], columnDefs: columnDefs, defaultColDef: defaultColDef, rowDragManaged: true }) })) })));
|
|
48
|
+
};
|
|
49
|
+
exports.default = DragAndDropFeatureTesting;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
require("@ag-grid-community/styles/ag-grid.css");
|
|
7
|
+
require("@ag-grid-community/styles/ag-theme-quartz.css");
|
|
8
|
+
const core_1 = require("@ag-grid-community/core");
|
|
9
|
+
const column_tool_panel_1 = require("@ag-grid-enterprise/column-tool-panel");
|
|
10
|
+
const menu_1 = require("@ag-grid-enterprise/menu");
|
|
11
|
+
const row_grouping_1 = require("@ag-grid-enterprise/row-grouping");
|
|
12
|
+
const server_side_row_model_1 = require("@ag-grid-enterprise/server-side-row-model");
|
|
13
|
+
const dummyData_1 = require("./dummyData");
|
|
14
|
+
const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
|
|
15
|
+
const constants_1 = require("../../components/ag-grid/constants");
|
|
16
|
+
const type_1 = require("../../components/types/type");
|
|
17
|
+
core_1.ModuleRegistry.registerModules([
|
|
18
|
+
column_tool_panel_1.ColumnsToolPanelModule,
|
|
19
|
+
menu_1.MenuModule,
|
|
20
|
+
row_grouping_1.RowGroupingModule,
|
|
21
|
+
server_side_row_model_1.ServerSideRowModelModule,
|
|
22
|
+
]);
|
|
23
|
+
const GridRowGroupingSSRM = () => {
|
|
24
|
+
const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
|
|
25
|
+
const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
|
|
26
|
+
const [text, setText] = (0, react_1.useState)("");
|
|
27
|
+
const [columnDefs] = (0, react_1.useState)([
|
|
28
|
+
{ field: "employeeId", },
|
|
29
|
+
{ field: "employeeName", },
|
|
30
|
+
{ field: "jobTitle" },
|
|
31
|
+
{ field: "employmentType" },
|
|
32
|
+
]);
|
|
33
|
+
const defaultColDef = (0, react_1.useMemo)(() => {
|
|
34
|
+
return {
|
|
35
|
+
width: 240,
|
|
36
|
+
flex: 1,
|
|
37
|
+
sortable: false,
|
|
38
|
+
};
|
|
39
|
+
}, []);
|
|
40
|
+
const autoGroupColumnDef = (0, react_1.useMemo)(() => {
|
|
41
|
+
return {
|
|
42
|
+
field: "employeeName",
|
|
43
|
+
headerName: `Search Results`,
|
|
44
|
+
headerCheckboxSelection: true,
|
|
45
|
+
cellRendererParams: {
|
|
46
|
+
innerRenderer: () => {
|
|
47
|
+
// Add custom styling or content to the group label
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: "kjasdnfkjasdf" }));
|
|
49
|
+
},
|
|
50
|
+
checkbox: true,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
}, []);
|
|
54
|
+
const isServerSideGroupOpenByDefault = (0, react_1.useCallback)((params) => {
|
|
55
|
+
// open first two levels by default
|
|
56
|
+
if (text === "") {
|
|
57
|
+
return false;
|
|
58
|
+
}
|
|
59
|
+
return params.rowNode.level < 2;
|
|
60
|
+
}, [text]);
|
|
61
|
+
const isServerSideGroup = (0, react_1.useCallback)((dataItem) => {
|
|
62
|
+
// indicate if node is a group
|
|
63
|
+
return dataItem.group;
|
|
64
|
+
}, []);
|
|
65
|
+
const getServerSideGroupKey = (0, react_1.useCallback)((dataItem) => {
|
|
66
|
+
// specify which group key to use
|
|
67
|
+
return dataItem.id;
|
|
68
|
+
}, []);
|
|
69
|
+
const getRowData = (a, b, c, d) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
70
|
+
console.log(a, b);
|
|
71
|
+
console.log(c, d, "params");
|
|
72
|
+
setText(c.searchedText);
|
|
73
|
+
var allRows = yield (0, dummyData_1.getAllData)(c.searchedText);
|
|
74
|
+
const result = { rowData: allRows };
|
|
75
|
+
return result;
|
|
76
|
+
// setTimeout(() => {
|
|
77
|
+
// params.success(result);
|
|
78
|
+
// }, 200);
|
|
79
|
+
});
|
|
80
|
+
// const onGridReady = useCallback((params: GridReadyEvent) => {
|
|
81
|
+
// params.api!.setGridOption("serverSideDatasource", { getRows: getData });
|
|
82
|
+
// }, []);
|
|
83
|
+
const initialConditions = {
|
|
84
|
+
displayAdvancedFilter: false,
|
|
85
|
+
displaySort: true,
|
|
86
|
+
displayFeaturesHeader: true,
|
|
87
|
+
displaySearch: type_1.VisibilityState.ENABLE,
|
|
88
|
+
displayFilter: type_1.VisibilityState.ENABLE
|
|
89
|
+
};
|
|
90
|
+
const rowSelection = (0, react_1.useMemo)(() => {
|
|
91
|
+
return {
|
|
92
|
+
mode: "multiRow",
|
|
93
|
+
};
|
|
94
|
+
}, []);
|
|
95
|
+
const gridApi = (0, react_1.useRef)(null);
|
|
96
|
+
const onSelectionChanged = (0, react_1.useCallback)(() => {
|
|
97
|
+
const selectedRows = gridApi.current.api.getServerSideSelectionState(); // Get selected rows
|
|
98
|
+
// const allRowsSelected = gridApi.current.api.getSelectedRows().length === gridApi.current.api.getDisplayedRowCount();
|
|
99
|
+
console.log("Selected rows: ", selectedRows);
|
|
100
|
+
console.log("Selected----- ");
|
|
101
|
+
// If all rows are selected, you can perform your custom logic
|
|
102
|
+
}, [gridApi]);
|
|
103
|
+
// const onFilterTextBoxChanged = useCallback(() => {
|
|
104
|
+
// const cahed = gridApi.current.api.getCacheBlockState(); // See loaded blocks
|
|
105
|
+
// gridApi.current.api.forEachNode((node) => console.log(node.data, cahed, "cache")); // Access cached rows
|
|
106
|
+
// // gridApi.current!.api.setGridOption(
|
|
107
|
+
// // "quickFilterText",
|
|
108
|
+
// // (document.getElementById("filter-text-box") as HTMLInputElement).value,
|
|
109
|
+
// // );
|
|
110
|
+
// }, []);
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" }, getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.SERVER_SIDE, shouldRefetch: false, filterConditions: [
|
|
112
|
+
{ id: 1, label: "AND" },
|
|
113
|
+
{ id: 2, label: "OR" },
|
|
114
|
+
],
|
|
115
|
+
// GroupHeaderComponent={GroupHeaderComponent}
|
|
116
|
+
enableCheckboxForGroupHeader: true,
|
|
117
|
+
// AdvancedFilter={AdvancedFilter}
|
|
118
|
+
serverSideInitialRowCount: 3, treeData: true, gridProps: {
|
|
119
|
+
isServerSideGroupOpenByDefault,
|
|
120
|
+
isServerSideGroup,
|
|
121
|
+
getServerSideGroupKey,
|
|
122
|
+
rowSelection: "multiple"
|
|
123
|
+
}, columnDefs: columnDefs, defaultColDef: defaultColDef, autoGroupColumnDef: autoGroupColumnDef, rowSelection: rowSelection, onSelectionChanged: onSelectionChanged }) })) })));
|
|
124
|
+
};
|
|
125
|
+
exports.default = GridRowGroupingSSRM;
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// const allDummyData = [
|
|
3
|
+
// {
|
|
4
|
+
// "employeeId": 101,
|
|
5
|
+
// "employeeName": "Erica Rogers",
|
|
6
|
+
// "jobTitle": "CEO",
|
|
7
|
+
// "employmentType": "Permanent",
|
|
8
|
+
// "children": [
|
|
9
|
+
// {
|
|
10
|
+
// "employeeId": 102,
|
|
11
|
+
// "employeeName": "Malcolm Barrett",
|
|
12
|
+
// "jobTitle": "Exec. Vice President",
|
|
13
|
+
// "employmentType": "Permanent",
|
|
14
|
+
// "children": [
|
|
15
|
+
// {
|
|
16
|
+
// "employeeId": 103,
|
|
17
|
+
// "employeeName": "Esther Baker",
|
|
18
|
+
// "jobTitle": "Director of Operations",
|
|
19
|
+
// "employmentType": "Permanent",
|
|
20
|
+
// "children": [
|
|
21
|
+
// {
|
|
22
|
+
// "employeeId": 104,
|
|
23
|
+
// "employeeName": "Brittany Hanson",
|
|
24
|
+
// "jobTitle": "Fleet Coordinator",
|
|
25
|
+
// "employmentType": "Permanent",
|
|
26
|
+
// "children": [
|
|
27
|
+
// {
|
|
28
|
+
// "employeeId": 105,
|
|
29
|
+
// "employeeName": "Leah Flowers",
|
|
30
|
+
// "jobTitle": "Parts Technician",
|
|
31
|
+
// "employmentType": "Contract"
|
|
32
|
+
// },
|
|
33
|
+
// {
|
|
34
|
+
// "employeeId": 106,
|
|
35
|
+
// "employeeName": "Tammy Sutton",
|
|
36
|
+
// "jobTitle": "Service Technician",
|
|
37
|
+
// "employmentType": "Contract"
|
|
38
|
+
// }
|
|
39
|
+
// ]
|
|
40
|
+
// },
|
|
41
|
+
// {
|
|
42
|
+
// "employeeId": 107,
|
|
43
|
+
// "employeeName": "Derek Paul",
|
|
44
|
+
// "jobTitle": "Inventory Control",
|
|
45
|
+
// "employmentType": "Permanent"
|
|
46
|
+
// }
|
|
47
|
+
// ]
|
|
48
|
+
// },
|
|
49
|
+
// {
|
|
50
|
+
// "employeeId": 108,
|
|
51
|
+
// "employeeName": "Francis Strickland",
|
|
52
|
+
// "jobTitle": "VP Sales",
|
|
53
|
+
// "employmentType": "Permanent",
|
|
54
|
+
// "children": [
|
|
55
|
+
// {
|
|
56
|
+
// "employeeId": 109,
|
|
57
|
+
// "employeeName": "Morris Hanson",
|
|
58
|
+
// "jobTitle": "Sales Manager",
|
|
59
|
+
// "employmentType": "Permanent"
|
|
60
|
+
// },
|
|
61
|
+
// {
|
|
62
|
+
// "employeeId": 110,
|
|
63
|
+
// "employeeName": "Todd Tyler",
|
|
64
|
+
// "jobTitle": "Sales Executive",
|
|
65
|
+
// "employmentType": "Contract"
|
|
66
|
+
// },
|
|
67
|
+
// {
|
|
68
|
+
// "employeeId": 111,
|
|
69
|
+
// "employeeName": "Bennie Wise",
|
|
70
|
+
// "jobTitle": "Sales Executive",
|
|
71
|
+
// "employmentType": "Contract"
|
|
72
|
+
// },
|
|
73
|
+
// {
|
|
74
|
+
// "employeeId": 112,
|
|
75
|
+
// "employeeName": "Joel Cooper",
|
|
76
|
+
// "jobTitle": "Sales Executive",
|
|
77
|
+
// "employmentType": "Permanent"
|
|
78
|
+
// }
|
|
79
|
+
// ]
|
|
80
|
+
// }
|
|
81
|
+
// ]
|
|
82
|
+
// },
|
|
83
|
+
// {
|
|
84
|
+
// "employeeId": 113,
|
|
85
|
+
// "employeeName": "Luke McBride",
|
|
86
|
+
// "jobTitle": "Exec. Vice President",
|
|
87
|
+
// "employmentType": "Permanent",
|
|
88
|
+
// "children": [
|
|
89
|
+
// {
|
|
90
|
+
// "employeeId": 114,
|
|
91
|
+
// "employeeName": "Sarah Baker",
|
|
92
|
+
// "jobTitle": "Director of Operations",
|
|
93
|
+
// "employmentType": "Permanent",
|
|
94
|
+
// "children": [
|
|
95
|
+
// {
|
|
96
|
+
// "employeeId": 115,
|
|
97
|
+
// "employeeName": "Mason Hanson",
|
|
98
|
+
// "jobTitle": "Fleet Coordinator",
|
|
99
|
+
// "employmentType": "Permanent",
|
|
100
|
+
// "children": [
|
|
101
|
+
// {
|
|
102
|
+
// "employeeId": 116,
|
|
103
|
+
// "employeeName": "Hannah Flowers",
|
|
104
|
+
// "jobTitle": "Parts Technician",
|
|
105
|
+
// "employmentType": "Contract"
|
|
106
|
+
// },
|
|
107
|
+
// {
|
|
108
|
+
// "employeeId": 117,
|
|
109
|
+
// "employeeName": "Rob Sutton",
|
|
110
|
+
// "jobTitle": "Service Technician",
|
|
111
|
+
// "employmentType": "Contract"
|
|
112
|
+
// }
|
|
113
|
+
// ]
|
|
114
|
+
// },
|
|
115
|
+
// {
|
|
116
|
+
// "employeeId": 118,
|
|
117
|
+
// "employeeName": "Paul Smith",
|
|
118
|
+
// "jobTitle": "Inventory Control",
|
|
119
|
+
// "employmentType": "Permanent"
|
|
120
|
+
// }
|
|
121
|
+
// ]
|
|
122
|
+
// },
|
|
123
|
+
// {
|
|
124
|
+
// "employeeId": 119,
|
|
125
|
+
// "employeeName": "Adam Newman",
|
|
126
|
+
// "jobTitle": "VP Sales",
|
|
127
|
+
// "employmentType": "Permanent",
|
|
128
|
+
// "children": [
|
|
129
|
+
// {
|
|
130
|
+
// "employeeId": 120,
|
|
131
|
+
// "employeeName": "John Smith",
|
|
132
|
+
// "jobTitle": "Sales Manager",
|
|
133
|
+
// "employmentType": "Permanent"
|
|
134
|
+
// },
|
|
135
|
+
// {
|
|
136
|
+
// "employeeId": 121,
|
|
137
|
+
// "employeeName": "Alice Grant",
|
|
138
|
+
// "jobTitle": "Sales Executive",
|
|
139
|
+
// "employmentType": "Contract"
|
|
140
|
+
// },
|
|
141
|
+
// {
|
|
142
|
+
// "employeeId": 122,
|
|
143
|
+
// "employeeName": "Ben Hill",
|
|
144
|
+
// "jobTitle": "Sales Executive",
|
|
145
|
+
// "employmentType": "Contract"
|
|
146
|
+
// },
|
|
147
|
+
// {
|
|
148
|
+
// "employeeId": 123,
|
|
149
|
+
// "employeeName": "Joe Cooper",
|
|
150
|
+
// "jobTitle": "Sales Executive",
|
|
151
|
+
// "employmentType": "Permanent"
|
|
152
|
+
// }
|
|
153
|
+
// ]
|
|
154
|
+
// }
|
|
155
|
+
// ]
|
|
156
|
+
// }
|
|
157
|
+
// ]
|
|
158
|
+
// }
|
|
159
|
+
// ]
|
|
160
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
161
|
+
exports.dummyData = exports.getNormalData = exports.getAllData = void 0;
|
|
162
|
+
const tslib_1 = require("tslib");
|
|
163
|
+
// const allDummyDataMoreChildren = [
|
|
164
|
+
// {
|
|
165
|
+
// employeeId: generateUniqueId(),
|
|
166
|
+
// employeeName: "Parent 1",
|
|
167
|
+
// jobTitle: "CEO",
|
|
168
|
+
// employmentType: "Permanent",
|
|
169
|
+
// group: true,
|
|
170
|
+
// },
|
|
171
|
+
// // Repeat the structure for Parent 3 through Parent 10
|
|
172
|
+
// ];
|
|
173
|
+
function generateUniqueId() {
|
|
174
|
+
const timestamp = Date.now().toString().slice(-4); // Last 4 digits of timestamp
|
|
175
|
+
const randomPart = Math.floor(100000 + Math.random() * 900000).toString(); // 6 random digits
|
|
176
|
+
return timestamp + randomPart; // 10-digit unique ID
|
|
177
|
+
}
|
|
178
|
+
let k = 1;
|
|
179
|
+
function delayWithValue(ms, value) {
|
|
180
|
+
return new Promise((resolve) => {
|
|
181
|
+
setTimeout(() => {
|
|
182
|
+
resolve(value); // Return the value after the delay
|
|
183
|
+
}, ms);
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
const getAllData = (text) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
187
|
+
console.log(k, "called", text);
|
|
188
|
+
k = k + 1;
|
|
189
|
+
const data = yield delayWithValue(500, [
|
|
190
|
+
{
|
|
191
|
+
id: generateUniqueId(),
|
|
192
|
+
employeeName: "Parent 1",
|
|
193
|
+
jobTitle: "CEO" + generateUniqueId(),
|
|
194
|
+
employmentType: "Permanent",
|
|
195
|
+
group: true,
|
|
196
|
+
},
|
|
197
|
+
// Repeat the structure for Parent 3 through Parent 10
|
|
198
|
+
]);
|
|
199
|
+
return data;
|
|
200
|
+
});
|
|
201
|
+
exports.getAllData = getAllData;
|
|
202
|
+
const getNormalData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
203
|
+
const data = yield delayWithValue(500, [{
|
|
204
|
+
id: 1,
|
|
205
|
+
employeeName: "Parent 1",
|
|
206
|
+
jobTitle: "CEO",
|
|
207
|
+
employmentType: "Permanent",
|
|
208
|
+
group: true,
|
|
209
|
+
}]);
|
|
210
|
+
return data;
|
|
211
|
+
});
|
|
212
|
+
exports.getNormalData = getNormalData;
|
|
213
|
+
exports.dummyData = [{
|
|
214
|
+
id: 1,
|
|
215
|
+
employeeName: "Parent 1",
|
|
216
|
+
jobTitle: "CEO",
|
|
217
|
+
employmentType: "Permanent",
|
|
218
|
+
group: true,
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
id: 3,
|
|
222
|
+
employeeName: "Parent 3",
|
|
223
|
+
jobTitle: "CEO",
|
|
224
|
+
employmentType: "Permanent",
|
|
225
|
+
group: true,
|
|
226
|
+
}];
|