buddy list is implemented

projects/ucap-webmessenger-app/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { UCapProtocolModule } from '@ucap-webmessenger/protocol';
 import { UCapAuthenticationProtocolModule } from '@ucap-webmessenger/protocol-authentication';
 import { UCapInnerProtocolModule } from '@ucap-webmessenger/protocol-inner';
 import { UCapOptionProtocolModule } from '@ucap-webmessenger/protocol-option';
+import { UCapSyncProtocolModule } from '@ucap-webmessenger/protocol-sync';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
@@ -64,6 +65,7 @@ import { GUARDS } from './guards';
     UCapAuthenticationProtocolModule.forRoot(),
     UCapInnerProtocolModule.forRoot(),
     UCapOptionProtocolModule.forRoot(),
+    UCapSyncProtocolModule.forRoot(),
 
     UCapUiModule.forRoot(),
     UCapUiAccountModule.forRoot(),

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.html

@@ -1 +1,3 @@
-<ucap-group-expansion-panel></ucap-group-expansion-panel>
+<ucap-group-expansion-panel
+  [buddyInfoList$]="buddyInfoList$"
+></ucap-group-expansion-panel>

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

@@ -1,5 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
+import { Store, select } from '@ngrx/store';
+
 import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+
+import * as AppStore from '@app/store';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -8,7 +16,13 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
   animations: ucapAnimations
 })
 export class GroupComponent implements OnInit {
-  constructor() {}
+  buddyInfoList$: Observable<UserInfo[]>;
 
-  ngOnInit() {}
+  constructor(private store: Store<any>) {}
+
+  ngOnInit() {
+    this.buddyInfoList$ = this.store.pipe(
+      select(AppStore.MessengerSelector.SyncSelector.buddyInfoList)
+    );
+  }
 }

projects/ucap-webmessenger-app/src/app/store/index.ts

@@ -12,11 +12,13 @@ import { storeFreeze } from 'ngrx-store-freeze';
 import { environment } from '../../environments/environment';
 
 import * as AccountStore from './account';
+import * as MessengerStore from './messenger';
 import * as SettingStore from './setting';
 
 export interface State {
   router: fromRouter.RouterReducerState<any>;
   account: AccountStore.State;
+  messenger: MessengerStore.State;
   setting: SettingStore.State;
 }
 
@@ -31,12 +33,14 @@ export const ROOT_REDUCERS = new InjectionToken<
   factory: () => ({
     router: fromRouter.routerReducer,
     account: AccountStore.reducers,
+    messenger: MessengerStore.reducers,
     setting: SettingStore.reducers
   })
 });
 
 export const effects: Type<any>[] = [
   ...AccountStore.effects,
+  ...MessengerStore.effects,
   ...SettingStore.effects
 ];
 
@@ -61,6 +65,10 @@ export const AccountSelector = AccountStore.selectors(
   (state: State) => state.account
 );
 
+export const MessengerSelector = MessengerStore.selectors(
+  (state: State) => state.messenger
+);
+
 export const SettingSelector = SettingStore.selectors(
   (state: State) => state.setting
 );

projects/ucap-webmessenger-app/src/app/store/messenger/index.ts

@@ -0,0 +1,27 @@
+import { Type } from '@angular/core';
+import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
+
+import * as SyncStore from './sync';
+
+export interface State {
+  sync: SyncStore.State;
+}
+
+export const effects: Type<any>[] = [SyncStore.Effects];
+
+export function reducers(state: State | undefined, action: Action) {
+  return combineReducers({
+    sync: SyncStore.reducer
+  })(state, action);
+}
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    SyncSelector: SyncStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.sync
+      )
+    )
+  };
+}

projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts

