Room name is modified

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -49,7 +49,32 @@
       </div>
       <div class="room-info">
         <h3 class="room-name">
-          {{ getRoomName() }}
+          <ng-container *ngIf="!roomInfo || !userInfoList">
+            대화방명을 가져오고 있습니다..
+          </ng-container>
+          <ng-container *ngIf="!!roomInfo && !!userInfoList">
+            <ng-container [ngSwitch]="roomInfo.roomType">
+              <ng-container *ngSwitchCase="RoomType.Mytalk">
+                MyTalk
+              </ng-container>
+              <ng-container *ngSwitchCase="RoomType.Bot || RoomType.Allim">
+                {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+              </ng-container>
+              <ng-container *ngSwitchDefault>
+                <ng-template
+                  [ngIf]="
+                    !!roomInfo.roomName && '' !== roomInfo.roomName.trim()
+                  "
+                  [ngIfElse]="roomNameNotExist"
+                >
+                  {{ roomInfo.roomName }}
+                </ng-template>
+                <ng-template #roomNameNotExist>
+                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                </ng-template>
+              </ng-container>
+            </ng-container>
+          </ng-container>
         </h3>
         <!-- Timer Room Info -->
         <div
@@ -200,8 +225,13 @@
 
   <!-- sticker-selector -->
   <div class="sticker-selector-container">
-    <ucap-sticker-selector *ngIf="isShowStickerSelector" #stickerSelector [stickerHistory]='getStickerHistory()'
+    <ucap-sticker-selector
-      (selectedSticker)="onSelectedSticker($event)" class="sticker-selector-zone"></ucap-sticker-selector>
+      *ngIf="isShowStickerSelector"
+      #stickerSelector
+      [stickerHistory]="getStickerHistory()"
+      (selectedSticker)="onSelectedSticker($event)"
+      class="sticker-selector-zone"
+    ></ucap-sticker-selector>
     <div></div>
   </div>
   <!-- / sticker-selector -->

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -161,6 +161,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
   snackBarPreviewEvent: MatSnackBarRef<SimpleSnackBar>;
 
+  RoomType = RoomType;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -296,36 +298,14 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     this.selectedSticker = undefined;
   }
 
-  getRoomName() {
+  get _roomUserInfos() {
-    if (!this.roomInfo || !this.userInfoList) {
+    return this.userInfoList
-      return '대화방명을 가져오고 있습니다..';
+      .filter(roomUserInfo => {
-    }
+        return (
-
+          this.loginRes.userSeq !== roomUserInfo.seq && roomUserInfo.isJoinRoom
-    switch (this.roomInfo.roomType) {
+        );
-      case RoomType.Mytalk:
+      })
-        return 'MyTalk';
+      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
-      case RoomType.Bot:
-      case RoomType.Allim:
-        return this.userInfoList
-          .filter(user => user.seq !== this.loginRes.userSeq && user.isJoinRoom)
-          .map(user => user.name);
-    }
-
-    if (!!this.roomInfo.roomName && '' !== this.roomInfo.roomName.trim()) {
-      return this.roomInfo.roomName;
-    } else {
-      return this.userInfoList
-        .filter(user => {
-          if (this.roomInfo.roomType === RoomType.Single) {
-            return user.seq !== this.loginRes.userSeq;
-          } else {
-            return user.isJoinRoom;
-          }
-        })
-        .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
-        .map(user => user.name)
-        .join(',');
-    }
   }
 
   /** 대화전송 가능한 방인지 판단 */

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -25,23 +25,27 @@
       <div class="detail">
         <div class="room-name">
           <div class="name">
-            <ng-template
+            <ng-container [ngSwitch]="roomInfo.roomType">
-              [ngIf]="!!roomInfo.roomName && '' !== roomInfo.roomName.trim()"
+              <ng-container *ngSwitchCase="RoomType.Mytalk">
-              [ngIfElse]="roomNameNotExist"
+                MyTalk
-            >
+              </ng-container>
-              {{ roomInfo.roomName }}
+              <ng-container *ngSwitchCase="RoomType.Bot || RoomType.Allim">
-            </ng-template>
+                {{ _roomUserInfos | ucapTranslate: 'name':',' }}
-            <ng-template #roomNameNotExist>
+              </ng-container>
-              <ng-template
+              <ng-container *ngSwitchDefault>
-                [ngIf]="RoomType.Mytalk === roomInfo.roomType"
+                <ng-template
-                [ngIfElse]="roomNameByUserNames"
+                  [ngIf]="
-                >Second</ng-template
+                    !!roomInfo.roomName && '' !== roomInfo.roomName.trim()
-              >
+                  "
-            </ng-template>
+                  [ngIfElse]="roomNameNotExist"
-            <ng-template #roomNameByUserNames>
+                >
-              {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                  {{ roomInfo.roomName }}
-            </ng-template>
+                </ng-template>
-            <!-- {{ getRoomName(roomInfo) }} -->
+                <ng-template #roomNameNotExist>
+                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                </ng-template>
+              </ng-container>
+            </ng-container>
           </div>
           <div
             class="num bg-accent-light"

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts

@@ -84,42 +84,14 @@ export class ListItemComponent implements OnInit {
     }
   }
 
-  getRoomName(roomInfo: RoomInfo): string {
-    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
-      return roomInfo.roomName;
-    }
-
-    if (roomInfo.roomType === RoomType.Mytalk) {
-      return 'MyTalk';
-    }
-
-    if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
-      let roomName = '';
-      this.roomUserInfo.forEach(
-        (roomUserInfo: RoomUserInfo | UserInfoShort, index: number) => {
-          if (
-            this.loginRes.userSeq === roomUserInfo.seq ||
-            !roomUserInfo.isJoinRoom
-          ) {
-            return;
-          }
-          if ('' === roomName.trim()) {
-            roomName = roomName.concat('', roomUserInfo.name);
-          } else {
-            roomName = roomName.concat(',', roomUserInfo.name);
-          }
-        }
-      );
-      return roomName;
-    }
-  }
-
   get _roomUserInfos() {
-    return this.roomUserInfo.filter(roomUserInfo => {
+    return this.roomUserInfo
-      return (
+      .filter(roomUserInfo => {
-        this.loginRes.userSeq !== roomUserInfo.seq && !!roomUserInfo.isJoinRoom
+        return (
-      );
+          this.loginRes.userSeq !== roomUserInfo.seq && roomUserInfo.isJoinRoom
-    });
+        );
+      })
+      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
   }
 
   // getChecked(value: boolean, roomInfo: RoomInfo) {