Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(editors): Composite Editor modal comp should work w/complex objects #298

Merged
merged 1 commit into from
Mar 30, 2021
Merged

fix(editors): Composite Editor modal comp should work w/complex objects #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"not dead"
],
"dependencies": {
"assign-deep": "^1.0.1",
"dequal": "^2.0.2",
"dompurify": "^2.2.7",
"flatpickr": "^4.6.9",
Expand Down
22 changes: 15 additions & 7 deletions packages/common/src/editors/autoCompleteEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,11 @@ export class AutoCompleteEditor implements Editor {
return customStructure;
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

get editorOptions(): AutocompleteOption {
return this.columnEditor?.editorOptions || {};
}
Expand Down Expand Up @@ -225,7 +230,7 @@ export class AutoCompleteEditor implements Editor {
return this._$input.val();
}

setValue(inputValue: any, isApplyingValue = false) {
setValue(inputValue: any, isApplyingValue = false, triggerOnCompositeEditorChange = true) {
let label = inputValue;
// if user provided a custom structure, we will serialize the value returned from the object with custom structure
if (inputValue && inputValue.hasOwnProperty(this.labelName)) {
Expand All @@ -242,7 +247,7 @@ export class AutoCompleteEditor implements Editor {

// if it's set by a Composite Editor, then also trigger a change for it
const compositeEditorOptions = this.args.compositeEditorOptions;
if (compositeEditorOptions) {
if (compositeEditorOptions && triggerOnCompositeEditorChange) {
this.handleChangeOnCompositeEditor(null, compositeEditorOptions, 'system');
}
}
Expand Down Expand Up @@ -274,7 +279,10 @@ export class AutoCompleteEditor implements Editor {

// set the new value to the item datacontext
if (isComplexObject) {
setDeepValue(item, fieldName, newValue);
// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else {
item[fieldName] = newValue;
}
Expand Down Expand Up @@ -417,21 +425,21 @@ export class AutoCompleteEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

protected handleChangeOnCompositeEditor(event: Event | null, compositeEditorOptions: CompositeEditorOption, triggeredBy: 'user' | 'system' = 'user', isCalledByClearValue = false) {
const activeCell = this.grid.getActiveCell();
const column = this.args.column;
const columnId = this.columnDef?.id ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValue = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValue);
this.applyValue(this.dataContext, newValue);
}
this.applyValue(compositeEditorOptions.formValues, newValue);

Expand Down Expand Up @@ -558,7 +566,7 @@ export class AutoCompleteEditor implements Editor {

// user could also override the collection
if (this.columnEditor?.collectionOverride) {
const overrideArgs: CollectionOverrideArgs = { column: this.columnDef, dataContext: this.args.item, grid: this.grid, originalCollections: this.collection };
const overrideArgs: CollectionOverrideArgs = { column: this.columnDef, dataContext: this.dataContext, grid: this.grid, originalCollections: this.collection };
if (this.args.compositeEditorOptions) {
const { formValues, modalType } = this.args.compositeEditorOptions;
overrideArgs.compositeEditorOptions = { formValues, modalType };
Expand Down
21 changes: 14 additions & 7 deletions packages/common/src/editors/checkboxEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ export class CheckboxEditor implements Editor {
return this.columnDef && this.columnDef.internalColumnEditor || {};
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

/** Getter for the Editor DOM Element */
get editorDomElement(): any {
return this._input;
Expand Down Expand Up @@ -148,7 +153,7 @@ export class CheckboxEditor implements Editor {
return this._input?.checked ?? false;
}

setValue(val: boolean | string, isApplyingValue = false) {
setValue(val: boolean | string, isApplyingValue = false, triggerOnCompositeEditorChange = true) {
const isChecked = val ? true : false;
if (this._input) {
this._input.checked = isChecked;
Expand All @@ -159,7 +164,7 @@ export class CheckboxEditor implements Editor {

// if it's set by a Composite Editor, then also trigger a change for it
const compositeEditorOptions = this.args.compositeEditorOptions;
if (compositeEditorOptions) {
if (compositeEditorOptions && triggerOnCompositeEditorChange) {
this.handleChangeOnCompositeEditor(null, compositeEditorOptions, 'system');
}
}
Expand All @@ -175,8 +180,10 @@ export class CheckboxEditor implements Editor {
const newValue = (validation && validation.valid) ? state : '';

// set the new value to the item datacontext
if (isComplexObject) {
setDeepValue(item, fieldName, newValue);
if (isComplexObject) {// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else {
item[fieldName] = newValue;
}
Expand Down Expand Up @@ -280,21 +287,21 @@ export class CheckboxEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

protected handleChangeOnCompositeEditor(event: Event | null, compositeEditorOptions: CompositeEditorOption, triggeredBy: 'user' | 'system' = 'user', isCalledByClearValue = false) {
const activeCell = this.grid.getActiveCell();
const column = this.args.column;
const columnId = this.columnDef?.id ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValue = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValue);
this.applyValue(this.dataContext, newValue);
}
this.applyValue(compositeEditorOptions.formValues, newValue);

Expand Down
20 changes: 14 additions & 6 deletions packages/common/src/editors/dateEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ export class DateEditor implements Editor {
return this.columnDef && this.columnDef.internalColumnEditor || {};
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

/** Getter for the Editor DOM Element */
get editorDomElement(): any {
return this._$input;
Expand Down Expand Up @@ -255,15 +260,15 @@ export class DateEditor implements Editor {
return this._$input.val();
}

setValue(val: string, isApplyingValue = false) {
setValue(val: string, isApplyingValue = false, triggerOnCompositeEditorChange = true) {
this.flatInstance.setDate(val);

if (isApplyingValue) {
this.applyValue(this.args.item, this.serializeValue());

// if it's set by a Composite Editor, then also trigger a change for it
const compositeEditorOptions = this.args.compositeEditorOptions;
if (compositeEditorOptions) {
if (compositeEditorOptions && triggerOnCompositeEditorChange) {
this.handleChangeOnCompositeEditor(compositeEditorOptions, 'system');
}
}
Expand All @@ -282,7 +287,10 @@ export class DateEditor implements Editor {

// set the new value to the item datacontext
if (isComplexObject) {
setDeepValue(item, fieldName, newValue);
// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else {
item[fieldName] = newValue;
}
Expand Down Expand Up @@ -409,7 +417,7 @@ export class DateEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

Expand All @@ -431,13 +439,13 @@ export class DateEditor implements Editor {
const activeCell = this.grid.getActiveCell();
const column = this.args.column;
const columnId = this.columnDef?.id ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValue = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValue);
this.applyValue(this.dataContext, newValue);
}
this.applyValue(compositeEditorOptions.formValues, newValue);

Expand Down
16 changes: 12 additions & 4 deletions packages/common/src/editors/dualInputEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,11 @@ export class DualInputEditor implements Editor {
return this.columnDef && this.columnDef.internalColumnEditor || {};
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

/** Getter for the Editor DOM Element */
get editorDomElement(): { leftInput: HTMLInputElement, rightInput: HTMLInputElement } {
return { leftInput: this._leftInput, rightInput: this._rightInput };
Expand Down Expand Up @@ -278,7 +283,10 @@ export class DualInputEditor implements Editor {
if (isComplexObject) {
const newValueFromComplex = getDescendantProperty(state, fieldNameToUse);
const newValue = (validation && validation.valid) ? newValueFromComplex : '';
setDeepValue(item, fieldName, newValue);
// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else if (fieldName) {
item[fieldName] = (validation && validation.valid) ? state[fieldName] : '';
}
Expand Down Expand Up @@ -501,7 +509,7 @@ export class DualInputEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

Expand All @@ -510,13 +518,13 @@ export class DualInputEditor implements Editor {
const column = this.args.column;
const leftInputId = this.columnEditor.params?.leftInput?.field ?? '';
const rightInputId = this.columnEditor.params?.rightInput?.field ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValues = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValues);
this.applyValue(this.dataContext, newValues);
}
this.applyValue(compositeEditorOptions.formValues, newValues);

Expand Down
20 changes: 14 additions & 6 deletions packages/common/src/editors/floatEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ export class FloatEditor implements Editor {
return this.columnDef && this.columnDef.internalColumnEditor || {};
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

/** Getter for the Editor DOM Element */
get editorDomElement(): any {
return this._input;
Expand Down Expand Up @@ -181,7 +186,7 @@ export class FloatEditor implements Editor {
return this._input?.value || '';
}

setValue(value: number | string, isApplyingValue = false) {
setValue(value: number | string, isApplyingValue = false, triggerOnCompositeEditorChange = true) {
if (this._input) {
this._input.value = `${value}`;

Expand All @@ -190,7 +195,7 @@ export class FloatEditor implements Editor {

// if it's set by a Composite Editor, then also trigger a change for it
const compositeEditorOptions = this.args.compositeEditorOptions;
if (compositeEditorOptions) {
if (compositeEditorOptions && triggerOnCompositeEditorChange) {
this.handleChangeOnCompositeEditor(null, compositeEditorOptions, 'system');
}
}
Expand All @@ -207,7 +212,10 @@ export class FloatEditor implements Editor {

// set the new value to the item datacontext
if (isComplexObject) {
setDeepValue(item, fieldName, newValue);
// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else {
item[fieldName] = newValue;
}
Expand Down Expand Up @@ -326,21 +334,21 @@ export class FloatEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

protected handleChangeOnCompositeEditor(event: Event | null, compositeEditorOptions: CompositeEditorOption, triggeredBy: 'user' | 'system' = 'user', isCalledByClearValue = false) {
const activeCell = this.grid.getActiveCell();
const column = this.args.column;
const columnId = this.columnDef?.id ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValue = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValue);
this.applyValue(this.dataContext, newValue);
}
this.applyValue(compositeEditorOptions.formValues, newValue);

Expand Down
20 changes: 14 additions & 6 deletions packages/common/src/editors/integerEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ export class IntegerEditor implements Editor {
return this.columnDef && this.columnDef.internalColumnEditor || {};
}

/** Getter for the item data context object */
get dataContext(): any {
return this.args.item;
}

/** Getter for the Editor DOM Element */
get editorDomElement(): any {
return this._input;
Expand Down Expand Up @@ -157,11 +162,11 @@ export class IntegerEditor implements Editor {
return this._input?.value || '';
}

setValue(value: number | string, isApplyingValue = false) {
setValue(value: number | string, isApplyingValue = false, triggerOnCompositeEditorChange = true) {
if (this._input) {
this._input.value = `${value}`;

if (isApplyingValue) {
if (isApplyingValue && triggerOnCompositeEditorChange) {
this.applyValue(this.args.item, this.serializeValue());

// if it's set by a Composite Editor, then also trigger a change for it
Expand All @@ -184,7 +189,10 @@ export class IntegerEditor implements Editor {

// set the new value to the item datacontext
if (isComplexObject) {
setDeepValue(item, fieldName, newValue);
// when it's a complex object, user could override the object path (where the editable object is located)
// else we use the path provided in the Field Column Definition
const objectPath = this.columnEditor?.complexObjectPath ?? fieldName ?? '';
setDeepValue(item, objectPath, newValue);
} else {
item[fieldName] = newValue;
}
Expand Down Expand Up @@ -289,21 +297,21 @@ export class IntegerEditor implements Editor {
/** when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor */
protected applyInputUsabilityState() {
const activeCell = this.grid.getActiveCell();
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.args.item, column: this.args.column, grid: this.grid });
const isCellEditable = this.grid.onBeforeEditCell.notify({ ...activeCell, item: this.dataContext, column: this.args.column, grid: this.grid });
this.disable(isCellEditable === false);
}

protected handleChangeOnCompositeEditor(event: Event | null, compositeEditorOptions: CompositeEditorOption, triggeredBy: 'user' | 'system' = 'user', isCalledByClearValue = false) {
const activeCell = this.grid.getActiveCell();
const column = this.args.column;
const columnId = this.columnDef?.id ?? '';
const item = this.args.item;
const item = this.dataContext;
const grid = this.grid;
const newValue = this.serializeValue();

// when valid, we'll also apply the new value to the dataContext item object
if (this.validate().valid) {
this.applyValue(this.args.item, newValue);
this.applyValue(this.dataContext, newValue);
}
this.applyValue(compositeEditorOptions.formValues, newValue);

Expand Down
Loading