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

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

@@ -33,6 +33,7 @@
   width: 70px;
   flex-direction: row;
 }
+
 ::ng-deep .organization-side {
   flex-direction: column;
   height: 100%;
@@ -44,6 +45,7 @@
         flex-flow: column;
         height: 280px;
         padding-top: 10px;
+        border-bottom: none;
         .mat-tab-label {
           width: 100%;
           height: 80px;
@@ -92,11 +94,15 @@
     .mat-tab-label-content {
       .icon-item {
         transform: scale(1);
-        /*svg {
-          stroke: #ef4c73;
-          fill: #ef4c73;
-        }*/
       }
     }
   }
 }
+
+::ng-deep .ps {
+  .ps-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -14,6 +14,7 @@
 }
 
 .list-search {
+  position: relative;
   display: flex;
   flex-direction: row;
   height: 60px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -16,13 +16,6 @@
     }
   }
 }
-::ng-deep .ps {
-  .ps-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
 
 .search-result {
   height: calc(100% - 130px);
@@ -52,7 +45,7 @@
   }
 }
 
-.list-item-frame{
-  width:100%;
-  height:100%;
-}
+.list-item-frame {
+  width: 100%;
+  height: 100%;
+}

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

@@ -886,13 +886,17 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           });
 
           if (!!result && !!result.choice && result.choice) {
-            const userSeqs: number[] = [];
+            const userSeqs: number[] = this.userInfoList.map(
+              userInfo => userInfo.seq
+            );
             if (
               !!result.selectedUserList &&
               result.selectedUserList.length > 0
             ) {
-              result.selectedUserList.map(user => {
-                userSeqs.push(user.seq);
+              result.selectedUserList.forEach(user => {
+                if (userSeqs.indexOf(user.seq) < 0) {
+                  userSeqs.push(user.seq);
+                }
               });
             }
 

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

@@ -9,4 +9,11 @@
   span{
     margin-left:auto;
   }
+}
+::ng-deep .mat-tab-labels {
+    display: flex;
+    width: 100%;
+    border-bottom: 2px solid #dddddd;
+    flex: 1 1 auto;
+    justify-content: space-around;
 }

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

@@ -1,4 +1,4 @@
-<div fxLayout="column" class="album-box">
+<div fxLayout="column" class="rightDrawer-albumbox">
   <div>
     <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
       <mat-tab label="Image"></mat-tab>
@@ -81,7 +81,7 @@
     </ng-container>
   </div>
   <div class="search-list">
-    <perfect-scrollbar>
+    <perfect-scrollbar class="album-scrollbar">
       <div
         *ngFor="let fileInfo of filteredList"
         class="img-item"

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

@@ -13,25 +13,23 @@
   }
 }
 
