import { EventEmitter } from '@angular/core'; import { FormArray } from '@angular/forms'; import { Constructor } from '@mtna/core-ts'; import { MtnaInlineEditorAction } from '@mtna/core-angular'; /** * Event emitted when a table cell is updated * * @author Will Davis */ export interface EditableTableUpdateEvent { oldResource: R; updatedResource: R; property: keyof R & string; } /** * Should be implemented by a table component to add edit capabilities. * * @author Will Davis */ export interface CanTableEdit { /** Optional column IDs that should remain uneditable when table is editable. */ uneditableCols?: string[]; /** Whether the table cells can be edited. */ editable: boolean; /** Event emitted when a table cell is edited. */ update: EventEmitter>; /** Internal form array to manage edited values. */ _formArray: FormArray | undefined; /** * This method must be implemented case by case. * * If the table is editable, generate the underlying FormArray to hold edited values. * Create a FormGroup to represent each resource with FormControl for each editable property. * * @example * ```ts * checkAndUpdateFormArray() { * if (this.editable && this.variables.length) { * this._formArray = this._fb.array( * // Create a FormGroup for each VariableSummary * this.variables.map((variable) => { * const controls: { [key in keyof Partial]: FormControl } = {}; * // Create a FormControl for each column * this.columns * .filter((col) => col.property !== 'selected' && col.property !== 'hasClassification') * .forEach((col) => { * // We can safely cast and exclude the keys due to the filter above * const prop = col.property as Exclude; * controls[prop] = this._fb.control(variable[prop]); * }); * return this._fb.group(controls); * }) * ); * } * } * ``` * * * This should also be called anytime the check needs to be made, such as when the resource is set. * * @example * ```ts * set variables(variables: Array) { * this._variables = variables || []; * this.checkAndUpdateFormArray(); * } * ``` */ checkAndUpdateFormArray(): void; /** * Updates a resource when the inline editor indicates to APPLY the change and the value is different from the persisted value. * This table assumes optimistic updates, it will immediately update the value on the resource's array. * * @param event Inlined editor action, whether to apply or discard the change * @param index index of the resource being updated * @param property the resource property being updated * @param resource the resource being updated */ updateCell(event: MtnaInlineEditorAction, index: number, property: keyof R & string, resource: R): void; /** * This method must be implemented case by case. * * Updates the internal resource when a value is edited. * * @example * updateResource(previousResource:R, updatedResource:R, property: keyof R & string){ * this.variables = this.variables.map((v) => (RdsVariableUtil.compareVariables(v, updatedResource) ? updatedResource : v)); * } * * @param previousResource The original, non-updated resource from the edit * @param updatedResource The resource with updated values from the edit * @param property The property being updated */ updateResource(previousResource: R, updatedResource: R, property: keyof R & string): void; } /** @docs-private */ export declare type CanTableEditCtor = Constructor>; /** * Mixin to augment a table directive with a `editable` property, * `update` event emitter, and built in functionality for editing cell values. */ export declare function mixinEditableTable>(base: T): CanTableEditCtor & T;