refactor(frontend): refactor scopedTranslation usages

frontend/src/app/features/member/detail-view/member-detail-view.component.html

@@ -18,7 +18,7 @@ <h2>
         <span>
           <p class="mb-0">{{ 'ABBREVIATION' | scopedTranslation }}:</p>
           <p class="fw-bold">
-            {{ m.abbreviation ? (m.abbreviation) : ('ATTRIBUTE_NULL' | scopedTranslation)}}
+            {{ m.abbreviation | nullFallback }}
           </p>
         </span>
 
@@ -30,12 +30,8 @@ <h2>
         <span>
           <p class="mb-0">{{ 'DATE_OF_HIRE' | scopedTranslation }}:</p>
           <p class="fw-bold">
-            {{ m.dateOfHire
-            ? (m.dateOfHire | date)
-            : ('ATTRIBUTE_NULL' | scopedTranslation)
-            }}
+              {{ m.dateOfHire | date | nullFallback }}
           </p>
-
         </span>
 
         <span>
@@ -46,11 +42,7 @@ <h2>
         <span>
           <p class="mb-0">{{ 'ORGANISATION_UNIT' | scopedTranslation }}:</p>
           <p class="fw-bold">
-            @if (m.organisationUnitName) {
-              {{m.organisationUnitName}}
-            } @else {
-              {{'ATTRIBUTE_NULL' | scopedTranslation}}
-            }
+              {{m.organisationUnitName | nullFallback}}
           </p>
         </span>
       </div>

frontend/src/app/features/member/detail-view/member-detail-view.component.ts

@@ -18,6 +18,7 @@ import {
   getLeadershipExperienceTable
 } from './cv/member-detail-cv-table-definition';
 import { MemberOverviewModel } from '../member-overview.model';
+import { NullFallbackPipe } from '../../../shared/pipes/null-fallback.pipe';
 
 @Component({
   selector: 'app-member-detail-view',
@@ -26,6 +27,9 @@ import { MemberOverviewModel } from '../member-overview.model';
     CommonModule,
     ScopedTranslationPipe,
     CrudButtonComponent,
+    NullFallbackPipe,
+    TranslationScopeDirective,
+    CrudButtonComponent,
     GenericCvContentComponent,
     MatTabGroup,
     MatTab,

frontend/src/app/features/member/form/member-form.component.ts

@@ -119,7 +119,7 @@ export class MemberFormComponent implements OnInit {
 
       this.memberForm.get('organisationUnit')
         ?.setValue(this.organisationUnitsOptions()
-          .find((orgUnit) => orgUnit.id === this.member().organisationUnit.id));
+          .find((orgUnit) => orgUnit.id === this.member().organisationUnit?.id));
     });
   }
 

frontend/src/app/features/member/member.model.ts

@@ -8,6 +8,6 @@ export interface MemberModel {
   birthDate: Date;
   abbreviation: string | null;
   employmentState: EmploymentState;
-  organisationUnit: OrganisationUnitModel;
+  organisationUnit: OrganisationUnitModel | null;
   dateOfHire: Date | null;
 }

frontend/src/app/features/member/overview/member-overview.component.html

@@ -41,8 +41,9 @@ <h1 class="pt-3" data-testid="member-title">
           [class.active]="isFilterActive(state)"
           (click)="toggleFilter(state)"
           [attr.data-testid]="state"
+          *appTranslationScope="'EMPLOYMENT_STATUS_VALUES'"
         >
-          {{ 'EMPLOYMENT_STATUS_VALUES.' + state | scopedTranslation }}
+          {{ state | scopedTranslation }}
         </button>
       }
     </div>
@@ -67,7 +68,7 @@ <h1 class="pt-3" data-testid="member-title">
         mat-sort-header="firstName"
         data-testid="first-name-sort"
         class="col-range"  >
-        {{ 'MEMBER.FIRST_NAME' | translate }}
+        {{ 'FIRST_NAME' | scopedTranslation }}
       </th>
       <td
         mat-cell
@@ -94,7 +95,7 @@ <h1 class="pt-3" data-testid="member-title">
         {{ 'BIRTH_DATE' | scopedTranslation }}
       </th>
       <td mat-cell *matCellDef="let member" data-testid="member-birthDate">
