@sd-angular/core 1.3.239 → 1.3.240
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/bundles/sd-angular-core-export.umd.js +95 -88
- package/bundles/sd-angular-core-export.umd.js.map +1 -1
- package/bundles/sd-angular-core-export.umd.min.js +1 -1
- package/bundles/sd-angular-core-export.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.js +513 -89
- package/bundles/sd-angular-core-table.umd.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.min.js +2 -2
- package/bundles/sd-angular-core-table.umd.min.js.map +1 -1
- package/esm2015/export/src/lib/export.service.js +93 -90
- package/esm2015/table/sd-angular-core-table.js +19 -18
- package/esm2015/table/src/lib/components/popup-export/popup-export.component.js +289 -0
- package/esm2015/table/src/lib/models/table-option-export.model.js +1 -1
- package/esm2015/table/src/lib/table.component.js +32 -16
- package/esm2015/table/src/lib/table.module.js +5 -1
- package/export/src/lib/export.service.d.ts +4 -0
- package/fesm2015/sd-angular-core-export.js +92 -89
- package/fesm2015/sd-angular-core-export.js.map +1 -1
- package/fesm2015/sd-angular-core-table.js +318 -17
- package/fesm2015/sd-angular-core-table.js.map +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.3.239.tgz → sd-angular-core-1.3.240.tgz} +0 -0
- package/table/sd-angular-core-table.d.ts +18 -17
- package/table/sd-angular-core-table.metadata.json +1 -1
- package/table/src/lib/components/popup-export/popup-export.component.d.ts +56 -0
- package/table/src/lib/models/table-option-export.model.d.ts +7 -6
- package/table/src/lib/table.component.d.ts +8 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SdScrollDirective, SdCommonModule } from '@sd-angular/core/common';
|
|
2
|
-
import { Directive, TemplateRef, Input, InjectionToken, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, Inject, Optional, EventEmitter, HostListener, QueryList, ContentChild, ContentChildren, Pipe,
|
|
2
|
+
import { Directive, TemplateRef, Input, InjectionToken, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, Inject, Optional, EventEmitter, HostListener, Output, QueryList, ContentChild, ContentChildren, Pipe, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import { __classPrivateFieldGet, __classPrivateFieldSet, __awaiter } from 'tslib';
|
|
@@ -20,6 +20,8 @@ import * as hash from 'object-hash';
|
|
|
20
20
|
import hash__default from 'object-hash';
|
|
21
21
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
22
22
|
import { SdLoadingService } from '@sd-angular/core/loading';
|
|
23
|
+
import { SdTranslateService } from '@sd-angular/core/translate';
|
|
24
|
+
import { FormGroup } from '@angular/forms';
|
|
23
25
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
24
26
|
import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
|
|
25
27
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -31,6 +33,7 @@ import { SdFormModule } from '@sd-angular/core/form';
|
|
|
31
33
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
32
34
|
import { MatListModule } from '@angular/material/list';
|
|
33
35
|
import { SdGroupModule } from '@sd-angular/core/group';
|
|
36
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
34
37
|
|
|
35
38
|
class SdTabelCellDefDirective {
|
|
36
39
|
constructor(templateRef) {
|
|
@@ -729,7 +732,288 @@ SdPopupConfiguration.propDecorators = {
|
|
|
729
732
|
mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
|
|
730
733
|
};
|
|
731
734
|
|
|
732
|
-
var
|
|
735
|
+
var _getExportableColumns, _getExportColumns, _initTemplate;
|
|
736
|
+
class SdPopupExport {
|
|
737
|
+
constructor(ref, loadingService, exportService, notifyService, translateService) {
|
|
738
|
+
this.ref = ref;
|
|
739
|
+
this.loadingService = loadingService;
|
|
740
|
+
this.exportService = exportService;
|
|
741
|
+
this.notifyService = notifyService;
|
|
742
|
+
this.translateService = translateService;
|
|
743
|
+
this.columns = [];
|
|
744
|
+
this.enableCreating = false;
|
|
745
|
+
this.selected = {};
|
|
746
|
+
this.files = [];
|
|
747
|
+
this.export = new EventEmitter();
|
|
748
|
+
this.form = new FormGroup({});
|
|
749
|
+
_getExportableColumns.set(this, () => {
|
|
750
|
+
return [...this.tableColumns, ...this.additionalColumns];
|
|
751
|
+
});
|
|
752
|
+
this.open = () => __awaiter(this, void 0, void 0, function* () {
|
|
753
|
+
if (!this.key) {
|
|
754
|
+
this.exportDefault();
|
|
755
|
+
return;
|
|
756
|
+
}
|
|
757
|
+
this.loadFiles(null);
|
|
758
|
+
this.selected = {};
|
|
759
|
+
this.modal.open();
|
|
760
|
+
this.ref.detectChanges();
|
|
761
|
+
});
|
|
762
|
+
_getExportColumns.set(this, () => {
|
|
763
|
+
if (this.configuration) {
|
|
764
|
+
const columns = [...this.tableColumns];
|
|
765
|
+
const { firstColumns, secondColumns } = this.configuration;
|
|
766
|
+
const displayColumns = [...firstColumns, ...secondColumns].reduce((first, next) => {
|
|
767
|
+
const column = this.tableOption.columns.find(e => e.field === next.field);
|
|
768
|
+
if (!column) {
|
|
769
|
+
return first;
|
|
770
|
+
}
|
|
771
|
+
if (column.type !== 'children') {
|
|
772
|
+
return [...first, column];
|
|
773
|
+
}
|
|
774
|
+
return [...first, ...column.children];
|
|
775
|
+
}, []);
|
|
776
|
+
const results = displayColumns
|
|
777
|
+
.map(e => (Object.assign(Object.assign({}, e), { data: columns.find(e1 => e1.field === e.field) })))
|
|
778
|
+
.filter(e => !!e.data)
|
|
779
|
+
.map(e => e.data);
|
|
780
|
+
return [...results, ...this.additionalColumns];
|
|
781
|
+
}
|
|
782
|
+
else {
|
|
783
|
+
return this.columns;
|
|
784
|
+
}
|
|
785
|
+
});
|
|
786
|
+
this.exportDefault = () => {
|
|
787
|
+
this.export.emit({
|
|
788
|
+
file: null,
|
|
789
|
+
columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
|
|
790
|
+
isCSV: false,
|
|
791
|
+
});
|
|
792
|
+
};
|
|
793
|
+
this.exportCSV = () => {
|
|
794
|
+
this.export.emit({
|
|
795
|
+
file: null,
|
|
796
|
+
columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
|
|
797
|
+
isCSV: true,
|
|
798
|
+
});
|
|
799
|
+
};
|
|
800
|
+
this.loadFiles = (group = null) => __awaiter(this, void 0, void 0, function* () {
|
|
801
|
+
this.files = yield this.exportService.filesInFolder({
|
|
802
|
+
key: this.key,
|
|
803
|
+
group,
|
|
804
|
+
});
|
|
805
|
+
this.ref.markForCheck();
|
|
806
|
+
});
|
|
807
|
+
_initTemplate.set(this, (fileName) => __awaiter(this, void 0, void 0, function* () {
|
|
808
|
+
var _a, _b, _c, _d;
|
|
809
|
+
const sheets = [];
|
|
810
|
+
if (Array.isArray((_b = (_a = this.tableOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.sheets)) {
|
|
811
|
+
for (const sheet of this.tableOption.export.sheets) {
|
|
812
|
+
if (sheet.name && sheet.items && sheet.fields) {
|
|
813
|
+
if (Array.isArray(sheet.items)) {
|
|
814
|
+
sheets.push({
|
|
815
|
+
name: sheet.name,
|
|
816
|
+
items: sheet.items,
|
|
817
|
+
fields: sheet.fields,
|
|
818
|
+
});
|
|
819
|
+
}
|
|
820
|
+
else {
|
|
821
|
+
sheets.push({
|
|
822
|
+
name: sheet.name,
|
|
823
|
+
items: yield sheet.items(),
|
|
824
|
+
fields: sheet.fields,
|
|
825
|
+
});
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
return yield this.exportService.generateTemplate({
|
|
831
|
+
fileName: fileName || ((_d = (_c = this.tableOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.fileName),
|
|
832
|
+
columns: this.columns,
|
|
833
|
+
sheets,
|
|
834
|
+
});
|
|
835
|
+
}));
|
|
836
|
+
this.generateTemplate = () => __awaiter(this, void 0, void 0, function* () {
|
|
837
|
+
this.loadingService.start();
|
|
838
|
+
yield __classPrivateFieldGet(this, _initTemplate).call(this).finally(this.loadingService.stop);
|
|
839
|
+
});
|
|
840
|
+
this.generateAndUploadTemplate = (fileName) => __awaiter(this, void 0, void 0, function* () {
|
|
841
|
+
var _e, _f, _g, _h, _j, _k;
|
|
842
|
+
const sheets = [];
|
|
843
|
+
if (Array.isArray((_f = (_e = this.tableOption) === null || _e === void 0 ? void 0 : _e.export) === null || _f === void 0 ? void 0 : _f.sheets)) {
|
|
844
|
+
for (const sheet of (_h = (_g = this.tableOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.sheets) {
|
|
845
|
+
if (sheet.name && sheet.items && sheet.fields) {
|
|
846
|
+
if (Array.isArray(sheet.items)) {
|
|
847
|
+
sheets.push({
|
|
848
|
+
name: sheet.name,
|
|
849
|
+
items: sheet.items,
|
|
850
|
+
fields: sheet.fields,
|
|
851
|
+
});
|
|
852
|
+
}
|
|
853
|
+
else {
|
|
854
|
+
sheets.push({
|
|
855
|
+
name: sheet.name,
|
|
856
|
+
items: yield sheet.items(),
|
|
857
|
+
fields: sheet.fields,
|
|
858
|
+
});
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
return yield this.exportService.generateUploadTemplate({
|
|
864
|
+
key: this.key,
|
|
865
|
+
template: {
|
|
866
|
+
fileName: fileName || ((_k = (_j = this.tableOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.fileName),
|
|
867
|
+
columns: this.columns.filter(e => this.selected[e.field]),
|
|
868
|
+
sheets,
|
|
869
|
+
},
|
|
870
|
+
});
|
|
871
|
+
});
|
|
872
|
+
this.onExport = (file) => {
|
|
873
|
+
this.export.emit({
|
|
874
|
+
file,
|
|
875
|
+
columns: this.columns,
|
|
876
|
+
});
|
|
877
|
+
this.ref.detectChanges();
|
|
878
|
+
};
|
|
879
|
+
this.uploadTemplate = () => __awaiter(this, void 0, void 0, function* () {
|
|
880
|
+
const file = yield this.exportService.uploadTemplate({
|
|
881
|
+
key: this.key,
|
|
882
|
+
});
|
|
883
|
+
if (file) {
|
|
884
|
+
this.files = [...this.files, file];
|
|
885
|
+
this.ref.detectChanges();
|
|
886
|
+
}
|
|
887
|
+
});
|
|
888
|
+
this.removeFile = (file) => {
|
|
889
|
+
this.notifyService.confirm(this.translateService.translate('Remove template')).then(() => {
|
|
890
|
+
this.exportService.removeFile({
|
|
891
|
+
key: this.key,
|
|
892
|
+
fileName: file.fileName,
|
|
893
|
+
});
|
|
894
|
+
const idx = this.files.indexOf(file);
|
|
895
|
+
this.files.splice(idx, 1);
|
|
896
|
+
this.files = [...this.files];
|
|
897
|
+
this.ref.detectChanges();
|
|
898
|
+
});
|
|
899
|
+
};
|
|
900
|
+
this.createTemplate = () => __awaiter(this, void 0, void 0, function* () {
|
|
901
|
+
if (this.form.invalid) {
|
|
902
|
+
this.form.markAllAsTouched();
|
|
903
|
+
return;
|
|
904
|
+
}
|
|
905
|
+
if (!this.columns.some(e => this.selected[e.field])) {
|
|
906
|
+
this.notifyService.notify.warning(`Vui lòng chọn cột dữ liệu để xuất`);
|
|
907
|
+
return;
|
|
908
|
+
}
|
|
909
|
+
this.loadingService.start();
|
|
910
|
+
const fileName = this.templateName + '.xlsx';
|
|
911
|
+
try {
|
|
912
|
+
const result = yield this.generateAndUploadTemplate(fileName);
|
|
913
|
+
if (result === null || result === void 0 ? void 0 : result.filePath) {
|
|
914
|
+
const file = {
|
|
915
|
+
filePath: result.filePath,
|
|
916
|
+
fileName: result.fileName,
|
|
917
|
+
};
|
|
918
|
+
this.onExport(file);
|
|
919
|
+
this.templateName = null;
|
|
920
|
+
this.enableCreating = false;
|
|
921
|
+
this.files = [...this.files, file];
|
|
922
|
+
this.ref.detectChanges();
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
finally {
|
|
926
|
+
this.loadingService.stop();
|
|
927
|
+
}
|
|
928
|
+
});
|
|
929
|
+
this.templateNameValidator = (val) => {
|
|
930
|
+
const { translate } = this.translateService;
|
|
931
|
+
const regex = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
|
|
932
|
+
if (!val) {
|
|
933
|
+
return translate('Please enter your template name');
|
|
934
|
+
}
|
|
935
|
+
if (val.length > 50) {
|
|
936
|
+
return translate('Template name is too long');
|
|
937
|
+
}
|
|
938
|
+
if (!regex.test(val)) {
|
|
939
|
+
return translate('Template name only contains letters, numbers and spaces');
|
|
940
|
+
}
|
|
941
|
+
return null;
|
|
942
|
+
};
|
|
943
|
+
}
|
|
944
|
+
set _tableOption(option) {
|
|
945
|
+
this.tableOption = option;
|
|
946
|
+
this.columns = __classPrivateFieldGet(this, _getExportableColumns).call(this);
|
|
947
|
+
}
|
|
948
|
+
get key() {
|
|
949
|
+
var _a, _b, _c, _d;
|
|
950
|
+
const prefix = '93889e78-f971-4a1d-8c73-fe2321af9233';
|
|
951
|
+
if (!((_b = (_a = this.tableOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.key)) {
|
|
952
|
+
return null;
|
|
953
|
+
}
|
|
954
|
+
return hash__default({
|
|
955
|
+
prefix,
|
|
956
|
+
key: (_d = (_c = this.tableOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.key,
|
|
957
|
+
});
|
|
958
|
+
}
|
|
959
|
+
get tableColumns() {
|
|
960
|
+
const columns = [];
|
|
961
|
+
this.tableOption.columns
|
|
962
|
+
.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
|
|
963
|
+
.forEach(column => {
|
|
964
|
+
var _a;
|
|
965
|
+
if (column.type === 'children') {
|
|
966
|
+
(_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
|
|
967
|
+
columns.push(childColumn);
|
|
968
|
+
});
|
|
969
|
+
return;
|
|
970
|
+
}
|
|
971
|
+
columns.push(column);
|
|
972
|
+
});
|
|
973
|
+
return columns.map(e => ({
|
|
974
|
+
field: e.field,
|
|
975
|
+
title: e.title,
|
|
976
|
+
description: e.description,
|
|
977
|
+
width: e.width,
|
|
978
|
+
}));
|
|
979
|
+
}
|
|
980
|
+
get additionalColumns() {
|
|
981
|
+
var _a, _b;
|
|
982
|
+
return (((_b = (_a = this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []).map(e => ({
|
|
983
|
+
field: e.field,
|
|
984
|
+
title: e.title,
|
|
985
|
+
description: e.description,
|
|
986
|
+
width: e.width,
|
|
987
|
+
}));
|
|
988
|
+
}
|
|
989
|
+
ngOnInit() { }
|
|
990
|
+
ngAfterViewInit() { }
|
|
991
|
+
}
|
|
992
|
+
_getExportableColumns = new WeakMap(), _getExportColumns = new WeakMap(), _initTemplate = new WeakMap();
|
|
993
|
+
SdPopupExport.decorators = [
|
|
994
|
+
{ type: Component, args: [{
|
|
995
|
+
selector: 'sd-popup-export',
|
|
996
|
+
template: "<sd-modal width=\"907px\" [title]=\"'Exported template' | sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <div class=\"row\">\r\n <ng-template #noSelection>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </div>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"row\">\r\n <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n <div class=\"c-empty\">\r\n <img class=\"c-empty-image\" />\r\n <div class=\"T14R\">{{ 'There are no exported templates' | sdTranslate }}</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"files?.length\">\r\n <div class=\"col-12\">\r\n <div class=\"c-table\" style=\"max-height: 50vh\">\r\n <table mat-table [dataSource]=\"files\">\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n {{ idx + 1 }}\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"fileName\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'File name' | sdTranslate }}</th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n {{ item.fileName }}\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n <div class=\"d-flex\">\r\n <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n <sd-button\r\n class=\"mr-5\"\r\n [title]=\"'New template' | sdTranslate\"\r\n (action)=\"enableCreating = true\"\r\n color=\"info\"\r\n [disabled]=\"enableCreating\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"tableOption?.export?.enableUpload\"\r\n [title]=\"'Upload template' | sdTranslate\"\r\n (action)=\"uploadTemplate()\"\r\n type=\"outline\">\r\n </sd-button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n <div class=\"col-12 mt-20\">\r\n <div class=\"T14R\">{{ 'Select columns for creating template' | sdTranslate }}:</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n <ng-container *ngFor=\"let column of columns\">\r\n <mat-chip [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n {{ column.title }}\r\n </mat-chip>\r\n </ng-container>\r\n </mat-chip-list>\r\n </div>\r\n <div class=\"col-12 row\">\r\n <div class=\"col-10\">\r\n <sd-input\r\n [form]=\"form\"\r\n [label]=\"'Template name' | sdTranslate\"\r\n [(model)]=\"templateName\"\r\n [validator]=\"templateNameValidator\"></sd-input>\r\n </div>\r\n <div class=\"col-2 mt-8\">\r\n <sd-button width=\"100%\" [title]=\"'Save' | sdTranslate\" color=\"info\" (action)=\"createTemplate()\"> </sd-button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </sd-modal-body>\r\n</sd-modal>\r\n",
|
|
997
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
998
|
+
styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{align-items:center;background:#f6f6f6;border-radius:4px;display:flex;flex-direction:column;height:116px;justify-content:center;position:static}.c-empty .c-empty-image{content:url(\"data:image/png;base64,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\")}.c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}"]
|
|
999
|
+
},] }
|
|
1000
|
+
];
|
|
1001
|
+
SdPopupExport.ctorParameters = () => [
|
|
1002
|
+
{ type: ChangeDetectorRef },
|
|
1003
|
+
{ type: SdLoadingService },
|
|
1004
|
+
{ type: SdExportService },
|
|
1005
|
+
{ type: SdNotifyService },
|
|
1006
|
+
{ type: SdTranslateService }
|
|
1007
|
+
];
|
|
1008
|
+
SdPopupExport.propDecorators = {
|
|
1009
|
+
modal: [{ type: ViewChild, args: ['modal',] }],
|
|
1010
|
+
listGroups: [{ type: ViewChild, args: ['listGroups',] }],
|
|
1011
|
+
export: [{ type: Output }],
|
|
1012
|
+
_tableOption: [{ type: Input, args: ['tableOption',] }],
|
|
1013
|
+
configuration: [{ type: Input }]
|
|
1014
|
+
};
|
|
1015
|
+
|
|
1016
|
+
var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _cacheObjValues, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _getExportColumns$1, _updateSelectedItems, _loadValues, _format;
|
|
733
1017
|
class SdTable {
|
|
734
1018
|
constructor(ref, loadingService, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
|
|
735
1019
|
this.ref = ref;
|
|
@@ -1144,10 +1428,11 @@ class SdTable {
|
|
|
1144
1428
|
var _a, _b;
|
|
1145
1429
|
return ((_b = (_a = this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
|
|
1146
1430
|
});
|
|
1147
|
-
|
|
1431
|
+
this.onExport = (args) => __awaiter(this, void 0, void 0, function* () {
|
|
1148
1432
|
var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
1433
|
+
const { file, isCSV } = Object.assign({}, args);
|
|
1149
1434
|
try {
|
|
1150
|
-
let columns = __classPrivateFieldGet(this, _getExportColumns).call(this);
|
|
1435
|
+
let columns = __classPrivateFieldGet(this, _getExportColumns$1).call(this, args === null || args === void 0 ? void 0 : args.columns);
|
|
1151
1436
|
const pageSize = ((_k = (_j = this.tableOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
|
|
1152
1437
|
const batch = ((_m = (_l = this.tableOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.batch) || 1;
|
|
1153
1438
|
let total = this.total;
|
|
@@ -1284,6 +1569,15 @@ class SdTable {
|
|
|
1284
1569
|
if (promises.length > 0) {
|
|
1285
1570
|
yield handleData();
|
|
1286
1571
|
}
|
|
1572
|
+
if (file === null || file === void 0 ? void 0 : file.filePath) {
|
|
1573
|
+
yield this.exportService.exportByTemplate({
|
|
1574
|
+
filePath: file.filePath,
|
|
1575
|
+
fileName: file.fileName,
|
|
1576
|
+
columns,
|
|
1577
|
+
items,
|
|
1578
|
+
});
|
|
1579
|
+
return;
|
|
1580
|
+
}
|
|
1287
1581
|
if (isCSV) {
|
|
1288
1582
|
yield this.exportService.exportCSV({
|
|
1289
1583
|
columns,
|
|
@@ -1326,24 +1620,26 @@ class SdTable {
|
|
|
1326
1620
|
this.exportTitle = `Export`;
|
|
1327
1621
|
this.ref.detectChanges();
|
|
1328
1622
|
}
|
|
1329
|
-
})
|
|
1330
|
-
_getExportColumns.set(this, () => {
|
|
1623
|
+
});
|
|
1624
|
+
_getExportColumns$1.set(this, (columns) => {
|
|
1331
1625
|
var _a, _b;
|
|
1332
|
-
let
|
|
1626
|
+
let tableColumns = [];
|
|
1627
|
+
// Lấy column từ option
|
|
1333
1628
|
this.tableOption.columns
|
|
1334
1629
|
.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
|
|
1335
1630
|
.forEach(column => {
|
|
1336
1631
|
var _a;
|
|
1337
1632
|
if (column.type === 'children') {
|
|
1338
1633
|
(_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
|
|
1339
|
-
|
|
1634
|
+
tableColumns.push(childColumn);
|
|
1340
1635
|
});
|
|
1341
1636
|
return;
|
|
1342
1637
|
}
|
|
1343
|
-
|
|
1638
|
+
tableColumns.push(column);
|
|
1344
1639
|
});
|
|
1640
|
+
// Lấy columns từ configuration
|
|
1345
1641
|
if (this.configuration) {
|
|
1346
|
-
const columns = [...
|
|
1642
|
+
const columns = [...tableColumns];
|
|
1347
1643
|
const { firstColumns, secondColumns } = this.configuration;
|
|
1348
1644
|
const displayColumns = [...firstColumns, ...secondColumns].reduce((first, next) => {
|
|
1349
1645
|
const column = this.tableOption.columns.find(e => e.field === next.field);
|
|
@@ -1356,18 +1652,20 @@ class SdTable {
|
|
|
1356
1652
|
const children = column.children;
|
|
1357
1653
|
return [...first, ...children];
|
|
1358
1654
|
}, []);
|
|
1359
|
-
|
|
1655
|
+
tableColumns = displayColumns
|
|
1360
1656
|
.map(e => (Object.assign(Object.assign({}, e), { data: columns.find(e1 => e1.field === e.field) })))
|
|
1361
1657
|
.filter(e => !!e.data)
|
|
1362
1658
|
.map(e => e.data);
|
|
1363
1659
|
}
|
|
1364
|
-
|
|
1660
|
+
// Chỉ lấy các columns được thiết lập
|
|
1661
|
+
const columnFields = columns.map(e => e.field);
|
|
1662
|
+
return [...tableColumns, ...(((_b = (_a = this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [])].filter(column => !(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length) || columnFields.includes(column.field));
|
|
1365
1663
|
});
|
|
1366
1664
|
this.exportExcel = () => {
|
|
1367
|
-
|
|
1665
|
+
this.onExport();
|
|
1368
1666
|
};
|
|
1369
1667
|
this.exportCSV = () => {
|
|
1370
|
-
|
|
1668
|
+
this.onExport({ isCSV: true });
|
|
1371
1669
|
};
|
|
1372
1670
|
this.onFilterChange = () => {
|
|
1373
1671
|
var _a, _b;
|
|
@@ -1740,11 +2038,11 @@ class SdTable {
|
|
|
1740
2038
|
return this.selectedTableItems.map(item => item.data);
|
|
1741
2039
|
}
|
|
1742
2040
|
}
|
|
1743
|
-
_gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _cacheObjValues = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(),
|
|
2041
|
+
_gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _cacheObjValues = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _getExportColumns$1 = new WeakMap(), _updateSelectedItems = new WeakMap(), _loadValues = new WeakMap(), _format = new WeakMap();
|
|
1744
2042
|
SdTable.decorators = [
|
|
1745
2043
|
{ type: Component, args: [{
|
|
1746
2044
|
selector: 'sd-table',
|
|
1747
|
-
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n [trackBy]=\"trackBy\"\r\n matSort\r\n [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <ng-container *sdMobileTablet>\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"T\u1EA3i l\u1EA1i\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else exportable\">\r\n <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #exportable>\r\n <sd-button class=\"mr-8\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n </div>\r\n <ng-container *sdDesktop>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </ng-container>\r\n <ng-container *sdMobileTablet>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n hidePageSize=\"true\"></mat-paginator>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
2045
|
+
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n [trackBy]=\"trackBy\"\r\n matSort\r\n [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <ng-container *sdMobileTablet>\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"T\u1EA3i l\u1EA1i\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else exportable\">\r\n <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #exportable>\r\n <sd-button class=\"mr-8\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n <button *ngIf=\"tableOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span>Thi\u1EBFt l\u1EADp</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n </div>\r\n <ng-container *sdDesktop>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </ng-container>\r\n <ng-container *sdMobileTablet>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n hidePageSize=\"true\"></mat-paginator>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <sd-popup-export\r\n *ngIf=\"tableOption.export?.visible\"\r\n [configuration]=\"configuration\"\r\n [tableOption]=\"tableOption\"\r\n (export)=\"onExport($event)\"\r\n #sdPopupExport></sd-popup-export>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
1748
2046
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1749
2047
|
animations: [
|
|
1750
2048
|
trigger('detailExpand', [
|
|
@@ -1768,6 +2066,7 @@ SdTable.ctorParameters = () => [
|
|
|
1768
2066
|
SdTable.propDecorators = {
|
|
1769
2067
|
table: [{ type: ViewChild, args: [MatTable,] }],
|
|
1770
2068
|
popupConfiguration: [{ type: ViewChild, args: [SdPopupConfiguration,] }],
|
|
2069
|
+
sdPopupExport: [{ type: ViewChild, args: [SdPopupExport,] }],
|
|
1771
2070
|
sdScroll: [{ type: ViewChild, args: [SdScrollDirective,] }],
|
|
1772
2071
|
quickAction: [{ type: ViewChild, args: [SdQuickAction,] }],
|
|
1773
2072
|
tableFilter: [{ type: ViewChild, args: [SdTableFilter,] }],
|
|
@@ -2550,6 +2849,7 @@ SdTableModule.decorators = [
|
|
|
2550
2849
|
MatSlideToggleModule,
|
|
2551
2850
|
MatCheckboxModule,
|
|
2552
2851
|
MatListModule,
|
|
2852
|
+
MatChipsModule,
|
|
2553
2853
|
CdkTableModule,
|
|
2554
2854
|
DragDropModule,
|
|
2555
2855
|
SdFormModule,
|
|
@@ -2571,6 +2871,7 @@ SdTableModule.decorators = [
|
|
|
2571
2871
|
SdPopupConfiguration,
|
|
2572
2872
|
SdTableFilter,
|
|
2573
2873
|
SdPopupFilter,
|
|
2874
|
+
SdPopupExport,
|
|
2574
2875
|
// Pipes
|
|
2575
2876
|
SdCommandFilterPipe,
|
|
2576
2877
|
SdCommandDisablePipe,
|
|
@@ -2613,5 +2914,5 @@ class SdTableQuickFilter {
|
|
|
2613
2914
|
* Generated bundle index. Do not edit.
|
|
2614
2915
|
*/
|
|
2615
2916
|
|
|
2616
|
-
export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTabelCellDefDirective, SdTable, SdTableFilterDefDirective, SdTableModule, SdTableQuickFilter, TABLE_CONFIG, SdTableQuickAction as ɵa, SdDesktopCell as ɵb, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdPopupConfiguration as ɵf, SdTableConfigurationService as ɵg, TABLE_CONFIG as ɵi,
|
|
2917
|
+
export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTabelCellDefDirective, SdTable, SdTableFilterDefDirective, SdTableModule, SdTableQuickFilter, TABLE_CONFIG, SdTableQuickAction as ɵa, SdDesktopCell as ɵb, SdGroupPipe as ɵba, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdPopupConfiguration as ɵf, SdTableConfigurationService as ɵg, TABLE_CONFIG as ɵi, SdPopupExport as ɵj, SdTableFilter as ɵk, SdPopupFilter as ɵl, SdMaterialSubInformationDefDirective as ɵm, SdMaterialFooterDefDirective as ɵn, SdTableFilterService as ɵo, SdCommandFilterPipe as ɵp, SdCommandDisablePipe as ɵq, SdCommandIconPipe as ɵr, SdCommandTitlePipe as ɵs, SdColumnTooltipPipe as ɵt, SdFilterColumnPipe as ɵu, SdFilterExternalPipe as ɵv, SdSelectionActionFilterPipe as ɵw, SdSelectionVisiblePipe as ɵx, SdSelectionDisablePipe as ɵy, SdSelectionVisibleSelectAllPipe as ɵz };
|
|
2617
2918
|
//# sourceMappingURL=sd-angular-core-table.js.map
|