웹링크 뱃지기능 선처리.

projects/ucap-webmessenger-api-prompt/src/lib/services/call.service.ts

@@ -2,7 +2,7 @@ import { Injectable, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, catchError } from 'rxjs/operators';
 
 import { _MODULE_CONFIG } from '../config/token';
 import { ModuleConfig } from '../config/module-config';
@@ -14,6 +14,7 @@ import {
   encodeCall,
   decodeCall
 } from '../apis/call';
+import { NGXLogger } from 'ngx-logger';
 
 @Injectable({
   providedIn: 'root'
@@ -23,7 +24,8 @@ export class CallService {
 
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private logger: NGXLogger
   ) {
     this.urls = UrlConfig.getUrls(
       this.moduleConfig.hostConfig,

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

@@ -27,8 +27,8 @@ import {
 } from '@ucap-webmessenger/ui';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { map, take, finalize } from 'rxjs/operators';
+import { map, take, finalize, catchError } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
+import { Subscription, of } from 'rxjs';
 import {
   SelectGroupDialogComponent,
   SelectGroupDialogData,
@@ -203,7 +203,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
               } else {
                 this.logger.error(res);
               }
-            })
+            }),
+            catchError(error => of(this.logger.debug(error)))
           )
           .subscribe();
       }

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

@@ -235,7 +235,15 @@
     <div class="img-item">
       <ul>
         <li *ngFor="let link of weblink" (click)="onClickWebLink(link)">
-          <div class="icon" [matTooltip]="link.title">
+          <div
+            class="icon"
+            [matBadgeHidden]="getShowWebLinkbadge(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>

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

@@ -5,7 +5,7 @@ import {
   WindowState,
   UpdateInfo
 } from '@ucap-webmessenger/native';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -15,18 +15,25 @@ import * as SettingsStore from '@app/store/messenger/settings';
 import * as UpdateStore from '@app/store/setting/update';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { tap } from 'rxjs/operators';
+import { tap, take, map, catchError } from 'rxjs/operators';
 import {
   RightDrawer,
   KEY_URL_INFO,
   LoginInfo,
-  KEY_LOGIN_INFO
+  KEY_LOGIN_INFO,
+  KEY_LOGIN_RES_INFO
 } from '@app/types';
 import {
   WebLink,
   DaesangUrlInfoResponse
 } from '@ucap-webmessenger/api-external';
