Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

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

@@ -114,32 +114,13 @@
         </mat-radio-group>
       </form>
     </div>
-    <div
+    <div>
-      *ngFor="let message of messageList"
+      <ucap-message-list-item
-      (click)="onClickDetail(message)"
+        *ngFor="let message of messageList"
-      class="message-item"
+        [message]="message"
-    >
+        (click)="onClickDetail(message)"
-      <dl>
+        class="message-item"
-        <dt>
+      ></ucap-message-list-item>
-          <mat-icon
-            *ngIf="!!message.resType && message.resType === ContentType.Image"
-            >image</mat-icon
-          >
-          <mat-icon
-            *ngIf="
-              !!message.resType && message.resType === ContentType.AttachFile
-            "
-            >attach_file</mat-icon
-          >
-          <ul>
-            <li>{{ message.userName }}</li>
-            <li>{{ message.title }}</li>
-          </ul>
-        </dt>
-        <dd>
-          {{ message.regDate | dateToStringFormat: 'MM:DD' }}
-        </dd>
-      </dl>
     </div>
   </div>
 </div>

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

@@ -59,9 +59,10 @@
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
           [userInfo]="userInfo"
-          [checkable]="true"
           [sessionVerinfo]="sessionVerinfo"
           [selectedUserList]="selectedUserList"
+          [checkable]="true"
+          [checkDisabled]="!getCheckableUser(userInfo)"
           [isChecked]="getCheckedUser(userInfo)"
           (checkUser)="onCheckUser($event)"
           (openProfile)="onClickOpenProfile($event)"

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

@@ -6,8 +6,6 @@ import {
   EventEmitter,
   Input,
   ViewChild,
-  AfterViewInit,
-  AfterContentChecked,
   AfterViewChecked
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@@ -65,6 +63,9 @@ export class OrganizationComponent
   /** 선택된 사용자의 리스트 */
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
   @Input()
+  /** 선택할 수 없는 사용자 리스트 */
+  ignoreUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
   isVisible = true;
 
   @Output()
@@ -339,6 +340,17 @@ export class OrganizationComponent
       return true;
     }
   }
+  /** ignoreUserList(선택 무시할 인원) 이 있을 경우 판단하여 checkable 판단. */
+  getCheckableUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (
+      !!this.ignoreUserList &&
+      this.ignoreUserList.filter(user => user.seq === userInfo.seq).length > 0
+    ) {
+      return false;
+    }
+
+    return true;
+  }
   /** 리스트 checkable 할 경우 checkbox 의 isChecked 를 관장하며 리스트의 전체선택 여부를 판단한다. */
   getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     if (!!this.selectedUserList && this.selectedUserList.length > 0) {

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

@@ -1,14 +1,16 @@
 <div fxLayout="column" class="rightDrawer-albumbox">
   <div>
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
       <mat-tab label="Image"></mat-tab>
       <mat-tab label="Video"></mat-tab>
     </mat-tab-group>
   </div>
   <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
-    <!--<ng-container *ngIf="!selectedFile">-->
     <ng-container *ngIf="!selectedFile">
-      <!--이미지 빈화면-->
       <div class="empty-msg" *ngIf="currentTabIndex === 0">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -20,6 +22,7 @@
           stroke-width="1.5"
           stroke-linecap="butt"
           stroke-linejoin="round"
+          aria-label="image"
         >
           <rect x="3" y="3" width="18" height="18" rx="2" />
           <circle cx="8.5" cy="8.5" r="1.5" />
@@ -27,7 +30,7 @@
         </svg>
         <span>Select File.</span>
       </div>
-      <!--비디오 빈화면-->
+
       <div class="empty-msg" *ngIf="currentTabIndex === 1">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -39,6 +42,7 @@
           stroke-width="1.5"
           stroke-linecap="butt"
           stroke-linejoin="round"
+          aria-label="video"
         >
           <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
           <line x1="7" y1="2" x2="7" y2="22"></line>
@@ -89,6 +93,12 @@
       >
         <dl>
           <dt>
+            <div
+              *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
+              class="spinner"
+            >
+              <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
+            </div>
             <div
               *ngIf="
                 !!fileInfo.eventInfo &&
@@ -146,6 +156,7 @@
       mat-flat-button
       [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
       class="mat-primary"
+      (click)="onClickDownloadAll()"
     >
       Download All
     </button>

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

@@ -23,56 +23,56 @@
   }
 }
 
