조직도 필터 기능 추가.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html

@@ -31,9 +31,113 @@
         </h3>
       </div>
       <div class="organization-option">
-        <button mat-icon-button aria-label="more">
+        <mat-form-field>
-          <mat-icon>more_vert</mat-icon>
+          <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
-        </button>
+          <mat-select
+            #filterCompany
+            [formControl]="fcCompany"
+            multiple
+            (openedChange)="onOpenedChange($event)"
+          >
+            <mat-select-trigger>
+              {{ fcCompany.value ? fcCompany.value[0] : '' }}
+              <span
+                *ngIf="fcCompany.value?.length > 1"
+                class="example-additional-selection"
+              >
+                (+{{ fcCompany.value.length - 1 }}
+                {{ fcCompany.value?.length === 2 ? 'other' : 'others' }})
+              </span>
+            </mat-select-trigger>
+            <mat-option
+              *ngFor="let option of filterCompanyOption"
+              [value]="option"
+              >{{ option }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{ 'search.fieldGrade' | translate }}</mat-label>
+          <mat-select
+            #filterGrade
+            [formControl]="fcGrade"
+            multiple
+            (openedChange)="onOpenedChange($event)"
+          >
+            <mat-select-trigger>
+              {{ fcGrade.value ? fcGrade.value[0] : '' }}
+              <span
+                *ngIf="fcGrade.value?.length > 1"
+                class="example-additional-selection"
+              >
+                (+{{ fcGrade.value.length - 1 }}
+                {{ fcGrade.value?.length === 2 ? 'other' : 'others' }})
+              </span>
+            </mat-select-trigger>
+            <mat-option
+              *ngFor="let option of filterGradeOption"
+              [value]="option"
+              >{{ option }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{ 'search.fieldWorkPlace' | translate }}</mat-label>
+          <mat-select
+            #filterWorkPlace
+            [formControl]="fcWorkPlace"
+            multiple
+            (openedChange)="onOpenedChange($event)"
+          >
+            <mat-select-trigger>
+              {{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }}
+              <span
+                *ngIf="fcWorkPlace.value?.length > 1"
+                class="example-additional-selection"
+              >
+                (+{{ fcWorkPlace.value.length - 1 }}
+                {{ fcWorkPlace.value?.length === 2 ? 'other' : 'others' }})
+              </span>
+            </mat-select-trigger>
+            <mat-option
+              *ngFor="let option of filterWorkPlaceOption"
+              [value]="option"
+              >{{ option }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{ 'presence.label' | translate }}</mat-label>
+          <mat-select
+            #filterPresence
+            [formControl]="fcPresence"
+            multiple
+            (openedChange)="onOpenedChange($event)"
+          >
+            <mat-select-trigger>
+              {{ setFilterOptionSelectedTextPresence() }}
+              <span
+                *ngIf="fcPresence.value?.length > 1"
+                class="example-additional-selection"
+              >
+                (+{{ fcPresence.value.length - 1 }}
+                {{ fcPresence.value?.length === 2 ? 'other' : 'others' }})
+              </span>
+            </mat-select-trigger>
+            <mat-option [value]="StatusCode.OnLine">{{
+              'presence.online' | translate
+            }}</mat-option>
+            <mat-option [value]="StatusCode.Away">{{
+              'presence.away' | translate
+            }}</mat-option>
+            <mat-option [value]="StatusCode.Busy">{{
+              'presence.statusMessage1' | translate
+            }}</mat-option>
+            <mat-option [value]="StatusCode.Offline">{{
+              'presence.offline' | translate
+            }}</mat-option>
+          </mat-select>
+        </mat-form-field>
       </div>
     </div>
     <div class="progress">
@@ -50,7 +154,7 @@
     <div fxFlex="0 0 auto" class="table-box">
       <ucap-organization-detail-table
         [loginRes]="loginRes"
-        [presence]="presence$ | async"
+        [presence$]="presenceSubject.asObservable()"
         [departmentUserInfoList]="departmentUserInfoList"
         [profileImageRoot]="profileImageRoot"
         [selectedUserList]="selectedUserList"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts

@@ -4,7 +4,8 @@ import {
   ChangeDetectorRef,
   OnDestroy,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild
 } from '@angular/core';
 import {
   SelectedDept,
@@ -12,7 +13,7 @@ import {
   AuthResponse
 } from '@ucap-webmessenger/protocol-query';
 import { NGXLogger } from 'ngx-logger';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { DialogService } from '@ucap-webmessenger/ui';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { Store, select } from '@ngrx/store';
@@ -22,8 +23,8 @@ import * as SettingsStore from '@app/store/messenger/settings';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as ChatStore from '@app/store/messenger/chat';
 
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, BehaviorSubject, merge } from 'rxjs';
-import { PresenceType } from '@ucap-webmessenger/core';
+import { PresenceType, StatusCode } from '@ucap-webmessenger/core';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO, KEY_AUTH_INFO, MainMenu } from '@app/types';
@@ -36,6 +37,10 @@ import {
   SelectGroupDialogResult
 } from '../../dialogs/group/select-group.dialog.component';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
+import { TranslateService as UCapTranslateService } from '@ucap-webmessenger/ui';
+import { FormControl } from '@angular/forms';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
 
 @Component({
   selector: 'app-layout-messenger-organization',
@@ -48,10 +53,37 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   @Output()
   createConference = new EventEmitter<number[]>();
 
+  @ViewChild('filterCompany', { static: false })
+  filterCompany: MatSelect;
+  filterCompanyOption: string[] = [];
+  fcCompany = new FormControl();
+  @ViewChild('filterGrade', { static: false })
+  filterGrade: MatSelect;
+  filterGradeOption: string[] = [];
+  filterGradeOptionSet: {
+    value: string[];
+    valueEn: string[];
+    valueCn: string[];
+  } = {
+    value: [],
+    valueEn: [],
+    valueCn: []
+  };
+  fcGrade = new FormControl();
+  @ViewChild('filterWorkPlace', { static: false })
+  filterWorkPlace: MatSelect;
+  filterWorkPlaceOption: string[] = [];
+  fcWorkPlace = new FormControl();
+  @ViewChild('filterPresence', { static: false })
+  filterPresence: MatSelect;
+  fcPresence = new FormControl();
+
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   sessionVerinfo: VersionInfo2Response;
   authInfo: AuthResponse;
+  ucapLangChangeSubscription: Subscription;
+  ucapCurrentLocale: string;
 
   isSearch: boolean;
   isSearchSubscription: Subscription;
@@ -62,25 +94,32 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   searchDepartmentUserInfoListSubscription: Subscription;
 
   departmentUserInfoList: UserInfoSS[] = [];
+  originDepartmentUserInfoList: UserInfoSS[] = [];
 
   selectedUserList: UserInfoSS[] = []; // selected user in departmentUserList detail
 
   profileImageRoot: string;
-  presence$: Observable<StatusBulkInfo[]>;
+  presenceSubscription: Subscription;
+  presenceSubject = new BehaviorSubject<StatusBulkInfo[]>(undefined);
   PresenceType = PresenceType;
+  StatusCode = StatusCode;
 
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
     private dialogService: DialogService,
     private translateService: TranslateService,
+    private ucapTranslateService: UCapTranslateService,
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
       KEY_VER_INFO
     );
+
     this.authInfo = this.sessionStorageService.get<AuthResponse>(KEY_AUTH_INFO);
+
+    this.ucapCurrentLocale = this.ucapTranslateService.currentLang;
   }
 
   ngOnInit() {
@@ -93,6 +132,13 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
+    this.ucapLangChangeSubscription = this.ucapTranslateService.changedLang.subscribe(
+      (event: LangChangeEvent) => {
+        this.ucapCurrentLocale = event.lang;
+        this.setFilterOptionsLang();
+      }
+    );
+
     this.isSearchSubscription = this.store
       .pipe(select(AppStore.MessengerSelector.QuerySelector.isSearch))
       .subscribe(isSearch => {
@@ -116,6 +162,12 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       .subscribe(list => {
         if (!this.isSearch) {
           this.departmentUserInfoList = list;
+          this.originDepartmentUserInfoList = list;
+
+          // filter option add
+          if (!!list && list.length > 0) {
+            this.setFilterOptions(list);
+          }
         }
       });
 
@@ -128,12 +180,24 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       .subscribe(list => {
         if (!!this.isSearch) {
           this.departmentUserInfoList = list;
+          this.originDepartmentUserInfoList = list;
+
+          // filter option add
+          if (!!list && list.length > 0) {
+            this.setFilterOptions(list);
+          }
         }
       });
 
-    this.presence$ = this.store.pipe(
+    this.presenceSubscription = this.store
-      select(AppStore.MessengerSelector.StatusSelector.selectAllStatusBulkInfo)
+      .pipe(
-    );
+        select(
+          AppStore.MessengerSelector.StatusSelector.selectAllStatusBulkInfo
+        )
+      )
+      .subscribe(presence => {
+        this.presenceSubject.next(presence);
+      });
 
     this.profileImageRoot = this.sessionVerinfo.profileRoot;
   }
@@ -142,6 +206,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
     }
+    if (!!this.ucapLangChangeSubscription) {
+      this.ucapLangChangeSubscription.unsubscribe();
+    }
     if (!!this.isSearchSubscription) {
       this.isSearchSubscription.unsubscribe();
     }
@@ -151,6 +218,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     if (!!this.searchDepartmentUserInfoListSubscription) {
       this.searchDepartmentUserInfoListSubscription.unsubscribe();
     }
+    if (!!this.presenceSubscription) {
+      this.presenceSubscription.unsubscribe();
+    }
   }
 
   /** Selected User Handling */