-import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import {
+  SessionStorageService,
+  LocalStorageService
+} from '@ucap-webmessenger/web-storage';
+import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
+import { environment } from '../../../../environments/environment';
+import { DaesangApiService } from '@ucap-webmessenger/daesang';
 
 @Component({
   selector: 'app-layout-native-top-bar',
@@ -39,18 +46,28 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
+  appUserInfo: AppUserInfo;
 
   updateInfo$: Observable<UpdateInfo>;
 
   showWeblink = false;
   loginInfo: LoginInfo;
   weblink: WebLink[] = [];
+  webLinkBadgeMail = 0;
+  webLinkBadgePayment = 0;
 
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private sessionStorageService: SessionStorageService
+    private localStorageService: LocalStorageService,
-  ) {}
+    private sessionStorageService: SessionStorageService,
+    private daesangApiService: DaesangApiService
+  ) {
+    this.appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      environment.customConfig.appKey
+    );
+  }
 
   ngOnInit() {
     this.windowStateChanged$ = this.nativeService.windowStateChanged();
@@ -77,11 +94,24 @@ export class TopBarComponent implements OnInit, OnDestroy {
   }
 
   initWebLink(): void {
+    const loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+
     const urlInfo: DaesangUrlInfoResponse = this.sessionStorageService.get<
       DaesangUrlInfoResponse
     >(KEY_URL_INFO);
 
     if (!!urlInfo && !!urlInfo.webLink) {
+      // urlInfo.webLinkAllowedList.push(
+      //   ...[
+      //     'WebLinkMail',
+      //     'WebLinkMailCnt',
+      //     'WebLinkPayment',
+      //     'WebLinkPaymentCnt'
+      //   ]
+      // );
+
       this.weblink = urlInfo.webLink.filter(
         weblink =>
           urlInfo.webLinkAllowedList.filter(type => type === weblink.key)
@@ -98,7 +128,24 @@ export class TopBarComponent implements OnInit, OnDestroy {
         );
         if (link.length > 0) {
           const WebLinkMailCnt = link[0];
-          // this.onClickWebLink(WebLinkMailCnt);
+          const loginPw = this.appUserInfo.loginPw;
+          const loginPw2 = this.loginInfo.loginPw;
+          const loginId = this.loginInfo.loginId;
+          const token = loginRes.tokenString;
+
+          const url = WebLinkMailCnt.url
+            .replace(/(\(%USER_TOKEN%\))/g, token)
+            .replace(/(\(%USER_ID%\))/g, loginId)
+            .replace(/(\(%USER_PASS%\))/g, loginPw);
+
+          this.daesangApiService
+            .retrieveMailCount(url)
+            .pipe(
+              take(1),
+              map(res => (this.webLinkBadgeMail = res.count)),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
         }
       }
       if (
@@ -111,13 +158,37 @@ export class TopBarComponent implements OnInit, OnDestroy {
         );
         if (link.length > 0) {
           const WebLinkPaymentCnt = link[0];
-          // this.onClickWebLink(WebLinkPaymentCnt);
+          const WebLinkMailCnt = link[0];
+          const loginPw = this.appUserInfo.loginPw;
+          const loginPw2 = this.loginInfo.loginPw;
+          const loginId = this.loginInfo.loginId;
+          const token = loginRes.tokenString;
+
+          const url = WebLinkMailCnt.url
+            .replace(/(\(%USER_TOKEN%\))/g, token)
+            .replace(/(\(%USER_ID%\))/g, loginId)
+            .replace(/(\(%USER_PASS%\))/g, loginPw);
+
+          this.daesangApiService
+            .retrievePaymentCount(url)
+            .pipe(
+              take(1),
+              map(res => {
+                this.webLinkBadgePayment = res.count;
+              }),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
         }
       }
     }
   }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    if (!!this.loginResSubscription) {
+      this.loginResSubscription.unsubscribe();
+    }
+  }
 
   onClickClose() {
     this.nativeService.windowClose();
@@ -151,13 +222,41 @@ export class TopBarComponent implements OnInit, OnDestroy {
     this.showWeblink = !this.showWeblink;
   }
   onClickWebLink(link: WebLink): void {
-    const loginPw = this.loginInfo.loginPw;
+    const loginPw = this.appUserInfo.loginPw;
+    const loginPw2 = this.loginInfo.loginPw;
+    const loginId = this.loginInfo.loginId;
     const token = this.loginRes.tokenString;
 
-    const url = link.url.replace('(%USER_TOKEN%)', token);
+    const url = link.url
+      .replace(/(\(%USER_TOKEN%\))/g, token)
+      .replace(/(\(%USER_ID%\))/g, loginId)
+      .replace(/(\(%USER_PASS%\))/g, loginPw);
 
     this.nativeService.openDefaultBrowser(url);
   }
+  getShowWebLinkbadge(link: WebLink): boolean {
+    const showType = [
+      'WebLinkMail',
+      'WebLinkMailCnt',
+      'WebLinkPayment',
+      'WebLinkPaymentCnt'
+    ];
+
+    if (showType.indexOf(link.key) > -1) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  getWebLinkBadgeCount(link: WebLink): number {
+    if (link.key === 'WebLinkMail') {
+      return this.webLinkBadgeMail;
+    } else if (link.key === 'WebLinkPayment') {
+      return this.webLinkBadgePayment;
+    } else {
+      return 0;
+    }
+  }
 
   onClickUpdate() {
     this.store.dispatch(UpdateStore.applyInstantUpdate());

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

@@ -9,7 +9,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 
 import { COMPONENTS } from './components';
-import { MatTooltipModule } from '@angular/material';
+import { MatTooltipModule, MatBadgeModule } from '@angular/material';
 
 @NgModule({
   imports: [
@@ -18,6 +18,7 @@ import { MatTooltipModule } from '@angular/material';
     MatIconModule,
     MatToolbarModule,
     MatTooltipModule,
+    MatBadgeModule,
 
     UCapUiModule
   ],

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -1,11 +1,11 @@
-import { map, tap, take } from 'rxjs/operators';
+import { map, tap, take, catchError } from 'rxjs/operators';
 import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of } from 'rxjs';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
@@ -262,7 +262,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
             take(1),
             map(res => {
               console.log(res);
-            })
+            }),
+            catchError(error => of(this.logger.debug(error)))
           )
           .subscribe();
       }

projects/ucap-webmessenger-daesang/src/lib/apis/api.ts

@@ -0,0 +1,30 @@
+import { APIDecoder, APIResponse } from '@ucap-webmessenger/api';
+
+export interface MailCountResponse {
+  systemName: string;
+  count: number;
+}
+
+export const decodeMailCount: APIDecoder<MailCountResponse> = (res: any) => {
+  const domParser = new DOMParser();
+  const dom: Document = domParser.parseFromString(res, 'text/xml');
+
+  let systemName = '';
+  const systemNameDom: HTMLCollection = dom.getElementsByTagName('COUNT');
+  if (!!systemNameDom && systemNameDom.length > 0) {
+    systemName = systemNameDom[0].textContent;
+  }
+
+  let count = 0;
+  const countDom: HTMLCollection = dom.getElementsByTagName('COUNT');
+  if (!!countDom && countDom.length > 0) {
+    count =
+      countDom[0].textContent.trim().length > 0
+        ? Number(countDom[0].textContent.trim())
+        : 0;
+  }
+  return {
+    systemName,
+    count
+  } as MailCountResponse;
+};

projects/ucap-webmessenger-daesang/src/lib/services/daesang-api.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { NGXLogger } from 'ngx-logger';
+
+import { decodeMailCount, MailCountResponse } from '../apis/api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DaesangApiService {
+  constructor(private httpClient: HttpClient) {}
+
+  public retrieveMailCount(url: string): Observable<MailCountResponse> {
+    return this.httpClient
+      .post<any>(url, {}, {})
+      .pipe(map(res => decodeMailCount(res)));
+  }
+
+  public retrievePaymentCount(url: string): Observable<any> {
+    return this.httpClient
+      .post<any>(url, {}, {})
+      .pipe(map(res => decodeMailCount(res)));
+  }
+}

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

@@ -2,8 +2,13 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { DaesangCipherService } from './services/daesang-cipher.service';
 import { DaesangProtocolService } from './services/daesang-protocol.service';
+import { DaesangApiService } from './services/daesang-api.service';
 
-const SERVICES = [DaesangCipherService, DaesangProtocolService];
+const SERVICES = [
+  DaesangCipherService,
+  DaesangProtocolService,
+  DaesangApiService
+];
 
 @NgModule({
   declarations: [],

projects/ucap-webmessenger-daesang/src/public-api.ts

@@ -2,6 +2,9 @@
  * Public API Surface of ucap-webmessenger-daesang
  */
 
+export * from './lib/apis/api';
+
+export * from './lib/services/daesang-api.service';
 export * from './lib/services/daesang-cipher.service';
 export * from './lib/services/daesang-protocol.service';