-.select-filebox{
+.select-filebox {
-  display:flex;
+  display: flex;
   flex-flow: column;
-  margin:10px;
+  margin: 10px;
-  padding:10px;
+  padding: 10px;
-  border:1px solid #cccccc;
+  border: 1px solid #cccccc;
   border-radius: 4px;
-  .select-file{
+  .select-file {
     color: #212121;
     border-bottom: 1px dotted #dddddd;
-    text-align:center;
+    text-align: center;
-    padding-bottom:10px;
+    padding-bottom: 10px;
   }
-  ul{
+  ul {
-    padding-top:10px;
+    padding-top: 10px;
-    li{
+    li {
       @include ellipsis(1);
-      &.name{
+      &.name {
-        font-weight:600;
+        font-weight: 600;
       }
     }
   }
-  .empty-msg{
+  .empty-msg {
-    display:inline-flex;
+    display: inline-flex;
     flex-flow: column;
-    margin:auto 0;
+    margin: auto 0;
     align-items: center;
     justify-content: center;
-    color:#999999;
+    color: #999999;
-    span{
+    span {
-      padding:6px;
+      padding: 6px;
     }
   }
 }
 
-.search-list{
+.search-list {
-  display:flex;
+  display: flex;
-  padding:0 10px;
+  padding: 0 10px;
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
 
   .img-item {
     cursor: pointer;
-    margin-bottom:10px;
+    margin-bottom: 10px;
-    margin-right:9px;
+    margin-right: 9px;
     position: relative;
     height: 150px;
-    dl{
+    dl {
-      dt{
+      dt {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -81,43 +81,59 @@
         background-color: #efefef;
         border: 1px dotted #cccccc;
         box-sizing: border-box;
-        img{
+        img {
-          width:100%;
+          width: 100%;
-          height:100%;
+          height: 100%;
         }
       }
-      dd{
+      dd {
-        .btn-download{
+        .btn-download {
-        margin-left:auto;
+          margin-left: auto;
         }
       }
     }
-    &:nth-child(3n+0){
+    &:nth-child(3n + 0) {
-      margin-right:0;
+      margin-right: 0;
     }
   }
 }
 
-::ng-deep .album-scrollbar{
+::ng-deep .album-scrollbar {
-  .ps{
+  .ps {
-    .ps-content{
+    .ps-content {
-      display:flex;
+      display: flex;
       flex-flow: wrap;
     }
   }
 }
 .preview-image,
-.preview-video{
+.preview-video {
   max-height: 140px;
 }
 
 .btn-box {
-  position:absolute;
+  position: absolute;
-  bottom:0;
+  bottom: 0;
-  height:50px;
+  height: 50px;
-  margin-bottom:10px;
+  margin-bottom: 10px;
-  width:100%;
+  width: 100%;
   button {
     margin: 5px;
   }
 }
+
+.spinner {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  padding: 15px 0;
+  background: rgb(255, 255, 255, 0.6);
+  display: table;
+  text-align: center;
+
+  span {
+    display: table-cell;
+    vertical-align: middle;
+    color: #666666;
+  }
+}

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

@@ -1,5 +1,4 @@
-import { Component, OnInit, ViewChild, OnDestroy, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { MatPaginator, MatTableDataSource } from '@angular/material';
 import {
   FileInfo,
   FileDownloadInfo,
@@ -9,14 +8,9 @@ import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
+import { tap, map, take, finalize } from 'rxjs/operators';
-import { tap, map } from 'rxjs/operators';
+import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
-import {
+import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
-  Info,
-  EventJson,
-  FileEventJson
-} from '@ucap-webmessenger/protocol-event';
-import { FileUtil } from '@ucap-webmessenger/core';
 import { CommonApiService } from '@ucap-webmessenger/api-common';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
@@ -26,11 +20,14 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { FileDownloadItem } from '@ucap-webmessenger/api';
 
 export interface FileInfoTotal {
   info: FileInfo;
   checkInfo: FileDownloadInfo[];
   eventInfo?: Info<FileEventJson>;
+  fileDownloadItem: FileDownloadItem;
 }
 
 @Component({
@@ -58,8 +55,9 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
     private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
   ) {
     this.loginRes = this.sessionStorageService.get<LoginResponse>(
       KEY_LOGIN_RES_INFO
@@ -113,7 +111,8 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
                 checkInfo => checkInfo.seq === fileInfo.seq
               ),
               eventInfo:
-                events.length > 0 ? (events[0] as Info<FileEventJson>) : null
+                events.length > 0 ? (events[0] as Info<FileEventJson>) : null,
+              fileDownloadItem: new FileDownloadItem()
             });
           });
 
@@ -197,7 +196,61 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
   }
 
   onClickDownload(fileInfo: FileInfoTotal) {
-    console.log(fileInfo);
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickDownloadAll(): void {
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
   }
 
   onClickOpenDownloadFolder(): void {
@@ -210,7 +263,7 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
         }
       })
       .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
       });
   }
 }

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

@@ -1,6 +1,10 @@
 <div fxLayout="column" class="rightDrawer-filebox">
   <div class="rightDrawer-tab">
-    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
       <mat-tab label="Receive"></mat-tab>
       <mat-tab label="Send"></mat-tab>
     </mat-tab-group>
@@ -47,11 +51,31 @@
           <li>
             <span class="text-accent-color">date :</span>
             {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
+            <span *ngIf="loginRes.fileRetentionPeriod > 0">
+              ~
+              {{
+                selectedFile.info.sendDate
+                  | dateDistanceToDay: loginRes.fileRetentionPeriod
+                  | dateToStringFormat: 'YYYY.MM.DD'
+              }}
+            </span>
           </li>
         </ul>
       </div>
       <div class="select-file-option">
-        <span matTooltip="다운로드" class="text-accent-darkest">
+        <span
+          matTooltip="다운로드"
+          class="text-accent-darkest"
+          (click)="onClickDownload(selectedFile)"
+        >
+          <mat-progress-spinner
+            *ngIf="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            mode="determinate"
+            diameter="30"
+            strokeWidth="2"
+            [value]="selectedFile.fileDownloadItem.downloadingProgress$ | async"
+            style="position: absolute;"
+          ></mat-progress-spinner>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -158,8 +182,24 @@
             </div>
             <div class="download-period text-accent-color">
               <!--{{ element.info.size | ucapBytes }}-->
-              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
+              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
-              2020.01.23
+              <span *ngIf="loginRes.fileRetentionPeriod > 0">
+                ~
+                {{
+                  element.info.sendDate
+                    | dateDistanceToDay: loginRes.fileRetentionPeriod
+                    | dateToStringFormat: 'YYYY.MM.DD'
+                }}
+              </span>
+            </div>
+            <div
+              *ngIf="element.fileDownloadItem.downloadingProgress$ | async"
+              class="progress"
+            >
+              <mat-progress-bar
+                mode="determinate"
+                [value]="element.fileDownloadItem.downloadingProgress$ | async"
+              ></mat-progress-bar>
             </div>
           </td>
         </ng-container>
@@ -199,6 +239,7 @@
         mat-flat-button
         [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
         class="mat-primary"
+        (click)="onClickDownloadAll()"
       >
         Download All
       </button>

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

@@ -107,6 +107,14 @@
         width: 100%;
         @include ellipsis(1);
       }
+
+      .progress {
+        position: relative;
+
+        .mat-progress-bar {
+          position: absolute;
+        }
+      }
     }
   }
 }

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

@@ -9,18 +9,21 @@ import { Subscription, combineLatest } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
+import { tap, map, take, finalize } from 'rxjs/operators';
-import { tap, map } from 'rxjs/operators';
+import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
-import { FileUtil } from '@ucap-webmessenger/core';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { NGXLogger } from 'ngx-logger';
+import { FileDownloadItem } from '@ucap-webmessenger/api';
+import { SnackBarService } from '@ucap-webmessenger/ui';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
 
 export interface FileInfoTotal {
   info: FileInfo;
   checkInfo: FileDownloadInfo[];
+  fileDownloadItem: FileDownloadItem;
 }
 
 @Component({
@@ -49,8 +52,10 @@ export class FileBoxComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
+    private commonApiService: CommonApiService,
+    private snackBarService: SnackBarService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private loggger: NGXLogger
+    private logger: NGXLogger
   ) {
     this.loginRes = this.sessionStorageService.get<LoginResponse>(
       KEY_LOGIN_RES_INFO
@@ -89,7 +94,8 @@ export class FileBoxComponent implements OnInit, OnDestroy {
               info: fileInfo,
               checkInfo: fileInfoCheckList.filter(
                 checkInfo => checkInfo.seq === fileInfo.seq
-              )
+              ),
+              fileDownloadItem: new FileDownloadItem()
             });
           });
 
@@ -217,6 +223,64 @@ export class FileBoxComponent implements OnInit, OnDestroy {
     this.selectedFile = row;
   }
 
+  onClickDownload(fileInfo: FileInfoTotal) {
+    this.commonApiService
+      .fileTalkDownload({
+        userSeq: this.loginRes.userSeq,
+        deviceType: DeviceType.PC,
+        token: this.loginRes.tokenString,
+        attachmentsSeq: fileInfo.info.seq,
+        fileDownloadItem: fileInfo.fileDownloadItem
+      })
+      .pipe(
+        take(1),
+        map(async rawBlob => {
+          const mimeType = MimeUtil.getMimeFromExtension(
+            FileUtil.getExtension(fileInfo.info.name)
+          );
+          const blob = rawBlob.slice(0, rawBlob.size, mimeType);
+
+          FileUtil.fromBlobToBuffer(blob)
+            .then(buffer => {
+              this.nativeService
+                .saveFile(buffer, fileInfo.info.name, mimeType)
+                .then(result => {
+                  if (!!result) {
+                    this.snackBarService.open(
+                      `파일이 경로[${result}]에 저장되었습니다.`,
+                      '',
+                      {
+                        duration: 3000,
+                        verticalPosition: 'bottom'
+                      }
+                    );
+                  } else {
+                    this.snackBarService.open('파일 저장에 실패하였습니다.');
+                  }
+                })
+                .catch(reason => {
+                  this.snackBarService.open('파일 저장에 실패하였습니다.');
+                });
+            })
+            .catch(reason => {
+              this.logger.error('download', reason);
+            });
+        }),
+        finalize(() => {
+          setTimeout(() => {
+            fileInfo.fileDownloadItem.downloadingProgress$ = undefined;
+          }, 1000);
+        })
+      )
+      .subscribe();
+  }
+
+  onClickDownloadAll(): void {
+    this.selectedFileList.forEach(fileInfo => {
+      this.onClickDownload(fileInfo);
+    });
+  }
+
   onClickOpenDownloadFolder(): void {
     this.nativeService
       .openDefaultDownloadFolder()
@@ -227,7 +291,7 @@ export class FileBoxComponent implements OnInit, OnDestroy {
         }
       })
       .catch(reason => {
-        this.loggger.error(reason);
+        this.logger.error(reason);
       });
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -73,6 +73,7 @@
                   #groupExpansionPanel
                   [groupBuddyList]="groupBuddyList$ | async"
                   [selectedUserList]="selectedUserList"
+                  [ignoreUserList]="data.curRoomUser"
                   [checkable]="true"
                   (checkGroup)="onCheckGroup($event)"
                   class="group-expansion"
@@ -84,6 +85,7 @@
                     [selectedUserList]="selectedUserList"
                     [isChecked]="getCheckedUser(userInfo)"
                     [checkable]="true"
+                    [checkDisabled]="!getCheckableUser(userInfo)"
                     (checkUser)="onCheckUser($event)"
                     (click)="onToggleUser(userInfo)"
                     class="list-item-frame"
@@ -117,6 +119,7 @@
                   [selectedUserList]="selectedUserList"
                   [isChecked]="getCheckedUser(userInfo)"
                   [checkable]="true"
+                  [checkDisabled]="!getCheckableUser(userInfo)"
                   (checkUser)="onCheckUser($event)"
                   (click)="onToggleUser(userInfo)"
                 >
@@ -134,6 +137,7 @@
               <app-layout-chat-left-sidenav-organization
                 [showTitle]="false"
                 [selectedUserList]="selectedUserList"
+                [ignoreUserList]="data.curRoomUser"
                 [isUserSelect]="true"
                 [isVisible]="currentTabIndex === 1"
                 (checkAllUser)="onCheckAllUser($event)"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -63,7 +63,7 @@ export interface CreateChatDialogData {
   group?: GroupDetailData;
   /** CASE :: EventForward */
   ignoreRoom?: RoomInfo[];
-  /** CASE :: EditCharMember */
+  /** CASE :: EditChatMember */
   curRoomUser?: (
     | UserInfo
     | UserInfoSS
@@ -367,20 +367,47 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
   }) {
     if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach(item => {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
-        if (
+        params.groupBuddyList.buddyList.forEach(item => {
-          this.selectedUserList.filter(user => user.seq === item.seq).length ===
+          if (
-          0
+            this.selectedUserList.filter(user => user.seq === item.seq)
-        ) {
+              .length === 0 &&
-          this.selectedUserList = [...this.selectedUserList, item];
+            this.data.curRoomUser.filter(curUser => curUser.seq === item.seq)
-        }
+              .length === 0
-      });
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      } else {
+        params.groupBuddyList.buddyList.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      }
     } else {
-      this.selectedUserList = this.selectedUserList.filter(
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
-        item =>
+        this.selectedUserList = this.selectedUserList.filter(
-          params.groupBuddyList.buddyList.filter(del => del.seq === item.seq)
+          item =>
-            .length === 0
+            params.groupBuddyList.buddyList
-      );
+              .filter(
+                del =>
+                  this.data.curRoomUser.filter(
+                    curUser => curUser.seq === del.seq
+                  ).length === 0
+              )
+              .filter(del => del.seq === item.seq).length === 0
+        );
+      } else {
+        this.selectedUserList = this.selectedUserList.filter(
+          item =>
+            params.groupBuddyList.buddyList.filter(del => del.seq === item.seq)
+              .length === 0
+        );
+      }
     }
     this.changeDetectorRef.detectChanges();
   }
@@ -390,20 +417,51 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     isChecked: boolean;
     userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
   }) {
-    params.userInfos.forEach(userInfo => {
+    // params.userInfos.forEach(userInfo => {
-      if (params.isChecked) {
+    if (params.isChecked) {
-        if (
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
-          this.selectedUserList.filter(user => user.seq === userInfo.seq)
+        params.userInfos.forEach(item => {
-            .length === 0
+          if (
-        ) {
+            this.selectedUserList.filter(user => user.seq === item.seq)
-          this.selectedUserList = [...this.selectedUserList, userInfo];
+              .length === 0 &&
-        }
+            this.data.curRoomUser.filter(curUser => curUser.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      } else {
+        params.userInfos.forEach(item => {
+          if (
+            this.selectedUserList.filter(user => user.seq === item.seq)
+              .length === 0
+          ) {
+            this.selectedUserList = [...this.selectedUserList, item];
+          }
+        });
+      }
+    } else {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        this.selectedUserList = this.selectedUserList.filter(
+          item =>
+            params.userInfos
+              .filter(
+                del =>
+                  this.data.curRoomUser.filter(
+                    curUser => curUser.seq === del.seq
+                  ).length === 0
+              )
+              .filter(del => del.seq === item.seq).length === 0
+        );
       } else {
         this.selectedUserList = this.selectedUserList.filter(
-          user => user.seq !== userInfo.seq
+          item =>
+            params.userInfos.filter(userInfo => userInfo.seq === item.seq)
+              .length === 0
         );
       }
-    });
+    }
+    // });
   }
 
   /** 동료그룹>부서원, 조직도>부서원 :: 리스트의 checkbox 의 이벤트를 받아 선택된 유저리스트를 수집. */
@@ -412,6 +470,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
   }) {
     if (params.isChecked) {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        if (
+          this.data.curRoomUser.filter(user => user.seq === params.userInfo.seq)
+            .length > 0
+        ) {
+          return;
+        }
+      }
+
       if (
         this.selectedUserList.filter(user => user.seq === params.userInfo.seq)
           .length === 0 &&
@@ -420,6 +487,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
         this.selectedUserList = [...this.selectedUserList, params.userInfo];
       }
     } else {
+      if (this.data.type === UserSelectDialogType.EditChatMember) {
+        if (
+          this.data.curRoomUser.filter(user => user.seq === params.userInfo.seq)
+            .length > 0
+        ) {
+          return;
+        }
+      }
+
       this.selectedUserList = this.selectedUserList.filter(
         item => item.seq !== params.userInfo.seq
       );
@@ -427,6 +503,15 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     this.changeDetectorRef.detectChanges();
   }
   onToggleUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (this.data.type === UserSelectDialogType.EditChatMember) {
+      if (
+        this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
+        0
+      ) {
+        return;
+      }
+    }
+
     if (
       this.selectedUserList.filter(user => user.seq === userInfo.seq).length ===
       0
@@ -459,6 +544,20 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** 그룹>부서원의 체크 가능여부 판단. */
+  getCheckableUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (this.data.type === UserSelectDialogType.EditChatMember) {
+      if (
+        this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
+        0
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
   /** 그룹>부서원 리스트의 ischecked 를 판단. */
   getCheckedUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     if (!!this.selectedUserList && this.selectedUserList.length > 0) {

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

@@ -16,7 +16,8 @@ import {
   MatRippleModule,
   MatSortModule,
   MatTooltipModule,
-  MatSidenavModule
+  MatSidenavModule,
+  MatProgressSpinnerModule
 } from '@angular/material';
 
 import { MatSelectModule } from '@angular/material/select';
@@ -75,6 +76,7 @@ import { DIALOGS } from './dialogs';
     MatMenuModule,
     MatListModule,
     MatProgressBarModule,
+    MatProgressSpinnerModule,
     MatTabsModule,
     MatToolbarModule,
     MatChipsModule,

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -5,6 +5,33 @@
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
+    <button
+      mat-icon-button
+      class="button app-layout-native-title-bar-logout"
+      matTooltip="웹링크"
+      (click)="onToggleWebLinkSelector()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+        alt="웹링크"
+        class="stroke-warn-color"
+      >
+        <path
+          d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
+        />
+      </svg>
+    </button>
+
+    <span class="stroke-bar"></span>
+
     <button
       mat-icon-button
       class="button app-layout-native-title-bar-setting"
@@ -176,3 +203,18 @@
     </button>
   </div>
 </mat-toolbar>
+
+<div [style.display]="showWeblink ? 'inherit' : 'none'" class="weblink">
+  <div class="container">
+    <div class="img-item">
+      <ul>
+        <li *ngFor="let link of weblink">
+          <div class="icon">
+            <span class="mdi mdi-star-circle-outline mdi-48px"></span>
+          </div>
+          <div class="description ellipsis">{{ link.title }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -132,3 +132,58 @@
     }
   }
 }
+
+.weblink {
+  position: absolute;
+  width: 350px;
+  height: 40%;
+  top: 60px;
+  right: 15px;
+  background: #fff;
+  border-radius: 5px;
+  border: 1px solid #666;
+  z-index: 2;
+  padding: 10px;
+  display: none;
+
+  .container {
+    display: flex;
+    padding: 0 10px;
+    height: 100%;
+    overflow-y: auto;
+    flex-wrap: wrap;
+
+    .img-item {
+      cursor: pointer;
+      margin-bottom: 10px;
+      margin-right: 9px;
+      position: relative;
+      height: 150px;
+
+      ul {
+        li {
+          list-style: none;
+          float: left;
+          margin: 0 10px 20px 10px;
+
+          .icon {
+            height: 50px;
+            width: 50px;
+            line-height: 50px;
+          }
+          .description {
+            width: 50px;
+            text-align: center;
+          }
+          .ellipsis {
+            display: block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-wrap: normal;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 import {
   UCAP_NATIVE_SERVICE,
   NativeService,
@@ -28,6 +28,121 @@ export class TopBarComponent implements OnInit, OnDestroy {
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
 
+  showWeblink = false;
+  weblink: {
+    title: string;
+    url: string;
+    order: number;
+    activeYn: boolean;
+  }[] = [
+    {
+      order: 0,
+      title: '웹하드',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=WHD_78&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'DSP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=GWS_01&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'SMS',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SMS_21&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '화상회의',
+      activeYn: true,
+      url:
+        'http://dsview.daesang.com/plugin/sso_login.asp?userid=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: 'EP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=EPS_07&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OP회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOP_05&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OM회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOM_09&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '코끼리',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http%3A%2F%2Fdsp%2Edaesang%2Ecom%3A80%2FDS%5F10%2Femate%5Fapp%2Felephant%2Fmaster%2Ensf%2Fmain%2Ehtml%3Freadform%26kind%3D3'
+    },
+    {
+      order: 0,
+      title: 'IT서비스데스크',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=HPD_13&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '개인속보',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=DSB_43&eMatePTK=(%USER_ID%)'
+    },
+
+    {
+      order: 0,
+      title: '메일 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '메일 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+    {
+      order: 0,
+      title: '결제 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '결제 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+
+    {
+      order: 0,
+      title: '3개월 비밀번호 변경창 url',
+      activeYn: true,
+      url: 'sso.daesang.com / modify.do'
+    }
+  ];
+
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
@@ -75,4 +190,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
       })
     );
   }
+
+  onToggleWebLinkSelector(): void {
+    this.showWeblink = !this.showWeblink;
+  }
 }

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

@@ -82,6 +82,10 @@ export class Effects {
                   userInfos.push(...(res as DeptUserData).userInfos);
                   break;
                 case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                  userInfos.sort((a, b) => {
+                    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+                  });
+
                   this.store.dispatch(
                     deptUserSuccess({
                       userInfos,

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -76,6 +76,7 @@
             *ngIf="checkable"
             #checkbox
             [checked]="getCheckedGroup(node.groupDetail)"
+            [disabled]="!getCheckableGroup(node.groupDetail)"
             (change)="onChangeCheck(checkbox.checked, node.groupDetail)"
             (click)="$event.stopPropagation()"
             class="group-check"

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -135,10 +135,12 @@ export class ExpansionPanelComponent
 
   @Input()
   checkable = false;
-
   @Input()
   /** 선택된 사용자의 리스트 */
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
+  /** 선택할 수 없는 사용자 리스트 */
+  ignoreUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
   @Output()
   more = new EventEmitter<{
@@ -270,6 +272,24 @@ export class ExpansionPanelComponent
     }
   }
 
+  getCheckableGroup(group: GroupDetailData) {
+    if (!!this.ignoreUserList && this.ignoreUserList.length > 0) {
+      let allExist = true;
+      group.userSeqs.some(seq => {
+        if (this.ignoreUserList.filter(item => item.seq === seq).length === 0) {
+          allExist = false;
+          return true;
+        }
+      });
+
+      if (allExist) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
   /** 그룹리스트가 checkable 할 경우 checkbox 의 isChecked 를 관장하며, 하위 부서원들의 전체선택여부를 판단한다. */
   getCheckedGroup(group: GroupDetailData) {
     if (!group || group === undefined) {

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

@@ -36,6 +36,7 @@
     *ngIf="checkable"
     #checkbox
     [checked]="isChecked"
+    [disabled]="checkDisabled"
     (change)="onChangeCheck(checkbox.checked, userInfo)"
     (click)="$event.stopPropagation()"
   >

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

@@ -35,6 +35,8 @@ export class UserListItemComponent implements OnInit {
   @Input()
   checkable = false;
   @Input()
+  checkDisabled = false;
+  @Input()
   isChecked = false;
   @Input()
   compactable = false;

projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts

@@ -3,7 +3,7 @@ import { StringUtil } from '../utils/string.util';
 import moment from 'moment';
 
 @Pipe({
-  name: 'dateToStringChatList',
+  name: 'dateToStringChatList'
 })
 export class DateToStringForChatRoomListPipe implements PipeTransform {
   transform(value: any): string {
@@ -39,7 +39,7 @@ export class DateToStringForChatRoomListPipe implements PipeTransform {
 }
 
 @Pipe({
-  name: 'dateToStringFormat',
+  name: 'dateToStringFormat'
 })
 export class DateToStringFormatPipe implements PipeTransform {
   transform(value: any, format?: string): string {
@@ -52,3 +52,15 @@ export class DateToStringFormatPipe implements PipeTransform {
     }
   }
 }
+
+@Pipe({
+  name: 'dateDistanceToDay'
+})
+export class DateDistanceToDatePipe implements PipeTransform {
+  transform(value: any, distanceDay?: number): Date {
+    distanceDay = distanceDay || 0;
+    const date: Date = moment(value.toString()).toDate();
+    date.setDate(date.getDate() + distanceDay);
+    return date;
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -56,7 +56,8 @@ import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
 import {
   DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe
+  DateToStringFormatPipe,
+  DateDistanceToDatePipe
 } from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
@@ -93,6 +94,7 @@ const PIPES = [
   HtmlToLinefeedPipe,
   DateToStringForChatRoomListPipe,
   DateToStringFormatPipe,
+  DateDistanceToDatePipe,
   SecondsToMinutesPipe,
   LinkyPipe
 ];