checking updates is added

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

@@ -361,7 +361,6 @@
             maxlength="5"
             [value]="loginRes?.statusMessage1"
             (click)="$event.stopPropagation()"
-
         /></span>
       </ucap-inline-edit-input>
     </button>
@@ -432,7 +431,41 @@
 </mat-menu>
 
 <mat-menu #informationMenu="matMenu">
-  <div mat-menu-item>
+  <div class="version-info-container" (click)="$event.stopPropagation()">
-    {{ 'information.version' | translate }}: {{ appVersion }}
+    <div style="display: flex;">
+      <span>{{ 'information.version' | translate }}: {{ appVersion }}</span>
+      <span>
+        <button
+          *ngIf="!checkingUpdate"
+          mat-icon-button
+          matTooltip="{{ 'information.checkForUpdates' | translate }}"
+          (click)="onClickCheckUpdate($event)"
+        >
+          <span class="mdi mdi-progress-check"></span>
+        </button>
+        <mat-spinner
+          *ngIf="checkingUpdate && checkingUpdateIsProcessing"
+          diameter="20"
+          strokeWidth="1"
+        ></mat-spinner>
+      </span>
+    </div>
+    <div *ngIf="checkingUpdate">
+      <div *ngIf="checkingUpdateIsProcessing">
+        {{ 'information.checkForUpdatesInProgress' | translate }}
+      </div>
+      <div *ngIf="!checkingUpdateIsProcessing && !!checkingUpdateAppVersion">
+        {{
+          'information.updateIsExist'
+            | translate: { version: checkingUpdateAppVersion }
+        }}
+        <button mat-button (click)="onClickApplyUpdate($event)">
+          {{ 'information.applyUpdates' | translate }}
+        </button>
+      </div>
+      <div *ngIf="!checkingUpdateIsProcessing && !checkingUpdateAppVersion">
+        {{ 'information.updateIsNotExist' | translate }}
+      </div>
+    </div>
   </div>
 </mat-menu>

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

@@ -292,3 +292,7 @@
     }
   }
 }
+
+.version-info-container {
+  width: 200px;
+}

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

@@ -15,6 +15,8 @@ import {
 import { Observable, Subscription, of } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
+import semver from 'semver';
+
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
 import * as AuthenticationStore from '@app/store/account/authentication';
@@ -30,7 +32,9 @@ import {
   KEY_URL_INFO,
   LoginInfo,
   KEY_LOGIN_INFO,
-  KEY_VER_INFO
+  KEY_VER_INFO,
+  EnvironmentsInfo,
+  KEY_ENVIRONMENTS_INFO
 } from '@app/types';
 import {
   WebLink,
@@ -48,7 +52,10 @@ import {
   WebLinkType
 } from '@ucap-webmessenger/daesang';
 import { NGXLogger } from 'ngx-logger';
-import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import {
+  VersionInfo2Response,
+  PublicApiService
+} from '@ucap-webmessenger/api-public';
 import {
   ProfileDialogComponent,
   ProfileDialogResult,
@@ -100,6 +107,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
   WebLinkType = WebLinkType;
   StatusCode = StatusCode;
 
+  checkingUpdate = false;
+  checkingUpdateIsProcessing = false;
+  checkingUpdateAppVersion: string;
+
   readonly awayTimeList = [10, 20, 30];
 
   @ViewChild('profileMenu', { static: true })
@@ -108,9 +119,11 @@ export class TopBarComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private changeDetectorRef: ChangeDetectorRef,
     private dialogService: DialogService,
     private localStorageService: LocalStorageService,
     private sessionStorageService: SessionStorageService,
+    private publicApiService: PublicApiService,
     private daesangApiService: DaesangApiService,
     private daesangProtocolService: DaesangProtocolService,
     @Inject(DOCUMENT) private document: Document,
@@ -485,4 +498,42 @@ export class TopBarComponent implements OnInit, OnDestroy {
       StatusStore.changeMyIdleCheckTime({ checkTime: Number(event.value) })
     );
   }
+
+  onClickCheckUpdate(event: Event) {
+    this.checkingUpdate = true;
+    this.checkingUpdateIsProcessing = true;
+
+    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
+    const environmentsInfo = this.sessionStorageService.get<EnvironmentsInfo>(
+      KEY_ENVIRONMENTS_INFO
+    );
+
+    this.publicApiService
+      .versionInfo2({
+        deviceType: environmentsInfo.deviceType,
+        companyGroupType: loginInfo.companyGroupType,
+        companyCode: loginInfo.companyCode,
+        loginId: loginInfo.loginId
+      })
+      .pipe(take(1))
+      .subscribe(
+        res => {
+          if (semver.lt(this.appVersion, res.appVersion)) {
+            this.checkingUpdateAppVersion = res.appVersion;
+          } else {
+            this.checkingUpdateAppVersion = undefined;
+          }
+        },
+        error => {},
+        () => {
+          this.checkingUpdateIsProcessing = false;
+        }
+      );
+  }
+
+  onClickApplyUpdate(event: Event) {
+    this.nativeService
+      .checkForUpdates(this.checkingUpdateAppVersion)
+      .then(e => {});
+  }
 }

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

@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -21,6 +23,7 @@ import { MatTooltipModule, MatBadgeModule } from '@angular/material';
   imports: [
     CommonModule,
     FlexLayoutModule,
+    MatButtonModule,
     MatDividerModule,
     MatIconModule,
     MatToolbarModule,
@@ -28,6 +31,7 @@ import { MatTooltipModule, MatBadgeModule } from '@angular/material';
     MatMenuModule,
     MatRadioModule,
     MatBadgeModule,
+    MatProgressSpinnerModule,
 
     TranslateModule,
 

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -75,7 +75,12 @@
   },
   "information": {
     "label": "Information",
-    "version": "Version"
+    "version": "Version",
+    "checkForUpdates": "Check for updates",
+    "checkForUpdatesInProgress": "Checking for updates",
+    "updateIsExist": "There is a new version [{{version}}].",
+    "updateIsNotExist": "The version of the app is up to date.",
+    "applyUpdates": "Update"
   },
   "settings": {
     "label": "Settings",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -75,7 +75,12 @@
   },
   "information": {
     "label": "정보",
-    "version": "버전"
+    "version": "버전",
+    "checkForUpdates": "업데이트 확인",
+    "checkForUpdatesInProgress": "업데이트를 확인하고 있습니다.",
+    "updateIsExist": "새로운 버전[{{version}}]이 존재합니다.",
+    "updateIsNotExist": "최신 버전이 적용되어 있습니다.",
+    "applyUpdates": "업데이트 설치"
   },
   "settings": {
     "label": "설정",