Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -232,7 +232,6 @@ export class GroupComponent implements OnInit, OnDestroy {
   }
 
   onSelectBuddy(buddy: UserInfo) {
-    this.logger.debug('onSelectBuddy', buddy);
     if (buddy.seq === this.loginRes.userSeq) {
       this.store.dispatch(
         ChatStore.openRoom({ userSeqList: [this.loginRes.talkWithMeBotSeq] })

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

@@ -7,10 +7,35 @@
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
     <button
       mat-icon-button
-      *ngIf="weblink.length > 0"
+      *ngFor="let link of weblink"
       class="button app-layout-native-title-bar-logout"
-      matTooltip="웹링크"
+      [matTooltip]="link.title"
-      (click)="onToggleWebLinkSelector()"
+      (click)="onClickWebLink(link)"
+    >
+      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
+        />
+      </svg>
+    </button>
+    <span class="stroke-bar"></span>
+    <button
+      mat-icon-button
+      *ngFor="let link of weblinkBadgeTypes"
+      class="button app-layout-native-title-bar-logout"
+      [matBadgeHidden]="getHideWebLinkbadge(link)"
+      [matBadge]="getWebLinkBadgeCount(link)"
+      matBadgeDescription="확인하지 않은 메시지가 있습니다."
+      matBadgeColor="accent"
+      matBadgePosition="above after"
+      [matTooltip]="link.title"
+      (click)="onClickWebLink(link)"
     >
       <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
         <path
@@ -218,26 +243,3 @@
     </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" (click)="onClickWebLink(link)">
-          <div
-            class="icon"
-            [matBadgeHidden]="getHideWebLinkbadge(link)"
-            [matBadge]="getWebLinkBadgeCount(link)"
-            matBadgeDescription="확인하지 않은 메시지가 있습니다."
-            matBadgeColor="accent"
-            matBadgePosition="above after"
-            [matTooltip]="link.title"
-          >
-            <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,58 +132,3 @@
     }
   }
 }
-
-.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

@@ -50,9 +50,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   updateInfo$: Observable<UpdateInfo>;
 
-  showWeblink = false;
   loginInfo: LoginInfo;
   weblink: WebLink[] = [];
+  weblinkBadgeTypes: WebLink[] = [];
   webLinkBadgeMail = 0;
   webLinkBadgePayment = 0;
 
@@ -78,8 +78,6 @@ export class TopBarComponent implements OnInit, OnDestroy {
             KEY_LOGIN_INFO
           );
 
-          this.showWeblink = false;
-
           // WebLink init..
           this.initWebLink();
         })
@@ -114,10 +112,20 @@ export class TopBarComponent implements OnInit, OnDestroy {
         weblink =>
           urlInfo.webLinkAllowedList
             .filter(
-              type => type !== 'WebLinkMailCnt' && type !== 'WebLinkPaymentCnt'
+              type =>
+                type !== 'WebLinkMailCnt' &&
+                type !== 'WebLinkPaymentCnt' &&
+                type !== 'WebLinkMail' &&
+                type !== 'WebLinkPayment'
             )
             .filter(type => type === weblink.key).length > 0
       );
+      this.weblinkBadgeTypes = urlInfo.webLink.filter(
+        weblink =>
+          urlInfo.webLinkAllowedList
+            .filter(type => type === 'WebLinkMail' || type === 'WebLinkPayment')
+            .filter(type => type === weblink.key).length > 0
+      );
 
       if (urlInfo.webLinkAllowedList.indexOf('WebLinkMail') > -1) {
         // 메일 카운트 체크.
@@ -223,9 +231,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
-  onToggleWebLinkSelector(): void {
+  /** About WebLink */
-    this.showWeblink = !this.showWeblink;
-  }
   onClickWebLink(link: WebLink): void {
     const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
       KEY_APP_USER_INFO,

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

@@ -136,6 +136,11 @@ export const reducer = createReducer(
     };
   }),
 
+  on(ChatStore.selectedRoom, (state, action) => {
+    return {
+      ...initialState
+    };
+  }),
   on(ChatStore.clearSelectedRoom, (state, action) => {
     return {
       ...initialState

projects/ucap-webmessenger-app/src/environments/environment.type.ts

@@ -89,7 +89,7 @@ export interface Environment {
       readHereShowMinimumEventCount: number;
       /** 여기까지 읽음을 보여줄 최대 이벤트 개수 (show: under) */
       readHereShowMaximumEventCount: number;
-      /** 여기까지 읽음이 보려질때 대화방 이벤트 조회 개수. */
+      /** 여기까지 읽음이 보여질때 대화방 이벤트 조회 개수. */
       readHereEventRequestCount: number;
     };
   };

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

@@ -16,18 +16,6 @@
     </button>
   </div>-->
 <div class="chat-messages" #scrollMe>
-  <div class="unRead-count" *ngIf="
-        !!roomInfo &&
-        !!firstEventSeq &&
-        roomInfo.lastReadEventSeq < firstEventSeq
-      ">
-    <span class="line"></span>
-    <span class="count">
-      안읽은 메시지가 <span class="text-warn-color">({{ firstEventSeq - (roomInfo.lastReadEventSeq + 1) }})</span>개
-      더 있습니다.
-    </span>
-    <span class="line"></span>
-  </div>
   <div
     *ngIf="eventRemain && messages.length > 0"
     class="message-row view-previous bg-accent-dark"
@@ -49,6 +37,23 @@
         <line class="st0" x1="10" y1="12.9" x2="10" y2="7.1" />
       </svg>
       이전 대화 보기
+      <div
+        class="unRead-count"
+        *ngIf="
+          !!roomInfo &&
+          !!firstEventSeq &&
+          roomInfo.lastReadEventSeq < firstEventSeq
+        "
+      >
+        <span class="line"></span>
+        <span class="count">
+          안읽은 메시지가
+          <span class="text-warn-color"
+            >({{ firstEventSeq - (roomInfo.lastReadEventSeq + 1) }})</span
+          >개 더 있습니다.
+        </span>
+        <span class="line"></span>
+      </div>
     </button>
     <span class="line"></span>
   </div>

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

@@ -14,6 +14,12 @@
           (click)="onClickOpenProfile($event, userInfo)"
         />
       </div>
+      <span
+        *ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
+        class="text-accent-color badge-mobile-state"
+      >
+        <mat-icon>phone_android</mat-icon>
+      </span>
     </dt>
     <dd class="info">
       <div class="detail">

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

@@ -26,6 +26,23 @@ $thumbnail-msize: 40px;
   }
 }
 
+.badge-mobile-state {
+  position: absolute;
+  background-color: #ffffff;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  bottom: 14px;
+  left: 60px;
+  text-align: center;
+  .mat-icon {
+    font-size: 14px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+  }
+}
+
 %list-item {
   position: relative;
   display: flex;

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

@@ -65,13 +65,16 @@ export class UserListItemComponent implements OnInit {
       this.profileImageRoot || this.sessionVerinfo.profileRoot;
   }
 
-  getPresence(type: string): string {
+  getPresence(type: PresenceType): string {
     let status: string;
     let rtnClass = '';
     switch (type) {
-      case 'pc':
+      case PresenceType.PC:
         status = !!this.presence ? this.presence.pcStatus : undefined;
         break;
+      case PresenceType.MOBILE:
+        status = !!this.presence ? this.presence.mobileStatus : undefined;
+        break;
     }
 
     if (!!status) {