feat(theme-shared): replace ngx-datatable messages with localized texts

resolves #4197

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -47,6 +47,8 @@
     "PagerInfoEmpty": "Showing 0 to 0 of 0 entries",
     "PagerInfoFiltered": "(filtered from _MAX_ total entries)",
     "NoDataAvailableInDatatable": "No data available",
+    "Total": "total",
+    "Selected": "selected",
     "PagerShowMenuEntries": "Show _MENU_ entries",
     "DatatableActionDropdownDefaultText": "Actions",
     "ChangePassword": "Change password",
@@ -59,6 +61,6 @@
     "500Message": "Internal Server Error",
     "GoHomePage": "Go to the homepage",
     "GoBack": "Go back",
-    "Search" : "Search"
+    "Search": "Search"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -47,6 +47,8 @@
     "PagerInfoEmpty": "0 kayıttan 0 ile 0 arası gösteriliyor.",
     "PagerInfoFiltered": "(_MAX_ kayıt arasından filtrelendi)",
     "NoDataAvailableInDatatable": "Tabloda kayıt mevcut değil.",
+    "Total": "toplam",
+    "Selected": "seçilen",
     "PagerShowMenuEntries": "Sayfada _MENU_ kayıt göster.",
     "DatatableActionDropdownDefaultText": "İşlemler",
     "ChangePassword": "Şifre değiştir",
@@ -61,4 +63,4 @@
     "GoBack": "Geri dön",
     "Search": "Arama"
   }
-}
+}

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -1,9 +1,9 @@
-import { CoreModule, LazyLoadService, noop } from '@abp/ng.core';
+import { CoreModule, LazyLoadService, noop, ConfigState } from '@abp/ng.core';
 import { DatePipe } from '@angular/common';
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { NgxDatatableModule, INgxDatatableConfig } from '@swimlane/ngx-datatable';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 import { ButtonComponent } from './components/button/button.component';
 import { ChartComponent } from './components/chart/chart.component';
@@ -29,21 +29,22 @@ import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { chartJsLoaded$ } from './utils/widget-utils';
+import { Store } from '@ngxs/store';
 
-/**
- *
- * @deprecated To be deleted in v2.6
- *
- */
-export function appendScript(injector: Injector) {
-  const fn = () => {
-    import('chart.js').then(() => chartJsLoaded$.next(true));
+export function ngxDatatableMessageFactory(store: Store) {
+  const emptyMessage = store.selectSnapshot(
+    ConfigState.getLocalization('AbpUi::NoDataAvailableInDatatable'),
+  );
+  const totalMessage = store.selectSnapshot(ConfigState.getLocalization('AbpUi::Total'));
+  const selectedMessage = store.selectSnapshot(ConfigState.getLocalization('AbpUi::Selected'));
 
-    const lazyLoadService: LazyLoadService = injector.get(LazyLoadService);
-    return lazyLoadService.load(null, 'style', styles, 'head', 'beforeend').toPromise();
-  };
-
-  return fn;
+  return {
+    messages: {
+      emptyMessage,
+      totalMessage,
+      selectedMessage,
+    },
+  } as INgxDatatableConfig;
 }
 
 @NgModule({
@@ -120,6 +121,11 @@ export class ThemeSharedModule {
           deps: [HTTP_ERROR_CONFIG],
         },
         { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
+        {
+          provide: 'configuration',
+          useFactory: ngxDatatableMessageFactory,
+          deps: [Store],
+        },
       ],
     };
   }