통합검색에 필터링 기능 추가.

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

@@ -45,8 +45,10 @@
                 *ngIf="fcCompany.value?.length > 1"
                 class="example-additional-selection"
               >
-                (+{{ fcCompany.value.length - 1 }}
+                (+{{
-                {{ fcCompany.value?.length === 2 ? 'other' : 'others' }})
+                  'search.andOthers'
+                    | translate: { count: fcCompany.value.length - 1 }
+                }})
               </span>
             </mat-select-trigger>
             <mat-option
@@ -70,8 +72,10 @@
                 *ngIf="fcGrade.value?.length > 1"
                 class="example-additional-selection"
               >
-                (+{{ fcGrade.value.length - 1 }}
+                (+{{
-                {{ fcGrade.value?.length === 2 ? 'other' : 'others' }})
+                  'search.andOthers'
+                    | translate: { count: fcGrade.value.length - 1 }
+                }})
               </span>
             </mat-select-trigger>
             <mat-option
@@ -95,8 +99,10 @@
                 *ngIf="fcWorkPlace.value?.length > 1"
                 class="example-additional-selection"
               >
-                (+{{ fcWorkPlace.value.length - 1 }}
+                (+{{
-                {{ fcWorkPlace.value?.length === 2 ? 'other' : 'others' }})
+                  'search.andOthers'
+                    | translate: { count: fcWorkPlace.value.length - 1 }
+                }})
               </span>
             </mat-select-trigger>
             <mat-option
@@ -120,8 +126,10 @@
                 *ngIf="fcPresence.value?.length > 1"
                 class="example-additional-selection"
               >
-                (+{{ fcPresence.value.length - 1 }}
+                (+{{
-                {{ fcPresence.value?.length === 2 ? 'other' : 'others' }})
+                  'search.andOthers'
+                    | translate: { count: fcPresence.value.length - 1 }
+                }})
               </span>
             </mat-select-trigger>
             <mat-option [value]="StatusCode.OnLine">{{

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -19,6 +19,123 @@
           (search)="onSearch($event)"
         >
         </ucap-integrated-search-form>
+        <div class="organization-option">
+          <mat-form-field>
+            <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
+            <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"
+                >
+                  (+{{
+                    'search.andOthers'
+                      | translate: { count: fcCompany.value.length - 1 }
+                  }})
+                </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"
+                >
+                  (+{{
+                    'search.andOthers'
+                      | translate: { count: fcGrade.value.length - 1 }
+                  }})
+                </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"
+                >
+                  (+{{
+                    'search.andOthers'
+                      | translate: { count: fcWorkPlace.value.length - 1 }
+                  }})
+                </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"
+                >
+                  (+{{
+                    'search.andOthers'
+                      | translate: { count: fcPresence.value.length - 1 }
+                  }})
+                </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 style="position: relative;">
         <div

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts

@@ -4,7 +4,8 @@ import {
   Inject,
   OnDestroy,
   ChangeDetectorRef,
-  NgZone
+  NgZone,
+  ViewChild
 } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { KEY_VER_INFO, MainMenu, KEY_AUTH_INFO } from '@app/types';
@@ -35,7 +36,8 @@ import {
   AlertDialogResult,
   ConfirmDialogComponent,
   ConfirmDialogData,
-  ConfirmDialogResult
+  ConfirmDialogResult,
+  TranslateService as UCapTranslateService
 } from '@ucap-webmessenger/ui';
 import {
   ProfileDialogComponent,
@@ -47,7 +49,7 @@ import {
   SelectGroupDialogData,
   SelectGroupDialogResult
 } from '../group/select-group.dialog.component';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 import {
   ConferenceService,
@@ -59,6 +61,10 @@ import {
   MessageWriteDialogResult,
   MessageWriteDialogData
 } from '../message/message-write.dialog.component';
+import { MatSelect } from '@angular/material/select';
+import { FormControl } from '@angular/forms';
+import { StatusCode } from '@ucap-webmessenger/core';
+import { MatOption } from '@angular/material/core';
 
 export interface IntegratedSearchDialogData {
   keyword: string;
@@ -79,6 +85,8 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
   sessionVerinfo: VersionInfo2Response;
   environmentsInfo: EnvironmentsInfo;
   authInfo: AuthResponse;
+  ucapLangChangeSubscription: Subscription;
+  ucapCurrentLocale: string;
 
   searchDepartmentUserInfoListSubscription: Subscription;
   searchingProcessing$: Observable<boolean>;
@@ -93,6 +101,32 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
   presenceSubject = new BehaviorSubject<StatusBulkInfo[]>(undefined);
 
   currentSearchWord: string;
+  StatusCode = StatusCode;
+
+  @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();
 
   constructor(
     public dialogRef: MatDialogRef<
@@ -105,6 +139,7 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     private daesangProtocolService: DaesangProtocolService,
     private dialogService: DialogService,
     private translateService: TranslateService,
+    private ucapTranslateService: UCapTranslateService,
     private conferenceService: ConferenceService,
     private callService: CallService,
 
@@ -122,6 +157,8 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
       KEY_VER_INFO
     );
+
+    this.ucapCurrentLocale = this.ucapTranslateService.currentLang;
   }
 
   ngOnInit() {
@@ -136,6 +173,13 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
+    this.ucapLangChangeSubscription = this.ucapTranslateService.changedLang.subscribe(
+      (event: LangChangeEvent) => {
+        this.ucapCurrentLocale = event.lang;
+        this.setFilterOptionsLang();
+      }
+    );
+
     this.searchDepartmentUserInfoListSubscription = this.store
       .pipe(
         select(
@@ -146,6 +190,11 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
       .subscribe(list => {
         this.departmentUserInfoList = list;
         this.originDepartmentUserInfoList = list;
+
+        // filter option add
+        if (!!list && list.length > 0) {
+          this.setFilterOptions(list);
+        }
       });
 
     this.searchingProcessing$ = this.store.pipe(
@@ -172,6 +221,9 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
     }
+    if (!!this.ucapLangChangeSubscription) {
+      this.ucapLangChangeSubscription.unsubscribe();
+    }
     if (!!this.searchDepartmentUserInfoListSubscription) {
       this.searchDepartmentUserInfoListSubscription.unsubscribe();
     }
@@ -439,4 +491,246 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
   onCancel(): void {
     this.dialogRef.close({ clear: true });
   }
+
+  /** 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/assets/i18n/en.json

@@ -80,6 +80,7 @@
     "fold": "Folding",
     "unfold": "Unfolding",
     "clearAndColse": "Data clear & Close",
+    "andOthers": "and {{count}}others",
     "fieldProfile": "Profile",
     "fieldName": "Name",
     "fieldDeptartment": "Department",

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

@@ -80,6 +80,7 @@
     "fold": "접어두기",
     "unfold": "펼쳐보기",
     "clearAndColse": "검색 초기화 & 닫기",
+    "andOthers": "외 {{count}}건",
     "fieldProfile": "프로필",
     "fieldName": "이름",
     "fieldDeptartment": "부서",