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

2019-11-21 15:35:06 +09:00 · 2019-11-21 15:35:06 +09:00 · d81141b3b5
commit d81141b3b5
parent c59ef5eb49
6 changed files with 204 additions and 120 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/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"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/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"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/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"
-          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>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          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"
-              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>
+          <svg
+            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="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"
-              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" />
+          <svg
+            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="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"
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <svg
+            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"
-              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <svg
+            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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
+++ b/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 =>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/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,

--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/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
            })
          );
        })