From 749903fb5ae26a91425b13a8ec1e4626530e0a28 Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 10 Mar 2020 10:13:29 +0900 Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EA=B2=80=EC=83=89=EC=97=90?= =?UTF-8?q?=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main-contents/organization.component.html | 24 +- .../integrated-search.dialog.component.html | 117 +++++++ .../integrated-search.dialog.component.ts | 300 +++++++++++++++++- .../src/assets/i18n/en.json | 1 + .../src/assets/i18n/ko.json | 1 + 5 files changed, 432 insertions(+), 11 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html index f79dbd28..2e442afa 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html +++ b/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 } + }}) - (+{{ fcGrade.value.length - 1 }} - {{ fcGrade.value?.length === 2 ? 'other' : 'others' }}) + (+{{ + 'search.andOthers' + | translate: { count: fcGrade.value.length - 1 } + }}) - (+{{ fcWorkPlace.value.length - 1 }} - {{ fcWorkPlace.value?.length === 2 ? 'other' : 'others' }}) + (+{{ + 'search.andOthers' + | translate: { count: fcWorkPlace.value.length - 1 } + }}) - (+{{ fcPresence.value.length - 1 }} - {{ fcPresence.value?.length === 2 ? 'other' : 'others' }}) + (+{{ + 'search.andOthers' + | translate: { count: fcPresence.value.length - 1 } + }}) {{ diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html index f5096c23..0f720b5d 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html @@ -19,6 +19,123 @@ (search)="onSearch($event)" > +
+ + {{ 'search.fieldCompany' | translate }} + + + {{ fcCompany.value ? fcCompany.value[0] : '' }} + + (+{{ + 'search.andOthers' + | translate: { count: fcCompany.value.length - 1 } + }}) + + + {{ option }} + + + + {{ 'search.fieldGrade' | translate }} + + + {{ fcGrade.value ? fcGrade.value[0] : '' }} + + (+{{ + 'search.andOthers' + | translate: { count: fcGrade.value.length - 1 } + }}) + + + {{ option }} + + + + {{ 'search.fieldWorkPlace' | translate }} + + + {{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }} + + (+{{ + 'search.andOthers' + | translate: { count: fcWorkPlace.value.length - 1 } + }}) + + + {{ option }} + + + + {{ 'presence.label' | translate }} + + + {{ setFilterOptionSelectedTextPresence() }} + + (+{{ + 'search.andOthers' + | translate: { count: fcPresence.value.length - 1 } + }}) + + + {{ + 'presence.online' | translate + }} + {{ + 'presence.away' | translate + }} + {{ + 'presence.statusMessage1' | translate + }} + {{ + 'presence.offline' | translate + }} + + +
; @@ -93,6 +101,32 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy { presenceSubject = new BehaviorSubject(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( 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); + } } diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json index 65ad546b..0c0826d2 100644 --- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json +++ b/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", diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json index af76a184..bc6c58d1 100644 --- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json +++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json @@ -80,6 +80,7 @@ "fold": "접어두기", "unfold": "펼쳐보기", "clearAndColse": "검색 초기화 & 닫기", + "andOthers": "외 {{count}}건", "fieldProfile": "프로필", "fieldName": "이름", "fieldDeptartment": "부서",