@@ -251,8 +321,249 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     const targetUserSeqs = this.selectedUserList.map(userInfo => userInfo.seq);
     this.createConference.emit(targetUserSeqs);
   }
-
   onClickOpenProfile(userSeq: number) {
     this.openProfile.emit(userSeq);
   }
+
+  /** Handling Filters */
+  setFilterOptions(list: UserInfoSS[]) {
+    // option set
+    this.filterCompanyOption = [];
+    this.filterGradeOption = [];
+    this.filterGradeOptionSet = {
+      value: [],
+      valueEn: [],
+      valueCn: []
+    };
+    this.filterWorkPlaceOption = [];
+
+    list.forEach(info => {
+      if (!!info.companyName) {
+        this.filterCompanyOption.push(info.companyName);
+      }
+
+      if (!!info.grade) {
+        this.filterGradeOptionSet.value.push(info.grade);
+      }
+      if (!!info.gradeEn) {
+        this.filterGradeOptionSet.valueEn.push(info.gradeEn);
+      }
+      if (!!info.gradeCn) {
+        this.filterGradeOptionSet.valueCn.push(info.gradeCn);
+      }
+      if (!!info.workplace) {
+        this.filterWorkPlaceOption.push(info.workplace);
+      }
+    });
+    // remove duplication.
+    if (!!this.filterCompanyOption && this.filterCompanyOption.length > 0) {
+      this.filterCompanyOption = this.filterCompanyOption.reduce(
+        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+        []
+      );
+    }
+    if (
+      !!this.filterGradeOptionSet &&
+      this.filterGradeOptionSet.value &&
+      this.filterGradeOptionSet.value.length > 0
+    ) {
+      this.filterGradeOptionSet.value = this.filterGradeOptionSet.value.reduce(
+        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+        []
+      );
+    }
+    if (
+      !!this.filterGradeOptionSet &&
+      this.filterGradeOptionSet.valueEn &&
+      this.filterGradeOptionSet.valueEn.length > 0
+    ) {
+      this.filterGradeOptionSet.valueEn = this.filterGradeOptionSet.valueEn.reduce(
+        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+        []
+      );
+    }
+    if (
+      !!this.filterGradeOptionSet &&
+      this.filterGradeOptionSet.valueCn &&
+      this.filterGradeOptionSet.valueCn.length > 0
+    ) {
+      this.filterGradeOptionSet.valueCn = this.filterGradeOptionSet.valueCn.reduce(
+        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+        []
+      );
+    }
+    if (!!this.filterWorkPlaceOption && this.filterWorkPlaceOption.length > 0) {
+      this.filterWorkPlaceOption = this.filterWorkPlaceOption.reduce(
+        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+        []
+      );
+    }
+
+    this.setFilterOptionsLang();
+  }
+  setFilterOptionsLang() {
+    const ucapLang = this.ucapCurrentLocale;
+    switch (ucapLang) {
+      case 'en':
+        this.filterGradeOption =
+          !!this.filterGradeOptionSet.valueEn &&
+          this.filterGradeOptionSet.valueEn.length > 0
+            ? this.filterGradeOptionSet.valueEn.slice()
+            : [];
+        break;
+      case 'cn':
+        this.filterGradeOption =
+          !!this.filterGradeOptionSet.valueCn &&
+          this.filterGradeOptionSet.valueCn.length > 0
+            ? this.filterGradeOptionSet.valueCn.slice()
+            : [];
+        break;
+      default:
+        // ko
+        this.filterGradeOption =
+          !!this.filterGradeOptionSet.value &&
+          this.filterGradeOptionSet.value.length > 0
+            ? this.filterGradeOptionSet.value.slice()
+            : [];
+        this.filterGradeOption = this.filterGradeOptionSet.value.slice();
+    }
+  }
+  setFilterOptionSelectedTextPresence() {
+    let firstPresence = '';
+    if (!this.filterPresence) {
+      return firstPresence;
+    }
+    const presences = this.filterPresence.selected as MatOption[];
+    if (!!presences && presences.length > 0) {
+      firstPresence = presences[0].value;
+    }
+
+    switch (firstPresence) {
+      case StatusCode.OnLine:
+        firstPresence = this.translateService.instant('presence.online');
+        break;
+      case StatusCode.Away:
+        firstPresence = this.translateService.instant('presence.away');
+        break;
+      case StatusCode.Busy:
+        firstPresence = this.translateService.instant(
+          'presence.statusMessage1'
+        );
+        break;
+      case StatusCode.Offline:
+        firstPresence = this.translateService.instant('presence.offline');
+        break;
+    }
+    return firstPresence;
+  }
+  onOpenedChange(isOpened: boolean) {
+    // only close action.
+    if (!isOpened) {
+      this.filteredDeptUserList();
+    }
+  }
+  filteredDeptUserList() {
+    const companies = this.filterCompany.selected as MatOption[];
+    const grades = this.filterGrade.selected as MatOption[];
+    const workplaces = this.filterWorkPlace.selected as MatOption[];
+    const presences = this.filterPresence.selected as MatOption[];
+
+    let isMulti = false;
+    if (!!companies && companies.length > 0) {
+      isMulti = true;
+      const data = !!isMulti
+        ? this.originDepartmentUserInfoList
+        : this.departmentUserInfoList;
+
+      this.departmentUserInfoList = data.filter(userInfo => {
+        if (
+          companies
+            .map(option => option.value)
+            .some(opt => opt === userInfo.companyName)
+        ) {
+          return true;
+        }
+        return false;
+      });
+    }
+    if (!!grades && grades.length > 0) {
+      isMulti = true;
+      const data = !!isMulti
+        ? this.originDepartmentUserInfoList
+        : this.departmentUserInfoList;
+
+      this.departmentUserInfoList = data.filter(userInfo => {
+        if (
+          grades
+            .map(option => option.value)
+            .some(opt => {
+              let trgtGrade = userInfo.grade;
+
+              if (this.ucapCurrentLocale === 'en') {
+                trgtGrade = userInfo.gradeEn;
+              } else if (this.ucapCurrentLocale === 'cn') {
+                trgtGrade = userInfo.gradeCn;
+              }
+
+              return opt === trgtGrade;
+            })
+        ) {
+          return true;
+        }
+        return false;
+      });
+    }
+    if (!!workplaces && workplaces.length > 0) {
+      isMulti = true;
+      const data = !!isMulti
+        ? this.originDepartmentUserInfoList
+        : this.departmentUserInfoList;
+
+      this.departmentUserInfoList = data.filter(userInfo => {
+        if (
+          workplaces
+            .map(option => option.value)
+            .some(opt => opt === userInfo.workplace)
+        ) {
+          return true;
+        }
+        return false;
+      });
+    }
+    if (!!presences && presences.length > 0) {
+      isMulti = true;
+      const data = !!isMulti
+        ? this.originDepartmentUserInfoList
+        : this.departmentUserInfoList;
+
+      this.departmentUserInfoList = data.filter(userInfo => {
+        const userPresences = this.presenceSubject.value.filter(
+          presence => presence.userSeq === userInfo.seq
+        );
+        let userPresence = StatusCode.Offline;
+
+        if (!!userPresences && userPresences.length > 0) {
+          userPresence = userPresences[0].pcStatus;
+        }
+
+        if (
+          presences
+            .map(option => option.value)
+            .some(opt => {
+              return opt === userPresence;
+            })
+        ) {
+          return true;
+        }
+        return false;
+      });
+    }
+
+    if (!isMulti) {
+      this.departmentUserInfoList = this.originDepartmentUserInfoList.slice();
+    }
+
+    // // reset filterOption by data filtered.
+    // this.setFilterOptions(this.departmentUserInfoList);
+  }
 }

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

