Skip to content

Commit

Permalink
fix(table): performance improve (#367), (fix #189, fix #300)
Browse files Browse the repository at this point in the history
  • Loading branch information
mishkolesnikov authored and lexzhukov committed May 25, 2017
1 parent d648ee1 commit 69e883c
Show file tree
Hide file tree
Showing 18 changed files with 193 additions and 68 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import {Component, Input, ChangeDetectionStrategy } from '@angular/core';

import { Cell } from '../../../lib/data-set/cell';

@Component({
selector: 'table-cell-view-mode',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div [ngSwitch]="cell.getColumn().type">
<custom-view-component *ngSwitchCase="'custom'" [cell]="cell"></custom-view-component>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export class InputFilterComponent extends DefaultFilter implements OnInit {

ngOnInit() {
this.inputControl.valueChanges
.skip(1)
.distinctUntilChanged()
.debounceTime(this.delay)
.subscribe((value: string) => this.setFilter());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export class SelectFilterComponent extends DefaultFilter implements OnInit {

ngOnInit() {
this.inputControl.valueChanges
.skip(1)
.distinctUntilChanged()
.debounceTime(this.delay)
.subscribe((value: string) => this.setFilter());
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, EventEmitter, OnChanges } from '@angular/core';

import { Grid } from '../../../lib/grid';
import { Row } from '../../../lib/data-set/row';
Expand All @@ -7,17 +7,20 @@ import { Row } from '../../../lib/data-set/row';
selector: 'ng2-st-tbody-create-cancel',
template: `
<a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
[innerHTML]="grid.getSetting('edit.saveButtonContent')" (click)="onSave($event)"></a>
[innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
<a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
[innerHTML]="grid.getSetting('edit.cancelButtonContent')" (click)="onCancelEdit($event)"></a>
[innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
`,
})
export class TbodyCreateCancelComponent {
export class TbodyCreateCancelComponent implements OnChanges {

@Input() grid: Grid;
@Input() row: Row;
@Input() editConfirm: EventEmitter<any>;

cancelButtonContent: string;
saveButtonContent: string;

onSave(event: any) {
event.preventDefault();
event.stopPropagation();
Expand All @@ -31,4 +34,9 @@ export class TbodyCreateCancelComponent {

this.row.isInEditing = false;
}

ngOnChanges() {
this.saveButtonContent = this.grid.getSetting('edit.saveButtonContent');
this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent')
}
}
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Component, Input, Output, EventEmitter, OnChanges, ChangeDetectionStrategy } from '@angular/core';

import { Grid } from '../../../lib/grid';
import { Row } from '../../../lib/data-set/row';
import { DataSource } from '../../../lib/data-source/data-source';

@Component({
selector: 'ng2-st-tbody-edit-delete',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<a href="#" *ngIf="grid.getSetting('actions.edit')" class="ng2-smart-action ng2-smart-action-edit-edit"
[innerHTML]="grid.getSetting('edit.editButtonContent')" (click)="onEdit($event)"></a>
<a href="#" *ngIf="grid.getSetting('actions.delete')" class="ng2-smart-action ng2-smart-action-delete-delete"
[innerHTML]="grid.getSetting('delete.deleteButtonContent')" (click)="onDelete($event)"></a>
<a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
[innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
<a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
[innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
`,
})
export class TbodyEditDeleteComponent {
export class TbodyEditDeleteComponent implements OnChanges {

@Input() grid: Grid;
@Input() row: Row;
Expand All @@ -25,6 +26,11 @@ export class TbodyEditDeleteComponent {
@Output() delete = new EventEmitter<any>();
@Output() editRowSelect = new EventEmitter<any>();

isActionEdit: boolean;
isActionDelete: boolean;
editRowButtonContent: string;
deleteRowButtonContent: string;

onEdit(event: any) {
event.preventDefault();
event.stopPropagation();
Expand Down Expand Up @@ -54,4 +60,11 @@ export class TbodyEditDeleteComponent {
this.grid.delete(this.row, this.deleteConfirm);
}
}

ngOnChanges(){
this.isActionEdit = this.grid.getSetting('actions.edit');
this.isActionDelete = this.grid.getSetting('actions.delete');
this.editRowButtonContent = this.grid.getSetting('edit.editButtonContent');
this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
}
}
26 changes: 13 additions & 13 deletions src/ng2-smart-table/components/tbody/tbody.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<tr *ngFor="let row of grid.getRows()" (click)="userSelectRow.emit(row)" (mouseover)="rowHover.emit(row)" class="ng2-smart-row" [ngClass]="{selected: row.isSelected}">
<td *ngIf="grid.isMultiSelectVisible()" class="ng2-smart-actions ng2-smart-action-multiple-select" (click)="multipleSelectRow.emit(row)">
<tr *ngFor="let row of this.grid.getRows()" (click)="userSelectRow.emit(row)" (mouseover)="rowHover.emit(row)" class="ng2-smart-row" [ngClass]="{selected: row.isSelected}">
<td *ngIf="isMultiSelectVisible" class="ng2-smart-actions ng2-smart-action-multiple-select" (click)="multipleSelectRow.emit(row)">
<input type="checkbox" class="form-control" [ngModel]="row.isSelected">
</td>
<td *ngIf="!row.isInEditing && grid.showActionColumn('left')" class="ng2-smart-actions">
<td *ngIf="!row.isInEditing && showActionColumnLeft" class="ng2-smart-actions">
<ng2-st-tbody-custom [grid]="grid" (custom)="custom.emit($event)" [row]="row" [source]="source"></ng2-st-tbody-custom>

<ng2-st-tbody-edit-delete [grid]="grid"
Expand All @@ -15,26 +15,26 @@
[source]="source">
</ng2-st-tbody-edit-delete>
</td>
<td *ngIf="row.isInEditing && grid.showActionColumn('left')" class="ng2-smart-actions">
<td *ngIf="row.isInEditing && showActionColumnLeft" class="ng2-smart-actions">
<ng2-st-tbody-create-cancel [grid]="grid" [row]="row" [editConfirm]="editConfirm"></ng2-st-tbody-create-cancel>
</td>
<td *ngFor="let cell of row.getCells()">
<td *ngFor="let cell of row.cells">
<ng2-smart-table-cell [cell]="cell"
[grid]="grid"
[row]="row"
[isNew]="false"
[mode]="grid.getSetting('mode')"
[mode]="mode"
[editConfirm]="editConfirm"
[inputClass]="grid.getSetting('edit.inputClass')"
[inputClass]="editInputClass"
[isInEditing]="row.isInEditing">
</ng2-smart-table-cell>
</td>
<td *ngIf="row.isInEditing && grid.showActionColumn('right')" class="ng2-smart-actions">

<td *ngIf="row.isInEditing && showActionColumnRight" class="ng2-smart-actions">
<ng2-st-tbody-create-cancel [grid]="grid" [row]="row" [editConfirm]="editConfirm"></ng2-st-tbody-create-cancel>
</td>
<td *ngIf="!row.isInEditing && grid.showActionColumn('right')" class="ng2-smart-actions">

<td *ngIf="!row.isInEditing && showActionColumnRight" class="ng2-smart-actions">
<ng2-st-tbody-custom [grid]="grid" (custom)="custom.emit($event)" [row]="row" [source]="source"></ng2-st-tbody-custom>

<ng2-st-tbody-edit-delete [grid]="grid"
Expand All @@ -50,7 +50,7 @@
</tr>

<tr *ngIf="grid.getRows().length == 0">
<td [attr.colspan]="grid.getColumns().length + (grid.getSetting('actions.add') || grid.getSetting('actions.edit') || grid.getSetting('actions.delete'))">
{{ grid.getSetting('noDataMessage') }}
<td [attr.colspan]="grid.getColumns().length + (isActionAdd || isActionEdit || isActionDelete)">
{{ noDataMessage }}
</td>
</tr>
26 changes: 25 additions & 1 deletion src/ng2-smart-table/components/tbody/tbody.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Component, Input, Output, EventEmitter, } from '@angular/core';

import { Grid } from '../../lib/grid';
import { Row } from '../../lib/data-set/row';
import { DataSource } from '../../lib/data-source/data-source';
import {Column} from "../../lib/data-set/column";

@Component({
selector: '[ng2-st-tbody]',
Expand All @@ -25,4 +27,26 @@ export class Ng2SmartTableTbodyComponent {
@Output() editRowSelect = new EventEmitter<any>();
@Output() multipleSelectRow = new EventEmitter<any>();
@Output() rowHover = new EventEmitter<any>();

isMultiSelectVisible: boolean;
showActionColumnLeft: boolean;
showActionColumnRight: boolean;
mode: string;
editInputClass: string;
isActionAdd: boolean;
isActionEdit: boolean;
isActionDelete: boolean;
noDataMessage: boolean;

ngOnChanges() {
this.isMultiSelectVisible = this.grid.isMultiSelectVisible()
this.showActionColumnLeft = this.grid.showActionColumn('left');
this.mode = this.grid.getSetting('mode');
this.editInputClass = this.grid.getSetting('edit.inputClass');
this.showActionColumnRight = this.grid.showActionColumn('right');
this.isActionAdd = this.grid.getSetting('actions.add');
this.isActionEdit = this.grid.getSetting('actions.edit');
this.isActionDelete = this.grid.getSetting('actions.delete');
this.noDataMessage = this.grid.getSetting('noDataMessage');
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
import { Component, Input, AfterViewInit, ElementRef } from '@angular/core';
import {Component, Input, AfterViewInit, ElementRef, OnChanges} from '@angular/core';

import { Grid } from '../../../lib/grid';

@Component({
selector: '[ng2-st-actions-title]',
template: `
<div class="ng2-smart-title">{{ grid.getSetting('actions.columnTitle') }}</div>
<div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
`,
})
export class ActionsTitleComponent implements AfterViewInit {
export class ActionsTitleComponent implements AfterViewInit, OnChanges {

@Input() grid: Grid;

actionsColumnTitle: string;

constructor(private ref: ElementRef) {
}

ngAfterViewInit() {
this.ref.nativeElement.classList.add('ng2-smart-actions');
}

ngOnChanges() {
this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
}
}
16 changes: 12 additions & 4 deletions src/ng2-smart-table/components/thead/cells/actions.component.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';

import { Grid } from '../../../lib/grid';

@Component({
selector: 'ng2-st-actions',
template: `
<a href="#" class="ng2-smart-action ng2-smart-action-add-create"
[innerHTML]="grid.getSetting('add.createButtonContent')"
[innerHTML]="createButtonContent"
(click)="$event.preventDefault();create.emit($event)"></a>
<a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
[innerHTML]="grid.getSetting('add.cancelButtonContent')"
[innerHTML]="cancelButtonContent"
(click)="$event.preventDefault();grid.createFormShown = false;"></a>
`,
})
export class ActionsComponent {
export class ActionsComponent implements OnChanges {

@Input() grid: Grid;
@Output() create = new EventEmitter<any>();

createButtonContent: string;
cancelButtonContent: string;

ngOnChanges() {
this.createButtonContent = this.grid.getSetting('add.createButtonContent');
this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
}
}
16 changes: 12 additions & 4 deletions src/ng2-smart-table/components/thead/cells/add-button.component.ts
Original file line number Diff line number Diff line change
@@ -1,28 +1,36 @@
import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef } from '@angular/core';
import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef, OnChanges } from '@angular/core';

import { Grid } from '../../../lib/grid';
import { DataSource } from '../../../lib/data-source/data-source';

@Component({
selector: '[ng2-st-add-button]',
template: `
<a *ngIf="grid.getSetting('actions.add')" href="#" class="ng2-smart-action ng2-smart-action-add-add"
[innerHTML]="grid.getSetting('add.addButtonContent')" (click)="onAdd($event)"></a>
<a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
[innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
`,
})
export class AddButtonComponent implements AfterViewInit {
export class AddButtonComponent implements AfterViewInit, OnChanges {

@Input() grid: Grid;
@Input() source: DataSource;
@Output() create = new EventEmitter<any>();

isActionAdd: boolean;
addNewButtonContent: string;

constructor(private ref: ElementRef) {
}

ngAfterViewInit() {
this.ref.nativeElement.classList.add('ng2-smart-actions-title', 'ng2-smart-actions-title-add');
}

ngOnChanges() {
this.isActionAdd = this.grid.getSetting('actions.add');
this.addNewButtonContent = this.grid.getSetting('add.addButtonContent');
}

onAdd(event: any) {
event.preventDefault();
event.stopPropagation();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,36 +1,48 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Component, Input, Output, EventEmitter, OnChanges} from '@angular/core';

import { Grid } from '../../../lib/grid';
import { DataSource } from '../../../lib/data-source/data-source';
import { Column } from "../../../lib/data-set/column";

@Component({
selector: '[ng2-st-thead-filters-row]',
template: `
<th *ngIf="grid.isMultiSelectVisible()"></th>
<th ng2-st-add-button *ngIf="grid.showActionColumn('left')"
<th *ngIf="isMultiSelectVisible"></th>
<th ng2-st-add-button *ngIf="showActionColumnLeft"
[grid]="grid"
(create)="create.emit($event)">
</th>
<th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}">
<ng2-smart-table-filter [source]="source"
[column]="column"
[inputClass]="grid.getSetting('filter.inputClass')"
[inputClass]="filterInputClass"
(filter)="filter.emit($event)">
</ng2-smart-table-filter>
</th>
<th ng2-st-add-button *ngIf="grid.showActionColumn('right')"
<th ng2-st-add-button *ngIf="showActionColumnRight"
[grid]="grid"
[source]="source"
(create)="create.emit($event)">
</th>
`,
})
export class TheadFitlersRowComponent {
export class TheadFitlersRowComponent implements OnChanges {

@Input() grid: Grid;
@Input() source: DataSource;

@Output() create = new EventEmitter<any>();
@Output() filter = new EventEmitter<any>();

isMultiSelectVisible: boolean;
showActionColumnLeft: boolean;
showActionColumnRight: boolean;
filterInputClass: string;

ngOnChanges() {
this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
this.showActionColumnLeft = this.grid.showActionColumn('left');
this.showActionColumnRight = this.grid.showActionColumn('right');
this.filterInputClass = this.grid.getSetting('filter.inputClass');
}
}

0 comments on commit 69e883c

Please sign in to comment.