From 1b6c2774766f7a1b334ee2d2ab75a3fc75b714db Mon Sep 17 00:00:00 2001 From: Mike Becker Date: Tue, 8 Aug 2023 13:55:10 +0200 Subject: [PATCH] add valueStoreFunction - fixes #115 --- CHANGELOG.md | 1 + projects/angular2-smart-table/CHANGELOG.md | 1 + .../cell-editors/checkbox-editor.component.ts | 6 +-- .../cell-editors/input-editor.component.ts | 4 +- .../cell-editors/select-editor.component.ts | 10 +++-- .../cell-editors/textarea-editor.component.ts | 4 +- .../src/lib/lib/data-set/cell.ts | 14 +++++-- .../src/lib/lib/data-set/column.ts | 3 ++ .../src/lib/lib/data-set/row.ts | 2 +- .../src/lib/lib/settings.ts | 2 + .../documentation.component.html | 18 ++++++-- .../custom-editor.component.ts | 41 ++++++------------- 12 files changed, 61 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1b32f1a2..903974000 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ This document lists the changes introduced by this fork. * Add Angular 16 support * Add proper typing to all settings * Improve signatures of `valuePrepareFunction`, and `filterFunction` +* Add `valueStoreFunction` as counter-part of the `valuePrepareFunction` * Change how filters are configured: * Add `removeFilter()` method * Change `setFilter()` to always remove all existing filters, first diff --git a/projects/angular2-smart-table/CHANGELOG.md b/projects/angular2-smart-table/CHANGELOG.md index 5d34d4ef5..f6260d612 100644 --- a/projects/angular2-smart-table/CHANGELOG.md +++ b/projects/angular2-smart-table/CHANGELOG.md @@ -7,6 +7,7 @@ This document lists the changes introduced by this fork. * Add Angular 16 support * Add proper typing to all settings * Improve signatures of `valuePrepareFunction`, and `filterFunction` +* Add `valueStoreFunction` as counter-part of the `valuePrepareFunction` * Change how filters are configured: * Add `removeFilter()` method * Change `setFilter()` to always remove all existing filters, first diff --git a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/checkbox-editor.component.ts b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/checkbox-editor.component.ts index d5732c5aa..e963d1fdc 100644 --- a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/checkbox-editor.component.ts +++ b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/checkbox-editor.component.ts @@ -14,7 +14,7 @@ import {CheckboxEditorSettings} from "../../../lib/settings"; [disabled]="!cell.isEditable()" [checked]="cell.getValue() === trueVal" (click)="onClick.emit($event)" - (change)="onChange($event)"> + (change)="onChange($any($event.target).checked)"> `, }) export class CheckboxEditorComponent extends DefaultEditor implements OnInit { @@ -35,7 +35,7 @@ export class CheckboxEditorComponent extends DefaultEditor implements OnInit { } } - onChange(event: any) { - this.cell.newValue = event.target.checked ? this.trueVal : this.falseVal; + onChange(newVal: boolean) { + this.cell.setValue(newVal ? this.trueVal : this.falseVal); } } diff --git a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/input-editor.component.ts b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/input-editor.component.ts index 17870b888..9e3e09c76 100644 --- a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/input-editor.component.ts +++ b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/input-editor.component.ts @@ -7,12 +7,12 @@ import {DefaultEditor} from './default-editor'; styleUrls: ['./editor.component.scss'], template: ` `, diff --git a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/select-editor.component.ts b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/select-editor.component.ts index cbaa968ac..d95c31761 100644 --- a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/select-editor.component.ts +++ b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/select-editor.component.ts @@ -1,13 +1,13 @@ import {Component} from '@angular/core'; import {DefaultEditor} from './default-editor'; +import {ListEditorSettings} from "../../../lib/settings"; @Component({ selector: 'select-editor', template: ` @@ -28,7 +28,11 @@ export class SelectEditorComponent extends DefaultEditor { super(); } + get editorConfig(): ListEditorSettings { + return this.cell.getColumn().getConfig(); + } + onSelectionChanged(newValue: string) { - this.cell.newValue = newValue; + this.cell.setValue(newValue); } } diff --git a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/textarea-editor.component.ts b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/textarea-editor.component.ts index 7f6fd6279..eab75ea30 100644 --- a/projects/angular2-smart-table/src/lib/components/cell/cell-editors/textarea-editor.component.ts +++ b/projects/angular2-smart-table/src/lib/components/cell/cell-editors/textarea-editor.component.ts @@ -7,12 +7,12 @@ import {DefaultEditor} from './default-editor'; styleUrls: ['./editor.component.scss'], template: ` diff --git a/projects/angular2-smart-table/src/lib/lib/data-set/cell.ts b/projects/angular2-smart-table/src/lib/lib/data-set/cell.ts index e64699ce3..97a166c68 100644 --- a/projects/angular2-smart-table/src/lib/lib/data-set/cell.ts +++ b/projects/angular2-smart-table/src/lib/lib/data-set/cell.ts @@ -3,11 +3,11 @@ import {Row} from './row'; export class Cell { - newValue: string; - private cachedValue: unknown; private cachedPreparedValue: string; + private newValue: string; + constructor(protected value: unknown, protected row: Row, protected column: Column) { this.cachedValue = this.value; this.cachedPreparedValue = this.getPreparedValue(); @@ -45,7 +45,15 @@ export class Cell { } setValue(value: string) { - this.newValue = value; + const store = this.column.valueStoreFunction ?? ((v) => v); + this.newValue = store.call(null, value, this); + } + + /** + * Returns the new raw value after being post-processed by the valueStoreFunction. + */ + getNewRawValue(): any { + return this.newValue; } getId(): string { diff --git a/projects/angular2-smart-table/src/lib/lib/data-set/column.ts b/projects/angular2-smart-table/src/lib/lib/data-set/column.ts index 0fc4a5a5d..ace413432 100644 --- a/projects/angular2-smart-table/src/lib/lib/data-set/column.ts +++ b/projects/angular2-smart-table/src/lib/lib/data-set/column.ts @@ -3,6 +3,7 @@ import { ColumnComponentInitFunction, ColumnFilterFunction, ColumnValuePrepareFunction, + ColumnValueStoreFunction, EditorSettings, FilterSettings, IColumn, @@ -43,6 +44,7 @@ export class Column { renderComponent?: any; compareFunction?: ColumnCompareFunction; valuePrepareFunction?: ColumnValuePrepareFunction; + valueStoreFunction?: ColumnValueStoreFunction; filterFunction?: ColumnFilterFunction; componentInitFunction?: ColumnComponentInitFunction; @@ -69,6 +71,7 @@ export class Column { this.compareFunction = this.settings.compareFunction; this.valuePrepareFunction = this.settings.valuePrepareFunction; + this.valueStoreFunction = this.settings.valueStoreFunction; this.filterFunction = this.settings.filterFunction; this.componentInitFunction = this.settings.componentInitFunction; } diff --git a/projects/angular2-smart-table/src/lib/lib/data-set/row.ts b/projects/angular2-smart-table/src/lib/lib/data-set/row.ts index e8cc911c0..bf6f180f4 100644 --- a/projects/angular2-smart-table/src/lib/lib/data-set/row.ts +++ b/projects/angular2-smart-table/src/lib/lib/data-set/row.ts @@ -38,7 +38,7 @@ export class Row { getNewData(): any { const values = Object.assign({}, this.data); - this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue); + this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.getNewRawValue()); return values; } diff --git a/projects/angular2-smart-table/src/lib/lib/settings.ts b/projects/angular2-smart-table/src/lib/lib/settings.ts index d95f370f7..5fd7e130e 100644 --- a/projects/angular2-smart-table/src/lib/lib/settings.ts +++ b/projects/angular2-smart-table/src/lib/lib/settings.ts @@ -59,6 +59,7 @@ export type RowClassFunction = (row: Row) => string; export type ColumnCompareFunction = (direction: number, left: any, right: any) => number; export type ColumnValuePrepareFunction = (rawValue: any, cell: Cell) => string; +export type ColumnValueStoreFunction = (value: string, cell: Cell) => any; export type ColumnFilterFunction = (value: any, searchString: string) => boolean; export type ColumnComponentInitFunction = (component: any, cell: Cell) => void; @@ -123,6 +124,7 @@ export interface IColumn { renderComponent?: any; compareFunction?: ColumnCompareFunction; valuePrepareFunction?: ColumnValuePrepareFunction; + valueStoreFunction?: ColumnValueStoreFunction; filterFunction?: ColumnFilterFunction; componentInitFunction?: ColumnComponentInitFunction; diff --git a/projects/demo/src/app/pages/documentation/documentation.component.html b/projects/demo/src/app/pages/documentation/documentation.component.html index ae4a4a90f..de743a3ac 100644 --- a/projects/demo/src/app/pages/documentation/documentation.component.html +++ b/projects/demo/src/app/pages/documentation/documentation.component.html @@ -364,12 +364,24 @@

