feat(module:abc.st): add total i18n (#203)

ng-alain · Oct 10, 2018 · ec0b0df · ec0b0df
1 parent f561835
commit ec0b0df
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 16 deletions.
diff --git a/packages/abc/table/table.component.ts b/packages/abc/table/table.component.ts
@@ -11,7 +11,6 @@ import {
   ElementRef,
   TemplateRef,
   SimpleChange,
-  ContentChild,
   Optional,
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -30,7 +29,8 @@ import {
   ALAIN_I18N_TOKEN,
   AlainI18NService,
   DrawerHelper,
-  DrawerHelperOptions
+  DrawerHelperOptions,
+  DelonLocaleService,
 } from '@delon/theme';
 import {
   deepCopy,
@@ -81,7 +81,10 @@ import { STDataSource } from './table-data-source';
 })
 export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   private i18n$: Subscription;
+  private delonI18n$: Subscription;
   private totalTpl = ``;
+  private locale: any = {};
+  private clonePage: STPage;
   _data: STData[] = [];
   _isPagination = true;
   _allChecked = false;
@@ -144,13 +147,14 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
     return this._page;
   }
   set page(value: STPage) {
+    this.clonePage = value;
     const { page } = this.cog;
     const item = Object.assign({}, deepCopy(page), value);
     const { total } = item;
     if (typeof total === 'string' && total.length) {
       this.totalTpl = total;
     } else if (toBoolean(total)) {
-      this.totalTpl = `共 {{total}} 条`;
+      this.totalTpl = this.locale.total;
     } else {
       this.totalTpl = '';
     }
@@ -240,7 +244,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Output()
   readonly checkboxChange: EventEmitter<STData[]> = new EventEmitter<
     STData[]
-    >();
+  >();
   /**
    * radio变化时回调，参数为当前所选
    * @deprecated 使用 `change` 替代
@@ -270,7 +274,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Output()
   readonly rowClick: EventEmitter<STChangeRowClick> = new EventEmitter<
     STChangeRowClick
-    >();
+  >();
   /**
    * 行双击回调
    * @deprecated 使用 `change` 替代
@@ -279,7 +283,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Output()
   readonly rowDblClick: EventEmitter<STChangeRowClick> = new EventEmitter<
     STChangeRowClick
-    >();
+  >();
   //#endregion
 
   constructor(
@@ -297,7 +301,17 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
     @Inject(DOCUMENT) private doc: any,
     private columnSource: STColumnSource,
     private dataSource: STDataSource,
+    private delonI18n: DelonLocaleService,
   ) {
+    this.delonI18n$ = this.delonI18n.change.subscribe(
+      () => {
+        this.locale = this.delonI18n.getData('st');
+        if (this._columns.length > 0) {
+          this.page = this.clonePage;
+          this.cd.detectChanges();
+        }
+      },
+    );
     Object.assign(this, deepCopy(cog));
     if (i18nSrv) {
       this.i18n$ = i18nSrv.change
@@ -309,9 +323,9 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   renderTotal(total: string, range: string[]) {
     return this.totalTpl
       ? this.totalTpl
-        .replace('{{total}}', total)
-        .replace('{{range[0]}}', range[0])
-        .replace('{{range[1]}}', range[1])
+          .replace('{{total}}', total)
+          .replace('{{range[0]}}', range[0])
+          .replace('{{range[1]}}', range[1])
       : '';
   }
 
@@ -614,12 +628,13 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
       const { drawer } = btn;
       obj[drawer.paramsName] = record;
       const options: DrawerHelperOptions = Object.assign({}, drawer);
-      this.drawerHelper.create(
-        drawer.title,
-        drawer.component,
-        Object.assign(obj, drawer.params && drawer.params(record)),
-        Object.assign({}, drawer)
-      )
+      this.drawerHelper
+        .create(
+          drawer.title,
+          drawer.component,
+          Object.assign(obj, drawer.params && drawer.params(record)),
+          Object.assign({}, drawer),
+        )
         .pipe(filter(w => typeof w !== 'undefined'))
         .subscribe(res => this.btnCallback(record, btn, res));
       return;
@@ -705,6 +720,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.delonI18n$.unsubscribe();
     if (this.i18n$) this.i18n$.unsubscribe();
   }
 }
diff --git a/packages/abc/table/test/table.spec.ts b/packages/abc/table/test/table.spec.ts
@@ -12,11 +12,12 @@ import {
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
+import { of, Observable, Subject } from 'rxjs';
 
 import { NgZorroAntdModule, NzPaginationComponent } from 'ng-zorro-antd';
 import { ModalHelper, ALAIN_I18N_TOKEN, DatePipe } from '@delon/theme';
 import { deepCopy, deepGet } from '@delon/util';
-import { of, Observable, Subject } from 'rxjs';
+import { DelonLocaleModule, en_US, zh_CN, DelonLocaleService } from '@delon/theme';
 
 import {
   STColumn,
@@ -97,6 +98,7 @@ describe('abc: table', () => {
       RouterTestingModule.withRoutes([]),
       NgZorroAntdModule.forRoot(),
       STModule.forRoot(),
+      DelonLocaleModule
     ];
     const providers = [];
     if (other.providers && other.providers.length) {
@@ -1271,6 +1273,16 @@ describe('abc: table', () => {
       i18nSrv = injector.get(ALAIN_I18N_TOKEN);
       spyOn(i18nSrv, 'fanyi').and.callFake(() => curLang);
     });
+    it('should working', (done: () => void) => {
+      page.newColumn([{ title: '', i18n: curLang, index: 'id' }]).then(() => {
+        const el = page.getEl('.ant-pagination-total-text');
+        expect(el.textContent.trim()).toContain(`共`);
+        injector.get(DelonLocaleService).setLocale(en_US);
+        fixture.detectChanges();
+        expect(el.textContent.trim()).toContain(`of`);
+        done();
+      });
+    });
     it('should be re-render columns when i18n changed', (done: () => void) => {
       page.newColumn([{ title: '', i18n: curLang, index: 'id' }]).then(() => {
         page.expectHead(curLang, 'id');

diff --git a/packages/theme/src/locale/languages/en-US.ts b/packages/theme/src/locale/languages/en-US.ts
@@ -25,6 +25,9 @@ export default <LocaleData>{
   miniProgress: {
     target: 'Target: ',
   },
+  st: {
+    total: '{{range[0]}} - {{range[1]}} of {{total}}',
+  },
   sf: {
     submit: 'Submit',
     reset: 'Reset',

diff --git a/packages/theme/src/locale/languages/zh-CN.ts b/packages/theme/src/locale/languages/zh-CN.ts
@@ -25,6 +25,9 @@ export default <LocaleData>{
   miniProgress: {
     target: '目标值：'
   },
+  st: {
+    total: '共 {{total}} 条',
+  },
   sf: {
     submit: '提交',
     reset: '重置',

diff --git a/packages/theme/src/locale/languages/zh-TW.ts b/packages/theme/src/locale/languages/zh-TW.ts
@@ -25,6 +25,9 @@ export default <LocaleData>{
   miniProgress: {
     target: '目標值：',
   },
+  st: {
+    total: '共 {{total}} 條',
+  },
   sf: {
     submit: '提交',
     reset: '重置',

diff --git a/packages/theme/src/locale/locale.types.ts b/packages/theme/src/locale/locale.types.ts
@@ -26,6 +26,10 @@ export interface MiniProgressLocaleData {
   target: string;
 }
 
+export interface STLocaleData {
+  total: string;
+}
+
 export interface SFLocaleData {
   submit: string;
   reset: string;
@@ -40,5 +44,6 @@ export interface LocaleData {
   reuseTab: ReuseTabLocaleData;
   tagSelect: TagSelectLocaleData;
   miniProgress: MiniProgressLocaleData;
+  st: STLocaleData;
   sf: SFLocaleData;
 }