@adaptabletools/adaptable-cjs 22.0.0-canary.7 → 22.0.0-canary.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/index.css +63 -71
- package/index.css.map +1 -1
- package/package.json +1 -1
- package/src/AdaptableInterfaces/IAdaptable.d.ts +6 -6
- package/src/AdaptableOptions/ContainerOptions.d.ts +55 -15
- package/src/AdaptableState/AdaptableState.d.ts +2 -0
- package/src/AdaptableState/Common/AdaptableColumnContext.d.ts +9 -0
- package/src/AdaptableState/Common/AdaptableRowContext.d.ts +11 -0
- package/src/AdaptableState/Common/AdaptableRowContext.js +2 -0
- package/src/AdaptableState/Common/DataUpdateConfig.d.ts +7 -0
- package/src/AdaptableState/Common/TransposeConfig.d.ts +11 -9
- package/src/AdaptableState/InitialState.d.ts +9 -0
- package/src/AdaptableState/LayoutState.d.ts +1 -2
- package/src/AdaptableState/UserInterfaceState.d.ts +14 -0
- package/src/AdaptableState/UserInterfaceState.js +2 -0
- package/src/Api/GridApi.d.ts +5 -9
- package/src/Api/Implementation/AlertApiImpl.js +2 -6
- package/src/Api/Implementation/GridApiImpl.d.ts +2 -6
- package/src/Api/Implementation/GridApiImpl.js +9 -9
- package/src/Api/Implementation/LayoutApiImpl.d.ts +1 -0
- package/src/Api/Implementation/LayoutApiImpl.js +3 -0
- package/src/Api/Implementation/SystemStatusApiImpl.js +2 -5
- package/src/Api/Implementation/UserInterfaceApiImpl.d.ts +5 -0
- package/src/Api/Implementation/UserInterfaceApiImpl.js +13 -0
- package/src/Api/LayoutApi.d.ts +6 -0
- package/src/Api/UserInterfaceApi.d.ts +17 -0
- package/src/Redux/ActionsReducers/UserInterfaceRedux.d.ts +11 -0
- package/src/Redux/ActionsReducers/UserInterfaceRedux.js +26 -0
- package/src/Redux/Store/AdaptableStore.js +27 -0
- package/src/Utilities/resolveContainerElement.d.ts +23 -0
- package/src/Utilities/resolveContainerElement.js +47 -0
- package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js +1 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js +2 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js +1 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts +1 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js +1 -8
- package/src/View/Components/Popups/WindowPopups/WindowPopups.js +35 -0
- package/src/View/Components/WizardSummaryPage.js +1 -1
- package/src/View/Dashboard/CustomToolbar.js +1 -1
- package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js +1 -1
- package/src/View/Layout/TransposedPopup.js +144 -138
- package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js +1 -1
- package/src/View/UIHelper.d.ts +2 -1
- package/src/View/UIHelper.js +8 -14
- package/src/agGrid/Adaptable.js +11 -11
- package/src/agGrid/AdaptableAgGrid.d.ts +12 -8
- package/src/agGrid/AdaptableAgGrid.js +112 -31
- package/src/agGrid/AgGridFloatingFilterAdapter.js +1 -1
- package/src/agGrid/AgGridMenuAdapter.js +9 -1
- package/src/components/CheckBox/index.js +1 -1
- package/src/components/Dropdown/Arrows.js +1 -1
- package/src/components/ExpressionEditor/DataTableEditor.js +3 -3
- package/src/components/FormLayout/index.js +1 -1
- package/src/components/Select/Select.js +1 -1
- package/src/components/Tree/TreeDropdown/index.js +1 -1
- package/src/env.js +2 -2
- package/src/metamodel/adaptable.metamodel.d.ts +62 -0
- package/src/metamodel/adaptable.metamodel.js +1 -1
- package/src/types.d.ts +5 -2
- package/themes/dark.css +30 -29
- package/themes/light.css +4 -2
- package/tsconfig.cjs.tsbuildinfo +1 -1
|
@@ -9,72 +9,153 @@ const AdaptableContext_1 = require("../AdaptableContext");
|
|
|
9
9
|
const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
|
|
10
10
|
const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
|
|
11
11
|
const Flex_1 = require("../../components/Flex");
|
|
12
|
-
const
|
|
13
|
-
const
|
|
12
|
+
const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
|
|
13
|
+
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
|
|
14
|
+
const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
|
|
15
|
+
const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
|
|
16
|
+
/** Field used for the first column in transposed grid (hidden, holds column id). */
|
|
17
|
+
const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
|
|
18
|
+
/** Header used for the first visible column in transposed grid (shows friendly name). */
|
|
19
|
+
const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
|
|
20
|
+
function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
|
|
21
|
+
return {
|
|
22
|
+
primaryKey: TRANSPOSED_FIRST_COLUMN_FIELD,
|
|
23
|
+
licenseKey: hostOptions.licenseKey,
|
|
24
|
+
userName: `${hostOptions.userName}`,
|
|
25
|
+
adaptableId: `${hostOptions.adaptableId}::TransposedView`,
|
|
26
|
+
containerOptions: {
|
|
27
|
+
adaptableContainer: ADAPTABLE_CONTAINER_ID,
|
|
28
|
+
agGridContainer: AG_GRID_CONTAINER_ID,
|
|
29
|
+
},
|
|
30
|
+
entitlementOptions: { defaultAccessLevel: 'Hidden' },
|
|
31
|
+
initialState: {
|
|
32
|
+
Layout: {
|
|
33
|
+
Revision: Date.now(),
|
|
34
|
+
CurrentLayout: 'TransposedView',
|
|
35
|
+
Layouts: [
|
|
36
|
+
{
|
|
37
|
+
Name: 'TransposedView',
|
|
38
|
+
TableColumns: [
|
|
39
|
+
TRANSPOSED_FIRST_COLUMN_HEADER,
|
|
40
|
+
...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
|
|
41
|
+
],
|
|
42
|
+
ColumnPinning: { [TRANSPOSED_FIRST_COLUMN_HEADER]: 'left' },
|
|
43
|
+
AutoSizeColumns: true,
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
Theme: { CurrentTheme: currentTheme },
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
function buildTransposedGridOptions({ transposedRowsAndColumns, elevatedColumnId, adaptableApi, }) {
|
|
52
|
+
const firstColumn = {
|
|
53
|
+
field: TRANSPOSED_FIRST_COLUMN_HEADER,
|
|
54
|
+
headerName: adaptableApi.columnApi.getFriendlyNameForColumnId(elevatedColumnId),
|
|
55
|
+
};
|
|
56
|
+
return {
|
|
57
|
+
loading: false,
|
|
58
|
+
defaultColDef: {
|
|
59
|
+
floatingFilter: false,
|
|
60
|
+
filter: false,
|
|
61
|
+
sortable: true,
|
|
62
|
+
resizable: true,
|
|
63
|
+
enableRowGroup: false,
|
|
64
|
+
editable: false,
|
|
65
|
+
enablePivot: false,
|
|
66
|
+
enableValue: false,
|
|
67
|
+
lockPinned: true,
|
|
68
|
+
menuTabs: [],
|
|
69
|
+
width: 120,
|
|
70
|
+
},
|
|
71
|
+
columnDefs: [
|
|
72
|
+
{ field: TRANSPOSED_FIRST_COLUMN_FIELD, hide: true },
|
|
73
|
+
firstColumn,
|
|
74
|
+
...transposedRowsAndColumns.transposedColumns.map((col) => ({ field: col.colId, headerName: col.header })),
|
|
75
|
+
],
|
|
76
|
+
rowData: transposedRowsAndColumns.transposedRows,
|
|
77
|
+
sideBar: false,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
14
80
|
const TransposedPopup = (props) => {
|
|
15
81
|
const adaptable = (0, AdaptableContext_1.useAdaptable)();
|
|
16
|
-
const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
|
|
17
|
-
const rowNodes = React.useMemo(() => {
|
|
18
|
-
return props.popupProps.visibleRows
|
|
19
|
-
? adaptable.api.gridApi.getVisibleRowNodes()
|
|
20
|
-
: adaptable.api.gridApi.getAllRowNodes();
|
|
21
|
-
}, [
|
|
22
|
-
// can be later triggered by tickng data
|
|
23
|
-
]);
|
|
24
82
|
const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
|
|
25
|
-
const
|
|
26
|
-
const
|
|
83
|
+
const rawConfig = (props.popupProps ?? {});
|
|
84
|
+
const transposeConfig = {
|
|
85
|
+
transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
|
|
86
|
+
hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
|
|
87
|
+
autosize: rawConfig.autosize ?? true,
|
|
88
|
+
columnsToTranspose: rawConfig.columnsToTranspose,
|
|
89
|
+
rowsToTranspose: rawConfig.rowsToTranspose,
|
|
90
|
+
};
|
|
91
|
+
const rowNodes = React.useMemo(() => {
|
|
92
|
+
let transposableRowNodes = [];
|
|
93
|
+
const rowsToTranspose = transposeConfig.rowsToTranspose;
|
|
94
|
+
if (rowsToTranspose === 'VisibleOnly') {
|
|
95
|
+
return adaptable.api.gridApi.getVisibleRowNodes();
|
|
96
|
+
}
|
|
97
|
+
if (rowsToTranspose === 'All') {
|
|
98
|
+
return adaptable.api.gridApi.getAllRowNodes();
|
|
99
|
+
}
|
|
100
|
+
if (StringExtensions_1.default.IsNotNullOrEmpty(rowsToTranspose)) {
|
|
101
|
+
adaptable.api.gridApi.getAllRowNodes().forEach((rn) => {
|
|
102
|
+
const shouldTransposeRow = adaptable.api.internalApi
|
|
103
|
+
.getQueryLanguageService()
|
|
104
|
+
.evaluateBooleanExpression(rowsToTranspose, ModuleConstants_1.ExportModuleId, rn);
|
|
105
|
+
if (shouldTransposeRow) {
|
|
106
|
+
transposableRowNodes.push(rn);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
return transposableRowNodes;
|
|
110
|
+
}
|
|
111
|
+
return adaptable.api.gridApi.getAllRowNodes();
|
|
112
|
+
}, [transposeConfig.rowsToTranspose, adaptable.api]);
|
|
113
|
+
const [elevatedColumnId, setElevatedColumnIdState] = React.useState(() => transposeConfig.transposedColumnId ?? primaryKey);
|
|
114
|
+
const setElevatedColumnId = (newElevatedColumnId) => {
|
|
27
115
|
transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
|
|
28
|
-
|
|
116
|
+
setElevatedColumnIdState(newElevatedColumnId);
|
|
29
117
|
};
|
|
30
118
|
const transposedAdaptableApiRef = React.useRef(null);
|
|
31
119
|
const columns = React.useMemo(() => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
120
|
+
const allUIColumns = adaptable.api.columnApi.getUIAvailableColumns();
|
|
121
|
+
const columnsToTranspose = transposeConfig.columnsToTranspose;
|
|
122
|
+
if (!columnsToTranspose) {
|
|
123
|
+
return allUIColumns;
|
|
124
|
+
}
|
|
125
|
+
const columnIds = typeof columnsToTranspose === 'function'
|
|
126
|
+
? columnsToTranspose({
|
|
127
|
+
...adaptable.api.internalApi.buildBaseContext(),
|
|
128
|
+
columns: allUIColumns,
|
|
129
|
+
})
|
|
130
|
+
: columnsToTranspose;
|
|
131
|
+
return columnIds
|
|
132
|
+
.map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
|
|
133
|
+
.filter((col) => col != null);
|
|
134
|
+
}, [transposeConfig.columnsToTranspose, adaptable.api]);
|
|
37
135
|
/**
|
|
38
|
-
*
|
|
136
|
+
* Build transposed structure: original rows become columns (colId = primaryKey value),
|
|
137
|
+
* original columns become rows. Each transposed row has the column id/header plus
|
|
138
|
+
* one cell per original row keyed by primaryKey value.
|
|
39
139
|
*/
|
|
40
|
-
const transposedFirstColumnField = '_transposed_column_value';
|
|
41
|
-
const transposedFirstColumnHeader = '_transposed_column_header';
|
|
42
140
|
const transposedRowsAndColumns = React.useMemo(() => {
|
|
43
|
-
/**
|
|
44
|
-
* transposed column values become primaryKey of the new tarnsposed rows
|
|
45
|
-
* we build row by row, might be easer
|
|
46
|
-
*/
|
|
47
141
|
const transposedColumns = [];
|
|
48
142
|
const transposedRows = [];
|
|
49
143
|
for (const row of rowNodes) {
|
|
50
|
-
// we force the col-ids to be strings, easer to work with
|
|
51
|
-
//row[transposeByColumnId] + '';
|
|
52
144
|
const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
'';
|
|
56
|
-
transposedColumns.push({
|
|
57
|
-
colId,
|
|
58
|
-
header,
|
|
59
|
-
});
|
|
145
|
+
const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, elevatedColumnId) + '';
|
|
146
|
+
transposedColumns.push({ colId, header });
|
|
60
147
|
}
|
|
61
148
|
for (const column of columns) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
*/
|
|
65
|
-
if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
|
|
149
|
+
if (transposeConfig.hideTransposedColumn &&
|
|
150
|
+
column.columnId === elevatedColumnId) {
|
|
66
151
|
continue;
|
|
67
152
|
}
|
|
68
153
|
const transposedRow = {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
[transposedFirstColumnField]: column.columnId,
|
|
72
|
-
[transposedFirstColumnHeader]: column.friendlyName,
|
|
154
|
+
[TRANSPOSED_FIRST_COLUMN_FIELD]: column.columnId,
|
|
155
|
+
[TRANSPOSED_FIRST_COLUMN_HEADER]: column.friendlyName,
|
|
73
156
|
};
|
|
74
|
-
for (
|
|
75
|
-
// [transposed-by-column-value[n]]: [other column value[n]]
|
|
157
|
+
for (const row of rowNodes) {
|
|
76
158
|
const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
|
|
77
|
-
// row[column.field]
|
|
78
159
|
let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
|
|
79
160
|
if (value instanceof Date) {
|
|
80
161
|
value = value.toLocaleString();
|
|
@@ -83,90 +164,25 @@ const TransposedPopup = (props) => {
|
|
|
83
164
|
}
|
|
84
165
|
transposedRows.push(transposedRow);
|
|
85
166
|
}
|
|
86
|
-
return {
|
|
87
|
-
|
|
88
|
-
transposedRows,
|
|
89
|
-
};
|
|
90
|
-
}, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
|
|
167
|
+
return { transposedColumns, transposedRows };
|
|
168
|
+
}, [rowNodes, primaryKey, elevatedColumnId, columns, transposeConfig.hideTransposedColumn, adaptable.api]);
|
|
91
169
|
React.useEffect(() => {
|
|
92
|
-
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
entitlementOptions: {
|
|
104
|
-
defaultAccessLevel: 'Hidden',
|
|
105
|
-
},
|
|
106
|
-
initialState: {
|
|
107
|
-
Layout: {
|
|
108
|
-
Revision: Date.now(),
|
|
109
|
-
CurrentLayout: 'TransposedView',
|
|
110
|
-
Layouts: [
|
|
111
|
-
{
|
|
112
|
-
Name: 'TransposedView',
|
|
113
|
-
TableColumns: [
|
|
114
|
-
transposedFirstColumnHeader,
|
|
115
|
-
...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
|
|
116
|
-
],
|
|
117
|
-
ColumnPinning: {
|
|
118
|
-
[transposedFirstColumnHeader]: 'left',
|
|
119
|
-
},
|
|
120
|
-
AutoSizeColumns: true,
|
|
121
|
-
},
|
|
122
|
-
],
|
|
123
|
-
},
|
|
124
|
-
Theme: {
|
|
125
|
-
CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
|
|
126
|
-
},
|
|
127
|
-
},
|
|
128
|
-
};
|
|
129
|
-
const firstColumn = {
|
|
130
|
-
field: transposedFirstColumnHeader, // use the column friendly name
|
|
131
|
-
headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
|
|
132
|
-
};
|
|
133
|
-
const agGridOptions = {
|
|
134
|
-
loading: false,
|
|
135
|
-
defaultColDef: {
|
|
136
|
-
floatingFilter: false,
|
|
137
|
-
filter: false,
|
|
138
|
-
sortable: true,
|
|
139
|
-
resizable: true,
|
|
140
|
-
enableRowGroup: false,
|
|
141
|
-
editable: false,
|
|
142
|
-
enablePivot: false,
|
|
143
|
-
enableValue: false,
|
|
144
|
-
lockPinned: true,
|
|
145
|
-
menuTabs: [],
|
|
146
|
-
width: 120,
|
|
147
|
-
},
|
|
148
|
-
columnDefs: [
|
|
149
|
-
{
|
|
150
|
-
field: transposedFirstColumnField,
|
|
151
|
-
hide: true,
|
|
152
|
-
},
|
|
153
|
-
firstColumn,
|
|
154
|
-
...transposedRowsAndColumns.transposedColumns.map((col) => {
|
|
155
|
-
return {
|
|
156
|
-
field: col.colId,
|
|
157
|
-
type: null,
|
|
158
|
-
headerName: col.header,
|
|
159
|
-
};
|
|
160
|
-
}),
|
|
161
|
-
],
|
|
162
|
-
rowData: transposedRowsAndColumns.transposedRows,
|
|
163
|
-
sideBar: false,
|
|
164
|
-
};
|
|
170
|
+
const hostOptions = adaptable.adaptableOptions;
|
|
171
|
+
const adaptableOptions = buildTransposedAdaptableOptions({
|
|
172
|
+
hostOptions,
|
|
173
|
+
transposedRowsAndColumns,
|
|
174
|
+
currentTheme: adaptable.api.themeApi.getCurrentTheme(),
|
|
175
|
+
});
|
|
176
|
+
const gridOptions = buildTransposedGridOptions({
|
|
177
|
+
transposedRowsAndColumns,
|
|
178
|
+
elevatedColumnId,
|
|
179
|
+
adaptableApi: adaptable.api,
|
|
180
|
+
});
|
|
165
181
|
const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
|
|
166
182
|
AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
|
|
167
183
|
variant: 'vanilla',
|
|
168
184
|
adaptableOptions,
|
|
169
|
-
gridOptions
|
|
185
|
+
gridOptions,
|
|
170
186
|
modules,
|
|
171
187
|
}).then((adaptableApi) => {
|
|
172
188
|
transposedAdaptableApiRef.current = adaptableApi;
|
|
@@ -174,31 +190,21 @@ const TransposedPopup = (props) => {
|
|
|
174
190
|
transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
|
|
175
191
|
});
|
|
176
192
|
});
|
|
177
|
-
}, [
|
|
193
|
+
}, [elevatedColumnId, adaptable]);
|
|
178
194
|
React.useEffect(() => {
|
|
179
|
-
// destroy when closing the popup
|
|
180
195
|
return () => {
|
|
181
196
|
requestAnimationFrame(() => {
|
|
182
197
|
transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
|
|
183
198
|
});
|
|
184
199
|
};
|
|
185
200
|
}, []);
|
|
186
|
-
/**
|
|
187
|
-
* Need to get all data, manualy pivot the grid using the primary key.
|
|
188
|
-
*
|
|
189
|
-
* 1. get the data, and pivot using the primary key
|
|
190
|
-
* 2. create the col definitios, a col definition for each row
|
|
191
|
-
* 3. create the grid
|
|
192
|
-
*/
|
|
193
201
|
return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
|
|
194
202
|
React.createElement(Panel_1.default, null,
|
|
195
203
|
React.createElement(FormLayout_1.default, null,
|
|
196
204
|
React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
|
|
197
|
-
React.createElement(ColumnSelector_1.ColumnSelector, { value:
|
|
198
|
-
setSyntheticTransposedByColumnId(colId);
|
|
199
|
-
} })))),
|
|
205
|
+
React.createElement(ColumnSelector_1.ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
|
|
200
206
|
React.createElement(Flex_1.Flex, { className: "twa:h-full" },
|
|
201
|
-
React.createElement(Flex_1.Box, { id:
|
|
202
|
-
React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id:
|
|
207
|
+
React.createElement(Flex_1.Box, { id: ADAPTABLE_CONTAINER_ID }),
|
|
208
|
+
React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
|
|
203
209
|
};
|
|
204
210
|
exports.TransposedPopup = TransposedPopup;
|
|
@@ -57,7 +57,7 @@ const ScheduleSettingsReminder = (props) => {
|
|
|
57
57
|
React.createElement(Tabs_1.Tabs.Content, null,
|
|
58
58
|
React.createElement(FormLayout_1.default, null,
|
|
59
59
|
React.createElement(FormLayout_1.FormRow, { label: "Name" },
|
|
60
|
-
React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter
|
|
60
|
+
React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Reminder Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
|
|
61
61
|
React.createElement(FormLayout_1.FormRow, { label: "" },
|
|
62
62
|
React.createElement(Flex_1.Box, { className: "twa:h-2" })),
|
|
63
63
|
React.createElement(FormLayout_1.FormRow, { label: "Header" },
|
package/src/View/UIHelper.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { Schedule, Weekday } from '../AdaptableState/Common/Schedule';
|
|
|
6
6
|
import { AdaptableColumnDataType, AdaptableSystemIconName, AdaptableOptions } from '../types';
|
|
7
7
|
import { AdaptableAlert } from '../AdaptableState/Common/AdaptableAlert';
|
|
8
8
|
import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
|
|
9
|
+
import type { ContainerContext } from '../AdaptableOptions/ContainerOptions';
|
|
9
10
|
export declare const BLACK: string;
|
|
10
11
|
export declare const WHITE: string;
|
|
11
12
|
export declare const LIGHT_GRAY: string;
|
|
@@ -31,7 +32,7 @@ export declare function getDefaultColors(): string[];
|
|
|
31
32
|
export declare function getEmptyConfigState(): EditableConfigEntityState;
|
|
32
33
|
export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
|
|
33
34
|
export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
|
|
34
|
-
export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
|
|
35
|
+
export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document, context?: ContainerContext): HTMLElement;
|
|
35
36
|
export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
|
|
36
37
|
export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
|
|
37
38
|
export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;
|
package/src/View/UIHelper.js
CHANGED
|
@@ -35,6 +35,7 @@ const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableCo
|
|
|
35
35
|
const Enums_1 = require("../AdaptableState/Common/Enums");
|
|
36
36
|
const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
|
|
37
37
|
const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
|
|
38
|
+
const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
|
|
38
39
|
exports.BLACK = 'Black';
|
|
39
40
|
exports.WHITE = 'White';
|
|
40
41
|
exports.LIGHT_GRAY = 'LightGray';
|
|
@@ -153,19 +154,12 @@ function getPlaceholderForDataType(dataType) {
|
|
|
153
154
|
return 'Enter Date';
|
|
154
155
|
}
|
|
155
156
|
}
|
|
156
|
-
function getModalContainer(adaptableOptions, document) {
|
|
157
|
-
let modalContainer;
|
|
158
|
-
if (
|
|
159
|
-
|
|
160
|
-
modalContainer
|
|
161
|
-
|
|
162
|
-
? document.getElementById(adaptableOptions.containerOptions.modalContainer)
|
|
163
|
-
: adaptableOptions.containerOptions.modalContainer;
|
|
164
|
-
if (modalContainer) {
|
|
165
|
-
const modalContainerClassName = ' modal-container';
|
|
166
|
-
if (!modalContainer.className.includes(modalContainerClassName)) {
|
|
167
|
-
modalContainer.className += modalContainerClassName;
|
|
168
|
-
}
|
|
157
|
+
function getModalContainer(adaptableOptions, document, context) {
|
|
158
|
+
let modalContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptableOptions.containerOptions.modalContainer, context, document);
|
|
159
|
+
if (modalContainer) {
|
|
160
|
+
const modalContainerClassName = ' modal-container';
|
|
161
|
+
if (!modalContainer.className.includes(modalContainerClassName)) {
|
|
162
|
+
modalContainer.className += modalContainerClassName;
|
|
169
163
|
}
|
|
170
164
|
}
|
|
171
165
|
if (!modalContainer) {
|
|
@@ -456,7 +450,7 @@ function getAdaptableToolPanelWidth() {
|
|
|
456
450
|
return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
|
|
457
451
|
}
|
|
458
452
|
function getSimpleButtonPaddingWidth() {
|
|
459
|
-
return getNumericCSSVariableValue(getCSSVariableValue('--ab-space
|
|
453
|
+
return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
|
|
460
454
|
}
|
|
461
455
|
function getCSSVariableValue(cssVariable) {
|
|
462
456
|
if (!isBrowserDocumentAvailable()) {
|
package/src/agGrid/Adaptable.js
CHANGED
|
@@ -9,6 +9,7 @@ const AdaptableAgGrid_1 = require("./AdaptableAgGrid");
|
|
|
9
9
|
const DefaultAdaptableOptions_1 = require("../AdaptableOptions/DefaultAdaptableOptions");
|
|
10
10
|
const renderReactRoot_1 = require("../renderReactRoot");
|
|
11
11
|
const AdaptableWizardView_1 = tslib_1.__importDefault(require("../View/AdaptableWizardView"));
|
|
12
|
+
const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
|
|
12
13
|
class Adaptable {
|
|
13
14
|
/**
|
|
14
15
|
* Initializer for Adaptable
|
|
@@ -44,19 +45,18 @@ class AdaptableNoCodeWizard {
|
|
|
44
45
|
this.render();
|
|
45
46
|
}
|
|
46
47
|
render(container) {
|
|
47
|
-
let id = (0, DefaultAdaptableOptions_1.getDefaultAdaptableOptions)().containerOptions.adaptableContainer || 'adaptable';
|
|
48
48
|
if (!container) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
const initContext = {
|
|
50
|
+
adaptableId: this.adaptableOptions?.adaptableId ?? '',
|
|
51
|
+
adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
|
|
52
|
+
adaptableContext: this.adaptableOptions?.adaptableContext,
|
|
53
|
+
};
|
|
54
|
+
container = (0, resolveContainerElement_1.resolveContainerElement)(this.adaptableOptions.containerOptions?.adaptableContainer, initContext);
|
|
55
|
+
}
|
|
56
|
+
if (!container) {
|
|
57
|
+
const defaultId = (0, DefaultAdaptableOptions_1.getDefaultAdaptableOptions)().containerOptions.adaptableContainer || 'adaptable';
|
|
58
|
+
container = document.getElementById(defaultId);
|
|
58
59
|
}
|
|
59
|
-
container = container || document.getElementById(id);
|
|
60
60
|
if (!container) {
|
|
61
61
|
throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
|
|
62
62
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
|
|
2
|
-
import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from 'ag-grid-enterprise';
|
|
2
|
+
import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType, StatusPanelDef } from 'ag-grid-enterprise';
|
|
3
3
|
import { AdaptableLogger } from './AdaptableLogger';
|
|
4
4
|
import { AdaptableApi, DestroyConfig } from '../Api/AdaptableApi';
|
|
5
5
|
import { AdaptableVariant, IAdaptable, NormalizeAdaptableStateOptions } from '../AdaptableInterfaces/IAdaptable';
|
|
@@ -20,7 +20,7 @@ import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
|
|
|
20
20
|
import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
|
|
21
21
|
import { IModuleCollection } from '../Strategy/Interface/IModule';
|
|
22
22
|
import { AgGridMenuAdapter } from './AgGridMenuAdapter';
|
|
23
|
-
import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, InFilterValueResult, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
|
|
23
|
+
import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataRowConfig, DataUpdateConfig, GridCell, InFilterValueResult, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
|
|
24
24
|
import { RenderReactRootFn } from '../renderReactRoot';
|
|
25
25
|
import { AgGridOptionsService } from './AgGridOptionsService';
|
|
26
26
|
import { AgGridColumnAdapter } from './AgGridColumnAdapter';
|
|
@@ -119,6 +119,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
|
|
|
119
119
|
* Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
|
|
120
120
|
*/
|
|
121
121
|
private adaptableStatusPanelKeys;
|
|
122
|
+
private adaptableStatusPanelDefs;
|
|
123
|
+
hasAdaptableStatusBar: boolean;
|
|
122
124
|
_PRIVATE_adaptableJSXElement: React.JSX.Element;
|
|
123
125
|
private _prevLayout;
|
|
124
126
|
private __prevLayoutForRefresh;
|
|
@@ -163,6 +165,11 @@ export declare class AdaptableAgGrid implements IAdaptable {
|
|
|
163
165
|
private refreshInitialSortIfNeeded;
|
|
164
166
|
showQuickFilter(): void;
|
|
165
167
|
hideQuickFilter(): void;
|
|
168
|
+
showAdaptableToolPanel(): void;
|
|
169
|
+
hideAdaptableToolPanel(): void;
|
|
170
|
+
private buildAdaptableToolPanelDef;
|
|
171
|
+
showAdaptableStatusBar(): void;
|
|
172
|
+
hideAdaptableStatusBar(): void;
|
|
166
173
|
private normalizeAdaptableOptions;
|
|
167
174
|
private setInitialGridOptions;
|
|
168
175
|
/**
|
|
@@ -170,6 +177,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
|
|
|
170
177
|
*/
|
|
171
178
|
private initializeAgGrid;
|
|
172
179
|
useRowNodeLookUp(): boolean;
|
|
180
|
+
private buildInitContainerContext;
|
|
173
181
|
getAgGridContainerElement(): HTMLElement | null;
|
|
174
182
|
getAdaptableContainerElement(): HTMLElement;
|
|
175
183
|
refreshSelectedCellsState(): SelectedCellInfo | undefined;
|
|
@@ -257,11 +265,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
|
|
|
257
265
|
added: IRowNode[];
|
|
258
266
|
updated: IRowNode[];
|
|
259
267
|
}>;
|
|
260
|
-
manageGridRows(
|
|
261
|
-
add?: any[];
|
|
262
|
-
update?: any[];
|
|
263
|
-
delete?: any[];
|
|
264
|
-
}, config?: DataUpdateConfig): Promise<{
|
|
268
|
+
manageGridRows(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
|
|
265
269
|
addedRows: IRowNode[];
|
|
266
270
|
updatedRows: IRowNode[];
|
|
267
271
|
removedRows: IRowNode[];
|
|
@@ -292,7 +296,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
|
|
|
292
296
|
getGridCellsForColumn(columnId: string, onlyVisibleRows?: boolean): GridCell[] | undefined;
|
|
293
297
|
getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
|
|
294
298
|
getRowNodeByIndex(index: number): IRowNode;
|
|
295
|
-
getAgGridStatusPanels():
|
|
299
|
+
getAgGridStatusPanels(): StatusPanelDef[];
|
|
296
300
|
setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: IRowNode): void;
|
|
297
301
|
forAllRowNodesDo(func: (rowNode: IRowNode, rowIndex: number) => void, config?: {
|
|
298
302
|
includeGroupRows?: boolean;
|