Selected Organization is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -5,5 +5,9 @@
       (selected)="onSelectedOrganization($event)"
     ></ucap-organization-tree>
   </div>
-  <div fxFlex="50">dddd</div>
+  <div fxFlex="50" style="overflow: scroll">
+    <div *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async">
+      ddddd
+    </div>
+  </div>
 </div>

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

@@ -4,15 +4,18 @@ import { Observable } from 'rxjs';
 import {
   DeptInfo,
   QueryProtocolService,
-  DeptSearchType
+  DeptSearchType,
+  UserInfoSS,
+  DeptUserResponse
 } from '@ucap-webmessenger/protocol-query';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
 
 import * as AppStore from '@app/store';
+import * as QueryStore from '@app/store/messenger/query';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
-import { take, map } from 'rxjs/operators';
+import { take, map, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -22,6 +25,8 @@ import { take, map } from 'rxjs/operators';
 })
 export class OrganizationComponent implements OnInit {
   departmentInfoList$: Observable<DeptInfo[]>;
+  selectedDepartmentUserInfoList$: Observable<UserInfoSS[]>;
+  selectedDepartmentStatus$: Observable<DeptUserResponse>;
 
   constructor(
     private store: Store<any>,
@@ -34,29 +39,37 @@ export class OrganizationComponent implements OnInit {
     this.departmentInfoList$ = this.store.pipe(
       select(AppStore.MessengerSelector.QuerySelector.departmentInfoList)
     );
+    this.selectedDepartmentUserInfoList$ = this.store.pipe(
+      select(
+        AppStore.MessengerSelector.QuerySelector.selectedDepartmentUserInfoList
+      )
+    );
+    this.selectedDepartmentStatus$ = this.store.pipe(
+      select(AppStore.MessengerSelector.QuerySelector.selectedDepartmentStatus)
+    );
   }
 
   onSelectedOrganization(deptInfo: DeptInfo) {
     const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
 
-    // this.store
-    //   .pipe(
-    //     take(1),
-    //     select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
-    //     map(loginRes => {
-
-    //       this.queryProtocolService.deptUser({
-    //         divCd: 'ORG',
-    //         companyCode: loginInfo.companyCode,
-    //         seq: deptInfo.seq,
-    //         search: '',
-    //         searchRange: DeptSearchType.All,
-    //         senderCompanyCode: loginInfo.companyCode,
-    //         senderEmployeeType: loginRes.
-    // });
-
-    //     })
-    //   )
-    //   .subscribe();
+    this.store
+      .pipe(
+        take(1),
+        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
+        map(loginRes => {
+          this.store.dispatch(
+            QueryStore.deptUser({
+              divCd: 'ORG',
+              companyCode: loginInfo.companyCode,
+              seq: deptInfo.seq,
+              search: '',
+              searchRange: DeptSearchType.All,
+              senderCompanyCode: loginInfo.companyCode,
+              senderEmployeeType: loginRes.userInfo.employeeType
+            })
+          );
+        })
+      )
+      .subscribe();
   }
 }

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

@@ -4,7 +4,10 @@ import {
   AuthRequest,
   AuthResponse,
   DeptRequest,
-  DeptInfo
+  DeptInfo,
+  DeptUserRequest,
+  UserInfoSS,
+  DeptUserResponse
 } from '@ucap-webmessenger/protocol-query';
 
 export const auth = createAction(
@@ -36,3 +39,18 @@ export const deptFailure = createAction(
   '[Messenger::Query] Dept Failure',
   props<{ error: any }>()
 );
+
+export const deptUser = createAction(
+  '[Messenger::Query] Dept User',
+  props<DeptUserRequest>()
+);
+
+export const deptUserSuccess = createAction(
+  '[Messenger::Query] Dept User Success',
+  props<{ userInfos: UserInfoSS[]; res: DeptUserResponse }>()
+);
+
+export const deptUserFailure = createAction(
+  '[Messenger::Query] Dept User Failure',
+  props<{ error: any }>()
+);

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

@@ -5,14 +5,26 @@ import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { of } from 'rxjs';
 import { catchError, map, tap, switchMap } from 'rxjs/operators';
 
-import { dept, deptSuccess, deptFailure } from './actions';
+import {
+  dept,
+  deptSuccess,
+  deptFailure,
+  deptUser,
+  deptUserSuccess,
+  deptUserFailure
+} from './actions';
 
 import {
   QueryProtocolService,
   DeptInfo,
   SSVC_TYPE_QUERY_DEPT_DATA,
   SSVC_TYPE_QUERY_DEPT_RES,
-  DeptData
+  DeptData,
+  UserInfoSS,
+  SSVC_TYPE_QUERY_DEPT_USER_DATA,
+  DeptUserData,
+  SSVC_TYPE_QUERY_DEPT_USER_RES,
+  DeptUserResponse
 } from '@ucap-webmessenger/protocol-query';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 
@@ -53,6 +65,40 @@ export class Effects {
     { dispatch: false }
   );
 
+  deptUser$ = createEffect(
+    () => {
+      let userInfos: UserInfoSS[];
+
+      return this.actions$.pipe(
+        ofType(deptUser),
+        tap(() => {
+          userInfos = [];
+        }),
+        switchMap(req => {
+          return this.queryProtocolService.deptUser(req).pipe(
+            map(res => {
+              switch (res.Type) {
+                case SSVC_TYPE_QUERY_DEPT_USER_DATA:
+                  userInfos.push(...(res as DeptUserData).userInfos);
+                  break;
+                case SSVC_TYPE_QUERY_DEPT_USER_RES:
+                  this.store.dispatch(
+                    deptUserSuccess({
+                      userInfos,
+                      res: res as DeptUserResponse
+                    })
+                  );
+                  break;
+              }
+            }),
+            catchError(error => of(deptUserFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

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

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { authSuccess, deptSuccess } from './actions';
+import { authSuccess, deptSuccess, deptUserSuccess } from './actions';
 
 export const reducer = createReducer(
   initialState,
@@ -16,5 +16,13 @@ export const reducer = createReducer(
       ...state,
       departmentInfoList: action.departmentInfoList
     };
+  }),
+
+  on(deptUserSuccess, (state, action) => {
+    return {
+      ...state,
+      selectedDepartmentUserInfoList: action.userInfos,
+      selectedDepartmentStatus: action.res
+    };
   })
 );

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

@@ -1,15 +1,25 @@
 import { Selector, createSelector } from '@ngrx/store';
-import { AuthResponse, DeptInfo } from '@ucap-webmessenger/protocol-query';
+import {
+  AuthResponse,
+  DeptInfo,
+  UserInfoSS,
+  DeptUserResponse
+} from '@ucap-webmessenger/protocol-query';
 
 export interface State {
   auth?: AuthResponse;
 
   departmentInfoList: DeptInfo[] | null;
+
+  selectedDepartmentUserInfoList: UserInfoSS[] | null;
+  selectedDepartmentStatus: DeptUserResponse | null;
 }
 
 export const initialState: State = {
   auth: null,
-  departmentInfoList: null
+  departmentInfoList: null,
+  selectedDepartmentUserInfoList: null,
+  selectedDepartmentStatus: null
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
@@ -21,6 +31,14 @@ export function selectors<S>(selector: Selector<any, State>) {
     departmentInfoList: createSelector(
       selector,
       (state: State) => state.departmentInfoList
+    ),
+    selectedDepartmentUserInfoList: createSelector(
+      selector,
+      (state: State) => state.selectedDepartmentUserInfoList
+    ),
+    selectedDepartmentStatus: createSelector(
+      selector,
+      (state: State) => state.selectedDepartmentStatus
     )
   };
 }