대화방 상대 오프라인 정보 표시 기능 추가. >> 디자인 필요.

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

@@ -50,12 +50,34 @@
       <div class="room-info">
         <div
           *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
-          class="room-type text-accent-color "
+          class="room-type text-accent-color"
         >
           <span class="bg-accent-darkest"
             >{{ getConvertTimer(roomInfoSubject.value.timeRoomInterval) }}
           </span>
         </div>
+        <div
+          *ngIf="
+            roomInfoSubject.value &&
+            (roomInfoSubject.value.roomType === RoomType.Single ||
+              roomInfoSubject.value.roomType === RoomType.Multi) &&
+            offLineUsers.length > 0
+          "
+          class="room-type text-accent-color"
+        >
+          <span
+            *ngIf="roomInfoSubject.value.roomType === RoomType.Single"
+            class="bg-accent-darkest"
+          >
+            {{ 'chat.existOfflineUser' | translate }}
+          </span>
+          <span
+            *ngIf="roomInfoSubject.value.roomType === RoomType.Multi"
+            class="bg-accent-darkest"
+          >
+            {{ 'chat.existOfflineUsers' | translate }}
+          </span>
+        </div>
         <h3 class="room-name">
           <ng-container
             *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"

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

@@ -32,7 +32,14 @@ import {
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
-import { Observable, Subscription, forkJoin, of, BehaviorSubject } from 'rxjs';
+import {
+  Observable,
+  Subscription,
+  forkJoin,
+  of,
+  BehaviorSubject,
+  combineLatest
+} from 'rxjs';
 
 import {
   Info,
@@ -103,7 +110,12 @@ import {
   FileViewerDialogData,
   FileViewerDialogResult
 } from '@app/layouts/common/dialogs/file-viewer.dialog.component';
-import { FileUtil, StickerFilesInfo, MimeUtil } from '@ucap-webmessenger/core';
+import {
+  FileUtil,
+  StickerFilesInfo,
+  MimeUtil,
+  StatusCode as PresenceStatusCode
+} from '@ucap-webmessenger/core';
 
 import { StatusCode } from '@ucap-webmessenger/api';
 import {
@@ -144,7 +156,6 @@ import {
   EventDownloadRequest
 } from '@ucap-webmessenger/api-message';
 import moment from 'moment';
-import { start } from 'repl';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -191,6 +202,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   userInfoListSubscription: Subscription;
   userInfoListSubject = new BehaviorSubject<UserInfo[]>(undefined);
 
+  userStatusListSubscription: Subscription;
+  offLineUsers: UserInfo[] = [];
+
   eventListSubscription: Subscription;
   eventListSubject = new BehaviorSubject<Info<EventJson>[]>(undefined);
   eventListNewSubject = new BehaviorSubject<Info<EventJson>[]>(undefined);
@@ -327,6 +341,35 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         this.changeDetectorRef.detectChanges();
       });
 
+    this.userStatusListSubscription = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo
+        )
+      )
+    ])
+      .pipe(
+        tap(([userInfoList, presences]) => {
+          if (!!userInfoList && userInfoList.length > 0) {
+            userInfoList.forEach(userInfo => {
+              const presence = presences[userInfo.seq];
+
+              if (
+                !!presence &&
+                presence.pcStatus === PresenceStatusCode.OnLine
+              ) {
+              } else {
+                this.offLineUsers.push(userInfo);
+              }
+            });
+          }
+        })
+      )
+      .subscribe();
+
     this.eventListProcessing$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
     );
@@ -456,6 +499,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     if (!!this.userInfoListSubscription) {
       this.userInfoListSubscription.unsubscribe();
     }
+    if (!!this.userStatusListSubscription) {
+      this.userStatusListSubscription.unsubscribe();
+    }
     if (!!this.eventListSubscription) {
       this.eventListSubscription.unsubscribe();
     }
@@ -503,6 +549,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     // Read here Clear..
     this.firstCheckReadHere = true;
 
+    // off line user clear..
+    this.offLineUsers = [];
+
     // Chat Formfield Clear..
     if (!!this.chatForm) {
       this.chatForm.replyInput.nativeElement.value = '';
@@ -571,9 +620,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   onClickSendClickToCall(type: string) {
-    if(type === 'LINE') {
+    if (type === 'LINE') {
       this.sendCall.emit(this._roomUserInfos[0].lineNumber);
-    } else if(type === 'MOBILE') {
+    } else if (type === 'MOBILE') {
       this.sendCall.emit(this._roomUserInfos[0].hpNumber);
     }
   }

projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts

@@ -82,7 +82,6 @@ import {
   AlertDialogData,
   AlertDialogResult
 } from '@ucap-webmessenger/ui';
-import { ActivatedRouteSnapshot } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()

projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts

@@ -5,6 +5,7 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 
 import { NGXLogger } from 'ngx-logger';
+import * as RoomStore from '@app/store/messenger/room';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as AuthStore from '@app/store/account/authentication';
 import {
@@ -143,6 +144,25 @@ export class Effects {
     { dispatch: false }
   );
 
+  mroomUserStatusCheck$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(RoomStore.infoSuccess),
+        map(action => action.userInfoList),
+        tap(userInfoList => {
+          if (!!userInfoList && userInfoList.length > 0) {
+            this.store.dispatch(
+              bulkInfo({
+                divCd: 'roomuserBulk',
+                userSeqs: userInfoList.map(userinfo => userinfo.seq)
+              })
+            );
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

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

@@ -238,6 +238,8 @@
     "btnSticker": "Sticker",
     "btnTranslate": "Translate",
     "noRoomUser": "No chat users",
+    "existOfflineUser": "offline",
+    "existOfflineUsers": "Some offline",
     "event": {
       "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
       "exitFromRoomWith": "{{exitor}} has left.",

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

@@ -238,6 +238,8 @@
     "btnSticker": "스티커",
     "btnTranslate": "번역",
     "noRoomUser": "대화상대 없음",
+    "existOfflineUser": "오프라인 입니다.",
+    "existOfflineUsers": "일부 인원이 오프라인 입니다.",
     "event": {
       "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
       "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",