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
|
/*
* ============LICENSE_START==========================================
* ONAP Portal SDK
* ===================================================================
* Copyright © 2019 AT&T Intellectual Property. All rights reserved.
* ===================================================================
*
* Unless otherwise specified, all software contained herein is licensed
* under the Apache License, Version 2.0 (the "License");
* you may not use this software except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Unless otherwise specified, all documentation contained herein is licensed
* under the Creative Commons License, Attribution 4.0 Intl. (the "License");
* you may not use this documentation except in compliance with the License.
* You may obtain a copy of the License at
*
* https://creativecommons.org/licenses/by/4.0/
*
* Unless required by applicable law or agreed to in writing, documentation
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* ============LICENSE_END============================================
*
*
*/
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild, ContentChild, TemplateRef} from '@angular/core';
import {MatSortHeader} from '@angular/material';
import {MatColumnDef, MatTable} from '@angular/material';
@Component({
selector: 'rdp-column',
template: `
<ng-container matColumnDef>
<div *ngIf="_sortable">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ label }} </th>
</div>
<div *ngIf="!_sortable">
<th mat-header-cell *matHeaderCellDef> {{ label }} </th>
</div>
<td mat-cell *matCellDef="let data" id="{{ label }}">
{{ getData(data) }}
</td>
</ng-container>`
})
export class RdpColumnComponent<T> implements OnDestroy, OnInit {
// @ContentChild(TemplateRef) template: TemplateRef<any>;
// @ContentChild('colContent') colContentTmpl: TemplateRef<any>;
/** Column name that should be used to reference this column. */
@Input()
get name(): string { return this._name; }
set name(name: string) {
this._name = name;
this.columnDef.name = name;
}
_name: string;
/**
* Text label that should be used for the column header. If this property is not
* set, the header text will default to the column name.
*/
@Input() label: string;
/**
* Text label that should be used for the column header. If this property is not
* set, the header text will default to the column name.
*/
@Input() sort: boolean;
/**
* Accessor function to retrieve the data should be provided to the cell. If this
* property is not set, the data cells will assume that the column name is the same
* as the data property the cells should display.
*/
@Input() dataAccessor: ((data: T, name: string) => string);
@ViewChild(MatColumnDef) columnDef: MatColumnDef;
@ViewChild(MatSortHeader) sortHeader: MatSortHeader;
constructor(@Optional() public table: MatTable<any>) {}
_sortable: boolean;
ngOnInit() {
if (this.table) {
//console.log("Column name --"+this._name+ " Is Sorting applied ",this.sort);
this._sortable = coerceBooleanProperty(this.sort);
//console.log("this._sortable ",this._sortable);
if(this._name === 'delete' || this._name === 'edit'){
//Don't add delete column as this column is not added dynamically.
}else{
this.table.addColumnDef(this.columnDef);
}
}
}
ngOnDestroy() {
if (this.table) {
this.table.removeColumnDef(this.columnDef);
}
}
getData(data: T): any {
return this.dataAccessor ? this.dataAccessor(data, this.name) : (data as any)[this.name];
}
}
|
