@sd-angular/core 1.3.183 → 1.3.185

package/fesm2015/sd-angular-core-table.js

@@ -18,6 +18,7 @@ import { SdQuickAction } from '@sd-angular/core/quick-action';
 import * as hash from 'object-hash';
 import hash__default from 'object-hash';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { SdLoadingService } from '@sd-angular/core/loading';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
@@ -225,7 +226,7 @@ SdTableFilter.propDecorators = {
     _filterRegister: [{ type: Input, args: ['filterRegister',] }]
 };
 
-class SdMaterialFilterDefDirective {
+class SdTableFilterDefDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
@@ -233,15 +234,15 @@ class SdMaterialFilterDefDirective {
         this.defaultShowing = (val === '') || val;
     }
 }
-SdMaterialFilterDefDirective.decorators = [
+SdTableFilterDefDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[sdTableFilterDef]'
             },] }
 ];
-SdMaterialFilterDefDirective.ctorParameters = () => [
+SdTableFilterDefDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-SdMaterialFilterDefDirective.propDecorators = {
+SdTableFilterDefDirective.propDecorators = {
     sdTableFilterDef: [{ type: Input }],
     showing: [{ type: Input, args: ['defaultShowing',] }]
 };
@@ -635,17 +636,17 @@ SdTableFilterService.ctorParameters = () => [
 
 var _setting;
 class SdPopupConfiguration {
-    constructor(ref, notifyService, gridConfigurationService) {
+    constructor(ref, notifyService, tableConfigurationService) {
         this.ref = ref;
         this.notifyService = notifyService;
-        this.gridConfigurationService = gridConfigurationService;
+        this.tableConfigurationService = tableConfigurationService;
         this.changes = new EventEmitter();
         _setting.set(this, void 0);
         this.isCreatingColumn = false;
         this.selected = {};
         this.disabledDrag = true;
         this.open = () => __awaiter(this, void 0, void 0, function* () {
-            __classPrivateFieldSet(this, _setting, this.gridConfigurationService.init(this.tableOption));
+            __classPrivateFieldSet(this, _setting, this.tableConfigurationService.init(this.tableOption));
             this.configuration = __classPrivateFieldGet(this, _setting).get();
             this.modal.open();
         });
@@ -681,7 +682,7 @@ _setting = new WeakMap();
 SdPopupConfiguration.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-configuration',
-                template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\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              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\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              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                 styles: [".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}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
             },] }
 ];
@@ -699,8 +700,9 @@ SdPopupConfiguration.propDecorators = {
 
 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, _onExport, _getExportColumns, _updateSelectedItems, _loadValues, _format;
 class SdTable {
-    constructor(ref, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
+    constructor(ref, loadingService, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
         this.ref = ref;
+        this.loadingService = loadingService;
         this.tableConfiguration = tableConfiguration;
         this.tableConfigurationService = tableConfigurationService;
         this.exportService = exportService;
@@ -970,6 +972,7 @@ class SdTable {
         });
         _load.set(this, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
             this.isLoading = true;
+            this.ref.detectChanges();
             if (this.tableOption.type === 'server') {
                 const { items } = this.tableOption;
                 const data = yield items(filterReq).catch(err => {
@@ -980,9 +983,11 @@ class SdTable {
                         total: 0,
                     };
                 });
-                this.isLoading = false;
                 return {
-                    items: yield __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.tableOption.columns),
+                    items: yield __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.tableOption.columns).finally(() => {
+                        this.isLoading = false;
+                        this.ref.detectChanges();
+                    }),
                     total: (data === null || data === void 0 ? void 0 : data.total) || 0,
                 };
             }
@@ -1007,6 +1012,7 @@ class SdTable {
                 __classPrivateFieldSet(this, _localItems, yield __classPrivateFieldGet(this, _format).call(this, data, this.tableOption.columns));
             }
             this.isLoading = false;
+            this.ref.detectChanges();
             return __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq);
         }));
         _render.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
@@ -1565,12 +1571,19 @@ class SdTable {
             __classPrivateFieldSet(this, _loadCompleted, false);
             const setting = this.tableConfigurationService.init(this.tableOption);
             if (setting) {
-                __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(startWith(setting.subject.getValue())).subscribe(configuration => {
-                    const configurationResult = this.tableConfigurationService.loadConfigurationResult(this.tableOption, configuration);
+                __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(startWith(setting.subject.getValue())).subscribe(() => {
+                    const configurationResult = this.tableConfigurationService.loadConfigurationResult(this.tableOption, setting.get());
                     const displayColumns = configurationResult.displayedColumns || [];
-                    __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(column => displayColumns.includes(column.field))).then(() => {
+                    this.loadingService.start();
+                    this.ref.detectChanges();
+                    __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(column => displayColumns.includes(column.field)))
+                        .then(() => {
                         this.configuration = configurationResult;
                         __classPrivateFieldGet(this, _optionChanges).next(this.tableOption);
+                    })
+                        .finally(() => {
+                        this.loadingService.stop();
+                        this.ref.detectChanges();
                     });
                 }));
             }
@@ -1578,9 +1591,16 @@ class SdTable {
                 const configuration = this.tableConfigurationService.loadConfiguration(this.tableOption);
                 const configurationResult = this.tableConfigurationService.loadConfigurationResult(this.tableOption, configuration);
                 const displayColumns = configurationResult.displayedColumns || [];
-                __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(column => displayColumns.includes(column.field))).then(() => {
+                this.loadingService.start();
+                this.ref.detectChanges();
+                __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(column => displayColumns.includes(column.field)))
+                    .then(() => {
                     this.configuration = configurationResult;
                     __classPrivateFieldGet(this, _optionChanges).next(this.tableOption);
+                })
+                    .finally(() => {
+                    this.loadingService.stop();
+                    this.ref.detectChanges();
                 });
             }
         }
@@ -1666,6 +1686,7 @@ SdTable.decorators = [
 ];
 SdTable.ctorParameters = () => [
     { type: ChangeDetectorRef },
+    { type: SdLoadingService },
     { type: undefined, decorators: [{ type: Inject, args: [TABLE_CONFIG,] }, { type: Optional }] },
     { type: SdTableConfigurationService },
     { type: SdExportService },
@@ -1683,7 +1704,7 @@ SdTable.propDecorators = {
     sdSubInformation: [{ type: ContentChild, args: [SdMaterialSubInformationDefDirective,] }],
     sdCellDefs: [{ type: ContentChildren, args: [SdTabelCellDefDirective,] }],
     sdFooterDefs: [{ type: ContentChildren, args: [SdMaterialFooterDefDirective,] }],
-    sdFilterDefs: [{ type: ContentChildren, args: [SdMaterialFilterDefDirective,] }]
+    sdFilterDefs: [{ type: ContentChildren, args: [SdTableFilterDefDirective,] }]
 };
 
 class SdCommandFilterPipe {
@@ -2459,7 +2480,7 @@ SdTableModule.decorators = [
                     SdTable,
                     SdMaterialFooterDefDirective,
                     SdTabelCellDefDirective,
-                    SdMaterialFilterDefDirective,
+                    SdTableFilterDefDirective,
                     SdMaterialSubInformationDefDirective,
                     SdPopupConfiguration,
                     SdTableFilter,
@@ -2482,7 +2503,7 @@ SdTableModule.decorators = [
                     SdTable,
                     SdMaterialFooterDefDirective,
                     SdTabelCellDefDirective,
-                    SdMaterialFilterDefDirective,
+                    SdTableFilterDefDirective,
                     SdMaterialSubInformationDefDirective,
                 ],
                 providers: [
@@ -2503,5 +2524,5 @@ SdTableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, TABLE_CONFIG, SdTableQuickAction as ɵa, SdDesktopCell as ɵb, SdSelectionVisibleSelectAllPipe as ɵba, SdGroupPipe as ɵbb, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdPopupConfiguration as ɵf, SdTableConfigurationService as ɵg, TABLE_CONFIG as ɵi, SdTableFilter as ɵj, SdPopupFilter as ɵk, SdMaterialSubInformationDefDirective as ɵl, SdTabelCellDefDirective as ɵm, SdMaterialFooterDefDirective as ɵn, SdMaterialFilterDefDirective as ɵo, SdTableFilterService as ɵp, SdCommandFilterPipe as ɵq, SdCommandDisablePipe as ɵr, SdCommandIconPipe as ɵs, SdCommandTitlePipe as ɵt, SdColumnTooltipPipe as ɵu, SdFilterColumnPipe as ɵv, SdFilterExternalPipe as ɵw, SdSelectionActionFilterPipe as ɵx, SdSelectionVisiblePipe as ɵy, SdSelectionDisablePipe as ɵz };
+export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, TABLE_CONFIG, SdTableQuickAction as ɵa, SdDesktopCell as ɵb, SdSelectionVisibleSelectAllPipe as ɵba, SdGroupPipe as ɵbb, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdPopupConfiguration as ɵf, SdTableConfigurationService as ɵg, TABLE_CONFIG as ɵi, SdTableFilter as ɵj, SdPopupFilter as ɵk, SdMaterialSubInformationDefDirective as ɵl, SdTabelCellDefDirective as ɵm, SdMaterialFooterDefDirective as ɵn, SdTableFilterDefDirective as ɵo, SdTableFilterService as ɵp, SdCommandFilterPipe as ɵq, SdCommandDisablePipe as ɵr, SdCommandIconPipe as ɵs, SdCommandTitlePipe as ɵt, SdColumnTooltipPipe as ɵu, SdFilterColumnPipe as ɵv, SdFilterExternalPipe as ɵw, SdSelectionActionFilterPipe as ɵx, SdSelectionVisiblePipe as ɵy, SdSelectionDisablePipe as ɵz };
 //# sourceMappingURL=sd-angular-core-table.js.map