오픈된 대화방의 파일 송수신시 파일함 정보 갱신하도록 수정.

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

@@ -8,7 +8,7 @@
     <mat-tab [aria-label]="MainMenu.Group">
       <ng-template mat-tab-label>
         <!--<mat-icon>group</mat-icon>-->
-        <div class="icon-item">
+        <div class="icon-item" matTooltip="Group" matTooltipPosition="after">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -43,6 +43,8 @@
           matBadgeDescription="확인하지 않은 메시지가 있습니다."
           matBadgeColor="accent"
           matBadgePosition="above after"
+          matTooltip="Chat"
+          matTooltipPosition="after"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -65,7 +67,11 @@
     <mat-tab [aria-label]="MainMenu.Organization">
       <ng-template mat-tab-label>
         <!--<mat-icon>device_hub</mat-icon>-->
-        <div class="icon-item">
+        <div
+          class="icon-item"
+          matTooltip="Organization"
+          matTooltipPosition="after"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -90,7 +96,7 @@
     <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
         <!--<mat-icon>phone</mat-icon>-->
-        <div class="icon-item">
+        <div class="icon-item" matTooltip="Call" matTooltipPosition="after">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -81,6 +81,7 @@
     </ng-container>
   </div>
   <div class="search-list">
+    <perfect-scrollbar>
       <div
         *ngFor="let fileInfo of filteredList"
         class="img-item"
@@ -131,6 +132,7 @@
           </dd>
         </dl>
       </div>
+    </perfect-scrollbar>
   </div>
   <div
     fxFlex="1 1 50px"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

@@ -6,12 +6,24 @@
     </mat-tab-group>
   </div>
   <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
-    <ng-container *ngIf="!selectedFile"  >
+    <ng-container *ngIf="!selectedFile">
       <div class="empty-msg">
-        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        <svg
-          stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" />
+          width="36"
-          <path d="M13 3v6h6" /></svg>
+          height="36"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z"
+          />
+          <path d="M13 3v6h6" />
+        </svg>
         <span>Select File.</span>
       </div>
     </ng-container>
@@ -27,7 +39,7 @@
           <div class="ico"></div>
         </div>
         <ul>
-          <li class="name"> {{ selectedFile.info.name }}</li>
+          <li class="name">{{ selectedFile.info.name }}</li>
           <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
           <li>
             date :
@@ -36,34 +48,77 @@
         </ul>
       </div>
       <div class="select-file-option">
-        <!--툴팁 부탁해요 -->
         <span matTooltip="다운로드" class="text-accent-darkest">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          <svg
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+            xmlns="http://www.w3.org/2000/svg"
-              <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+            />
+          </svg>
         </span>
         <span matTooltip="나에게전달" class="text-accent-darkest">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          <svg
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+            xmlns="http://www.w3.org/2000/svg"
-              <path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"
+            />
             <circle cx="12" cy="10" r="3" />
-              <circle cx="12" cy="12" r="10" /></svg>
+            <circle cx="12" cy="12" r="10" />
+          </svg>
         </span>
         <span matTooltip="파일전달" class="text-accent-darkest">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          <svg
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
             <g fill="none" fill-rule="evenodd">
-                <path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
+              <path
+                d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"
+              />
             </g>
           </svg>
         </span>
         <span matTooltip="파일삭제" class="text-accent-darkest">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          <svg
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
             <path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
-              <path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /></svg>
+            <path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" />
+          </svg>
         </span>
-
       </div>
     </ng-container>
   </div>
@@ -99,7 +154,8 @@
           </div>
           <div class="download-period text-accent-color">
             <!--{{ element.info.size | ucapBytes }}-->
-            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23
+            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
+            2020.01.23
           </div>
         </td>
       </ng-container>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts

