bugfix :: 다국어 설정 시 > 쪽지 검색 > select 에서 에러 발생하는 부분 수정.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -48,7 +48,7 @@
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeReceiving' | translate }}
+          {{ 'message.type.messageTypeReceiving' | translate }}
         </ng-template>
         <perfect-scrollbar
           fxFlex="1 1 auto"
@@ -74,7 +74,7 @@
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeOutgoing' | translate }}
+          {{ 'message.type.messageTypeOutgoing' | translate }}
         </ng-template>
         <perfect-scrollbar
           fxFlex="1 1 auto"
@@ -100,7 +100,7 @@
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeReservation' | translate }}
+          {{ 'message.type.messageTypeReservation' | translate }}
         </ng-template>
         <perfect-scrollbar
           fxFlex="1 1 auto"
@@ -132,21 +132,16 @@
       <form [formGroup]="fgSearchType" class="w-100-p">
         <mat-form-field style="width: 100px;">
           <mat-select
+            value="A"
             formControlName="searchMessageType"
             (selectionChange)="onChangeSelection($event)"
           >
-            <mat-option [value]="MessageType.All">{{
+            <mat-option
-              'message.messageTypeAll' | translate
+              *ngFor="let messageType of messageTypeList"
-            }}</mat-option>
+              [value]="messageType.name"
-            <mat-option [value]="MessageType.Receive">{{
+            >
-              'message.messageTypeReceiving' | translate
+              {{ messageType.displayName }}
-            }}</mat-option>
+            </mat-option>
-            <mat-option [value]="MessageType.Send">{{
-              'message.messageTypeOutgoing' | translate
-            }}</mat-option>
-            <mat-option [value]="MessageType.Reservation">{{
-              'message.messageTypeReservation' | translate
-            }}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-radio-group

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts

@@ -8,9 +8,8 @@ import {
   Input,
   AfterViewChecked
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, merge } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import { tap } from 'rxjs/operators';
 import { NGXLogger } from 'ngx-logger';
 
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
@@ -53,6 +52,11 @@ import * as AppStore from '@app/store';
 import * as MessageStore from '@app/store/messenger/message';
 import { TranslateService } from '@ngx-translate/core';
 
+export interface MessageTypeData {
+  displayName: string;
+  name: string;
+}
+
 @Component({
   selector: 'app-layout-chat-left-sidenav-message',
   templateUrl: './message.component.html',
@@ -95,6 +99,9 @@ export class MessageBoxComponent
 
   isSearch = false;
 
+  messageTypeList: MessageTypeData[] = [];
+  langChangeSubscription: Subscription;
+
   constructor(
     private store: Store<any>,
     private formBuilder: FormBuilder,
@@ -217,6 +224,15 @@ export class MessageBoxComponent
     if (!!this.tabs) {
       this.tabs.realignInkBar();
     }
+
+    this.setMessageTypeData();
+    this.langChangeSubscription = merge(
+      this.translateService.onLangChange,
+      this.translateService.onDefaultLangChange,
+      this.translateService.onTranslationChange
+    ).subscribe(() => {
+      this.setMessageTypeData();
+    });
   }
 
   ngAfterViewChecked(): void {
@@ -230,6 +246,9 @@ export class MessageBoxComponent
     if (!!this.messageDetailInfo) {
       this.messageDetailInfo.unsubscribe();
     }
+    if (!!this.langChangeSubscription) {
+      this.langChangeSubscription.unsubscribe();
+    }
   }
 
   onSelectedIndexTab(value: number) {
@@ -347,4 +366,32 @@ export class MessageBoxComponent
       })
     );
   }
+
+  private setMessageTypeData() {
+    const messageTypeData = this.translateService.instant('message.type');
+
+    const messageTypeList: MessageTypeData[] = [];
+    for (const key in messageTypeData) {
+      if (messageTypeData.hasOwnProperty(key)) {
+        let name = 'A';
+        switch (key) {
+          case 'messageTypeAll':
+            name = MessageType.All;
+            break;
+          case 'messageTypeReceiving':
+            name = MessageType.Receive;
+            break;
+          case 'messageTypeOutgoing':
+            name = MessageType.Send;
+            break;
+          case 'messageTypeReservation':
+            name = MessageType.Reservation;
+            break;
+        }
+        messageTypeList.push({ displayName: messageTypeData[key], name });
+      }
+    }
+
+    this.messageTypeList = messageTypeList;
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

@@ -3,13 +3,13 @@
     <mat-card-title>
       <ng-container [ngSwitch]="messageInfo.type">
         <span *ngSwitchCase="MessageType.Receive">{{
-          'message.messageTypeReceiving' | translate
+          'message.type.messageTypeReceiving' | translate
         }}</span>
         <span *ngSwitchCase="MessageType.Send">{{
-          'message.messageTypeOutgoing' | translate
+          'message.type.messageTypeOutgoing' | translate
         }}</span>
         <span *ngSwitchCase="MessageType.Reservation">{{
-          'message.messageTypeReservation' | translate
+          'message.type.messageTypeReservation' | translate
         }}</span>
       </ng-container>
     </mat-card-title>

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -293,10 +293,6 @@
     "sendTo": "Send message",
     "sendReservation": "Send reservation",
     "placeholderForSearch": "search for name, title, content",
-    "messageTypeAll": "All",
-    "messageTypeReceiving": "Receiving",
-    "messageTypeOutgoing": "Outgoing",
-    "messageTypeReservation": "Reservation",
     "searchTypeName": "Name",
     "searchTypeTitle": "Title",
     "searchTypeContent": "Content",
@@ -318,6 +314,12 @@
     "andOthers": "and {{count}}others",
     "addReceiver": "Add Reciever",
     "countOfReceiver": "{{count}} total recipients",
+    "type": {
+      "messageTypeAll": "All",
+      "messageTypeReceiving": "Receiving",
+      "messageTypeOutgoing": "Outgoing",
+      "messageTypeReservation": "Reservation"
+    },
     "results": {
       "successForSending": "Your message has been sent.",
       "successForReservation": "You have scheduled a message transfer.",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -293,10 +293,6 @@
     "sendTo": "쪽지 보내기",
     "sendReservation": "쪽지 예약 보내기",
     "placeholderForSearch": "이름, 제목, 내용 검색",
-    "messageTypeAll": "전체",
-    "messageTypeReceiving": "수신",
-    "messageTypeOutgoing": "발신",
-    "messageTypeReservation": "예약",
     "searchTypeName": "이름",
     "searchTypeTitle": "제목",
     "searchTypeContent": "내용",
@@ -318,6 +314,12 @@
     "andOthers": "외 {{count}}명",
     "addReceiver": "수신자 추가",
     "countOfReceiver": "총 수신자 {{count}}명",
+    "type": {
+      "messageTypeAll": "전체",
+      "messageTypeReceiving": "수신",
+      "messageTypeOutgoing": "발신",
+      "messageTypeReservation": "예약"
+    },
     "results": {
       "successForSending": "쪽지를 전송하였습니다.",
       "successForReservation": "쪽지 전송을 예약 하였습니다.",