@slickgrid-universal/composite-editor-component 5.11.0 → 5.12.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/cjs/compositeEditor.factory.js +5 -5
- package/dist/cjs/compositeEditor.factory.js.map +1 -1
- package/dist/cjs/slick-composite-editor.component.js +96 -37
- package/dist/cjs/slick-composite-editor.component.js.map +1 -1
- package/dist/esm/compositeEditor.factory.js +6 -6
- package/dist/esm/compositeEditor.factory.js.map +1 -1
- package/dist/esm/slick-composite-editor.component.js +96 -37
- package/dist/esm/slick-composite-editor.component.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/compositeEditor.factory.d.ts.map +1 -1
- package/dist/types/slick-composite-editor.component.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/compositeEditor.factory.ts +25 -12
- package/src/slick-composite-editor.component.ts +162 -61
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slick-composite-editor.component.d.ts","sourceRoot":"","sources":["../../src/slick-composite-editor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,KAAK,EACV,MAAM,EACN,oBAAoB,EAEpB,+BAA+B,EAC/B,qBAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,MAAM,EACN,gCAAgC,EAChC,aAAa,EACb,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAS,EACT,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAKL,iBAAiB,EAElB,MAAM,6BAA6B,CAAC;AAMrC,KAAK,sBAAsB,GAAG,CAC5B,UAAU,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"slick-composite-editor.component.d.ts","sourceRoot":"","sources":["../../src/slick-composite-editor.component.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slickgrid-universal/composite-editor-component",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.12.0",
|
|
4
4
|
"description": "Slick Composite Editor Component - Vanilla Implementation of a Composite Editor Modal Window Component",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/types/index.d.ts",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"not dead"
|
|
39
39
|
],
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@slickgrid-universal/binding": "~5.
|
|
42
|
-
"@slickgrid-universal/common": "~5.
|
|
43
|
-
"@slickgrid-universal/utils": "~5.
|
|
41
|
+
"@slickgrid-universal/binding": "~5.12.0",
|
|
42
|
+
"@slickgrid-universal/common": "~5.12.0",
|
|
43
|
+
"@slickgrid-universal/utils": "~5.12.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "d7e892ebc1727d7c83cc1e5cc80db8302eef4f63"
|
|
46
46
|
}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
import { emptyElement, getOffset
|
|
2
|
-
import type {
|
|
1
|
+
import { emptyElement, getOffset } from '@slickgrid-universal/common';
|
|
2
|
+
import type {
|
|
3
|
+
Column,
|
|
4
|
+
CompositeEditorOption,
|
|
5
|
+
Editor,
|
|
6
|
+
EditorArguments,
|
|
7
|
+
EditorConstructor,
|
|
8
|
+
EditorValidationResult,
|
|
9
|
+
ElementPosition,
|
|
10
|
+
} from '@slickgrid-universal/common';
|
|
3
11
|
import type { HtmlElementPosition } from '@slickgrid-universal/utils';
|
|
4
12
|
|
|
5
13
|
export interface CompositeEditorArguments extends EditorArguments {
|
|
@@ -32,7 +40,12 @@ export interface CompositeEditorArguments extends EditorArguments {
|
|
|
32
40
|
* position - A function to be called when the grid asks the editor to reposition itself.
|
|
33
41
|
* destroy - A function to be called when the editor is destroyed.
|
|
34
42
|
*/
|
|
35
|
-
export function SlickCompositeEditor(
|
|
43
|
+
export function SlickCompositeEditor(
|
|
44
|
+
this: any,
|
|
45
|
+
columns: Column[],
|
|
46
|
+
containers: Array<HTMLDivElement>,
|
|
47
|
+
options: CompositeEditorOption
|
|
48
|
+
): {
|
|
36
49
|
(this: any, args: EditorArguments): void;
|
|
37
50
|
prototype: any;
|
|
38
51
|
} {
|
|
@@ -46,12 +59,12 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
46
59
|
position: null,
|
|
47
60
|
destroy: null,
|
|
48
61
|
formValues: {},
|
|
49
|
-
editors: {}
|
|
62
|
+
editors: {},
|
|
50
63
|
} as unknown as CompositeEditorOption;
|
|
51
64
|
options = { ...defaultOptions, ...options };
|
|
52
65
|
|
|
53
66
|
/* no operation (empty) function */
|
|
54
|
-
const noop = () => {
|
|
67
|
+
const noop = () => {};
|
|
55
68
|
|
|
56
69
|
const getContainerBox = (i: number): ElementPosition => {
|
|
57
70
|
const container = containers[i];
|
|
@@ -66,7 +79,7 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
66
79
|
right: offset.left + width,
|
|
67
80
|
width,
|
|
68
81
|
height,
|
|
69
|
-
visible: true
|
|
82
|
+
visible: true,
|
|
70
83
|
};
|
|
71
84
|
};
|
|
72
85
|
|
|
@@ -74,7 +87,7 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
74
87
|
function editor(this: any, args: EditorArguments) {
|
|
75
88
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
76
89
|
const context: any = this;
|
|
77
|
-
let editors: Array<Editor & { args: EditorArguments
|
|
90
|
+
let editors: Array<Editor & { args: EditorArguments }> = [];
|
|
78
91
|
|
|
79
92
|
function init() {
|
|
80
93
|
let newArgs = {} as CompositeEditorArguments;
|
|
@@ -93,7 +106,7 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
93
106
|
|
|
94
107
|
const currentEditor = new (column.editorClass as EditorConstructor)(newArgs);
|
|
95
108
|
options.editors[column.id] = currentEditor; // add every Editor instance refs
|
|
96
|
-
editors.push(currentEditor as Editor & { args: EditorArguments
|
|
109
|
+
editors.push(currentEditor as Editor & { args: EditorArguments });
|
|
97
110
|
}
|
|
98
111
|
idx++;
|
|
99
112
|
}
|
|
@@ -196,7 +209,7 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
196
209
|
index: idx,
|
|
197
210
|
editor: editors[idx],
|
|
198
211
|
container: containers[idx],
|
|
199
|
-
msg: validationResults.msg
|
|
212
|
+
msg: validationResults.msg,
|
|
200
213
|
});
|
|
201
214
|
|
|
202
215
|
if (validationElm) {
|
|
@@ -222,12 +235,12 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
222
235
|
return {
|
|
223
236
|
valid: false,
|
|
224
237
|
msg: options.validationFailedMsg,
|
|
225
|
-
errors
|
|
238
|
+
errors,
|
|
226
239
|
};
|
|
227
240
|
}
|
|
228
241
|
return {
|
|
229
242
|
valid: true,
|
|
230
|
-
msg: ''
|
|
243
|
+
msg: '',
|
|
231
244
|
};
|
|
232
245
|
};
|
|
233
246
|
|
|
@@ -261,4 +274,4 @@ export function SlickCompositeEditor(this: any, columns: Column[], containers: A
|
|
|
261
274
|
editor.prototype = this;
|
|
262
275
|
|
|
263
276
|
return editor;
|
|
264
|
-
}
|
|
277
|
+
}
|
|
@@ -36,9 +36,9 @@ import { SlickCompositeEditor } from './compositeEditor.factory.js';
|
|
|
36
36
|
const DEFAULT_ON_ERROR = (error: OnErrorOption) => console.log(error.message);
|
|
37
37
|
|
|
38
38
|
type ApplyChangesCallbackFn = (
|
|
39
|
-
formValues: { [columnId: string]: any
|
|
40
|
-
selection: { gridRowIndexes: number[]; dataContextIds: Array<number | string
|
|
41
|
-
applyToDataview?: boolean
|
|
39
|
+
formValues: { [columnId: string]: any } | null,
|
|
40
|
+
selection: { gridRowIndexes: number[]; dataContextIds: Array<number | string> },
|
|
41
|
+
applyToDataview?: boolean
|
|
42
42
|
) => any[] | void | undefined;
|
|
43
43
|
|
|
44
44
|
type DataSelection = {
|
|
@@ -57,8 +57,8 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
57
57
|
protected _options!: CompositeEditorOpenDetailOption;
|
|
58
58
|
protected _lastActiveRowNumber = -1;
|
|
59
59
|
protected _locales!: Locale;
|
|
60
|
-
protected _formValues: { [columnId: string]: any
|
|
61
|
-
protected _editors!: { [columnId: string]: Editor
|
|
60
|
+
protected _formValues: { [columnId: string]: any } | null = null;
|
|
61
|
+
protected _editors!: { [columnId: string]: Editor };
|
|
62
62
|
protected _editorContainers!: Array<HTMLElement | null>;
|
|
63
63
|
protected _modalBodyTopValidationElm!: HTMLDivElement;
|
|
64
64
|
protected _modalSaveButtonElm!: HTMLButtonElement;
|
|
@@ -82,10 +82,10 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
82
82
|
return this._formValues;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
get editors(): { [columnId: string]: Editor
|
|
85
|
+
get editors(): { [columnId: string]: Editor } {
|
|
86
86
|
return this._editors;
|
|
87
87
|
}
|
|
88
|
-
set editors(editors: { [columnId: string]: Editor
|
|
88
|
+
set editors(editors: { [columnId: string]: Editor }) {
|
|
89
89
|
this._editors = editors;
|
|
90
90
|
}
|
|
91
91
|
|
|
@@ -110,11 +110,15 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
110
110
|
this.translaterService = containerService.get<TranslaterService>('TranslaterService');
|
|
111
111
|
|
|
112
112
|
if (!this.gridService) {
|
|
113
|
-
throw new Error(
|
|
113
|
+
throw new Error(
|
|
114
|
+
'[Slickgrid-Universal] it seems that the GridService is not being loaded properly, make sure the Container Service is properly implemented.'
|
|
115
|
+
);
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
if (this.gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
|
|
117
|
-
throw new Error(
|
|
119
|
+
throw new Error(
|
|
120
|
+
'[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.'
|
|
121
|
+
);
|
|
118
122
|
}
|
|
119
123
|
|
|
120
124
|
// get locales provided by user in forRoot or else use default English locales via the Constants
|
|
@@ -155,9 +159,14 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
155
159
|
* @param {Boolean} skipMissingEditorError - defaults to False, skipping the error when the Composite Editor was not found will allow to still apply the value into the formValues object
|
|
156
160
|
* @param {Boolean} triggerOnCompositeEditorChange - defaults to True, will this change trigger a onCompositeEditorChange event?
|
|
157
161
|
*/
|
|
158
|
-
changeFormInputValue(
|
|
162
|
+
changeFormInputValue(
|
|
163
|
+
columnIdOrDef: string | Column,
|
|
164
|
+
newValue: any,
|
|
165
|
+
skipMissingEditorError = false,
|
|
166
|
+
triggerOnCompositeEditorChange = true
|
|
167
|
+
): void {
|
|
159
168
|
const columnDef = this.getColumnByObjectOrId(columnIdOrDef);
|
|
160
|
-
const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : columnDef?.id ?? '';
|
|
169
|
+
const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : (columnDef?.id ?? '');
|
|
161
170
|
const editor = this._editors?.[columnId];
|
|
162
171
|
let outputValue = newValue;
|
|
163
172
|
|
|
@@ -167,7 +176,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
167
176
|
|
|
168
177
|
if (typeof editor?.setValue === 'function' && Array.isArray(this._editorContainers)) {
|
|
169
178
|
editor.setValue(newValue, true, triggerOnCompositeEditorChange);
|
|
170
|
-
const editorContainerElm = (this._editorContainers as HTMLElement[]).find(editorElm => editorElm!.dataset!.editorid === columnId);
|
|
179
|
+
const editorContainerElm = (this._editorContainers as HTMLElement[]).find((editorElm) => editorElm!.dataset!.editorid === columnId);
|
|
171
180
|
const excludeDisabledFieldFormValues = this.gridOptions?.compositeEditorOptions?.excludeDisabledFieldFormValues ?? false;
|
|
172
181
|
|
|
173
182
|
if (!editor.disabled || (editor.disabled && !excludeDisabledFieldFormValues)) {
|
|
@@ -204,11 +213,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
204
213
|
*/
|
|
205
214
|
changeFormValue(columnIdOrDef: string | Column, newValue: any): void {
|
|
206
215
|
const columnDef = this.getColumnByObjectOrId(columnIdOrDef);
|
|
207
|
-
const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : columnDef?.id ?? '';
|
|
216
|
+
const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : (columnDef?.id ?? '');
|
|
208
217
|
|
|
209
218
|
// is the field a complex object, like "address.streetNumber"
|
|
210
219
|
// we'll set assign the value as a complex object following the `field` dot notation
|
|
211
|
-
const fieldName = columnDef?.field ?? columnIdOrDef as string;
|
|
220
|
+
const fieldName = columnDef?.field ?? (columnIdOrDef as string);
|
|
212
221
|
if (fieldName?.includes('.')) {
|
|
213
222
|
// when it's a complex object, user could override the object path (where the editable object is located)
|
|
214
223
|
// else we use the path provided in the Field Column Definition
|
|
@@ -234,7 +243,9 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
234
243
|
if (editor?.changeEditorOption) {
|
|
235
244
|
editor.changeEditorOption(optionName, newOptionValue);
|
|
236
245
|
} else {
|
|
237
|
-
throw new Error(
|
|
246
|
+
throw new Error(
|
|
247
|
+
`Editor with column id "${columnId}" not found OR the Editor does not support "changeEditorOption" (current only available with Date, MultipleSelect, SingleSelect & Slider Editors).`
|
|
248
|
+
);
|
|
238
249
|
}
|
|
239
250
|
}
|
|
240
251
|
|
|
@@ -267,7 +278,12 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
267
278
|
}
|
|
268
279
|
|
|
269
280
|
this._formValues = null; // make sure there's no leftover from previous change
|
|
270
|
-
this._options = {
|
|
281
|
+
this._options = {
|
|
282
|
+
...defaultOptions,
|
|
283
|
+
...this.gridOptions.compositeEditorOptions,
|
|
284
|
+
...options,
|
|
285
|
+
labels: { ...this.gridOptions.compositeEditorOptions?.labels, ...options?.labels },
|
|
286
|
+
}; // merge default options with user options
|
|
271
287
|
this._options.backdrop = options.backdrop !== undefined ? options.backdrop : 'static';
|
|
272
288
|
const viewColumnLayout = this._options.viewColumnLayout || 1;
|
|
273
289
|
const activeCell = this.grid.getActiveCell();
|
|
@@ -298,19 +314,32 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
298
314
|
const modalType: CompositeEditorModalType = this._options.modalType || 'edit';
|
|
299
315
|
|
|
300
316
|
if (!this.gridOptions.editable) {
|
|
301
|
-
onError({
|
|
317
|
+
onError({
|
|
318
|
+
type: 'error',
|
|
319
|
+
code: 'EDITABLE_GRID_REQUIRED',
|
|
320
|
+
message: 'Your grid must be editable in order to use the Composite Editor Modal.',
|
|
321
|
+
});
|
|
302
322
|
return null;
|
|
303
323
|
} else if (!this.gridOptions.enableCellNavigation) {
|
|
304
|
-
onError({
|
|
324
|
+
onError({
|
|
325
|
+
type: 'error',
|
|
326
|
+
code: 'ENABLE_CELL_NAVIGATION_REQUIRED',
|
|
327
|
+
message: 'Composite Editor requires the flag "enableCellNavigation" to be set to True in your Grid Options.',
|
|
328
|
+
});
|
|
305
329
|
return null;
|
|
306
330
|
} else if (!this.gridOptions.enableAddRow && (modalType === 'clone' || modalType === 'create')) {
|
|
307
|
-
onError({
|
|
331
|
+
onError({
|
|
332
|
+
type: 'error',
|
|
333
|
+
code: 'ENABLE_ADD_ROW_REQUIRED',
|
|
334
|
+
message:
|
|
335
|
+
'Composite Editor requires the flag "enableAddRow" to be set to True in your Grid Options when cloning/creating a new item.',
|
|
336
|
+
});
|
|
308
337
|
return null;
|
|
309
338
|
} else if (!activeCell && (modalType === 'clone' || modalType === 'edit')) {
|
|
310
339
|
onError({ type: 'warning', code: 'NO_RECORD_FOUND', message: 'No records selected for edit or clone operation.' });
|
|
311
340
|
return null;
|
|
312
341
|
} else {
|
|
313
|
-
const isWithMassChange =
|
|
342
|
+
const isWithMassChange = modalType === 'mass-update' || modalType === 'mass-selection';
|
|
314
343
|
const dataContext = !isWithMassChange ? this.grid.getDataItem(activeRow) : {};
|
|
315
344
|
this._originalDataContext = extend(true, {}, dataContext);
|
|
316
345
|
this._columnDefinitions = this.grid.getColumns();
|
|
@@ -322,7 +351,13 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
322
351
|
// focus on a first cell with an Editor (unless current cell already has an Editor then do nothing)
|
|
323
352
|
// also when it's a "Create" modal, we'll scroll to the end of the grid
|
|
324
353
|
const rowIndex = modalType === 'create' ? this.dataViewLength : activeRow;
|
|
325
|
-
const hasFoundEditor = this.focusOnFirstColumnCellWithEditor(
|
|
354
|
+
const hasFoundEditor = this.focusOnFirstColumnCellWithEditor(
|
|
355
|
+
this._columnDefinitions,
|
|
356
|
+
dataContext,
|
|
357
|
+
activeColIndex,
|
|
358
|
+
rowIndex,
|
|
359
|
+
isWithMassChange
|
|
360
|
+
);
|
|
326
361
|
if (!hasFoundEditor) {
|
|
327
362
|
return null;
|
|
328
363
|
}
|
|
@@ -332,7 +367,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
332
367
|
return null;
|
|
333
368
|
} else if (modalType === 'mass-selection') {
|
|
334
369
|
if (selectedRowsIndexes.length < 1) {
|
|
335
|
-
onError({
|
|
370
|
+
onError({
|
|
371
|
+
type: 'warning',
|
|
372
|
+
code: 'ROW_SELECTION_REQUIRED',
|
|
373
|
+
message: 'You must select some rows before trying to apply new value(s).',
|
|
374
|
+
});
|
|
336
375
|
return null;
|
|
337
376
|
}
|
|
338
377
|
}
|
|
@@ -340,13 +379,13 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
340
379
|
let modalColumns: Column[] = [];
|
|
341
380
|
if (isWithMassChange) {
|
|
342
381
|
// when using Mass Update, we only care about the columns that have the "massUpdate: true", we disregard anything else
|
|
343
|
-
modalColumns = this._columnDefinitions.filter(col => col.editorClass && col.editor?.massUpdate === true);
|
|
382
|
+
modalColumns = this._columnDefinitions.filter((col) => col.editorClass && col.editor?.massUpdate === true);
|
|
344
383
|
} else {
|
|
345
|
-
modalColumns = this._columnDefinitions.filter(col => col.editorClass);
|
|
384
|
+
modalColumns = this._columnDefinitions.filter((col) => col.editorClass);
|
|
346
385
|
}
|
|
347
386
|
|
|
348
387
|
// user could optionally show the form inputs in a specific order instead of using default column definitions order
|
|
349
|
-
if (modalColumns.some(col => col.editor?.compositeEditorFormOrder !== undefined)) {
|
|
388
|
+
if (modalColumns.some((col) => col.editor?.compositeEditorFormOrder !== undefined)) {
|
|
350
389
|
modalColumns.sort((col1: Column, col2: Column) => {
|
|
351
390
|
const val1 = col1?.editor?.compositeEditorFormOrder ?? Infinity;
|
|
352
391
|
const val2 = col2?.editor?.compositeEditorFormOrder ?? Infinity;
|
|
@@ -375,7 +414,13 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
375
414
|
const modalHeaderTitleElm = createDomElement('div', { className: 'slick-editor-modal-title' });
|
|
376
415
|
this.grid.applyHtmlCode(modalHeaderTitleElm, parsedHeaderTitle);
|
|
377
416
|
|
|
378
|
-
const modalCloseButtonElm = createDomElement('button', {
|
|
417
|
+
const modalCloseButtonElm = createDomElement('button', {
|
|
418
|
+
type: 'button',
|
|
419
|
+
ariaLabel: 'Close',
|
|
420
|
+
textContent: '×',
|
|
421
|
+
className: 'close',
|
|
422
|
+
dataset: { action: 'close' },
|
|
423
|
+
});
|
|
379
424
|
if (this._options.showCloseButtonOutside) {
|
|
380
425
|
modalHeaderTitleElm?.classList?.add('outside');
|
|
381
426
|
modalCloseButtonElm?.classList?.add('outside');
|
|
@@ -386,7 +431,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
386
431
|
modalHeaderElm.appendChild(modalCloseButtonElm);
|
|
387
432
|
|
|
388
433
|
const modalBodyElm = createDomElement('div', { className: 'slick-editor-modal-body' });
|
|
389
|
-
this._modalBodyTopValidationElm = createDomElement(
|
|
434
|
+
this._modalBodyTopValidationElm = createDomElement(
|
|
435
|
+
'div',
|
|
436
|
+
{ className: 'validation-summary', style: { display: 'none' } },
|
|
437
|
+
modalBodyElm
|
|
438
|
+
);
|
|
390
439
|
const modalFooterElm = createDomElement('div', { className: 'slick-editor-modal-footer' });
|
|
391
440
|
const modalCancelButtonElm = createDomElement('button', {
|
|
392
441
|
type: 'button',
|
|
@@ -418,13 +467,14 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
418
467
|
|
|
419
468
|
const selectionCounterElm = createDomElement('div', { className: 'footer-status-text', textContent: leftFooterText });
|
|
420
469
|
this._modalSaveButtonElm = createDomElement('button', {
|
|
421
|
-
type: 'button',
|
|
470
|
+
type: 'button',
|
|
471
|
+
className: 'btn btn-save btn-primary btn-sm',
|
|
422
472
|
ariaLabel: saveButtonText,
|
|
423
473
|
textContent: saveButtonText,
|
|
424
474
|
dataset: {
|
|
425
|
-
action:
|
|
426
|
-
ariaLabel: saveButtonText
|
|
427
|
-
}
|
|
475
|
+
action: modalType === 'create' || modalType === 'edit' ? 'save' : modalType,
|
|
476
|
+
ariaLabel: saveButtonText,
|
|
477
|
+
},
|
|
428
478
|
});
|
|
429
479
|
|
|
430
480
|
const footerContainerElm = createDomElement('div', { className: 'footer-buttons' });
|
|
@@ -457,7 +507,9 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
457
507
|
className: 'item-details-editor-container slick-cell',
|
|
458
508
|
dataset: { editorid: `${columnDef.id}` },
|
|
459
509
|
});
|
|
460
|
-
const templateItemValidationElm = createDomElement('div', {
|
|
510
|
+
const templateItemValidationElm = createDomElement('div', {
|
|
511
|
+
className: `item-details-validation editor-${columnDef.id}`,
|
|
512
|
+
});
|
|
461
513
|
|
|
462
514
|
// optionally add a reset button beside each editor
|
|
463
515
|
if (this._options?.showResetButtonOnEachEditor) {
|
|
@@ -490,9 +542,19 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
490
542
|
}
|
|
491
543
|
|
|
492
544
|
this._editors = {};
|
|
493
|
-
this._editorContainers = modalColumns.map(col => modalBodyElm.querySelector<HTMLDivElement>(`[data-editorid='${col.id}']`)) || [];
|
|
494
|
-
this._compositeOptions = {
|
|
495
|
-
|
|
545
|
+
this._editorContainers = modalColumns.map((col) => modalBodyElm.querySelector<HTMLDivElement>(`[data-editorid='${col.id}']`)) || [];
|
|
546
|
+
this._compositeOptions = {
|
|
547
|
+
destroy: this.disposeComponent.bind(this),
|
|
548
|
+
modalType,
|
|
549
|
+
validationMsgPrefix: '* ',
|
|
550
|
+
formValues: {},
|
|
551
|
+
editors: this._editors,
|
|
552
|
+
};
|
|
553
|
+
const compositeEditor = new (SlickCompositeEditor as any)(
|
|
554
|
+
modalColumns,
|
|
555
|
+
this._editorContainers,
|
|
556
|
+
this._compositeOptions
|
|
557
|
+
) as typeof SlickCompositeEditor;
|
|
496
558
|
this.grid.editActiveCell(compositeEditor as any);
|
|
497
559
|
|
|
498
560
|
// --
|
|
@@ -515,11 +577,10 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
515
577
|
});
|
|
516
578
|
}
|
|
517
579
|
return this;
|
|
518
|
-
|
|
519
580
|
} catch (error: any) {
|
|
520
581
|
this.dispose();
|
|
521
|
-
const errorMsg =
|
|
522
|
-
const errorCode =
|
|
582
|
+
const errorMsg = typeof error === 'string' ? error : (error?.message ?? error?.body?.message ?? '');
|
|
583
|
+
const errorCode = typeof error === 'string' ? error : (error?.status ?? error?.body?.status ?? errorMsg);
|
|
523
584
|
onError({ type: 'error', code: errorCode, message: errorMsg });
|
|
524
585
|
return null;
|
|
525
586
|
}
|
|
@@ -571,9 +632,10 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
571
632
|
|
|
572
633
|
// from the "lastCompositeEditor" object that we kept as reference, it contains all the changes inside the "formValues" property
|
|
573
634
|
// we can loop through these changes and apply them on the selected row indexes
|
|
574
|
-
Object.keys(formValues).forEach(itemProp => {
|
|
635
|
+
Object.keys(formValues).forEach((itemProp) => {
|
|
575
636
|
if (itemProp in formValues) {
|
|
576
637
|
data.forEach((dataContext: any) => {
|
|
638
|
+
// prettier-ignore
|
|
577
639
|
if (itemProp in formValues && (this._options?.validateMassUpdateChange === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
|
|
578
640
|
dataContext[itemProp] = formValues[itemProp];
|
|
579
641
|
}
|
|
@@ -592,16 +654,17 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
592
654
|
/** Apply Mass Changes to the Selected rows in the grid (form values) */
|
|
593
655
|
protected applySaveMassSelectionChanges(formValues: any, selection: DataSelection, applyToDataview = true): any[] {
|
|
594
656
|
const selectedItemIds = selection?.dataContextIds ?? [];
|
|
595
|
-
const selectedTmpItems = selectedItemIds.map(itemId => this.dataView.getItemById(itemId));
|
|
657
|
+
const selectedTmpItems = selectedItemIds.map((itemId) => this.dataView.getItemById(itemId));
|
|
596
658
|
|
|
597
659
|
// not applying to dataView means that we're doing a preview of dataset and we should use a deep copy of it instead of applying changes directly to it
|
|
598
660
|
const selectedItems = applyToDataview ? selectedTmpItems : extend(true, [], selectedTmpItems);
|
|
599
661
|
|
|
600
662
|
// from the "lastCompositeEditor" object that we kept as reference, it contains all the changes inside the "formValues" property
|
|
601
663
|
// we can loop through these changes and apply them on the selected row indexes
|
|
602
|
-
Object.keys(formValues).forEach(itemProp => {
|
|
664
|
+
Object.keys(formValues).forEach((itemProp) => {
|
|
603
665
|
if (itemProp in formValues) {
|
|
604
666
|
selectedItems.forEach((dataContext: any) => {
|
|
667
|
+
// prettier-ignore
|
|
605
668
|
if (itemProp in formValues && (this._options?.validateMassUpdateChange === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
|
|
606
669
|
dataContext[itemProp] = formValues[itemProp];
|
|
607
670
|
}
|
|
@@ -638,10 +701,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
638
701
|
*/
|
|
639
702
|
protected createEditorResetButtonElement(columnId: string): HTMLButtonElement {
|
|
640
703
|
const resetButtonElm = createDomElement('button', {
|
|
641
|
-
type: 'button',
|
|
704
|
+
type: 'button',
|
|
705
|
+
name: columnId,
|
|
642
706
|
ariaLabel: 'Reset',
|
|
643
707
|
title: this._options?.labels?.resetFormButton ?? 'Reset Form Input',
|
|
644
|
-
className: 'btn btn-xs btn-editor-reset'
|
|
708
|
+
className: 'btn btn-xs btn-editor-reset',
|
|
645
709
|
});
|
|
646
710
|
|
|
647
711
|
if (this._options?.resetEditorButtonCssClass) {
|
|
@@ -685,7 +749,12 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
685
749
|
* @param {Function} beforeClosingCallback - third and last callback to execute after Saving but just before closing the modal window
|
|
686
750
|
* @param {Object} itemDataContext - item data context when modal type is (create/clone/edit)
|
|
687
751
|
*/
|
|
688
|
-
protected async executeOnSave(
|
|
752
|
+
protected async executeOnSave(
|
|
753
|
+
applyChangesCallback: ApplyChangesCallbackFn,
|
|
754
|
+
executePostCallback: PlainFunc,
|
|
755
|
+
beforeClosingCallback?: PlainFunc,
|
|
756
|
+
itemDataContext?: any
|
|
757
|
+
): Promise<void> {
|
|
689
758
|
try {
|
|
690
759
|
this.showValidationSummaryText(false, '');
|
|
691
760
|
const validationResults = this.validateCompositeEditors();
|
|
@@ -695,7 +764,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
695
764
|
this._modalSaveButtonElm.disabled = true;
|
|
696
765
|
|
|
697
766
|
if (typeof this._options?.onSave === 'function') {
|
|
698
|
-
const isMassChange =
|
|
767
|
+
const isMassChange = this._options.modalType === 'mass-update' || this._options.modalType === 'mass-selection';
|
|
699
768
|
|
|
700
769
|
// apply the changes in the grid early when that option is enabled (that is before the await of `onSave`)
|
|
701
770
|
let updatedDataset;
|
|
@@ -704,7 +773,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
704
773
|
}
|
|
705
774
|
// call the custon onSave callback when defined and note that the item data context will only be filled for create/clone/edit
|
|
706
775
|
const dataContextOrUpdatedDatasetPreview = isMassChange ? updatedDataset : itemDataContext;
|
|
707
|
-
const successful = await this._options?.onSave(
|
|
776
|
+
const successful = await this._options?.onSave(
|
|
777
|
+
this.formValues,
|
|
778
|
+
this.getCurrentRowSelections(),
|
|
779
|
+
dataContextOrUpdatedDatasetPreview
|
|
780
|
+
);
|
|
708
781
|
|
|
709
782
|
if (successful) {
|
|
710
783
|
// apply the changes in the grid (if it's not yet applied)
|
|
@@ -728,16 +801,23 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
728
801
|
this.dispose();
|
|
729
802
|
}
|
|
730
803
|
} catch (error: any) {
|
|
731
|
-
const errorMsg =
|
|
804
|
+
const errorMsg = typeof error === 'string' ? error : (error?.message ?? error?.body?.message ?? '');
|
|
732
805
|
this.showValidationSummaryText(true, errorMsg);
|
|
733
806
|
}
|
|
734
807
|
}
|
|
735
808
|
|
|
736
809
|
// For the Composite Editor to work, the current active cell must have an Editor (because it calls editActiveCell() and that only works with a cell with an Editor)
|
|
737
810
|
// so if current active cell doesn't have an Editor, we'll find the first column with an Editor and focus on it (from left to right starting at index 0)
|
|
738
|
-
protected focusOnFirstColumnCellWithEditor(
|
|
811
|
+
protected focusOnFirstColumnCellWithEditor(
|
|
812
|
+
columns: Column[],
|
|
813
|
+
dataContext: any,
|
|
814
|
+
columnIndex: number,
|
|
815
|
+
rowIndex: number,
|
|
816
|
+
isWithMassChange: boolean
|
|
817
|
+
): boolean {
|
|
739
818
|
// make sure we're not trying to activate a cell outside of the grid, that can happen when using MassUpdate without `enableAddRow` flag enabled
|
|
740
|
-
const activeCellIndex =
|
|
819
|
+
const activeCellIndex =
|
|
820
|
+
isWithMassChange && !this.gridOptions.enableAddRow && rowIndex >= this.dataViewLength ? this.dataViewLength - 1 : rowIndex;
|
|
741
821
|
|
|
742
822
|
let columnIndexWithEditor = columnIndex;
|
|
743
823
|
const cellEditor = columns[columnIndex].editorClass;
|
|
@@ -746,7 +826,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
746
826
|
if (!cellEditor || !activeEditorCellNode || !this.getActiveCellEditor(activeCellIndex, columnIndex)) {
|
|
747
827
|
columnIndexWithEditor = this.findNextAvailableEditorColumnIndex(columns, dataContext, rowIndex, isWithMassChange);
|
|
748
828
|
if (columnIndexWithEditor === -1) {
|
|
749
|
-
this.executeOnError({
|
|
829
|
+
this.executeOnError({
|
|
830
|
+
type: 'error',
|
|
831
|
+
code: 'NO_EDITOR_FOUND',
|
|
832
|
+
message: 'We could not find any Editor in your Column Definition',
|
|
833
|
+
});
|
|
750
834
|
return false;
|
|
751
835
|
} else {
|
|
752
836
|
this.grid.setActiveCell(activeCellIndex, columnIndexWithEditor, false);
|
|
@@ -772,7 +856,17 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
772
856
|
const col = columns[colIndex];
|
|
773
857
|
if (col.editorClass && (!isWithMassUpdate || (isWithMassUpdate && col.editor?.massUpdate))) {
|
|
774
858
|
// we can check that the cell is really editable by checking the onBeforeEditCell event not returning false (returning undefined, null also mean it is editable)
|
|
775
|
-
const isCellEditable = this.grid.onBeforeEditCell
|
|
859
|
+
const isCellEditable = this.grid.onBeforeEditCell
|
|
860
|
+
.notify({
|
|
861
|
+
row: rowIndex,
|
|
862
|
+
cell: colIndex,
|
|
863
|
+
item: dataContext,
|
|
864
|
+
column: col,
|
|
865
|
+
grid: this.grid,
|
|
866
|
+
target: 'composite',
|
|
867
|
+
compositeEditorOptions: this._compositeOptions,
|
|
868
|
+
})
|
|
869
|
+
.getReturnValue();
|
|
776
870
|
this.grid.setActiveCell(rowIndex, colIndex, false);
|
|
777
871
|
if (isCellEditable !== false) {
|
|
778
872
|
columnIndexWithEditor = colIndex;
|
|
@@ -793,7 +887,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
793
887
|
if (typeof columnIdOrDef === 'object') {
|
|
794
888
|
column = columnIdOrDef;
|
|
795
889
|
} else if (typeof columnIdOrDef === 'string') {
|
|
796
|
-
column = this._columnDefinitions.find(col => col.id === columnIdOrDef as string);
|
|
890
|
+
column = this._columnDefinitions.find((col) => col.id === (columnIdOrDef as string));
|
|
797
891
|
}
|
|
798
892
|
return column;
|
|
799
893
|
}
|
|
@@ -831,7 +925,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
831
925
|
protected getLabelText(labelProperty: keyof CompositeEditorLabel, localeText: string, defaultText: string): string {
|
|
832
926
|
const textLabels = { ...this.gridOptions.compositeEditorOptions?.labels, ...this._options?.labels };
|
|
833
927
|
|
|
834
|
-
if (
|
|
928
|
+
if (
|
|
929
|
+
this.gridOptions?.enableTranslate &&
|
|
930
|
+
this.translaterService?.translate &&
|
|
931
|
+
textLabels.hasOwnProperty(`${labelProperty}Key` as keyof CompositeEditorLabel)
|
|
932
|
+
) {
|
|
835
933
|
const translationKey = textLabels[`${labelProperty}Key` as keyof CompositeEditorLabel];
|
|
836
934
|
return this.translaterService.translate(translationKey || '');
|
|
837
935
|
}
|
|
@@ -839,14 +937,12 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
839
937
|
}
|
|
840
938
|
|
|
841
939
|
/** Retrieve the current selection of row indexes & data context Ids */
|
|
842
|
-
protected getCurrentRowSelections(): { gridRowIndexes: number[]; dataContextIds: Array<string | number
|
|
940
|
+
protected getCurrentRowSelections(): { gridRowIndexes: number[]; dataContextIds: Array<string | number> } {
|
|
843
941
|
const dataContextIds = this.dataView.getAllSelectedIds();
|
|
844
942
|
const gridRowIndexes = this.dataView.mapIdsToRows(dataContextIds);
|
|
845
943
|
return { gridRowIndexes, dataContextIds };
|
|
846
944
|
}
|
|
847
945
|
|
|
848
|
-
|
|
849
|
-
|
|
850
946
|
protected handleBodyClicked(event: Event): void {
|
|
851
947
|
if ((event.target as HTMLElement)?.classList?.contains('slick-editor-modal')) {
|
|
852
948
|
if (this._options?.backdrop !== 'static') {
|
|
@@ -879,7 +975,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
879
975
|
if (!this.formValues || Object.keys(this.formValues).length === 0) {
|
|
880
976
|
this.executeOnError({ type: 'warning', code: 'NO_CHANGES_DETECTED', message: 'Sorry we could not detect any changes.' });
|
|
881
977
|
} else {
|
|
882
|
-
const applyCallbackFnName =
|
|
978
|
+
const applyCallbackFnName = modalType === 'mass-update' ? 'applySaveMassUpdateChanges' : 'applySaveMassSelectionChanges';
|
|
883
979
|
this.executeOnSave(this[applyCallbackFnName].bind(this), executePostCallback.bind(this));
|
|
884
980
|
}
|
|
885
981
|
}
|
|
@@ -975,9 +1071,10 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
975
1071
|
|
|
976
1072
|
// if the user provided the "onSave" callback, let's execute it with the item data context
|
|
977
1073
|
if (isFormValid && typeof this._options?.onSave === 'function') {
|
|
978
|
-
const itemDataContext =
|
|
979
|
-
|
|
980
|
-
|
|
1074
|
+
const itemDataContext =
|
|
1075
|
+
modalType === 'create'
|
|
1076
|
+
? this._originalDataContext // the inserted item was previously assigned to this ref when "onAddNewRow" is triggered
|
|
1077
|
+
: this.grid.getDataItem(this._lastActiveRowNumber); // for clone, we can get item data context directly from DataView
|
|
981
1078
|
isFormValid = await this._options?.onSave(this.formValues, this.getCurrentRowSelections(), itemDataContext);
|
|
982
1079
|
}
|
|
983
1080
|
if (isFormValid) {
|
|
@@ -996,7 +1093,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
|
|
|
996
1093
|
if (!this.dataView.getItemById(newId)) {
|
|
997
1094
|
this.gridService?.addItem(item, this._options.insertOptions);
|
|
998
1095
|
} else {
|
|
999
|
-
this.executeOnError({
|
|
1096
|
+
this.executeOnError({
|
|
1097
|
+
type: 'error',
|
|
1098
|
+
code: 'ITEM_ALREADY_EXIST',
|
|
1099
|
+
message: `The item object which you are trying to add already exist with the same Id:: ${newId}`,
|
|
1100
|
+
});
|
|
1000
1101
|
}
|
|
1001
1102
|
return item;
|
|
1002
1103
|
}
|