@@ -141,6 +141,11 @@ export class FileBoxComponent implements OnInit, OnDestroy {
       .sortData(this.dataSource.data, this.sort)
       .filter((u, i) => i >= this.paginator.pageSize * this.paginator.pageIndex)
       .filter((u, i) => i < this.paginator.pageSize);
+
+    if (data.length === 0) {
+      return false;
+    }
+
     if (
       data.filter(
         dInfo =>

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -27,7 +27,8 @@ import {
   MatTableModule,
   MatPaginatorModule,
   MatRippleModule,
-  MatSortModule
+  MatSortModule,
+  MatTooltipModule
 } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
@@ -80,6 +81,7 @@ import { DIALOGS } from './dialogs';
     MatSortModule,
     MatPaginatorModule,
     MatRippleModule,
+    MatTooltipModule,
 
     PerfectScrollbarModule,
 

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

@@ -1,6 +1,6 @@
 import {
   CommonApiService,
-  MassTalkSaveRequest,
+  MassTalkSaveRequest
 } from '@ucap-webmessenger/api-common';
 import { KEY_ENVIRONMENTS_INFO } from './../../../types/environment.type';
 import { Injectable } from '@angular/core';
@@ -19,7 +19,7 @@ import {
   catchError,
   exhaustMap,
   withLatestFrom,
-  concatMap,
+  concatMap
 } from 'rxjs/operators';
 import moment from 'moment';
 import {
@@ -38,7 +38,7 @@ import {
   ReadNotification,
   SSVC_TYPE_EVENT_SEND_RES,
   SSVC_TYPE_EVENT_SEND_NOTI,
-  EventJson,
+  EventJson
 } from '@ucap-webmessenger/protocol-event';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -74,13 +74,13 @@ import {
   infoIntervalClear,
   fileInfo,
   fileInfoSuccess,
-  fileInfoFailure,
+  fileInfoFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
   RoomInfo,
   RoomProtocolService,
-  OpenResponse,
+  OpenResponse
 } from '@ucap-webmessenger/protocol-room';
 import { LoginInfo, KEY_LOGIN_INFO, EnvironmentsInfo } from '@app/types';
 import { Dictionary } from '@ngrx/entity';
@@ -99,7 +99,7 @@ import {
   InfoData as FileInfoData,
   InfoCheckData as FileInfoCheckData,
   InfoResponse as FileInfoResponse,
-  FileType,
+  FileType
 } from '@ucap-webmessenger/protocol-file';
 
 @Injectable()
@@ -111,7 +111,7 @@ export class Effects {
         return info({
           roomSeq: action.roomSeq,
           baseSeq: 0,
-          requestCount: CONST.EVENT_INFO_READ_COUNT,
+          requestCount: CONST.EVENT_INFO_READ_COUNT
         });
       })
     )
@@ -139,14 +139,14 @@ export class Effects {
                       this.store.dispatch(
                         infoSuccess({
                           infoList,
-                          res: res as InfoResponse,
+                          res: res as InfoResponse
                         })
                       );
                     } else {
                       this.store.dispatch(
                         infoMoreSuccess({
                           infoList,
-                          res: res as InfoResponse,
+                          res: res as InfoResponse
                         })
                       );
                     }
@@ -161,7 +161,7 @@ export class Effects {
                       this.store.dispatch(
                         read({
                           roomSeq: req.roomSeq,
-                          lastReadSeq: Number(maxSeq),
+                          lastReadSeq: Number(maxSeq)
                         })
                       );
 
@@ -171,8 +171,8 @@ export class Effects {
                           req: {
                             roomSeq: req.roomSeq,
                             // { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌
-                            type: FileType.All,
+                            type: FileType.All
-                          },
+                          }
                         })
                       );
                     }
@@ -217,7 +217,7 @@ export class Effects {
                       fileInfoSuccess({
                         fileInfoList,
                         fileInfoCheckList,
-                        res: res as FileInfoResponse,
+                        res: res as FileInfoResponse
                       })
                     );
                   }
@@ -321,7 +321,7 @@ export class Effects {
             this.store.dispatch(
               SyncStore.updateUnreadCount({
                 roomSeq: action.roomSeq,
-                noReadCnt: 0,
+                noReadCnt: 0
               })
             );
           }