Table Configuration

valuePrepareFunction Function - undefined + toString() Function that is used by the cell to compute the displayed value.
- This function will be invoked with two parameters: (rawValue: string, cell: Cell) + This function will be invoked with two parameters (rawValue: any, cell: Cell) and must produce a string. + + + + valueStoreFunction + Function + + identity + + + Function that is used by the cell to convert an edited value (string) back to a value of the original type. +
+ This function will be invoked with two parameters: (newValue: string, cell: Cell) @@ -423,7 +435,7 @@

Table Configuration

Function run against the cell value when filtering is happening, returning a boolean indicating whether the filter matched.
- This function will be invoked with two parameters: (value: string, searchString: string) + This function will be invoked with two parameters: (value: any, searchString: string) diff --git a/projects/demo/src/app/pages/examples/custom-edit-view/custom-editor.component.ts b/projects/demo/src/app/pages/examples/custom-edit-view/custom-editor.component.ts index 20c275403..7366b2c51 100644 --- a/projects/demo/src/app/pages/examples/custom-edit-view/custom-editor.component.ts +++ b/projects/demo/src/app/pages/examples/custom-edit-view/custom-editor.component.ts @@ -1,59 +1,44 @@ -import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; -import { DefaultEditor } from 'angular2-smart-table'; +import {AfterViewInit, Component} from '@angular/core'; +import {DefaultEditor} from 'angular2-smart-table'; @Component({ template: ` Name:
Url: -
`, }) export class CustomEditorComponent extends DefaultEditor implements AfterViewInit { - @ViewChild('name') name!: ElementRef; - @ViewChild('url') url!: ElementRef; - @ViewChild('htmlValue') htmlValue!: ElementRef; + name: string = ''; + url: string = ''; constructor() { super(); } ngAfterViewInit() { - if (this.cell.newValue !== '') { - this.name.nativeElement.value = this.getUrlName(); - this.url.nativeElement.value = this.getUrlHref(); + const re = this.cell.getValue().match(/([^<]*)<\/a>/); + if (re !== null) { + this.url = re[1]; + this.name = re[2]; } } updateValue() { - const href = this.url.nativeElement.value; - const name = this.name.nativeElement.value; - this.cell.newValue = `${name}`; - } - - getUrlName(): string { - return this.htmlValue.nativeElement.innerText; - } - - getUrlHref(): string { - return this.htmlValue.nativeElement.querySelector('a').getAttribute('href'); + this.cell.setValue(`${this.name}`); } }