@tots/table 15.0.44 → 16.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/column-factories/tots-balance-column.mjs +12 -0
- package/esm2022/lib/column-factories/tots-balance-icon-column.mjs +15 -0
- package/esm2022/lib/column-factories/tots-boolean-column.mjs +8 -0
- package/esm2022/lib/column-factories/tots-checkbox-column.mjs +13 -0
- package/esm2022/lib/column-factories/tots-currency-column.mjs +8 -0
- package/esm2022/lib/column-factories/tots-icon-button-column.mjs +15 -0
- package/esm2022/lib/column-factories/tots-more-menu-column.mjs +12 -0
- package/esm2022/lib/column-factories/tots-option-column.mjs +13 -0
- package/esm2022/lib/column-factories/tots-status-column.mjs +13 -0
- package/esm2022/lib/column-factories/tots-status-icon-column.mjs +13 -0
- package/esm2022/lib/column-factories/tots-string-column.mjs +8 -0
- package/esm2022/lib/column-factories/tots-two-string-column.mjs +11 -0
- package/esm2022/lib/column-factories/tots-user-column.mjs +16 -0
- package/{esm2020 → esm2022}/lib/columns/balance-currency-column/balance-currency-column.component.mjs +4 -4
- package/esm2022/lib/columns/balance-currency-icon-column/balance-currency-icon-column.component.mjs +23 -0
- package/{esm2020 → esm2022}/lib/columns/base-print-column/base-print-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/boolean-column/boolean-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/checkbox-column/checkbox-column.component.mjs +5 -5
- package/{esm2020 → esm2022}/lib/columns/currency-column/currency-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/icon-button-column/icon-button-column.component.mjs +5 -5
- package/{esm2020 → esm2022}/lib/columns/more-menu-column/more-menu-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/option-column/option-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/status-column/status-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/status-icon-column/status-icon-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/string-column/string-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/tots-base-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/two-string-column/two-string-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/columns/user-column/user-column.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/tots-table/tots-table.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/tots-table-api/tots-table-api.component.mjs +4 -4
- package/esm2022/lib/entities/tots-column-option.mjs +7 -0
- package/esm2022/lib/entities/tots-column.mjs +10 -0
- package/esm2022/lib/entities/tots-more-menu-item.mjs +9 -0
- package/esm2022/lib/entities/tots-status-column-option.mjs +9 -0
- package/esm2022/lib/entities/tots-status-icon-column-option.mjs +8 -0
- package/{esm2020 → esm2022}/lib/table.module.mjs +37 -37
- package/esm2022/public-api.mjs +61 -0
- package/{fesm2020 → fesm2022}/tots-table.mjs +260 -94
- package/fesm2022/tots-table.mjs.map +1 -0
- package/lib/column-factories/tots-balance-column.d.ts +4 -0
- package/lib/column-factories/tots-balance-icon-column.d.ts +4 -0
- package/lib/column-factories/tots-boolean-column.d.ts +4 -0
- package/lib/column-factories/tots-checkbox-column.d.ts +5 -0
- package/lib/column-factories/tots-currency-column.d.ts +4 -0
- package/lib/column-factories/tots-icon-button-column.d.ts +5 -0
- package/lib/column-factories/tots-more-menu-column.d.ts +5 -0
- package/lib/column-factories/tots-option-column.d.ts +5 -0
- package/lib/column-factories/tots-status-column.d.ts +5 -0
- package/lib/column-factories/tots-status-icon-column.d.ts +5 -0
- package/lib/column-factories/tots-string-column.d.ts +4 -0
- package/lib/column-factories/tots-two-string-column.d.ts +4 -0
- package/lib/column-factories/tots-user-column.d.ts +4 -0
- package/lib/columns/base-print-column/base-print-column.component.d.ts +1 -1
- package/lib/columns/tots-base-column.component.d.ts +1 -1
- package/lib/components/tots-table/tots-table.component.d.ts +1 -1
- package/lib/components/tots-table-api/tots-table-api.component.d.ts +1 -1
- package/lib/entities/tots-column-option.d.ts +5 -0
- package/lib/entities/tots-column.d.ts +4 -2
- package/lib/entities/tots-more-menu-item.d.ts +7 -0
- package/lib/entities/tots-status-column-option.d.ts +6 -0
- package/lib/entities/tots-status-icon-column-option.d.ts +5 -0
- package/package.json +8 -14
- package/public-api.d.ts +20 -0
- package/esm2020/lib/columns/balance-currency-icon-column/balance-currency-icon-column.component.mjs +0 -23
- package/esm2020/lib/entities/tots-column.mjs +0 -9
- package/esm2020/public-api.mjs +0 -41
- package/fesm2015/tots-table.mjs +0 -597
- package/fesm2015/tots-table.mjs.map +0 -1
- package/fesm2020/tots-table.mjs.map +0 -1
- /package/{esm2020 → esm2022}/lib/entities/tots-action-table.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/entities/tots-table-api-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/entities/tots-table-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/helpers/tots-table-helper.mjs +0 -0
- /package/{esm2020 → esm2022}/tots-table.mjs +0 -0
package/fesm2015/tots-table.mjs
DELETED
|
@@ -1,597 +0,0 @@
|
|
|
1
|
-
import { TotsQuery } from '@tots/core';
|
|
2
|
-
import * as i0 from '@angular/core';
|
|
3
|
-
import { Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
|
|
4
|
-
import * as i1 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
6
|
-
import * as i2 from '@angular/material/icon';
|
|
7
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
8
|
-
import * as i3 from '@angular/material/button';
|
|
9
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
10
|
-
import * as i4 from '@angular/material/menu';
|
|
11
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
12
|
-
import * as i1$1 from '@angular/material/checkbox';
|
|
13
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
14
|
-
import { Subject, tap } from 'rxjs';
|
|
15
|
-
import * as i3$1 from '@angular/material/table';
|
|
16
|
-
import { MatTableModule } from '@angular/material/table';
|
|
17
|
-
import * as i4$1 from '@angular/material/paginator';
|
|
18
|
-
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
19
|
-
import * as i5 from '@angular/material/progress-spinner';
|
|
20
|
-
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
21
|
-
|
|
22
|
-
class TotsColumn {
|
|
23
|
-
constructor() {
|
|
24
|
-
this.key = '';
|
|
25
|
-
this.title = '';
|
|
26
|
-
this.is_show = true;
|
|
27
|
-
this.hasOrder = false;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
class TotsTableConfig {
|
|
32
|
-
constructor() {
|
|
33
|
-
this.id = '';
|
|
34
|
-
this.columns = [];
|
|
35
|
-
this.classes = '';
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
class TotsActionTable {
|
|
40
|
-
constructor() {
|
|
41
|
-
this.key = '';
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
class TotsTableApiConfig {
|
|
46
|
-
constructor() {
|
|
47
|
-
this.id = '';
|
|
48
|
-
this.columns = [];
|
|
49
|
-
this.query = new TotsQuery();
|
|
50
|
-
this.classes = '';
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
class TotsTableHelper {
|
|
55
|
-
/**
|
|
56
|
-
* Obtiene el valor de un objeto a traves de la KEY
|
|
57
|
-
* @param item
|
|
58
|
-
* @param key
|
|
59
|
-
* @returns
|
|
60
|
-
*/
|
|
61
|
-
static getItemValueByKey(item, key) {
|
|
62
|
-
if (key == undefined || item == undefined) {
|
|
63
|
-
return '';
|
|
64
|
-
}
|
|
65
|
-
if (typeof key == 'string' && item[key] != undefined) {
|
|
66
|
-
return item[key];
|
|
67
|
-
}
|
|
68
|
-
let valueFinal = item;
|
|
69
|
-
for (const keyObj of key) {
|
|
70
|
-
if (valueFinal[keyObj] == undefined) {
|
|
71
|
-
return '';
|
|
72
|
-
}
|
|
73
|
-
valueFinal = valueFinal[keyObj];
|
|
74
|
-
}
|
|
75
|
-
return valueFinal;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
class TotsBaseColumnComponent {
|
|
80
|
-
getItemValue() {
|
|
81
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
TotsBaseColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
TotsBaseColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsBaseColumnComponent, selector: "tots-base-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: '', isInline: true });
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
|
|
87
|
-
type: Component,
|
|
88
|
-
args: [{
|
|
89
|
-
selector: 'tots-base-column',
|
|
90
|
-
template: ''
|
|
91
|
-
}]
|
|
92
|
-
}], propDecorators: { column: [{
|
|
93
|
-
type: Input
|
|
94
|
-
}], item: [{
|
|
95
|
-
type: Input
|
|
96
|
-
}], onAction: [{
|
|
97
|
-
type: Input
|
|
98
|
-
}], index: [{
|
|
99
|
-
type: Input
|
|
100
|
-
}] } });
|
|
101
|
-
|
|
102
|
-
class StringColumnComponent extends TotsBaseColumnComponent {
|
|
103
|
-
getItemValue() {
|
|
104
|
-
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
105
|
-
if (this.column.extra && this.column.extra.cutSeparator) {
|
|
106
|
-
return value.split(this.column.extra.cutSeparator)[0];
|
|
107
|
-
}
|
|
108
|
-
return value;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
StringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
-
StringColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringColumnComponent, selector: "tots-string-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] });
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringColumnComponent, decorators: [{
|
|
114
|
-
type: Component,
|
|
115
|
-
args: [{ selector: 'tots-string-column', template: "{{getItemValue()}}" }]
|
|
116
|
-
}] });
|
|
117
|
-
|
|
118
|
-
class MoreMenuColumnComponent extends TotsBaseColumnComponent {
|
|
119
|
-
clickButton(itemAction, $event) {
|
|
120
|
-
this.onAction.next({ key: itemAction.key, item: this.item });
|
|
121
|
-
$event.preventDefault();
|
|
122
|
-
return false;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
MoreMenuColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
126
|
-
MoreMenuColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: MoreMenuColumnComponent, selector: "tots-more-menu-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n </button>\n</mat-menu>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
|
|
128
|
-
type: Component,
|
|
129
|
-
args: [{ selector: 'tots-more-menu-column', template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n </button>\n</mat-menu>" }]
|
|
130
|
-
}] });
|
|
131
|
-
|
|
132
|
-
class BooleanColumnComponent extends TotsBaseColumnComponent {
|
|
133
|
-
}
|
|
134
|
-
BooleanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
BooleanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BooleanColumnComponent, selector: "tots-boolean-column", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanColumnComponent, decorators: [{
|
|
137
|
-
type: Component,
|
|
138
|
-
args: [{ selector: 'tots-boolean-column', template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>" }]
|
|
139
|
-
}] });
|
|
140
|
-
|
|
141
|
-
class TwoStringColumnComponent extends TotsBaseColumnComponent {
|
|
142
|
-
getSubtitleValue() {
|
|
143
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
TwoStringColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
147
|
-
TwoStringColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TwoStringColumnComponent, selector: "tots-two-string-column", usesInheritance: true, ngImport: i0, template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>", styles: [""] });
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
|
|
149
|
-
type: Component,
|
|
150
|
-
args: [{ selector: 'tots-two-string-column', template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>" }]
|
|
151
|
-
}] });
|
|
152
|
-
|
|
153
|
-
class IconButtonColumnComponent extends TotsBaseColumnComponent {
|
|
154
|
-
clickButton($event) {
|
|
155
|
-
this.onAction.next({ key: this.column.extra.action, item: this.item });
|
|
156
|
-
$event.stopPropagation();
|
|
157
|
-
return false;
|
|
158
|
-
}
|
|
159
|
-
getIconName() {
|
|
160
|
-
return this.column.extra.icon;
|
|
161
|
-
}
|
|
162
|
-
getButtonColor() {
|
|
163
|
-
return this.column.extra.matColor;
|
|
164
|
-
}
|
|
165
|
-
getClasses() {
|
|
166
|
-
return this.column.extra.classes;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
IconButtonColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
-
IconButtonColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: IconButtonColumnComponent, selector: "tots-icon-button-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n <mat-icon>{{getIconName()}}</mat-icon>\n</button>", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
|
|
172
|
-
type: Component,
|
|
173
|
-
args: [{ selector: 'tots-icon-button-column', template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n <mat-icon>{{getIconName()}}</mat-icon>\n</button>" }]
|
|
174
|
-
}] });
|
|
175
|
-
|
|
176
|
-
class CheckboxColumnComponent extends TotsBaseColumnComponent {
|
|
177
|
-
onChange(event) {
|
|
178
|
-
let key = 'select-item';
|
|
179
|
-
if (!event.checked) {
|
|
180
|
-
key = 'unselect-item';
|
|
181
|
-
}
|
|
182
|
-
this.onAction.next({ key: key, item: this.item });
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
186
|
-
CheckboxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: CheckboxColumnComponent, selector: "tots-checkbox-column", usesInheritance: true, ngImport: i0, template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
|
|
188
|
-
type: Component,
|
|
189
|
-
args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
|
|
190
|
-
}] });
|
|
191
|
-
|
|
192
|
-
class OptionColumnComponent extends TotsBaseColumnComponent {
|
|
193
|
-
getItemValue() {
|
|
194
|
-
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
195
|
-
for (const item of this.column.extra.options) {
|
|
196
|
-
if (item[this.column.extra.field_rel_key] == value) {
|
|
197
|
-
return item[this.column.extra.field_print_key];
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
return '';
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
OptionColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
204
|
-
OptionColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: OptionColumnComponent, selector: "tots-option-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] });
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: OptionColumnComponent, decorators: [{
|
|
206
|
-
type: Component,
|
|
207
|
-
args: [{ selector: 'tots-option-column', template: "{{getItemValue()}}" }]
|
|
208
|
-
}] });
|
|
209
|
-
|
|
210
|
-
class UserColumnComponent extends TotsBaseColumnComponent {
|
|
211
|
-
getFirstname() {
|
|
212
|
-
var _a;
|
|
213
|
-
if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_firstname_key) {
|
|
214
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_firstname_key);
|
|
215
|
-
}
|
|
216
|
-
return '';
|
|
217
|
-
}
|
|
218
|
-
getLastname() {
|
|
219
|
-
var _a;
|
|
220
|
-
if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_lastname_key) {
|
|
221
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_lastname_key);
|
|
222
|
-
}
|
|
223
|
-
return '';
|
|
224
|
-
}
|
|
225
|
-
getFullname() {
|
|
226
|
-
return this.getFirstname() + ' ' + this.getLastname();
|
|
227
|
-
}
|
|
228
|
-
getPhoto() {
|
|
229
|
-
var _a;
|
|
230
|
-
if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_photo_key) {
|
|
231
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_photo_key);
|
|
232
|
-
}
|
|
233
|
-
return '';
|
|
234
|
-
}
|
|
235
|
-
getSubtitle() {
|
|
236
|
-
var _a;
|
|
237
|
-
if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_subtitle_key) {
|
|
238
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
|
|
239
|
-
}
|
|
240
|
-
return '';
|
|
241
|
-
}
|
|
242
|
-
isOnline() {
|
|
243
|
-
var _a;
|
|
244
|
-
if ((_a = this.column.extra) === null || _a === void 0 ? void 0 : _a.field_online_key) {
|
|
245
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_online_key);
|
|
246
|
-
}
|
|
247
|
-
return false;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
UserColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
251
|
-
UserColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: UserColumnComponent, selector: "tots-user-column", usesInheritance: true, ngImport: i0, template: "<div class=\"user-avatar-component\">\n <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n </div>\n <div class=\"texts\">\n <div class=\"user\"> {{ getFullname() }} </div>\n <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n </div>\n <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: UserColumnComponent, decorators: [{
|
|
253
|
-
type: Component,
|
|
254
|
-
args: [{ selector: 'tots-user-column', template: "<div class=\"user-avatar-component\">\n <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n </div>\n <div class=\"texts\">\n <div class=\"user\"> {{ getFullname() }} </div>\n <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n </div>\n <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}\n"] }]
|
|
255
|
-
}] });
|
|
256
|
-
|
|
257
|
-
class CurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
258
|
-
}
|
|
259
|
-
CurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
260
|
-
CurrencyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: CurrencyColumnComponent, selector: "tots-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
|
|
262
|
-
type: Component,
|
|
263
|
-
args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
|
|
264
|
-
}] });
|
|
265
|
-
|
|
266
|
-
class StatusColumnComponent extends OptionColumnComponent {
|
|
267
|
-
getBackgroundColor() {
|
|
268
|
-
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
269
|
-
for (const item of this.column.extra.options) {
|
|
270
|
-
if (item[this.column.extra.field_rel_key] == value && item['background_color'] != undefined) {
|
|
271
|
-
return item['background_color'];
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
return '';
|
|
275
|
-
}
|
|
276
|
-
getFontColor() {
|
|
277
|
-
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
278
|
-
for (const item of this.column.extra.options) {
|
|
279
|
-
if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
|
|
280
|
-
return item['font_color'];
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
return '';
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
StatusColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
287
|
-
StatusColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StatusColumnComponent, selector: "tots-status-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
288
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusColumnComponent, decorators: [{
|
|
289
|
-
type: Component,
|
|
290
|
-
args: [{ selector: 'tots-status-column', template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"] }]
|
|
291
|
-
}] });
|
|
292
|
-
|
|
293
|
-
class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
|
|
294
|
-
getBalance() {
|
|
295
|
-
return this.getDebit() - this.getCredit();
|
|
296
|
-
}
|
|
297
|
-
getDebit() {
|
|
298
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_debit);
|
|
299
|
-
}
|
|
300
|
-
getCredit() {
|
|
301
|
-
return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
BalanceCurrencyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
305
|
-
BalanceCurrencyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BalanceCurrencyColumnComponent, selector: "tots-balance-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
|
|
307
|
-
type: Component,
|
|
308
|
-
args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
|
|
309
|
-
}] });
|
|
310
|
-
|
|
311
|
-
class StatusIconColumnComponent extends OptionColumnComponent {
|
|
312
|
-
getFontColor() {
|
|
313
|
-
let value = TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
|
|
314
|
-
for (const item of this.column.extra.options) {
|
|
315
|
-
if (item[this.column.extra.field_rel_key] == value && item['font_color'] != undefined) {
|
|
316
|
-
return item['font_color'];
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
return '';
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
StatusIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
-
StatusIconColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StatusIconColumnComponent, selector: "tots-status-icon-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StatusIconColumnComponent, decorators: [{
|
|
325
|
-
type: Component,
|
|
326
|
-
args: [{ selector: 'tots-status-icon-column', template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>" }]
|
|
327
|
-
}] });
|
|
328
|
-
|
|
329
|
-
class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent {
|
|
330
|
-
getIconPositive() {
|
|
331
|
-
return this.column.extra.icon_positive;
|
|
332
|
-
}
|
|
333
|
-
getIconNegative() {
|
|
334
|
-
return this.column.extra.icon_negative;
|
|
335
|
-
}
|
|
336
|
-
getIconNeutral() {
|
|
337
|
-
return this.column.extra.icon_neutral;
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
BalanceCurrencyIconColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
341
|
-
BalanceCurrencyIconColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BalanceCurrencyIconColumnComponent, selector: "tots-balance-currency-icon-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
|
|
343
|
-
type: Component,
|
|
344
|
-
args: [{ selector: 'tots-balance-currency-icon-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>" }]
|
|
345
|
-
}] });
|
|
346
|
-
|
|
347
|
-
class BasePrintColumnComponent {
|
|
348
|
-
constructor(viewContainerRef) {
|
|
349
|
-
this.viewContainerRef = viewContainerRef;
|
|
350
|
-
}
|
|
351
|
-
ngOnInit() {
|
|
352
|
-
const view = this.viewContainerRef.createComponent(this.column.component);
|
|
353
|
-
view.instance.column = this.column;
|
|
354
|
-
view.instance.item = this.item;
|
|
355
|
-
view.instance.onAction = this.onAction;
|
|
356
|
-
view.instance.index = this.index;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
BasePrintColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
BasePrintColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: "<div #contentColumn></div>", styles: [""] });
|
|
361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
|
|
362
|
-
type: Component,
|
|
363
|
-
args: [{ selector: 'tots-base-print-column', template: "<div #contentColumn></div>" }]
|
|
364
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
|
|
365
|
-
type: Input
|
|
366
|
-
}], item: [{
|
|
367
|
-
type: Input
|
|
368
|
-
}], onAction: [{
|
|
369
|
-
type: Input
|
|
370
|
-
}], index: [{
|
|
371
|
-
type: Input
|
|
372
|
-
}] } });
|
|
373
|
-
|
|
374
|
-
class TotsTableComponent {
|
|
375
|
-
constructor(changeDectetor) {
|
|
376
|
-
this.changeDectetor = changeDectetor;
|
|
377
|
-
this.config = new TotsTableConfig();
|
|
378
|
-
this.pageIndex = 0;
|
|
379
|
-
this.pageSize = 50;
|
|
380
|
-
this.hasPagination = true;
|
|
381
|
-
this.messageNotFound = "No results found, please try with other search terms";
|
|
382
|
-
this.onAction = new EventEmitter();
|
|
383
|
-
this.privateActions = new Subject();
|
|
384
|
-
this.isLoading = true;
|
|
385
|
-
this.displayColumns = [];
|
|
386
|
-
}
|
|
387
|
-
ngOnInit() {
|
|
388
|
-
this.loadConfig();
|
|
389
|
-
this.loadItems();
|
|
390
|
-
}
|
|
391
|
-
onClickOrder(column) {
|
|
392
|
-
if (!column.hasOrder) {
|
|
393
|
-
return;
|
|
394
|
-
}
|
|
395
|
-
let orderColumn = column.order;
|
|
396
|
-
this.config.columns.forEach(c => c.order = undefined);
|
|
397
|
-
column.order = orderColumn == 'asc' ? 'desc' : 'asc';
|
|
398
|
-
this.onAction.emit({ key: 'click-order', item: column });
|
|
399
|
-
}
|
|
400
|
-
onClickRow(item) {
|
|
401
|
-
this.onAction.emit({ key: 'click-row', item: item });
|
|
402
|
-
}
|
|
403
|
-
onPageChange(event) {
|
|
404
|
-
this.onAction.emit({ key: 'page-change', item: event });
|
|
405
|
-
}
|
|
406
|
-
loadItems() {
|
|
407
|
-
var _a;
|
|
408
|
-
this.dataItems = undefined;
|
|
409
|
-
this.isLoading = true;
|
|
410
|
-
return (_a = this.config.obs) === null || _a === void 0 ? void 0 : _a.pipe(tap(res => this.dataItems = res)).pipe(tap(res => this.onAction.emit({ key: 'loaded-items', item: undefined }))).subscribe(res => this.isLoading = false);
|
|
411
|
-
}
|
|
412
|
-
loadConfig() {
|
|
413
|
-
this.loadColumns();
|
|
414
|
-
this.privateActions.subscribe(action => {
|
|
415
|
-
this.onAction.emit(action);
|
|
416
|
-
});
|
|
417
|
-
}
|
|
418
|
-
loadColumns() {
|
|
419
|
-
this.displayColumns = this.config.columns.filter(c => c.is_show || c.is_show == undefined).map(c => c.key);
|
|
420
|
-
}
|
|
421
|
-
getDataItems() {
|
|
422
|
-
return this.dataItems;
|
|
423
|
-
}
|
|
424
|
-
refreshDataItems(newData) {
|
|
425
|
-
this.dataItems = newData;
|
|
426
|
-
}
|
|
427
|
-
detectChanges() {
|
|
428
|
-
this.changeDectetor.detectChanges();
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
TotsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
432
|
-
TotsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsTableComponent, selector: "tots-table", inputs: { config: "config", pageIndex: "pageIndex", pageSize: "pageSize", hasPagination: "hasPagination", messageNotFound: "messageNotFound" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"tots-table-container {{config.classes}}\">\n <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n <!-- TH-->\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n {{ column.title }}\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n </th>\n <!-- TD -->\n <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n <!-- Row shown when there is no matching data. -->\n <ng-container *ngIf=\"!isLoading\">\n <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n <!-- Paginator -->\n <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }] });
|
|
433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableComponent, decorators: [{
|
|
434
|
-
type: Component,
|
|
435
|
-
args: [{ selector: 'tots-table', template: "<div class=\"tots-table-container {{config.classes}}\">\n <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n <!-- TH-->\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n {{ column.title }}\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n </th>\n <!-- TD -->\n <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n <!-- Row shown when there is no matching data. -->\n <ng-container *ngIf=\"!isLoading\">\n <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n <!-- Paginator -->\n <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
|
|
436
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
437
|
-
type: Input
|
|
438
|
-
}], pageIndex: [{
|
|
439
|
-
type: Input
|
|
440
|
-
}], pageSize: [{
|
|
441
|
-
type: Input
|
|
442
|
-
}], hasPagination: [{
|
|
443
|
-
type: Input
|
|
444
|
-
}], messageNotFound: [{
|
|
445
|
-
type: Input
|
|
446
|
-
}], onAction: [{
|
|
447
|
-
type: Output
|
|
448
|
-
}] } });
|
|
449
|
-
|
|
450
|
-
class TotsTableApiComponent {
|
|
451
|
-
constructor() {
|
|
452
|
-
this.config = new TotsTableApiConfig();
|
|
453
|
-
this.hasPagination = true;
|
|
454
|
-
this.isPaginationStartIndexInZero = false;
|
|
455
|
-
this.onAction = new EventEmitter();
|
|
456
|
-
this.configTable = new TotsTableConfig();
|
|
457
|
-
}
|
|
458
|
-
ngOnInit() {
|
|
459
|
-
this.loadConfig();
|
|
460
|
-
}
|
|
461
|
-
onTableAction(action) {
|
|
462
|
-
if (action.key == 'page-change') {
|
|
463
|
-
this.config.query.per_page = action.item.pageSize;
|
|
464
|
-
if (this.isPaginationStartIndexInZero) {
|
|
465
|
-
this.config.query.page = action.item.pageIndex;
|
|
466
|
-
}
|
|
467
|
-
else {
|
|
468
|
-
this.config.query.page = action.item.pageIndex + 1;
|
|
469
|
-
}
|
|
470
|
-
this.configTable.obs = this.config.service.list(this.config.query);
|
|
471
|
-
}
|
|
472
|
-
this.onAction.emit(action);
|
|
473
|
-
}
|
|
474
|
-
loadConfig() {
|
|
475
|
-
this.configTable.id = this.config.id;
|
|
476
|
-
this.configTable.columns = this.config.columns;
|
|
477
|
-
this.configTable.obs = this.config.service.list(this.config.query);
|
|
478
|
-
this.configTable.classes = this.config.classes;
|
|
479
|
-
}
|
|
480
|
-
refreshQueryAndLoadItems() {
|
|
481
|
-
this.configTable.obs = this.config.service.list(this.config.query);
|
|
482
|
-
return this.loadItems();
|
|
483
|
-
}
|
|
484
|
-
loadItems() {
|
|
485
|
-
return this.tableComp.loadItems();
|
|
486
|
-
}
|
|
487
|
-
getDataItems() {
|
|
488
|
-
return this.tableComp.getDataItems();
|
|
489
|
-
}
|
|
490
|
-
setObs(obs) {
|
|
491
|
-
this.configTable.obs = obs;
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
TotsTableApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
495
|
-
TotsTableApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: TotsTableApiComponent, selector: "tots-table-api", inputs: { config: "config", hasPagination: "hasPagination", isPaginationStartIndexInZero: "isPaginationStartIndexInZero" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableComp", first: true, predicate: ["tableComp"], descendants: true }], ngImport: i0, template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n", styles: [""], dependencies: [{ kind: "component", type: TotsTableComponent, selector: "tots-table", inputs: ["config", "pageIndex", "pageSize", "hasPagination", "messageNotFound"], outputs: ["onAction"] }] });
|
|
496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableApiComponent, decorators: [{
|
|
497
|
-
type: Component,
|
|
498
|
-
args: [{ selector: 'tots-table-api', template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n" }]
|
|
499
|
-
}], propDecorators: { tableComp: [{
|
|
500
|
-
type: ViewChild,
|
|
501
|
-
args: ['tableComp']
|
|
502
|
-
}], config: [{
|
|
503
|
-
type: Input
|
|
504
|
-
}], hasPagination: [{
|
|
505
|
-
type: Input
|
|
506
|
-
}], isPaginationStartIndexInZero: [{
|
|
507
|
-
type: Input
|
|
508
|
-
}], onAction: [{
|
|
509
|
-
type: Output
|
|
510
|
-
}] } });
|
|
511
|
-
|
|
512
|
-
class TotsTableModule {
|
|
513
|
-
}
|
|
514
|
-
TotsTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
515
|
-
TotsTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, declarations: [TotsTableComponent,
|
|
516
|
-
BasePrintColumnComponent,
|
|
517
|
-
StringColumnComponent,
|
|
518
|
-
TotsTableApiComponent,
|
|
519
|
-
MoreMenuColumnComponent,
|
|
520
|
-
BooleanColumnComponent,
|
|
521
|
-
TwoStringColumnComponent,
|
|
522
|
-
IconButtonColumnComponent,
|
|
523
|
-
CheckboxColumnComponent,
|
|
524
|
-
OptionColumnComponent,
|
|
525
|
-
UserColumnComponent,
|
|
526
|
-
CurrencyColumnComponent,
|
|
527
|
-
StatusColumnComponent,
|
|
528
|
-
BalanceCurrencyColumnComponent,
|
|
529
|
-
StatusIconColumnComponent,
|
|
530
|
-
BalanceCurrencyIconColumnComponent], imports: [CommonModule,
|
|
531
|
-
// Angular Material
|
|
532
|
-
MatIconModule,
|
|
533
|
-
MatTableModule,
|
|
534
|
-
MatPaginatorModule,
|
|
535
|
-
MatButtonModule,
|
|
536
|
-
MatMenuModule,
|
|
537
|
-
MatCheckboxModule,
|
|
538
|
-
MatProgressSpinnerModule], exports: [TotsTableComponent,
|
|
539
|
-
TotsTableApiComponent] });
|
|
540
|
-
TotsTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, imports: [CommonModule,
|
|
541
|
-
// Angular Material
|
|
542
|
-
MatIconModule,
|
|
543
|
-
MatTableModule,
|
|
544
|
-
MatPaginatorModule,
|
|
545
|
-
MatButtonModule,
|
|
546
|
-
MatMenuModule,
|
|
547
|
-
MatCheckboxModule,
|
|
548
|
-
MatProgressSpinnerModule] });
|
|
549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: TotsTableModule, decorators: [{
|
|
550
|
-
type: NgModule,
|
|
551
|
-
args: [{
|
|
552
|
-
declarations: [
|
|
553
|
-
TotsTableComponent,
|
|
554
|
-
BasePrintColumnComponent,
|
|
555
|
-
StringColumnComponent,
|
|
556
|
-
TotsTableApiComponent,
|
|
557
|
-
MoreMenuColumnComponent,
|
|
558
|
-
BooleanColumnComponent,
|
|
559
|
-
TwoStringColumnComponent,
|
|
560
|
-
IconButtonColumnComponent,
|
|
561
|
-
CheckboxColumnComponent,
|
|
562
|
-
OptionColumnComponent,
|
|
563
|
-
UserColumnComponent,
|
|
564
|
-
CurrencyColumnComponent,
|
|
565
|
-
StatusColumnComponent,
|
|
566
|
-
BalanceCurrencyColumnComponent,
|
|
567
|
-
StatusIconColumnComponent,
|
|
568
|
-
BalanceCurrencyIconColumnComponent
|
|
569
|
-
],
|
|
570
|
-
imports: [
|
|
571
|
-
CommonModule,
|
|
572
|
-
// Angular Material
|
|
573
|
-
MatIconModule,
|
|
574
|
-
MatTableModule,
|
|
575
|
-
MatPaginatorModule,
|
|
576
|
-
MatButtonModule,
|
|
577
|
-
MatMenuModule,
|
|
578
|
-
MatCheckboxModule,
|
|
579
|
-
MatProgressSpinnerModule
|
|
580
|
-
],
|
|
581
|
-
exports: [
|
|
582
|
-
TotsTableComponent,
|
|
583
|
-
TotsTableApiComponent
|
|
584
|
-
]
|
|
585
|
-
}]
|
|
586
|
-
}] });
|
|
587
|
-
|
|
588
|
-
/*
|
|
589
|
-
* Public API Surface of table
|
|
590
|
-
*/
|
|
591
|
-
|
|
592
|
-
/**
|
|
593
|
-
* Generated bundle index. Do not edit.
|
|
594
|
-
*/
|
|
595
|
-
|
|
596
|
-
export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TotsActionTable, TotsBaseColumnComponent, TotsColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableHelper, TotsTableModule, TwoStringColumnComponent, UserColumnComponent };
|
|
597
|
-
//# sourceMappingURL=tots-table.mjs.map
|