@@ -0,0 +1,26 @@
+import { createAction, props } from '@ngrx/store';
+import {
+  BuddyRequest,
+  BuddyResponse,
+  BuddyDetailData
+} from '@ucap-webmessenger/protocol-sync';
+
+export const buddy2 = createAction(
+  '[Messenger::Sync] Buddy2',
+  props<BuddyRequest>()
+);
+
+export const buddy2Data = createAction(
+  '[Messenger::Sync] Buddy2 Data',
+  props<{ data: BuddyDetailData }>()
+);
+
+export const buddy2Success = createAction(
+  '[Messenger::Sync] Buddy2 Success',
+  props<{ res: BuddyResponse }>()
+);
+
+export const buddy2Failure = createAction(
+  '[Messenger::Sync] Buddy2 Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map } from 'rxjs/operators';
+
+import { buddy2, buddy2Success, buddy2Failure, buddy2Data } from './actions';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+
+import {
+  SyncProtocolService,
+  SSVC_TYPE_SYNC_BUDDY2_DATA,
+  BuddyResponse,
+  BuddyDetailData
+} from '@ucap-webmessenger/protocol-sync';
+import { regViewSuccess } from '@app/store/setting/option';
+
+@Injectable()
+export class Effects {
+  regViewSuccess$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(regViewSuccess),
+      map(() => buddy2({ syncDate: '' }))
+    )
+  );
+
+  buddy2$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(buddy2),
+      exhaustMap(req =>
+        this.syncProtocolService.buddy2(req).pipe(
+          map(res => {
+            switch (res.Type) {
+              case SSVC_TYPE_SYNC_BUDDY2_DATA:
+                return buddy2Data({ data: res as BuddyDetailData });
+            }
+
+            return buddy2Success({ res: res as BuddyResponse });
+          }),
+          catchError(error => of(buddy2Failure({ error })))
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private syncProtocolService: SyncProtocolService,
+    private sessionStorageService: SessionStorageService
+  ) {}
+}

projects/ucap-webmessenger-app/src/app/store/messenger/sync/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';

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

@@ -0,0 +1,19 @@
+import { createReducer, on } from '@ngrx/store';
+import { initialState } from './state';
+import { buddy2Data, buddy2Success } from './actions';
+
+export const reducer = createReducer(
+  initialState,
+  on(buddy2Data, (state, action) => {
+    return {
+      ...state,
+      buddyInfoList: [...state.buddyInfoList, ...action.data.buddyInfos]
+    };
+  }),
+  on(buddy2Success, (state, action) => {
+    return {
+      ...state,
+      buddy2SyncDate: action.res.syncDate
+    };
+  })
+);

projects/ucap-webmessenger-app/src/app/store/messenger/sync/state.ts

@@ -0,0 +1,21 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+
+export interface State {
+  buddyInfoList: UserInfo[];
+  buddy2SyncDate: string;
+}
+
+export const initialState: State = {
+  buddyInfoList: [],
+  buddy2SyncDate: ''
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    buddyInfoList: createSelector(
+      selector,
+      (state: State) => state.buddyInfoList
+    )
+  };
+}

projects/ucap-webmessenger-app/src/app/store/setting/index.ts

@@ -2,18 +2,29 @@ import { Type } from '@angular/core';
 import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
 
 import * as InitStore from './init';
+import * as OptionStore from './option';
+import * as QueryStore from './query';
 import * as VersionInfoStore from './version-info';
 
 export interface State {
   init: InitStore.State;
+  option: OptionStore.State;
+  query: QueryStore.State;
   versionInfo: VersionInfoStore.State;
 }
 
-export const effects: Type<any>[] = [VersionInfoStore.Effects];
+export const effects: Type<any>[] = [
+  InitStore.Effects,
+  OptionStore.Effects,
+  QueryStore.Effects,
+  VersionInfoStore.Effects
+];
 
 export function reducers(state: State | undefined, action: Action) {
   return combineReducers({
     init: InitStore.reducer,
+    option: OptionStore.reducer,
+    query: QueryStore.reducer,
     versionInfo: VersionInfoStore.reducer
   })(state, action);
 }
@@ -26,6 +37,18 @@ export function selectors<S>(selector: Selector<any, State>) {
         (state: State) => state.init
       )
     ),