-        {{ member.birthDate | date: GLOBAL_DATE_FORMAT }}
+        {{ member.birthDate | date }}
       </td>
     </ng-container>
 
@@ -103,11 +104,7 @@ <h1 class="pt-3" data-testid="member-title">
         {{ 'ORGANISATION_UNIT' | scopedTranslation }}
       </th>
       <td mat-cell *matCellDef="let member" data-testid="member-organisation">
-        @if (member.organisationUnit) {
-          {{ member.organisationUnit.name }}
-        } @else {
-          {{ 'MEMBER.ATTRIBUTE_NULL' | translate }}
-        }
+          {{member.organisationUnit?.name | nullFallback}}
       </td>
     </ng-container>
 
@@ -116,7 +113,9 @@ <h1 class="pt-3" data-testid="member-title">
         {{ 'EMPLOYMENT_STATE' | scopedTranslation }}
       </th>
       <td mat-cell *matCellDef="let member" data-testid="member-status">
-        {{ "MEMBER.EMPLOYMENT_STATUS_VALUES." + member.employmentState | translate }}
+          <ng-container *appTranslationScope="'EMPLOYMENT_STATUS_VALUES'">
+              {{ member.employmentState | scopedTranslation }}
+          </ng-container>
       </td>
     </ng-container>
 

frontend/src/app/features/member/overview/member-overview.component.ts