@@ -339,7 +339,7 @@ export class Effects {
           map((res: SendResponse) => {
             return sendSuccess({
               senderSeq: action.senderSeq,
-              res,
+              res
             });
           }),
           catchError(error => of(sendFailure({ error })))
@@ -360,7 +360,7 @@ export class Effects {
               roomSeq: res.roomSeq,
               info: res.info,
               SVC_TYPE: res.SVC_TYPE,
-              SSVC_TYPE: res.SSVC_TYPE,
+              SSVC_TYPE: res.SSVC_TYPE
             })
           );
         })
@@ -380,7 +380,7 @@ export class Effects {
               roomSeq: noti.roomSeq,
               info: noti.info,
               SVC_TYPE: noti.SVC_TYPE,
-              SSVC_TYPE: noti.SSVC_TYPE,
+              SSVC_TYPE: noti.SSVC_TYPE
             })
           );
         })
@@ -404,8 +404,8 @@ export class Effects {
                 req: {
                   roomSeq: action.trgtRoomSeq,
                   eventType: action.req.eventType,
-                  sentMessage: action.req.sentMessage,
+                  sentMessage: action.req.sentMessage
-                },
+                }
               })
             );
           } else if (!!action.trgtUserSeqs && action.trgtUserSeqs.length > 0) {
@@ -425,7 +425,7 @@ export class Effects {
         return this.roomProtocolService
           .open({
             divCd: 'forwardOpen',
-            userSeqs: action.trgtUserSeqs,
+            userSeqs: action.trgtUserSeqs
           })
           .pipe(
             map((res: OpenResponse) => {
@@ -438,8 +438,8 @@ export class Effects {
                   req: {
                     roomSeq: res.res.roomSeq,
                     eventType: action.req.eventType,
-                    sentMessage: action.req.sentMessage,
+                    sentMessage: action.req.sentMessage
-                  },
+                  }
                 })
               );
               return res;
@@ -468,7 +468,7 @@ export class Effects {
             deviceType: environmentsInfo.deviceType,
             token: loginResInfo.tokenString,
             content: action.req.sentMessage,
-            roomSeq: action.req.roomSeq,
+            roomSeq: action.req.roomSeq
           };
 
           return this.commonApiService.massTalkSave(req).pipe(
@@ -480,8 +480,8 @@ export class Effects {
                     req: {
                       roomSeq: res.roomSeq,
                       eventType: EventType.MassText,
-                      sentMessage: res.returnJson,
+                      sentMessage: res.returnJson
-                    },
+                    }
                   })
                 );
               } else {
@@ -523,7 +523,7 @@ export class Effects {
               this.store.dispatch(
                 read({
                   roomSeq: action.roomSeq,
-                  lastReadSeq: action.info.seq,
+                  lastReadSeq: action.info.seq
                 })
               );
             }
@@ -545,13 +545,26 @@ export class Effects {
                 this.store.dispatch(
                   SyncStore.updateUnreadCount({
                     roomSeq: action.roomSeq,
-                    noReadCnt: noReadCnt + 1,
+                    noReadCnt: noReadCnt + 1
                   })
                 );
               }
             }
           }
 
+          if (action.info.type === EventType.File) {
+            // File 정보 수집.
+            this.store.dispatch(
+              fileInfo({
+                req: {
+                  roomSeq: action.roomSeq,
+                  // { 파일타입 } cf) I : 이미지 V: 동영상 F: 파일 "" 빈값이면 모든 타입을 내려줌
+                  type: FileType.All
+                }
+              })
+            );
+          }
+
           // 대화 > 리스트 :: finalEventMessage refresh
           this.store.dispatch(ChatStore.newEventMessage(action));
         })
@@ -598,7 +611,7 @@ export class Effects {
             SyncStore.refreshRoom({
               roomSeq: action.noti.roomSeq,
               isDetail: true,
-              localeCode: loginInfo.localeCode,
+              localeCode: loginInfo.localeCode
             })
           );
         })
@@ -645,7 +658,7 @@ export class Effects {
             SyncStore.refreshRoom({
               roomSeq: noti.roomSeq,
               isDetail: true,
-              localeCode: loginInfo.localeCode,
+              localeCode: loginInfo.localeCode
             })
           );
         })