@@ -72,6 +72,10 @@ export const reducer = createReducer(
 
   on(updateSuccess, (state, action) => {
     const curRoomInfo = state.roomInfo;
+    if (!curRoomInfo) {
+      return { ...state };
+    }
+
     let roomName = curRoomInfo.roomName;
     let receiveAlarm = curRoomInfo.receiveAlarm;
 

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

@@ -142,6 +142,7 @@
     }
   },
   "presence": {
+    "label": "Status",
     "settingOfAwayTime": "Setting of away time",
     "offline": "Offline",
     "online": "Online",

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

@@ -142,6 +142,7 @@
     }
   },
   "presence": {
+    "label": "상태",
     "settingOfAwayTime": "부재 중 시간 설정",
     "offline": "오프라인",
     "online": "온라인",

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html

@@ -60,14 +60,14 @@
             {{ getWorkstatusInfo(element, 'text') }}
           </span>
           <span class="name">
-            {{ element.name }}
+            {{ element | ucapTranslate: 'name' }}
           </span>
           <span class="grade">
-            {{ element.grade }}
+            {{ element | ucapTranslate: 'grade' }}
           </span>
         </div>
         <div class="deptName">
-          {{ element.deptName }}
+          {{ element | ucapTranslate: 'deptName' }}
         </div>
       </td>
     </ng-container>

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.ts

@@ -4,7 +4,8 @@ import {
   Input,
   Output,
   EventEmitter,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  OnDestroy
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { UserInfoSS } from '@ucap-webmessenger/protocol-query';
@@ -15,13 +16,14 @@ import {
 } from '@ucap-webmessenger/protocol-status';
 import { Sort } from '@angular/material/sort';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
   selector: 'ucap-organization-detail-table',
   templateUrl: './detail-table.component.html',
   styleUrls: ['./detail-table.component.scss']
 })
