@adaptabletools/adaptable 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 +1 -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 +1 -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 +21 -0
- package/src/Redux/Store/AdaptableStore.js +27 -0
- package/src/Utilities/resolveContainerElement.d.ts +23 -0
- package/src/Utilities/resolveContainerElement.js +44 -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 +36 -1
- 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.esm.tsbuildinfo +1 -1
|
@@ -5,72 +5,153 @@ import { useAdaptable } from '../AdaptableContext';
|
|
|
5
5
|
import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
|
|
6
6
|
import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
|
|
7
7
|
import { Box, Flex } from '../../components/Flex';
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
|
|
9
|
+
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
|
|
10
|
+
const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
|
|
11
|
+
const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
|
|
12
|
+
/** Field used for the first column in transposed grid (hidden, holds column id). */
|
|
13
|
+
const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
|
|
14
|
+
/** Header used for the first visible column in transposed grid (shows friendly name). */
|
|
15
|
+
const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
|
|
16
|
+
function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
|
|
17
|
+
return {
|
|
18
|
+
primaryKey: TRANSPOSED_FIRST_COLUMN_FIELD,
|
|
19
|
+
licenseKey: hostOptions.licenseKey,
|
|
20
|
+
userName: `${hostOptions.userName}`,
|
|
21
|
+
adaptableId: `${hostOptions.adaptableId}::TransposedView`,
|
|
22
|
+
containerOptions: {
|
|
23
|
+
adaptableContainer: ADAPTABLE_CONTAINER_ID,
|
|
24
|
+
agGridContainer: AG_GRID_CONTAINER_ID,
|
|
25
|
+
},
|
|
26
|
+
entitlementOptions: { defaultAccessLevel: 'Hidden' },
|
|
27
|
+
initialState: {
|
|
28
|
+
Layout: {
|
|
29
|
+
Revision: Date.now(),
|
|
30
|
+
CurrentLayout: 'TransposedView',
|
|
31
|
+
Layouts: [
|
|
32
|
+
{
|
|
33
|
+
Name: 'TransposedView',
|
|
34
|
+
TableColumns: [
|
|
35
|
+
TRANSPOSED_FIRST_COLUMN_HEADER,
|
|
36
|
+
...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
|
|
37
|
+
],
|
|
38
|
+
ColumnPinning: { [TRANSPOSED_FIRST_COLUMN_HEADER]: 'left' },
|
|
39
|
+
AutoSizeColumns: true,
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
Theme: { CurrentTheme: currentTheme },
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
function buildTransposedGridOptions({ transposedRowsAndColumns, elevatedColumnId, adaptableApi, }) {
|
|
48
|
+
const firstColumn = {
|
|
49
|
+
field: TRANSPOSED_FIRST_COLUMN_HEADER,
|
|
50
|
+
headerName: adaptableApi.columnApi.getFriendlyNameForColumnId(elevatedColumnId),
|
|
51
|
+
};
|
|
52
|
+
return {
|
|
53
|
+
loading: false,
|
|
54
|
+
defaultColDef: {
|
|
55
|
+
floatingFilter: false,
|
|
56
|
+
filter: false,
|
|
57
|
+
sortable: true,
|
|
58
|
+
resizable: true,
|
|
59
|
+
enableRowGroup: false,
|
|
60
|
+
editable: false,
|
|
61
|
+
enablePivot: false,
|
|
62
|
+
enableValue: false,
|
|
63
|
+
lockPinned: true,
|
|
64
|
+
menuTabs: [],
|
|
65
|
+
width: 120,
|
|
66
|
+
},
|
|
67
|
+
columnDefs: [
|
|
68
|
+
{ field: TRANSPOSED_FIRST_COLUMN_FIELD, hide: true },
|
|
69
|
+
firstColumn,
|
|
70
|
+
...transposedRowsAndColumns.transposedColumns.map((col) => ({ field: col.colId, headerName: col.header })),
|
|
71
|
+
],
|
|
72
|
+
rowData: transposedRowsAndColumns.transposedRows,
|
|
73
|
+
sideBar: false,
|
|
74
|
+
};
|
|
75
|
+
}
|
|
10
76
|
export const TransposedPopup = (props) => {
|
|
11
77
|
const adaptable = useAdaptable();
|
|
12
|
-
const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
|
|
13
|
-
const rowNodes = React.useMemo(() => {
|
|
14
|
-
return props.popupProps.visibleRows
|
|
15
|
-
? adaptable.api.gridApi.getVisibleRowNodes()
|
|
16
|
-
: adaptable.api.gridApi.getAllRowNodes();
|
|
17
|
-
}, [
|
|
18
|
-
// can be later triggered by tickng data
|
|
19
|
-
]);
|
|
20
78
|
const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
|
|
21
|
-
const
|
|
22
|
-
const
|
|
79
|
+
const rawConfig = (props.popupProps ?? {});
|
|
80
|
+
const transposeConfig = {
|
|
81
|
+
transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
|
|
82
|
+
hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
|
|
83
|
+
autosize: rawConfig.autosize ?? true,
|
|
84
|
+
columnsToTranspose: rawConfig.columnsToTranspose,
|
|
85
|
+
rowsToTranspose: rawConfig.rowsToTranspose,
|
|
86
|
+
};
|
|
87
|
+
const rowNodes = React.useMemo(() => {
|
|
88
|
+
let transposableRowNodes = [];
|
|
89
|
+
const rowsToTranspose = transposeConfig.rowsToTranspose;
|
|
90
|
+
if (rowsToTranspose === 'VisibleOnly') {
|
|
91
|
+
return adaptable.api.gridApi.getVisibleRowNodes();
|
|
92
|
+
}
|
|
93
|
+
if (rowsToTranspose === 'All') {
|
|
94
|
+
return adaptable.api.gridApi.getAllRowNodes();
|
|
95
|
+
}
|
|
96
|
+
if (StringExtensions.IsNotNullOrEmpty(rowsToTranspose)) {
|
|
97
|
+
adaptable.api.gridApi.getAllRowNodes().forEach((rn) => {
|
|
98
|
+
const shouldTransposeRow = adaptable.api.internalApi
|
|
99
|
+
.getQueryLanguageService()
|
|
100
|
+
.evaluateBooleanExpression(rowsToTranspose, ExportModuleId, rn);
|
|
101
|
+
if (shouldTransposeRow) {
|
|
102
|
+
transposableRowNodes.push(rn);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
return transposableRowNodes;
|
|
106
|
+
}
|
|
107
|
+
return adaptable.api.gridApi.getAllRowNodes();
|
|
108
|
+
}, [transposeConfig.rowsToTranspose, adaptable.api]);
|
|
109
|
+
const [elevatedColumnId, setElevatedColumnIdState] = React.useState(() => transposeConfig.transposedColumnId ?? primaryKey);
|
|
110
|
+
const setElevatedColumnId = (newElevatedColumnId) => {
|
|
23
111
|
transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
|
|
24
|
-
|
|
112
|
+
setElevatedColumnIdState(newElevatedColumnId);
|
|
25
113
|
};
|
|
26
114
|
const transposedAdaptableApiRef = React.useRef(null);
|
|
27
115
|
const columns = React.useMemo(() => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
116
|
+
const allUIColumns = adaptable.api.columnApi.getUIAvailableColumns();
|
|
117
|
+
const columnsToTranspose = transposeConfig.columnsToTranspose;
|
|
118
|
+
if (!columnsToTranspose) {
|
|
119
|
+
return allUIColumns;
|
|
120
|
+
}
|
|
121
|
+
const columnIds = typeof columnsToTranspose === 'function'
|
|
122
|
+
? columnsToTranspose({
|
|
123
|
+
...adaptable.api.internalApi.buildBaseContext(),
|
|
124
|
+
columns: allUIColumns,
|
|
125
|
+
})
|
|
126
|
+
: columnsToTranspose;
|
|
127
|
+
return columnIds
|
|
128
|
+
.map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
|
|
129
|
+
.filter((col) => col != null);
|
|
130
|
+
}, [transposeConfig.columnsToTranspose, adaptable.api]);
|
|
33
131
|
/**
|
|
34
|
-
*
|
|
132
|
+
* Build transposed structure: original rows become columns (colId = primaryKey value),
|
|
133
|
+
* original columns become rows. Each transposed row has the column id/header plus
|
|
134
|
+
* one cell per original row keyed by primaryKey value.
|
|
35
135
|
*/
|
|
36
|
-
const transposedFirstColumnField = '_transposed_column_value';
|
|
37
|
-
const transposedFirstColumnHeader = '_transposed_column_header';
|
|
38
136
|
const transposedRowsAndColumns = React.useMemo(() => {
|
|
39
|
-
/**
|
|
40
|
-
* transposed column values become primaryKey of the new tarnsposed rows
|
|
41
|
-
* we build row by row, might be easer
|
|
42
|
-
*/
|
|
43
137
|
const transposedColumns = [];
|
|
44
138
|
const transposedRows = [];
|
|
45
139
|
for (const row of rowNodes) {
|
|
46
|
-
// we force the col-ids to be strings, easer to work with
|
|
47
|
-
//row[transposeByColumnId] + '';
|
|
48
140
|
const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
'';
|
|
52
|
-
transposedColumns.push({
|
|
53
|
-
colId,
|
|
54
|
-
header,
|
|
55
|
-
});
|
|
141
|
+
const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, elevatedColumnId) + '';
|
|
142
|
+
transposedColumns.push({ colId, header });
|
|
56
143
|
}
|
|
57
144
|
for (const column of columns) {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
*/
|
|
61
|
-
if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
|
|
145
|
+
if (transposeConfig.hideTransposedColumn &&
|
|
146
|
+
column.columnId === elevatedColumnId) {
|
|
62
147
|
continue;
|
|
63
148
|
}
|
|
64
149
|
const transposedRow = {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
[transposedFirstColumnField]: column.columnId,
|
|
68
|
-
[transposedFirstColumnHeader]: column.friendlyName,
|
|
150
|
+
[TRANSPOSED_FIRST_COLUMN_FIELD]: column.columnId,
|
|
151
|
+
[TRANSPOSED_FIRST_COLUMN_HEADER]: column.friendlyName,
|
|
69
152
|
};
|
|
70
|
-
for (
|
|
71
|
-
// [transposed-by-column-value[n]]: [other column value[n]]
|
|
153
|
+
for (const row of rowNodes) {
|
|
72
154
|
const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
|
|
73
|
-
// row[column.field]
|
|
74
155
|
let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
|
|
75
156
|
if (value instanceof Date) {
|
|
76
157
|
value = value.toLocaleString();
|
|
@@ -79,90 +160,25 @@ export const TransposedPopup = (props) => {
|
|
|
79
160
|
}
|
|
80
161
|
transposedRows.push(transposedRow);
|
|
81
162
|
}
|
|
82
|
-
return {
|
|
83
|
-
|
|
84
|
-
transposedRows,
|
|
85
|
-
};
|
|
86
|
-
}, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
|
|
163
|
+
return { transposedColumns, transposedRows };
|
|
164
|
+
}, [rowNodes, primaryKey, elevatedColumnId, columns, transposeConfig.hideTransposedColumn, adaptable.api]);
|
|
87
165
|
React.useEffect(() => {
|
|
88
|
-
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
entitlementOptions: {
|
|
100
|
-
defaultAccessLevel: 'Hidden',
|
|
101
|
-
},
|
|
102
|
-
initialState: {
|
|
103
|
-
Layout: {
|
|
104
|
-
Revision: Date.now(),
|
|
105
|
-
CurrentLayout: 'TransposedView',
|
|
106
|
-
Layouts: [
|
|
107
|
-
{
|
|
108
|
-
Name: 'TransposedView',
|
|
109
|
-
TableColumns: [
|
|
110
|
-
transposedFirstColumnHeader,
|
|
111
|
-
...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
|
|
112
|
-
],
|
|
113
|
-
ColumnPinning: {
|
|
114
|
-
[transposedFirstColumnHeader]: 'left',
|
|
115
|
-
},
|
|
116
|
-
AutoSizeColumns: true,
|
|
117
|
-
},
|
|
118
|
-
],
|
|
119
|
-
},
|
|
120
|
-
Theme: {
|
|
121
|
-
CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
|
|
122
|
-
},
|
|
123
|
-
},
|
|
124
|
-
};
|
|
125
|
-
const firstColumn = {
|
|
126
|
-
field: transposedFirstColumnHeader, // use the column friendly name
|
|
127
|
-
headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
|
|
128
|
-
};
|
|
129
|
-
const agGridOptions = {
|
|
130
|
-
loading: false,
|
|
131
|
-
defaultColDef: {
|
|
132
|
-
floatingFilter: false,
|
|
133
|
-
filter: false,
|
|
134
|
-
sortable: true,
|
|
135
|
-
resizable: true,
|
|
136
|
-
enableRowGroup: false,
|
|
137
|
-
editable: false,
|
|
138
|
-
enablePivot: false,
|
|
139
|
-
enableValue: false,
|
|
140
|
-
lockPinned: true,
|
|
141
|
-
menuTabs: [],
|
|
142
|
-
width: 120,
|
|
143
|
-
},
|
|
144
|
-
columnDefs: [
|
|
145
|
-
{
|
|
146
|
-
field: transposedFirstColumnField,
|
|
147
|
-
hide: true,
|
|
148
|
-
},
|
|
149
|
-
firstColumn,
|
|
150
|
-
...transposedRowsAndColumns.transposedColumns.map((col) => {
|
|
151
|
-
return {
|
|
152
|
-
field: col.colId,
|
|
153
|
-
type: null,
|
|
154
|
-
headerName: col.header,
|
|
155
|
-
};
|
|
156
|
-
}),
|
|
157
|
-
],
|
|
158
|
-
rowData: transposedRowsAndColumns.transposedRows,
|
|
159
|
-
sideBar: false,
|
|
160
|
-
};
|
|
166
|
+
const hostOptions = adaptable.adaptableOptions;
|
|
167
|
+
const adaptableOptions = buildTransposedAdaptableOptions({
|
|
168
|
+
hostOptions,
|
|
169
|
+
transposedRowsAndColumns,
|
|
170
|
+
currentTheme: adaptable.api.themeApi.getCurrentTheme(),
|
|
171
|
+
});
|
|
172
|
+
const gridOptions = buildTransposedGridOptions({
|
|
173
|
+
transposedRowsAndColumns,
|
|
174
|
+
elevatedColumnId,
|
|
175
|
+
adaptableApi: adaptable.api,
|
|
176
|
+
});
|
|
161
177
|
const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
|
|
162
178
|
AdaptableAgGrid._initInternal({
|
|
163
179
|
variant: 'vanilla',
|
|
164
180
|
adaptableOptions,
|
|
165
|
-
gridOptions
|
|
181
|
+
gridOptions,
|
|
166
182
|
modules,
|
|
167
183
|
}).then((adaptableApi) => {
|
|
168
184
|
transposedAdaptableApiRef.current = adaptableApi;
|
|
@@ -170,30 +186,20 @@ export const TransposedPopup = (props) => {
|
|
|
170
186
|
transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
|
|
171
187
|
});
|
|
172
188
|
});
|
|
173
|
-
}, [
|
|
189
|
+
}, [elevatedColumnId, adaptable]);
|
|
174
190
|
React.useEffect(() => {
|
|
175
|
-
// destroy when closing the popup
|
|
176
191
|
return () => {
|
|
177
192
|
requestAnimationFrame(() => {
|
|
178
193
|
transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
|
|
179
194
|
});
|
|
180
195
|
};
|
|
181
196
|
}, []);
|
|
182
|
-
/**
|
|
183
|
-
* Need to get all data, manualy pivot the grid using the primary key.
|
|
184
|
-
*
|
|
185
|
-
* 1. get the data, and pivot using the primary key
|
|
186
|
-
* 2. create the col definitios, a col definition for each row
|
|
187
|
-
* 3. create the grid
|
|
188
|
-
*/
|
|
189
197
|
return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
|
|
190
198
|
React.createElement(Panel, null,
|
|
191
199
|
React.createElement(FormLayout, null,
|
|
192
200
|
React.createElement(FormRow, { label: "Elevated Column" },
|
|
193
|
-
React.createElement(ColumnSelector, { value:
|
|
194
|
-
setSyntheticTransposedByColumnId(colId);
|
|
195
|
-
} })))),
|
|
201
|
+
React.createElement(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
|
|
196
202
|
React.createElement(Flex, { className: "twa:h-full" },
|
|
197
|
-
React.createElement(Box, { id:
|
|
198
|
-
React.createElement(Box, { className: "twa:h-full twa:w-full", id:
|
|
203
|
+
React.createElement(Box, { id: ADAPTABLE_CONTAINER_ID }),
|
|
204
|
+
React.createElement(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
|
|
199
205
|
};
|
|
@@ -53,7 +53,7 @@ export const ScheduleSettingsReminder = (props) => {
|
|
|
53
53
|
React.createElement(Tabs.Content, null,
|
|
54
54
|
React.createElement(FormLayout, null,
|
|
55
55
|
React.createElement(FormRow, { label: "Name" },
|
|
56
|
-
React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter
|
|
56
|
+
React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Reminder Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
|
|
57
57
|
React.createElement(FormRow, { label: "" },
|
|
58
58
|
React.createElement(Box, { className: "twa:h-2" })),
|
|
59
59
|
React.createElement(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
|
@@ -2,6 +2,7 @@ import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityStat
|
|
|
2
2
|
import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
|
|
3
3
|
import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
|
|
4
4
|
import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
|
|
5
|
+
import { resolveContainerElement } from '../Utilities/resolveContainerElement';
|
|
5
6
|
export const BLACK = 'Black';
|
|
6
7
|
export const WHITE = 'White';
|
|
7
8
|
export const LIGHT_GRAY = 'LightGray';
|
|
@@ -120,19 +121,12 @@ export function getPlaceholderForDataType(dataType) {
|
|
|
120
121
|
return 'Enter Date';
|
|
121
122
|
}
|
|
122
123
|
}
|
|
123
|
-
export function getModalContainer(adaptableOptions, document) {
|
|
124
|
-
let modalContainer;
|
|
125
|
-
if (
|
|
126
|
-
|
|
127
|
-
modalContainer
|
|
128
|
-
|
|
129
|
-
? document.getElementById(adaptableOptions.containerOptions.modalContainer)
|
|
130
|
-
: adaptableOptions.containerOptions.modalContainer;
|
|
131
|
-
if (modalContainer) {
|
|
132
|
-
const modalContainerClassName = ' modal-container';
|
|
133
|
-
if (!modalContainer.className.includes(modalContainerClassName)) {
|
|
134
|
-
modalContainer.className += modalContainerClassName;
|
|
135
|
-
}
|
|
124
|
+
export function getModalContainer(adaptableOptions, document, context) {
|
|
125
|
+
let modalContainer = resolveContainerElement(adaptableOptions.containerOptions.modalContainer, context, document);
|
|
126
|
+
if (modalContainer) {
|
|
127
|
+
const modalContainerClassName = ' modal-container';
|
|
128
|
+
if (!modalContainer.className.includes(modalContainerClassName)) {
|
|
129
|
+
modalContainer.className += modalContainerClassName;
|
|
136
130
|
}
|
|
137
131
|
}
|
|
138
132
|
if (!modalContainer) {
|
|
@@ -423,7 +417,7 @@ export function getAdaptableToolPanelWidth() {
|
|
|
423
417
|
return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
|
|
424
418
|
}
|
|
425
419
|
export function getSimpleButtonPaddingWidth() {
|
|
426
|
-
return getNumericCSSVariableValue(getCSSVariableValue('--ab-space
|
|
420
|
+
return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
|
|
427
421
|
}
|
|
428
422
|
export function getCSSVariableValue(cssVariable) {
|
|
429
423
|
if (!isBrowserDocumentAvailable()) {
|
package/src/agGrid/Adaptable.js
CHANGED
|
@@ -5,6 +5,7 @@ import { AdaptableAgGrid } from './AdaptableAgGrid';
|
|
|
5
5
|
import { getDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
|
|
6
6
|
import { renderReactRoot as defaultRenderReactRoot } from '../renderReactRoot';
|
|
7
7
|
import AdaptableWizardView from '../View/AdaptableWizardView';
|
|
8
|
+
import { resolveContainerElement } from '../Utilities/resolveContainerElement';
|
|
8
9
|
export class Adaptable {
|
|
9
10
|
/**
|
|
10
11
|
* Initializer for Adaptable
|
|
@@ -39,19 +40,18 @@ export class AdaptableNoCodeWizard {
|
|
|
39
40
|
this.render();
|
|
40
41
|
}
|
|
41
42
|
render(container) {
|
|
42
|
-
let id = getDefaultAdaptableOptions().containerOptions.adaptableContainer || 'adaptable';
|
|
43
43
|
if (!container) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
44
|
+
const initContext = {
|
|
45
|
+
adaptableId: this.adaptableOptions?.adaptableId ?? '',
|
|
46
|
+
adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
|
|
47
|
+
adaptableContext: this.adaptableOptions?.adaptableContext,
|
|
48
|
+
};
|
|
49
|
+
container = resolveContainerElement(this.adaptableOptions.containerOptions?.adaptableContainer, initContext);
|
|
50
|
+
}
|
|
51
|
+
if (!container) {
|
|
52
|
+
const defaultId = getDefaultAdaptableOptions().containerOptions.adaptableContainer || 'adaptable';
|
|
53
|
+
container = document.getElementById(defaultId);
|
|
53
54
|
}
|
|
54
|
-
container = container || document.getElementById(id);
|
|
55
55
|
if (!container) {
|
|
56
56
|
throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
|
|
57
57
|
}
|
|
@@ -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;
|