This repository has been archived by the owner on Mar 27, 2023. It is now read-only.
/
datagrid.ts
180 lines (165 loc) · 6.55 KB
/
datagrid.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import {AfterViewInit, OnDestroy, Component, ContentChild, ContentChildren, EventEmitter,
Input, Output, QueryList} from "@angular/core";
import {Subscription} from "rxjs";
import {DatagridPropertyComparator} from "./built-in/comparators/datagrid-property-comparator";
import {DatagridPropertyStringFilter} from "./built-in/filters/datagrid-property-string-filter";
import {DatagridStringFilter} from "./built-in/filters/datagrid-string-filter";
import {DatagridItems} from "./datagrid-items";
import {DatagridRow} from "./datagrid-row";
import {State} from "./interfaces/state";
import {Filters} from "./providers/filters";
import {Items} from "./providers/items";
import {Page} from "./providers/page";
import {Selection} from "./providers/selection";
import {Sort} from "./providers/sort";
@Component({
selector: "clr-datagrid",
templateUrl: "./datagrid.html",
providers: [Selection, Sort, Filters, Page, Items]
})
export class Datagrid implements AfterViewInit, OnDestroy {
constructor(private selection: Selection, private sort: Sort, private filters: Filters,
private page: Page, public items: Items) {}
/**
* Freezes the datagrid while data is loading
*/
@Input("clrDgLoading") public loading = false;
/**
* Output emitted whenever the data needs to be refreshed, based on user action or external ones
*/
@Output("clrDgRefresh") public refresh = new EventEmitter<State>(false);
/**
* Emits a State output to ask for the data to be refreshed
*/
private triggerRefresh() {
let state: State = {};
if (this.page.size > 0) {
state.page = {
from: this.page.firstItem,
to: this.page.lastItem,
size: this.page.size
};
}
if (this.sort.comparator) {
if (this.sort.comparator instanceof DatagridPropertyComparator) {
/*
* Special case for the default object property comparator,
* we give the property name instead of the actual comparator.
*/
state.sort = {
by: (<DatagridPropertyComparator>this.sort.comparator).prop,
reverse: this.sort.reverse
};
} else {
state.sort = {
by: this.sort.comparator,
reverse: this.sort.reverse
};
}
}
let activeFilters = this.filters.getActiveFilters();
if (activeFilters.length > 0) {
state.filters = [];
for (let filter of activeFilters) {
if (filter instanceof DatagridStringFilter) {
let stringFilter = (<DatagridStringFilter>filter).filter;
if (stringFilter instanceof DatagridPropertyStringFilter) {
/*
* Special case again for the default object property filter,
* we give the property name instead of the full filter object.
*/
state.filters.push({
property: (<DatagridPropertyStringFilter>stringFilter).prop,
value: (<DatagridStringFilter>filter).value
});
continue;
}
}
state.filters.push(filter);
}
}
this.refresh.emit(state);
}
/**
* We grab the smart iterator from projected content
*/
@ContentChild(DatagridItems) public iterator: DatagridItems;
/**
* When the datagrid is user-managed without the smart iterator, we get the items displayed
* by querying the projected content. This is needed to keep track of the models currently
* displayed, typically for selection.
*/
@ContentChildren(DatagridRow) private _rows: QueryList<DatagridRow>;
/**
* Array of all selected items
*/
@Input("clrDgSelected")
set selected(value: any[]) {
if (value) {
this.selection.selectable = true;
}
this.selection.current = value;
}
@Output("clrDgSelectedChange") selectedChanged = new EventEmitter<any[]>(false);
/**
* Indicates if all currently displayed items are selected
*/
public get allSelected() {
return this.selection.isAllSelected();
}
/**
* Selects/deselects all currently displayed items
* @param value
*/
public set allSelected(value: boolean) {
/*
* This is a setter but we ignore the value.
* It's strange, but it lets us have an indeterminate state where only
* some of the items are selected.
*/
this.selection.toggleAll();
}
/**
* Number of empty rows to display to ensure we preserve a fixed height on the datagrid,
* even if the last page has less items than the previous ones
*/
get nbEmptyRows() {
console.log(this._rows.length);
let rowsDisplayed = 0;
if (this.items.displayed) {
rowsDisplayed = this.items.displayed.length;
}
// Always leave space for at least 2 rows even if the datagrid isn't paginated
return Math.max(this.page.size, 2) - rowsDisplayed;
}
/**
* Our setup happens in the view of some of our components, so we wait for it to be done before starting
*/
ngAfterViewInit() {
this.triggerRefresh();
this._subscriptions.push(this.sort.change.subscribe(() => this.triggerRefresh()));
this._subscriptions.push(this.filters.change.subscribe(() => this.triggerRefresh()));
this._subscriptions.push(this.page.change.subscribe(() => this.triggerRefresh()));
this._subscriptions.push(this.selection.change.subscribe(s => this.selectedChanged.emit(s)));
this._subscriptions.push(this._rows.changes.subscribe(() => {
if (!this.items.smart) {
this.items.all = this._rows.map((row: DatagridRow) => row.item);
}
}));
if (!this.items.smart) {
this.items.all = this._rows.map((row: DatagridRow) => row.item);
}
}
/**
* Subscriptions to all the services changes
*/
private _subscriptions: Subscription[] = [];
ngOnDestroy() {
this._subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
}
}