-export class DetailTableComponent implements OnInit {
+export class DetailTableComponent implements OnInit, OnDestroy {
   @Input('departmentUserInfoList')
   set userInfoListIn(userInfo: UserInfoSS[]) {
     this.departmentUserInfoList = userInfo;
@@ -30,7 +32,7 @@ export class DetailTableComponent implements OnInit {
   @Input()
   loginRes: LoginResponse;
   @Input()
-  presence: StatusBulkInfo[];
+  presence$: Observable<StatusBulkInfo[]>;
   @Input()
   profileImageRoot: string;
   @Input()
@@ -46,6 +48,9 @@ export class DetailTableComponent implements OnInit {
   @Output()
   toggleUser = new EventEmitter<UserInfoSS>();
 
+  presenceSubscription: Subscription;
+  presence: StatusBulkInfo[];
+
   departmentUserInfoList: UserInfoSS[];
   sortedData: UserInfoSS[] = [];
 
@@ -64,7 +69,17 @@ export class DetailTableComponent implements OnInit {
     private logger: NGXLogger
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.presenceSubscription = this.presence$.subscribe(presence => {
+      this.presence = presence;
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.presenceSubscription) {
+      this.presenceSubscription.unsubscribe();
+    }
+  }
 
   getPresence(userInfo: UserInfoSS, type: PresenceType): string {
     const presences = this.presence.filter(p => p.userSeq === userInfo.seq);