Add type to some column functions

Add row data to column filter function
dj-fiorex · Oct 26, 2021 · 5b345dd · 5b345dd
1 parent f3df5f3
commit 5b345dd
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 18 deletions.
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
@@ -1,4 +1,4 @@
-import { IColumn, IColumnType, ISortDirection } from '../settings';
+import { ColumnFilterFunction, ColumnValuePrepareFunction, IColumn, IColumnType, ISortDirection } from '../settings';
 import { DataSet } from './data-set';
 
 export class Column implements IColumn {
@@ -19,8 +19,8 @@ export class Column implements IColumn {
   filter?: { type: string, config: any, component: any } = { type: '', config: {}, component: null };
   renderComponent?: any = null;
   compareFunction?: Function;
-  valuePrepareFunction?: Function;
-  filterFunction?: Function;
+  valuePrepareFunction?: ColumnValuePrepareFunction;
+  filterFunction?: ColumnFilterFunction;
   onComponentInitFunction?: Function;
 
   constructor(public id: string, protected settings: any, protected dataSet: DataSet) {
@@ -70,8 +70,8 @@ export class Column implements IColumn {
     this.defaultSortDirection = ['asc', 'desc']
       .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : '';
     this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort'];
-    this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable'];
-    this.isAddable = typeof this.settings['addable'] === 'undefined' ? true : !!this.settings['addable'];
+    this.isEditable = typeof this.settings['isEditable'] === 'undefined' ? true : !!this.settings['isEditable'];
+    this.isAddable = typeof this.settings['isAddable'] === 'undefined' ? true : !!this.settings['isAddable'];
     this.sortDirection = this.prepareSortDirection();
 
     this.compareFunction = this.settings['compareFunction'];

diff --git a/projects/angular2-smart-table/src/lib/lib/data-source/local/local.filter.ts b/projects/angular2-smart-table/src/lib/lib/data-source/local/local.filter.ts
@@ -16,7 +16,7 @@ export class LocalFilter {
       for (var i = 0; i < parts.length && typeof prop !== 'undefined'; i++) {
         prop = prop[parts[i]];
       }
-      return filter.call(null, prop, search, data, field);
+      return filter.call(null, prop, search, data, field, el);
     });
   }
 }
diff --git a/projects/angular2-smart-table/src/lib/lib/settings.ts b/projects/angular2-smart-table/src/lib/lib/settings.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Cell } from "./data-set/cell";
 
 export enum SelectModeOptions {
   Single = "single",
@@ -51,21 +51,24 @@ export enum ISortDirection {
   DESC = "desc"
 }
 
+export type ColumnValuePrepareFunction = (cellValue: any, row: any, cell: Cell) => any;
+export type ColumnFilterFunction = (cellValue: any, searchString: string, rowData: any, cellName: string, row: any) => void;
+
+
+
 export interface IColumn {
   title?: string;
   type?: IColumnType;
   class?: string;
   width?: string;
-  editable?: boolean;
-  sort?: boolean;
   sortDirection?: ISortDirection;
   defaultSortDirection?: string;
   editor?: { type: string, config?: any, component?: any };
   filter?: { type: string, config?: any, component?: any } | boolean;
   renderComponent?: any;
   compareFunction?: Function;
-  valuePrepareFunction?: Function;
-  filterFunction?: Function;
+  valuePrepareFunction?: ColumnValuePrepareFunction;
+  filterFunction?: ColumnFilterFunction;
   onComponentInitFunction?: Function;
 
   placeholder?: string;

diff --git a/projects/demo/src/app/pages/documentation/documentation.component.html b/projects/demo/src/app/pages/documentation/documentation.component.html
@@ -97,7 +97,7 @@ <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true
       </td>
     </tr>
     <tr>
-      <td>editable</td>
+      <td>isEditable</td>
       <td><span class="highlight">boolean</span></td>
       <td>true</td>
       <td>

diff --git a/projects/demo/src/app/pages/examples/filter/advanced-example-filter-function.component.ts b/projects/demo/src/app/pages/examples/filter/advanced-example-filter-function.component.ts
@@ -82,7 +82,7 @@ export class AdvancedExampleFilterFunctionComponent {
       delete: false,
     },
     pager: {
-        perPage: 8,
+      perPage: 8,
     },
     columns: {
       id: {
@@ -96,7 +96,7 @@ export class AdvancedExampleFilterFunctionComponent {
       },
       companyName: {
         title: 'Company Name',
-        filterFunction: (cell: any, search: string, row: any) => {
+        filterFunction: (cell: any, search: any, row: any, field: any, el: any) => {
           if (search.length > 0 && search[0] === '-') {
             const re = new RegExp(search.substring(1), 'gi');
             if (cell.match(re)) {
@@ -105,8 +105,12 @@ export class AdvancedExampleFilterFunctionComponent {
               return true;
             }
           } else {
+
+
             const re = new RegExp(search, 'gi');
-            if (cell.match(re) || row.companyId.toString().match(re)) {
+
+
+            if (cell.match(re) || el.companyId?.toString().match(re)) {
               return true;
             } else {
               return false;

diff --git a/projects/demo/src/app/pages/examples/filter/column-hide-example.component.ts b/projects/demo/src/app/pages/examples/filter/column-hide-example.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Settings } from 'angular2-smart-table';
 
 @Component({
   selector: 'column-hide-example',
@@ -59,7 +60,8 @@ export class ColumnHideExampleComponent {
     },
   ];
 
-  settings = {
+  settings : Settings = {
+    hideable: true,
     columns: {
       id: {
         title: 'ID',

diff --git a/projects/demo/src/app/pages/examples/server/basic-example-load.component.ts b/projects/demo/src/app/pages/examples/server/basic-example-load.component.ts
@@ -18,8 +18,8 @@ export class BasicExampleLoadComponent {
     columns: {
       id: {
         title: 'ID',
-        editable: false,
-        addable: false,
+        isEditable: false,
+        isAddable: false,
       },