+    OptionSelector: OptionStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.option
+      )
+    ),
+    QuerySelector: QueryStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.query
+      )
+    ),
     VersionInfoSelector: VersionInfoStore.selectors(
       createSelector(
         selector,

projects/ucap-webmessenger-app/src/app/store/setting/option/actions.ts

@@ -0,0 +1,38 @@
+import { createAction, props } from '@ngrx/store';
+
+import {
+  RegViewRequest,
+  RegViewResponse,
+  RegUpdateRequest,
+  RegUpdateResponse
+} from '@ucap-webmessenger/protocol-option';
+
+export const regView = createAction(
+  '[Setting::Option] RegView',
+  props<RegViewRequest>()
+);
+
+export const regViewSuccess = createAction(
+  '[Setting::Option] RegView Success',
+  props<{ res: RegViewResponse }>()
+);
+
+export const regViewFailure = createAction(
+  '[Setting::Option] RegView Failure',
+  props<{ error: any }>()
+);
+
+export const regUpdate = createAction(
+  '[Setting::Option] RegUpdate',
+  props<RegUpdateRequest>()
+);
+
+export const regUpdateSuccess = createAction(
+  '[Setting::Option] RegUpdate Success',
+  props<{ res: RegUpdateResponse }>()
+);
+
+export const regUpdateFailure = createAction(
+  '[Setting::Option] RegUpdate Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/setting/option/effects.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { regViewSuccess, regViewFailure } from './actions';
+import { initSettings } from '../init';
+import { OptionProtocolService } from '@ucap-webmessenger/protocol-option';
+
+@Injectable()
+export class Effects {
+  initSettings$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(initSettings),
+      exhaustMap(() =>
+        this.optionProtocolService.regView({}).pipe(
+          map(res => regViewSuccess({ res })),
+          catchError(error => of(regViewFailure({ error })))
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private optionProtocolService: OptionProtocolService
+  ) {}
+}

projects/ucap-webmessenger-app/src/app/store/setting/option/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';

projects/ucap-webmessenger-app/src/app/store/setting/option/reducers.ts

@@ -0,0 +1,19 @@
+import { createReducer, on } from '@ngrx/store';
+import { initialState } from './state';
+import { regViewSuccess, regUpdateSuccess } from './actions';
+
+export const reducer = createReducer(
+  initialState,
+  on(regViewSuccess, (state, action) => {
+    return {
+      ...state,
+      reg: action.res
+    };
+  }),
+  on(regUpdateSuccess, (state, action) => {
+    return {
+      ...state,
+      reg: action.res
+    };
+  })
+);

projects/ucap-webmessenger-app/src/app/store/setting/option/state.ts

@@ -0,0 +1,20 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { RegViewResponse } from '@ucap-webmessenger/protocol-option';
+
+// tslint:disable-next-line: no-empty-interface
+export interface State {
+  reg?: RegViewResponse;
+}
+
+export const initialState: State = {
+  reg: null
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    reg: createSelector(
+      selector,
+      (state: State) => state.reg
+    )
+  };
+}

projects/ucap-webmessenger-app/src/app/store/setting/query/actions.ts

@@ -0,0 +1,15 @@
+import { createAction, props } from '@ngrx/store';
+
+import { AuthRequest, AuthResponse } from '@ucap-webmessenger/protocol-query';
+
+export const auth = createAction('[Setting::Query] Auth', props<AuthRequest>());
+
+export const authSuccess = createAction(
+  '[Setting::Query] Auth Success',
+  props<{ res: AuthResponse }>()
+);
+
+export const authFailure = createAction(
+  '[Setting::Query] Auth Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/setting/query/effects.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { authSuccess, authFailure } from './actions';
+import { initSettings } from '../init';
+
+import {
+  QueryProtocolService,
+  AuthRequest
+} from '@ucap-webmessenger/protocol-query';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+
+@Injectable()
+export class Effects {
+  initSettings$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(initSettings),
+      map(() => {
+        const loginInfo = this.sessionStorageService.get<LoginInfo>(
+          KEY_LOGIN_INFO
+        );
+        return {
+          deviceType: loginInfo.deviceType
+        } as AuthRequest;
+      }),
+      exhaustMap(req =>
+        this.queryProtocolService.auth(req).pipe(
+          map(res => authSuccess({ res })),
+          catchError(error => of(authFailure({ error })))
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private sessionStorageService: SessionStorageService,
+    private queryProtocolService: QueryProtocolService
+  ) {}
+}

projects/ucap-webmessenger-app/src/app/store/setting/query/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';

projects/ucap-webmessenger-app/src/app/store/setting/query/reducers.ts

@@ -0,0 +1,13 @@
+import { createReducer, on } from '@ngrx/store';
+import { initialState } from './state';
+import { authSuccess } from './actions';
+
+export const reducer = createReducer(
+  initialState,
+  on(authSuccess, (state, action) => {
+    return {
+      ...state,
+      auth: action.res
+    };
+  })
+);

projects/ucap-webmessenger-app/src/app/store/setting/query/state.ts

@@ -0,0 +1,19 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { AuthResponse } from '@ucap-webmessenger/protocol-query';
+
+export interface State {
+  auth?: AuthResponse;
+}
+
+export const initialState: State = {
+  auth: null
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    auth: createSelector(
+      selector,
+      (state: State) => state.auth
+    )
+  };
+}

projects/ucap-webmessenger-protocol-sync/src/lib/models/buddy.ts

@@ -80,7 +80,6 @@ export const decodeBuddyDetailData: ProtocolDecoder<BuddyDetailData> = (
   const buddyInfos: UserInfo[] = [];
   message.bodyList.forEach(buddyinfo => {
     const info = buddyinfo.split(BodyStringDivider);
-    console.log('buddyinfo', info);
     let i = 0;
     buddyInfos.push({
       seq: info[i],

projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.ts

@@ -11,7 +11,8 @@ import {
   encodeBuddy,
   decodeBuddyData,
   decodeBuddy,
-  decodeBuddyDetailData
+  decodeBuddyDetailData,
+  BuddyDetailData
 } from '../models/buddy';
 import {
   SVC_TYPE_SYNC_BUDDY,
@@ -90,7 +91,9 @@ export class SyncProtocolService {
       );
   }
 
-  public buddy2(req: BuddyRequest): Observable<BuddyResponse | BuddyData> {
+  public buddy2(
+    req: BuddyRequest
+  ): Observable<BuddyResponse | BuddyDetailData> {
     return this.protocolService
       .call(SVC_TYPE_SYNC_BUDDY, SSVC_TYPE_SYNC_BUDDY2_REQ, ...encodeBuddy(req))
       .pipe(

projects/ucap-webmessenger-protocol-sync/src/public-api.ts

@@ -8,4 +8,5 @@ export * from './lib/services/sync-protocol.service';
 
 export * from './lib/ucap-sync-protocol.module';
 
+export * from './lib/types/service';
 export * from './lib/types/userInfo';

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

@@ -1,8 +1,10 @@
 <mat-accordion>
-  <mat-expansion-panel *ngFor="let group of groupList">
+  <mat-expansion-panel *ngFor="let buddyInfo of buddyInfoList$ | async">
     <mat-expansion-panel-header>
-      <mat-panel-title> </mat-panel-title>
-      <mat-panel-description> </mat-panel-description>
+      <mat-panel-title> {{ buddyInfo.name }} </mat-panel-title>
+      <mat-panel-description
+        >{{ buddyInfo.employeeNum }}
+      </mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
 </mat-accordion>

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

@@ -1,4 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { UserInfo } from '@ucap-webmessenger/protocol-room';
 
 @Component({
   selector: 'ucap-group-expansion-panel',
@@ -7,7 +9,7 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class ExpansionPanelComponent implements OnInit {
   @Input()
-  groupList: any[];
+  buddyInfoList$: Observable<UserInfo[]>;
 
   constructor() {}