Use scrm-label in table component

- Use the scrm-label component in template
- Add module to table config to allow using modStrings
- Remove language related observable streams from vm$
- Remove translatedLabel calculation in table adapters
- Remove translatedLabel property from model

core/app/src/app-common/metadata/metadata.model.ts

@@ -3,7 +3,6 @@ import {FieldDefinition} from '@app-common/record/field.model';
 export interface ViewFieldDefinition {
     name?: string;
     label?: string;
-    translatedLabel?: string;
     link?: boolean;
     type?: string;
     fieldDefinition?: FieldDefinition;

core/app/src/components/table/table-body/table-body.component.html

@@ -28,7 +28,7 @@
                     scope="col"
                     class="primary-table-header">
 
-                    {{column.translatedLabel}}
+                    <scrm-label [labelKey]="column.label" [module]="config.module || ''"></scrm-label>
                     <scrm-sort-button *ngIf="config.sort$ && column.sortable"
                                       [state]="getFieldSort(column)">
                     </scrm-sort-button>
@@ -61,7 +61,9 @@
         </table>
 
         <div *ngIf="!vm.loading && vm.records.length === 0">
-            <p class="lead text-center pt-3">{{vm.language.appStrings.MSG_LIST_VIEW_NO_RESULTS_BASIC}}</p>
+            <p class="lead text-center pt-3">
+                <scrm-label labelKey="MSG_LIST_VIEW_NO_RESULTS_BASIC"></scrm-label>
+            </p>
         </div>
         <div *ngIf="vm.loading" [class.m-5]="!vm.records || vm.records.length === 0">
             <scrm-loading-spinner [overlay]="true"></scrm-loading-spinner>

core/app/src/components/table/table-body/table-body.component.ts

@@ -1,7 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {combineLatest, Observable, of} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
-import {LanguageStore, LanguageStrings} from '@store/language/language.store';
 import {Record} from '@app-common/record/record.model';
 import {Field} from '@app-common/record/field.model';
 import {ColumnDefinition} from '@app-common/metadata/list.metadata.model';
@@ -14,7 +13,6 @@ import {RecordSelection} from '@app-common/views/list/record-selection.model';
 import {FieldManager} from '@services/record/field/field.manager';
 
 interface TableViewModel {
-    language: LanguageStrings;
     columns: ColumnDefinition[];
     lineActions: LineAction[];
     selection: RecordSelection;
@@ -31,12 +29,10 @@ interface TableViewModel {
 })
 export class TableBodyComponent implements OnInit {
     @Input() config: TableConfig;
-    language$: Observable<LanguageStrings> = this.language.vm$;
     maxColumns = 4;
     vm$: Observable<TableViewModel>;
 
     constructor(
-        protected language: LanguageStore,
         protected fieldManager: FieldManager
     ) {
     }
@@ -47,7 +43,6 @@ export class TableBodyComponent implements OnInit {
         const loading$ = this.config.loading$ || of(false).pipe(shareReplay(1));
 
         this.vm$ = combineLatest([
-            this.language$,
             this.config.columns,
             lineAction$,
             selection$,
@@ -57,7 +52,6 @@ export class TableBodyComponent implements OnInit {
         ]).pipe(
             map((
                 [
-                    language,
                     columns,
                     lineActions,
                     selection,
@@ -85,7 +79,6 @@ export class TableBodyComponent implements OnInit {
                 const selectionStatus = selection && selection.status || SelectionStatus.NONE;
 
                 return {
-                    language,
                     columns,
                     lineActions,
                     selection,

core/app/src/components/table/table-body/table-body.module.ts

@@ -9,6 +9,7 @@ import {FieldModule} from '@fields/field.module';
 import {SortButtonModule} from '@components/sort-button/sort-button.module';
 import {LineActionModule} from '@components/line-action-menu/line-action-menu.module';
 import {LoadingSpinnerModule} from '@components/loading-spinner/loading-spinner.module';
+import {LabelModule} from '@components/label/label.module';
 
 @NgModule({
     declarations: [TableBodyComponent],
@@ -21,7 +22,8 @@ import {LoadingSpinnerModule} from '@components/loading-spinner/loading-spinner.
         FieldModule,
         SortButtonModule,
         LineActionModule,
-        LoadingSpinnerModule
+        LoadingSpinnerModule,
+        LabelModule
     ]
 })
 export class TableBodyModule {

core/app/src/components/table/table.component.spec.mock.ts

@@ -111,7 +111,6 @@ export const tableConfigMock: TableConfig = {
                 importable: 'required',
                 merge_filter: 'selected'
             },
-            translatedLabel: 'Name'
         } as ColumnDefinition
     ]),
     maxColumns$: of(4).pipe(shareReplay(1)),

core/app/src/components/table/table.model.ts

@@ -26,6 +26,8 @@ export interface TableConfig {
     bulkActions?: BulkActionDataSource;
     pagination?: PaginationDataSource;
 
+    module?: string;
+
     toggleRecordSelection(id: string): void;
 
     updateSorting(orderBy: string, sortOrder: SortDirection): void;

core/app/src/containers/subpanel/adapters/table.adapter.ts

@@ -1,6 +1,5 @@
-import {combineLatest, Observable, of} from 'rxjs';
+import {Observable, of} from 'rxjs';
 import {Injectable} from '@angular/core';
-import {LanguageStore} from '@store/language/language.store';
 import {SortDirection} from '@components/sort-button/sort-button.model';
 import {TableConfig} from '@components/table/table.model';
 import {ColumnDefinition} from '@app-common/metadata/list.metadata.model';
@@ -10,10 +9,7 @@ import {map} from 'rxjs/operators';
 @Injectable()
 export class SubpanelTableAdapter {
 
-    constructor(
-        protected store: SubpanelStore,
-        protected language: LanguageStore
-    ) {
+    constructor(protected store: SubpanelStore) {
     }
 
     getTable(): TableConfig {
@@ -21,6 +17,8 @@ export class SubpanelTableAdapter {
             showHeader: false,
             showFooter: true,
 
+            module: this.store.metadata.headerModule,
+
             columns: this.getColumns(),
             sort$: this.store.recordList.sort$,
             maxColumns$: of(5),
@@ -40,21 +38,6 @@ export class SubpanelTableAdapter {
     }
 
     protected getColumns(): Observable<ColumnDefinition[]> {
-
-        return combineLatest([this.language.vm$, this.store.metadata$]).pipe(
-            map(([languages, metadata]) => {
-                const mapped: ColumnDefinition[] = [];
-
-                metadata.columns.forEach(column => {
-                    const translatedLabel = this.language.getFieldLabel(column.label, metadata.headerModule, languages);
-                    mapped.push({
-                        ...column,
-                        translatedLabel
-                    });
-                });
-
-                return mapped;
-            })
-        );
+        return this.store.metadata$.pipe(map(metadata => metadata.columns));
     }
 }

core/app/src/containers/subpanel/components/subpanel/subpanel.component.ts

@@ -34,7 +34,7 @@ export class SubpanelComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.adapter = new SubpanelTableAdapter(this.store, this.languages);
+        this.adapter = new SubpanelTableAdapter(this.store);
         this.tableConfig = this.adapter.getTable();
         if (this.maxColumns$) {
             this.tableConfig.maxColumns$ = this.maxColumns$;

core/app/views/list/adapters/table.adapter.ts

@@ -1,11 +1,8 @@
-import {combineLatest, Observable, of} from 'rxjs';
+import {of} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {MetadataStore} from '@store/metadata/metadata.store.service';
-import {map} from 'rxjs/operators';
-import {LanguageStore} from '@store/language/language.store';
 import {SortDirection} from '@components/sort-button/sort-button.model';
 import {TableConfig} from '@components/table/table.model';
-import {ColumnDefinition} from '@app-common/metadata/list.metadata.model';
 import {ListViewStore} from '../store/list-view/list-view.store';
 
 @Injectable()
@@ -14,7 +11,6 @@ export class TableAdapter {
     constructor(
         protected store: ListViewStore,
         protected metadata: MetadataStore,
-        protected language: LanguageStore
     ) {
     }
 
@@ -23,7 +19,9 @@ export class TableAdapter {
             showHeader: true,
             showFooter: true,
 
-            columns: this.getColumns(),
+            module: this.store.getModuleName(),
+
+            columns: this.store.columns$,
             lineActions$: this.store.lineActions$,
             selection$: this.store.selection$,
             sort$: this.store.sort$,
@@ -44,24 +42,4 @@ export class TableAdapter {
             },
         } as TableConfig;
     }
-
-    protected getColumns(): Observable<ColumnDefinition[]> {
-        return combineLatest(
-            [this.language.vm$, this.store.columns$, this.store.moduleName$]
-        ).pipe(
-            map(([languages, columns, module]) => {
-                const mapped: ColumnDefinition[] = [];
-
-                columns.forEach(column => {
-                    const translatedLabel = this.language.getFieldLabel(column.label, module, languages);
-                    mapped.push({
-                        ...column,
-                        translatedLabel
-                    });
-                });
-
-                return mapped;
-            })
-        );
-    }
 }