ngx-panemu-table / Class

PanemuTableEditingController

Generic types:T

This class enable inline editing. It has 2 main methods:

  • create reactive AbstractControl when editing is initated
  • provide necessary methods to save or delete data

It provides default editor components for various ColumnType. One can provide ones own editor.

Methods

afterSuccessfulDelete()

This method is called after successful deletion of persisted data. It isn't called when deleting new row in insert mode. Override this method to display information dialog if required.

Presentation
afterSuccessfulDelete(serverData: unknown): void;
Parameters
NameTypeDescription
serverData
unknown
Returns
void

afterSuccessfulSave()

This method called after successful save. It is designed to display information dialog or to put logic to trigger table reload.

Presentation
afterSuccessfulSave(data: T[], tableMode: TABLE_MODE): void;
Parameters
NameTypeDescription
data
T[]

Changed data that have been saved.

tableMode
TABLE_MODE

insert or edit

Returns
void

canDelete()

This method called before deleting a row. Override this method to display a confirmation dialog that allow user to cancel.

Presentation
canDelete(rowToDelete: T, tableMode: TABLE_MODE): Promise<boolean>;
Parameters
NameTypeDescription
rowToDelete
T

Row to be deleted

tableMode
TABLE_MODE

Either 'browse' to delete persisted data or 'insert' to delete unsaved new row.

Returns
Promise<boolean> -

promise that if it resolves true then continue delete, false to cancel.

canReload()

If table is in edit/insert mode and there are changed rows, this method is called. This is where you can put logic to show confirmation dialog if user want to reload the table causing unsaved data lost.

Presentation
canReload(changedRows: T[], tableMode: TABLE_MODE): Promise<boolean>;
Parameters
NameTypeDescription
changedRows
T[]
tableMode
TABLE_MODE
Returns
Promise<boolean> -

by default "Promise.true". Return "Promise.false" to cancel reload.

canSave()

This method is called before calling saveData. Override this method to do some row level validations or preprocessing.

Presentation
canSave(data: T[], tableMode: TABLE_MODE): Promise<boolean>;
Parameters
NameTypeDescription
data
T[]
tableMode
TABLE_MODE

insert or edit

Returns
Promise<boolean> -

by default return true promise. Return false promise to cancel save.

protected

cloneRowData()

Clone rowData in order to be able to compare changed property values later.

Presentation
protected cloneRowData(rowData: T): T;
Parameters
NameTypeDescription
rowData
T
Returns
T

createFormControl()

This method create AbstractControl without validator specified. Override this method to:

  1. Create AbstractControl with validators, updatedOn or other attribute specified.
  2. Make a cell not editable by returning null.

If a field is displayed in multiple columns, use initCellEditorRenderer method to specify in what column the field is editable (optional).

This method should always return new instance of FormControl, FormGroup, FormArray or null. Do not reusea FormControl instance for mutiple fields/rows.

Presentation
createFormControl(field: keyof T, rowData: T, tableMode: TABLE_MODE): AbstractControl<any, any, any> | null | undefined;
Parameters
NameTypeDescription
field
keyof T
rowData
T
tableMode
TABLE_MODE
Returns
AbstractControl<any, any, any> | null | undefined -

AbstractControl if the cell is editable.

createNewRowData()

This method is called upon insert action. Override this method to provide default values for the new rowData.

Presentation
createNewRowData(): Partial<T>;
Returns
Partial<T> -

by default return empty object {}

deleteData()

Delete logic. This method must be overriden to enable delete functionality.

Presentation
deleteData(data: T): Observable<any>;
Parameters
NameTypeDescription
data
T
Returns
Observable<any>
protected

getErrorMessages()

Get error message. It support localisation as it uses PanemuTableService.getLabelTranslation().

Override this method to add or create a custom validation message.

Presentation
protected getErrorMessages(errors: ValidationErrors): string;
Parameters
NameTypeDescription
errors
ValidationErrors
Returns
string
protected

helper_getFormControl()

Helper method to get formControl of specified field and rowData.

Presentation
protected helper_getFormControl(field: keyof T, rowData: T): AbstractControl<any, any, any> | undefined;
Parameters
NameTypeDescription
field
keyof T
rowData
T
Returns
AbstractControl<any, any, any> | undefined
protected

helper_updateMapCellLoading()

Helper method to update MapCellEditor loading status

Presentation
protected helper_updateMapCellLoading(field: keyof T, rowData: T, loading: boolean): void;
Parameters
NameTypeDescription
field
keyof T
rowData
T
loading
boolean
Returns
void
protected

helper_updateMapCellOptions()

Helper method to update MapCellEditor options

Presentation
protected helper_updateMapCellOptions(field: keyof T, rowData: T, options?: MapOption[] | undefined): void;
Parameters
NameTypeDescription
field
keyof T
rowData
T
options
MapOption[] | undefined
Returns
void
protected

initCellEditorRenderer()

Several default CellEditorComponents are provided based on ColumnType. Override this method to change the default editor component, or return null to disable editing on the passed column.

If you have a single field displayed in multiple columns and only want the field to be editable in one of them, then override this method and return null for column you don't want to be editable. Use BaseColumn.__key property to identify the column.

This method works in conjunction with createFormControl. This method is only called when the column.field has formControl value returned by createFormControl.

Presentation
protected initCellEditorRenderer(renderer: CellEditorRenderer<T>, column: PropertyColumn<T>): CellEditorRenderer<T> | null;
Parameters
NameTypeDescription
renderer
CellEditorRenderer<T>
column
PropertyColumn<T>
Returns
protected

isChanged()

Method to compare if 2 passed objects contains the same value. This method is called before saving data in edit mode. Only changed rowData is included in the save. In insert mode, all newly-inserted rows are considered changed thus all of them are included in the save.

Presentation
protected isChanged(originalRowData: T, rowData: T): boolean;
Parameters
NameTypeDescription
originalRowData
T
rowData
T
Returns
boolean
protected

onCommitEdit()

If user change a value in cell editor, this method is called. This is the place to put logic to modify the states of other cell editor, or to set some values to other fields. Please refer to 'helper_' methods of this class to get some handy functions.

Presentation
protected onCommitEdit(field: keyof T, value: any, previousValue: any, rowData: T, formControl: AbstractControl<any, any, any>): void;
Parameters
NameTypeDescription
field
keyof T
value
any
previousValue
any
rowData
T
formControl
AbstractControl<any, any, any>
Returns
void
protected

onStartEdit()

Called upon selected row when table mode is edit or insert

Presentation
protected onStartEdit(rowData: T, editingInfo: EditingInfo<T>): void;
Parameters
NameTypeDescription
rowData
T
editingInfo
EditingInfo<T>
Returns
void

saveData()

Save logic. This method must be overriden to enable save functionality. The returned data will be assigned to respective table row. So if there is data change in server such as generated id or updated_on properties, it will also be displayed in the table automatically.

If server api doesn't return the data, override afterSuccessfulSave where you can put logic to reload the table.

The PanemuTableEditingController.afterSuccessfulSave` is called upon successful save. You can override it to display information dialog if required.

Presentation
saveData(data: T[], tableMode: TABLE_MODE): Observable<T[]>;
Parameters
NameTypeDescription
data
T[]
tableMode
TABLE_MODE
Returns
Observable<T[]>

showValidationError()

Display validation error. By default it forward to PanemuTableService.handleError() method.

Presentation
showValidationError(error: string | CellValidationError, label: { [field in keyof T]: string; }): void;
Parameters
NameTypeDescription
error
string | CellValidationError
label
{ [field in keyof T]: string; }
Returns
void