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

This commit is contained in:
leejinho 2020-03-10 10:13:29 +09:00
parent 111eb42c92
commit 749903fb5a
5 changed files with 432 additions and 11 deletions

View File

@ -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">{{

View File

@ -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

View File

@ -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);
}
}

View File

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

View File

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