-.album-box {
+::ng-deep .rightDrawer-albumbox {
   height: 100%;
   overflow: hidden;
-
-  .search-list {
-    overflow: auto;
+  .mat-tab-labels {
+    .mat-tab-label {
+      width: 50%;
+    }
   }
 }
 
-::ng-deep .mat-tab-label{
-  width:50%;
-}
-
 .select-filebox{
   display:flex;
   flex-flow: column;
   margin:10px;
   padding:10px;
   border:1px solid #cccccc;
+  border-radius: 4px;
   .select-file{
     color: #212121;
     border-bottom: 1px dotted #dddddd;
@@ -66,6 +64,7 @@
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
+
   .img-item {
     cursor: pointer;
     margin-bottom:10px;
@@ -99,6 +98,14 @@
   }
 }
 
+::ng-deep .album-scrollbar{
+  .ps{
+    .ps-content{
+      display:flex;
+      flex-flow: wrap;
+    }
+  }
+}
 .preview-image,
 .preview-video{
   max-height: 140px;

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

@@ -123,56 +123,58 @@
     </ng-container>
   </div>
   <div fxFlex="0 0 auto" class="table-box">
-    <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="check">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox
-            #checkboxAll
-            [checked]="getCheckAllUser()"
-            (change)="onCheckAllkUser(checkboxAll.checked)"
-            (click)="$event.stopPropagation()"
-          >
-          </mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <mat-checkbox
-            #checkbox
-            [checked]="getCheckUser(element)"
-            (change)="onCheckUser(checkbox.checked, element)"
-            (click)="$event.stopPropagation()"
-          >
-          </mat-checkbox>
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
-          Name
-        </th>
-        <td mat-cell *matCellDef="let element" class="file-info">
-          <div class="file-name">
-            {{ element.info.name }}
-          </div>
-          <div class="download-period text-accent-color">
-            <!--{{ element.info.size | ucapBytes }}-->
-            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
-            2020.01.23
-          </div>
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="sendDate" class="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
-        <td mat-cell *matCellDef="let element">
-          <!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
-          {{ element.info.size | ucapBytes }}
-        </td>
-      </ng-container>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        (click)="onClickRow(row)"
-      ></tr>
-    </table>
+    <perfect-scrollbar class="album-scrollbar">
+      <table mat-table [dataSource]="dataSource" matSort>
+        <ng-container matColumnDef="check">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              #checkboxAll
+              [checked]="getCheckAllUser()"
+              (change)="onCheckAllkUser(checkboxAll.checked)"
+              (click)="$event.stopPropagation()"
+            >
+            </mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <mat-checkbox
+              #checkbox
+              [checked]="getCheckUser(element)"
+              (change)="onCheckUser(checkbox.checked, element)"
+              (click)="$event.stopPropagation()"
+            >
+            </mat-checkbox>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
+            Name
+          </th>
+          <td mat-cell *matCellDef="let element" class="file-info">
+            <div class="file-name">
+              {{ element.info.name }}
+            </div>
+            <div class="download-period text-accent-color">
+              <!--{{ element.info.size | ucapBytes }}-->
+              {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
+              2020.01.23
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="sendDate" class="date">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
+          <td mat-cell *matCellDef="let element">
+            <!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
+            {{ element.info.size | ucapBytes }}
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          (click)="onClickRow(row)"
+        ></tr>
+      </table>
+      </perfect-scrollbar>
   </div>
   <div class="footer-fix">
     <mat-paginator

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

@@ -13,7 +13,7 @@
   }
 }
 
-.rightDrawer-filebox {
+::ng-deep .rightDrawer-filebox {
   width: 100%;
   height: calc(100% - 60px);
   .rightDrawer-tab {
@@ -23,16 +23,13 @@
   }
 }
 
-::ng-deep .mat-tab-label {
-  width: 50%;
-}
-
 .select-filebox {
   position: relative;
   display: flex;
   flex-flow: column;
   margin: 10px;
   border: 1px solid #cccccc;
+  border-radius: 4px;
   .select-flie {
     display: flex;
     flex-flow: row;
@@ -114,7 +111,7 @@
   }
 }
 .table-box {
-  height: calc(100% - 450px);
+  height: calc(100% - 440px);
   overflow-y: auto;
 }
 .mat-paginator-container {

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

@@ -1,3 +1,48 @@
-div.message-box {
-  width: 600px;
+.list-search {
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0;
+  font-size: 14px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+  .searchbox {
+    width: 100%;
+    height: 100%;
+  }
+}
+::ng-deep .searchbox {
+  .mat-form-field {
+    display: block;
+    .mat-form-field-wrapper {
+      padding: 0;
+      padding-bottom: 0 !important;
+      height: 100%;
+      .mat-form-field-flex {
+        height: 59px;
+        padding: 0 10px 0 20px;
+        align-items: center;
+        .mat-form-field-infix {
+          width: 90%;
+          font-size: 14px;
+          border: none;
+        }
+        .mat-form-field-suffix {
+          .mat-icon {
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-wrapper {
+      padding: 0;
+    }
+    .mat-form-field-underline {
+      bottom: 0;
+      background-color: unset !important;
+    }
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts

@@ -3,7 +3,7 @@ import {
   OnInit,
   OnDestroy,
   Output,
-  EventEmitter,
+  EventEmitter
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Store, select } from '@ngrx/store';
@@ -21,13 +21,13 @@ import { DialogService } from '@ucap-webmessenger/ui';
 import {
   SelectGroupDialogComponent,
   SelectGroupDialogResult,
-  SelectGroupDialogData,
+  SelectGroupDialogData
 } from '../../dialogs/group/select-group.dialog.component';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 import {
   CreateChatDialogComponent,
   CreateChatDialogResult,
-  CreateChatDialogData,
+  CreateChatDialogData
 } from '../../dialogs/chat/create-chat.dialog.component';
 import { UserSelectDialogType } from '@app/types';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@@ -36,7 +36,7 @@ import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 @Component({
   selector: 'app-layout-chat-right-drawer-room-user-list',
   templateUrl: './room-user-list.component.html',
-  styleUrls: ['./room-user-list.component.scss'],
+  styleUrls: ['./room-user-list.component.scss']
 })
 export class RoomUserListComponent implements OnInit, OnDestroy {
   @Output()
@@ -105,15 +105,19 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
         title: 'Edit Chat Member',
         curRoomUser: this.userInfoList.filter(
           user => user.seq !== this.loginRes.userSeq
-        ),
-      },
+        )
+      }
     });
 
     if (!!result && !!result.choice && result.choice) {
-      const userSeqs: number[] = [];
+      const userSeqs: number[] = this.userInfoList.map(
+        userInfo => userInfo.seq
+      );
       if (!!result.selectedUserList && result.selectedUserList.length > 0) {
-        result.selectedUserList.map(user => {
-          userSeqs.push(user.seq);
+        result.selectedUserList.forEach(user => {
+          if (userSeqs.indexOf(user.seq) < 0) {
+            userSeqs.push(user.seq);
+          }
         });
       }
 
@@ -125,8 +129,8 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
           RoomStore.inviteOrOpen({
             req: {
               divCd: 'Invite',
-              userSeqs,
-            },
+              userSeqs
+            }
           })
         );
       }
@@ -141,8 +145,8 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
     >(SelectGroupDialogComponent, {
       width: '600px',
       data: {
-        title: 'Group Select',
-      },
+        title: 'Group Select'
+      }
     });
 
     if (!!result && !!result.choice && result.choice) {
@@ -159,7 +163,7 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
         this.store.dispatch(
           SyncStore.updateGroupMember({
             oldGroup,
-            trgtUserSeq,
+            trgtUserSeq
           })
         );
       }

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

@@ -70,9 +70,9 @@
                 <ucap-group-expansion-panel
                   #groupExpansionPanel
                   [groupBuddyList]="groupBuddyList$ | async"
-                  [favoritBuddyList]="favoritBuddyList$ | async"
                   [selectedUserList]="selectedUserList"
                   [checkable]="true"
+                  (checkGroup)="onCheckGroup($event)"
                   class="group-expansion"
                 >
                   <ucap-profile-user-list-item
@@ -138,20 +138,6 @@
               <mat-icon>chat</mat-icon>
             </ng-template>
             <div>
-              <!-- <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
-                <ucap-room-list-item
-                  *cdkVirtualFor="let room of roomList"
-                  [loginRes]="loginRes"
-                  [roomInfo]="room"
-                  [roomUserInfo]="getRoomUserList(room)"
-                  [sessionVerinfo]="sessionVerinfo"
-                  [checkable]="getCheckableRoom(room)"
-                  [isChecked]="getCheckedRoom(room)"
-                  [multiCheckable]="false"
-                  (checkRoom)="onCheckRoom($event)"
-                >
-                </ucap-room-list-item>
-              </cdk-virtual-scroll-viewport> -->
               <ucap-room-list-item
                 *ngFor="let room of roomList"
                 [loginRes]="loginRes"

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

@@ -376,6 +376,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** 조직도 > 부서원 전체 선택 */
   onCheckAllUser(params: {
     isChecked: boolean;
     userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -43,12 +43,14 @@
           <ucap-chat-message-box-information
             *ngSwitchCase="EventType.RenameRoom"
             [message]="message"
+            class="information-msg"
           >
           </ucap-chat-message-box-information>
           <ucap-chat-message-box-information
             *ngSwitchCase="EventType.GuideForRoomTimerChanged"
             [message]="message"
             [senderName]="getUserName(message.senderSeq)"
+            class="information-msg"
           >
           </ucap-chat-message-box-information>
         </ng-container>

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

@@ -47,27 +47,38 @@
             </mat-icon>
           </button>
           <ng-container [ngSwitch]="node.nodeType">
-            <span *ngSwitchCase="NodeType.Profile">내 프로필</span>
-            <span *ngSwitchCase="NodeType.Favorit"
-              >즐겨찾기
-              <span class="text-accent-color number"
-                >({{ node.countOfChildren }}명)</span
+            <span *ngSwitchCase="NodeType.Profile">
+              <span class="title-name ellipsis">내 프로필</span>
+            </span>
+            <span *ngSwitchCase="NodeType.Favorit">
+              <span class="title-name ellipsis">즐겨찾기</span>
+              <span class="text-accent-color number">
+                ({{ node.countOfChildren }}명)</span
               ></span
             >
             <span *ngSwitchCase="NodeType.Buddy">
               <span class="title-name ellipsis">{{
                 node.groupDetail.name
               }}</span>
-              <span class="text-accent-color number"
-                >({{ node.countOfChildren }}명)</span
+              <span class="text-accent-color number">
+                ({{ node.countOfChildren }}명)</span
               >
             </span>
           </ng-container>
 
+          <mat-checkbox
+            *ngIf="checkable"
+            #checkbox
+            [checked]="getCheckedGroup(node.groupDetail)"
+            (change)="onChangeCheck(checkbox.checked, node.groupDetail)"
+            (click)="$event.stopPropagation()"
+            class="group-check"
+          >
+          </mat-checkbox>
           <button
             mat-icon-button
             aria-label="group menu"
-            *ngIf="node.nodeType !== NodeType.Profile"
+            *ngIf="node.nodeType !== NodeType.Profile && !checkable"
             (click)="onClickMore($event, node.groupDetail)"
             class="group-menu"
           >

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

@@ -64,6 +64,11 @@
     line-height: 20px;
     margin-right: 10px;
   }
+  .group-check {
+    margin-left: auto;
+    margin-right: 16px;
+  }
+
   .group-menu {
     margin-left: auto;
     opacity: 0.6;

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

@@ -108,6 +108,8 @@ export class ExpansionPanelComponent
       return;
     }
 
+    this.groupList = list;
+
     this.buddyNodes = [];
 
     for (const item of list) {
@@ -179,6 +181,8 @@ export class ExpansionPanelComponent
   treeFlattener: MatTreeFlattener<GroupNode, FlatNode>;
   dataSource: VirtualScrollTreeFlatDataSource<GroupNode, FlatNode>;
 
+  groupList: { group: GroupDetailData; buddyList: UserInfo[] }[];
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -237,30 +241,34 @@ export class ExpansionPanelComponent
   }
 
   /** 그룹리스트가 checkable 할 경우 checkbox 의 change 이벤트를 상위 컴포넌트로 전달한다. */
-  onChangeCheck(
-    value: boolean,
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }
-  ) {
-    this.checkGroup.emit({
-      isChecked: value,
-      groupBuddyList
-    });
+  onChangeCheck(value: boolean, group: GroupDetailData, nodeType: NodeType) {
+    const groupInfos = this.groupList.filter(
+      groupInfo => groupInfo.group.seq === group.seq
+    );
+
+    if (groupInfos.length > 0) {
+      this.checkGroup.emit({
+        isChecked: value,
+        groupBuddyList: groupInfos[0]
+      });
+    }
   }
 
   /** 그룹리스트가 checkable 할 경우 checkbox 의 isChecked 를 관장하며, 하위 부서원들의 전체선택여부를 판단한다. */
-  getCheckedGroup(groupBuddy: {
-    group: GroupDetailData;
-    buddyList: UserInfo[];
-  }) {
-    if (groupBuddy.buddyList.length === 0) {
+  getCheckedGroup(group: GroupDetailData) {
+    if (!group || group === undefined) {
       return false;
     }
+
+    if (group.userSeqs.length === 0) {
+      return false;
+    }
+
     if (!!this.selectedUserList && this.selectedUserList.length > 0) {
       let allExist = true;
-      groupBuddy.buddyList.some(groupUser => {
+      group.userSeqs.some(seq => {
         if (
-          this.selectedUserList.filter(item => item.seq === groupUser.seq)
-            .length === 0
+          this.selectedUserList.filter(item => item.seq === seq).length === 0
         ) {
           allExist = false;
           return true;