changing of status message is implemented

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

@@ -335,41 +335,55 @@
     <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
       <span class="presence pcOther"> </span>
       <ucap-inline-edit-input
-        #statusMessage1
         (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(1, statusMessage1.value)"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
-        <span ucapInlineEditInput="edit"><input matInput type="text"/></span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage1
+            type="text"
+            [value]="loginRes?.statusMessage1"
+        /></span>
       </ucap-inline-edit-input>
-      <!-- {{ loginRes?.statusMessage1 }} -->
     </button>
-    <!-- <button
-      mat-menu-item
-      class="edit"
-      (click)="$event.stopPropagation(); statusMessage1.editMode = true"
-    ></button> -->
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
       <span class="presence pcOther"> </span>
-      {{ loginRes?.statusMessage2 }}
+      <ucap-inline-edit-input
+        (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(2, statusMessage2.value)"
+      >
+        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage2
+            type="text"
+            [value]="loginRes?.statusMessage2"
+        /></span>
+      </ucap-inline-edit-input>
     </button>
-    <button
-      mat-menu-item
-      class="edit"
-      (click)="onClickChangeStatusBusy($event, 2)"
-    ></button>
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
       <span class="presence pcOther"> </span>
-      {{ loginRes?.statusMessage3 }}
+      <ucap-inline-edit-input
+        (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(3, statusMessage3.value)"
+      >
+        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage3
+            type="text"
+            [value]="loginRes?.statusMessage3"
+        /></span>
+      </ucap-inline-edit-input>
     </button>
-    <button
-      mat-menu-item
-      class="edit"
-      (click)="onClickChangeStatusBusy($event, 3)"
-    ></button>
   </div>
 </mat-menu>
 
@@ -377,28 +391,11 @@
   <div mat-menu-item (click)="$event.stopPropagation()">
     {{ 'presence.settingOfAwayTime' | translate }}
   </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="10"
-      [checked]="myIdleCheckTime === 10"
-      (change)="onChangeAwayTime($event)"
-      >10{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="20"
-      [checked]="myIdleCheckTime === 20"
-      (change)="onChangeAwayTime($event)"
-      >20{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="30"
-      [checked]="myIdleCheckTime === 30"
-      (change)="onChangeAwayTime($event)"
-      >30{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
+  <mat-radio-group aria-label="Select an option" [value]="myIdleCheckTime">
+    <div mat-menu-item *ngFor="let awayTime of awayTimeList">
+      <mat-radio-button [value]="awayTime" (change)="onChangeAwayTime($event)">
+        {{ awayTime }}{{ 'common.units.minute' | translate }}</mat-radio-button
+      >
+    </div>
+  </mat-radio-group>
 </mat-menu>

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

@@ -60,6 +60,7 @@ import { DOCUMENT } from '@angular/common';
 import { MatMenu, MatRadioChange } from '@angular/material';
 import { StatusCode, StatusType } from '@ucap-webmessenger/core';
 import { StatusInfo } from '@ucap-webmessenger/protocol-status';
+import { UserInfoUpdateType } from '@ucap-webmessenger/protocol-info';
 
 const zoomFactors = [60, 70, 85, 100, 120, 145, 170, 200];
 
@@ -95,6 +96,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
   WebLinkType = WebLinkType;
   StatusCode = StatusCode;
 
+  readonly awayTimeList = [10, 20, 30];
+
   @ViewChild('profileMenu', { static: true })
   profileMenu: MatMenu;
 
@@ -169,12 +172,19 @@ export class TopBarComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
+      this.loginResSubscription = undefined;
     }
     if (!!this.myStatusSubscription) {
       this.myStatusSubscription.unsubscribe();
+      this.myStatusSubscription = undefined;
     }
     if (!!this.myIdleCheckTimeSubscription) {
       this.myIdleCheckTimeSubscription.unsubscribe();
+      this.myIdleCheckTimeSubscription = undefined;
+    }
+    if (!!this.zoomSubscription) {
+      this.zoomSubscription.unsubscribe();
+      this.zoomSubscription = undefined;
     }
   }
 
@@ -452,6 +462,32 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
+  onApplyStatusMessage(index: number, statusMessage: string) {
+    this.logger.debug('StatusMessage', index, statusMessage);
+
+    let updateType: UserInfoUpdateType;
+    switch (index) {
+      case 1:
+        updateType = UserInfoUpdateType.StatusMessage1;
+        break;
+      case 2:
+        updateType = UserInfoUpdateType.StatusMessage2;
+        break;
+      case 3:
+        updateType = UserInfoUpdateType.StatusMessage3;
+        break;
+
+      default:
+        return;
+    }
+
+    this.store.dispatch(
+      AuthenticationStore.infoUser({
+        req: { type: updateType, info: statusMessage }
+      })
+    );
+  }
+
   onClickChangeStatusBusy(event: Event, index: number) {
     event.stopPropagation();
   }

projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts

@@ -8,6 +8,7 @@ import {
   UserPasswordSetRequest,
   UserPasswordSetResponse
 } from '@ucap-webmessenger/protocol-service';
+import { UserRequest, UserResponse } from '@ucap-webmessenger/protocol-info';
 
 export const webLogin = createAction(
   '[Account::Authentication] Web Login',
@@ -122,3 +123,20 @@ export const updateLoginRes = createAction(
     loginRes: LoginResponse;
   }>()
 );
+
+export const infoUser = createAction(
+  '[Account::Authentication] Info User',
+  props<{ req: UserRequest }>()
+);
+
+export const infoUserSuccess = createAction(
+  '[Account::Authentication] Info User Success',
+  props<{
+    res: UserResponse;
+  }>()
+);
+
+export const infoUserFailure = createAction(
+  '[Account::Authentication] Info User Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts

@@ -41,7 +41,10 @@ import {
   logoutInitialize,
   userPasswordSet,
   userPasswordSetSuccess,
-  userPasswordSetFailure
+  userPasswordSetFailure,
+  infoUser,
+  infoUserSuccess,
+  infoUserFailure
 } from './actions';
 import {
   LoginInfo,
@@ -77,6 +80,10 @@ import { DaesangUrlInfoResponse } from '@ucap-webmessenger/api-external';
 import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { DaesangCipherService, WebLinkType } from '@ucap-webmessenger/daesang';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  InfoProtocolService,
+  UserResponse
+} from '@ucap-webmessenger/protocol-info';
 
 @Injectable()
 export class Effects {
@@ -482,6 +489,23 @@ export class Effects {
     { dispatch: false }
   );
 
+  infoUser$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(infoUser),
+      map(action => action.req),
+      exhaustMap(req =>
+        this.infoProtocolService.user(req).pipe(
+          map((res: UserResponse) => {
+            return infoUserSuccess({
+              res
+            });
+          }),
+          catchError(error => of(infoUserFailure({ error })))
+        )
+      )
+    )
+  );
+
   constructor(
     private actions$: Actions,
     private ngZone: NgZone,
@@ -493,6 +517,7 @@ export class Effects {
     private appAuthenticationService: AppAuthenticationService,
     private protocolService: ProtocolService,
     private authenticationProtocolService: AuthenticationProtocolService,
+    private infoProtocolService: InfoProtocolService,
     private serviceProtocolService: ServiceProtocolService,
     private translateService: TranslateService,
     private dialogService: DialogService,

projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts

@@ -6,8 +6,10 @@ import {
   initialLoginFailCount,
   logout,
   logoutInitialize,
-  updateLoginRes
+  updateLoginRes,
+  infoUserSuccess
 } from './actions';
+import { UserInfoUpdateType } from '@ucap-webmessenger/protocol-info';
 
 export const reducer = createReducer(
   initialState,
@@ -39,6 +41,57 @@ export const reducer = createReducer(
     };
   }),
 
+  on(infoUserSuccess, (state, action) => {
+    let loginRes = {
+      ...state.loginRes
+    };
+
+    switch (action.res.type) {
+      case UserInfoUpdateType.Image:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.Intro:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.TelephoneVisible:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage1:
+        loginRes = {
+          ...loginRes,
+          statusMessage1: action.res.info
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage2:
+        loginRes = {
+          ...loginRes,
+          statusMessage2: action.res.info
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage3:
+        loginRes = {
+          ...loginRes,
+          statusMessage3: action.res.info
+        };
+        break;
+      default:
+        break;
+    }
+
+    return {
+      ...state,
+      loginRes: {
+        ...loginRes
+      }
+    };
+  }),
+
   on(logoutInitialize, (state, action) => {
     return {
       ...initialState

projects/ucap-webmessenger-protocol-info/src/lib/types/user-info-update.type.ts

@@ -4,7 +4,13 @@ export enum UserInfoUpdateType {
   // R: 인트로소개
   Intro = 'R',
   // T: 전화보이기여부
-  TelephoneVisible = 'T'
+  TelephoneVisible = 'T',
+  /** StatusMessage1 */
+  StatusMessage1 = 'S1',
+  /** StatusMessage2 */
+  StatusMessage2 = 'S2',
+  /** StatusMessage3 */
+  StatusMessage3 = 'S3'
 }
 
 export enum TelephoneVisibleType {

projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'ucap-inline-edit-input',
@@ -6,6 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./inline-edit-input.component.scss']
 })
 export class InlineEditInputComponent implements OnInit {
+  @Output()
+  apply = new EventEmitter<void>();
+
   get editMode() {
     return this._editMode;
   }
@@ -29,5 +32,6 @@ export class InlineEditInputComponent implements OnInit {
 
   onClickApply(event: Event) {
     this.editMode = false;
+    this.apply.emit();
   }
 }