@@ -10,19 +10,19 @@ import { DatePipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 import { EmploymentState } from '../../../shared/enum/employment-state.enum';
 import { debounceTime } from 'rxjs/operators';
-import { GLOBAL_DATE_FORMAT } from '../../../shared/format/date-format';
 import sortingDataAccessor from '../../../shared/utils/sortingDataAccessor';
 import { ScopedTranslationPipe } from '../../../shared/pipes/scoped-translation-pipe';
 import { CrudButtonComponent } from '../../../shared/crud-button/crud-button.component';
+import { NullFallbackPipe } from '../../../shared/pipes/null-fallback.pipe';
+import { TranslationScopeDirective } from '../../../shared/translation-scope/translation-scope.directive';
 
 
 @Component({
   selector: 'app-member-overview',
   standalone: true,
-  providers: [DatePipe],
   imports: [
     ReactiveFormsModule,
     MatFormFieldModule,
@@ -32,27 +32,24 @@ import { CrudButtonComponent } from '../../../shared/crud-button/crud-button.com
     DatePipe,
     MatIcon,
     MatButton,
-    TranslatePipe,
     RouterLink,
     ScopedTranslationPipe,
-    CrudButtonComponent
+    CrudButtonComponent,
+    TranslationScopeDirective,
+    NullFallbackPipe
   ],
   templateUrl: './member-overview.component.html',
   styleUrl: './member-overview.component.scss'
 })
 export class MemberOverviewComponent implements OnInit {
   private readonly service: MemberService = inject(MemberService);
 
-  private readonly datePipe: DatePipe = inject(DatePipe);
-
   private readonly router = inject(Router);
 
   private readonly route = inject(ActivatedRoute);
 
   private readonly translate = inject(TranslateService);
 
-  protected readonly GLOBAL_DATE_FORMAT = GLOBAL_DATE_FORMAT;
-
   displayedColumns: string[] = [
     'first_name',
     'last_name',
@@ -174,8 +171,4 @@ export class MemberOverviewComponent implements OnInit {
     }
     return all;
   }
-
-  handleAddMemberClick(): void {
-    this.router.navigate(['/member/add']);
-  }
 }

frontend/src/app/shared/format/date-format.ts

@@ -2,8 +2,6 @@ import { MatDateFormats } from '@angular/material/core';
 import { format } from 'date-fns';
 import { de } from 'date-fns/locale';
 
-export const GLOBAL_DATE_FORMAT = 'dd.MM.yyyy';
-
 export const GLOBAL_DATE_FORMATS: MatDateFormats = {
   parse: {
     dateInput: { month: 'short',

frontend/src/app/shared/i18n-prefix.provider.ts

@@ -1,4 +1,8 @@
-import { inject, Injectable, Provider } from '@angular/core';
+import {
+  inject,
+  Injectable,
+  Provider
+} from '@angular/core';
 import { InterpolationParameters } from '@ngx-translate/core';
 import { I18N_PREFIX } from './i18n-prefix.token';
 import { ScopedTranslationCoreService } from './services/scoped-translation-core.service';

frontend/src/app/shared/modal/base-modal.component.html

@@ -1,16 +1,15 @@
 <div class="d-flex p-3" mat-dialog-title>
   <div class="container-fluid">
     <div class="d-flex align-items-center justify-content-between flex-row">
-        <h3 [attr.data-testid]=" ('MODEL_NAME' | scopedTranslation) +'-title'" class="mb-0">
+        <h3 [attr.data-testid]="'title' | translatedModelSuffix" class="mb-0">
           {{ "MODEL_NAME" | scopedTranslation  }}
           {{ "ACTION" | scopedTranslation }}
         </h3>
       <button
         type="reset"
         [mat-dialog-close]="true"
         mat-icon-button
-        [attr.data-testId]=" ('MODEL_NAME' | scopedTranslation) + '-close-dialog'"
-        class=""
+        [attr.data-testId]="'close-dialog' | translatedModelSuffix"
       >
         <mat-icon class="text-secondary">close</mat-icon>
       </button>

frontend/src/app/shared/modal/base-modal.component.ts

@@ -4,10 +4,10 @@ import { MatDivider } from '@angular/material/divider';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 
-
-import { ScopedTranslationPipe } from '../pipes/scoped-translation-pipe';
 import { BaseFormActionsComponent } from '../base-form-actions/base-form-actions.component';
 import { FormGroup } from '@angular/forms';
+import { TranslatedModelSuffixPipe } from '../pipes/translated-model-suffix.pipe';
+import { ScopedTranslationPipe } from '../pipes/scoped-translation-pipe';
 
 @Component({
   selector: 'app-base-modal',
@@ -19,8 +19,10 @@ import { FormGroup } from '@angular/forms';
     MatIcon,
     MatDialogClose,
     MatIconButton,
-    ScopedTranslationPipe,
-    BaseFormActionsComponent
+    BaseFormActionsComponent,
+    TranslatedModelSuffixPipe,
+    TranslatedModelSuffixPipe,
+    ScopedTranslationPipe
   ],
   templateUrl: './base-modal.component.html'
 })

frontend/src/app/shared/pipes/null-fallback.pipe.ts

@@ -0,0 +1,13 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { ScopedTranslationService } from '../i18n-prefix.provider';
+
+@Pipe({
+  name: 'nullFallback'
+})
+export class NullFallbackPipe implements PipeTransform {
+  scopedTranslationService = inject(ScopedTranslationService);
+
+  transform(value: any, fallback = 'ATTRIBUTE_NULL'): string {
+    return value ?? this.scopedTranslationService.instant(fallback);
+  }
+}

frontend/src/app/shared/pipes/translated-model-suffix.pipe.ts

@@ -0,0 +1,17 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { ScopedTranslationService } from '../i18n-prefix.provider';
+
+@Pipe({
+  name: 'translatedModelSuffix'
+})
+export class TranslatedModelSuffixPipe implements PipeTransform {
+  pctsTranslationService = inject(ScopedTranslationService);
+
+  transform(prefix: string, suffix = ''): string {
+    const modelKey = 'MODEL_NAME';
+    const translatedModelName = this.pctsTranslationService.instant(modelKey);
+    return [prefix,
+      translatedModelName,
+      suffix].join('-');
+  }
+}

frontend/src/app/shared/services/scoped-translation-core.service.ts

@@ -87,8 +87,11 @@ export class ScopedTranslationCoreService {
     for (const key of keyList) {
       const translation = this.translateService.instant(key, params);
 
-      // instant() returns the key itself if no translation is found
-      if (translation !== key) {
+      /*
+       * instant() returns the key itself if no translation is found
+       * prevent returning anything else than a string since ngx-translate return an obj whenever a key is translated that contains sub keys
+       */
+      if (translation !== key && typeof translation === 'string') {
         return translation;
       }
     }