통합검색에 필터링 기능 추가.
This commit is contained in:
parent
111eb42c92
commit
749903fb5a
|
@ -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">{{
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -80,6 +80,7 @@
|
|||
"fold": "Folding",
|
||||
"unfold": "Unfolding",
|
||||
"clearAndColse": "Data clear & Close",
|
||||
"andOthers": "and {{count}}others",
|
||||
"fieldProfile": "Profile",
|
||||
"fieldName": "Name",
|
||||
"fieldDeptartment": "Department",
|
||||
|
|
|
@ -80,6 +80,7 @@
|
|||
"fold": "접어두기",
|
||||
"unfold": "펼쳐보기",
|
||||
"clearAndColse": "검색 초기화 & 닫기",
|
||||
"andOthers": "외 {{count}}건",
|
||||
"fieldProfile": "프로필",
|
||||
"fieldName": "이름",
|
||||
"fieldDeptartment": "부서",
|
||||
|
|
Loading…
Reference in New Issue
Block a user