This commit is contained in:
병준 박 2019-10-29 13:45:28 +09:00
commit 6ff7a3acda
3 changed files with 83 additions and 32 deletions

View File

@ -10,7 +10,7 @@
value="" value=""
formControlName="searchInput" formControlName="searchInput"
[matAutocomplete]="auto" [matAutocomplete]="auto"
(keydown.enter)="onKeyDownEnter(inputSearch.value)" (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
/> />
<mat-autocomplete #auto="matAutocomplete"> <mat-autocomplete #auto="matAutocomplete">
<mat-option <mat-option
@ -26,16 +26,51 @@
matSuffix matSuffix
mat-icon-button mat-icon-button
aria-label="Clear" aria-label="Clear"
(click)="inputSearch.value = ''; searchWord = ''; isSearch = false" (click)="inputSearch.value = ''; onClickSearchCancel()"
> >
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</form> </form>
</div> </div>
<div class="app-layout-chat-left-sidenav-chat-list" perfectScrollbar> <div
*ngIf="!isSearch"
class="app-layout-chat-left-sidenav-chat-list"
perfectScrollbar
>
<ucap-room-list-item <ucap-room-list-item
*ngFor="let room of getRoomList()" *ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectedRoom(room)"
(contextmenu)="onContextMenuChat($event, room)"
>
</ucap-room-list-item>
<!-- <cdk-virtual-scroll-viewport
itemSize="20"
class="app-layout-chat-left-sidenav-chat-list-viewport"
>
<ucap-room-list-item
*cdkVirtualFor="let room of getRoomList()"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectedRoom(room)"
(contextmenu)="onContextMenuChat($event, room)"
>
</ucap-room-list-item>
</cdk-virtual-scroll-viewport> -->
</div>
<div
*ngIf="!!isSearch"
class="app-layout-chat-left-sidenav-chat-list search"
perfectScrollbar
>
<ucap-room-list-item
*ngFor="let room of searchRoomList"
[loginRes]="loginRes" [loginRes]="loginRes"
[roomInfo]="room" [roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)" [roomUserInfo]="getRoomUserList(room)"

View File

@ -12,7 +12,7 @@ import {
import * as AppStore from '@app/store'; import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat'; import * as ChatStore from '@app/store/messenger/chat';
import * as RoomStore from '@app/store/messenger/room'; import * as RoomStore from '@app/store/messenger/room';
import { tap, debounceTime } from 'rxjs/operators'; import { tap, debounceTime, delay } from 'rxjs/operators';
import { import {
RoomUserDetailData, RoomUserDetailData,
RoomUserData RoomUserData
@ -45,7 +45,7 @@ export class ChatComponent implements OnInit, OnDestroy {
roomSubscription: Subscription; roomSubscription: Subscription;
isSearch = false; isSearch = false;
searchWord = ''; searchRoomList: RoomInfo[] = [];
fgSearch: FormGroup; fgSearch: FormGroup;
recommendedWordList: string[]; recommendedWordList: string[];
filteredRecommendedWordList: string[]; filteredRecommendedWordList: string[];
@ -69,7 +69,7 @@ export class ChatComponent implements OnInit, OnDestroy {
this.fgSearch this.fgSearch
.get('searchInput') .get('searchInput')
.valueChanges.pipe(debounceTime(300)) .valueChanges.pipe(debounceTime(100))
.subscribe(value => { .subscribe(value => {
if (value !== null && value.length > 0) { if (value !== null && value.length > 0) {
this.filteredRecommendedWordList = this.recommendedWordList.filter( this.filteredRecommendedWordList = this.recommendedWordList.filter(
@ -96,6 +96,7 @@ export class ChatComponent implements OnInit, OnDestroy {
.pipe( .pipe(
tap(([room, roomUser, roomUserShort]) => { tap(([room, roomUser, roomUserShort]) => {
this.roomList = room; this.roomList = room;
this.searchRoomList = room;
this.roomUserList = roomUser; this.roomUserList = roomUser;
this.roomUserShortList = roomUserShort; this.roomUserShortList = roomUserShort;
@ -148,11 +149,38 @@ export class ChatComponent implements OnInit, OnDestroy {
} }
} }
onKeyDownEnter(search: string) { onClickSearchCancel() {
this.isSearch = false;
this.searchRoomList = [];
this.filteredRecommendedWordList = [];
}
onKeyDownEnter(event: KeyboardEvent, search: string) {
event.preventDefault();
event.stopPropagation();
if (search.trim().length > 1) { if (search.trim().length > 1) {
this.isSearch = true; this.isSearch = true;
this.searchWord = search; this.searchRoomList = this.roomList.filter(room => {
if (room.roomName.indexOf(search) >= 0) {
return true;
} else if (
this.getRoomUserList(room).filter(user =>
user.seq !== this.loginRes.userSeq
? user.name.indexOf(search) >= 0
: false
).length > 0
) {
return true;
} else {
return false;
} }
});
} else {
this.isSearch = false;
this.searchRoomList = [];
}
setTimeout(() => (this.filteredRecommendedWordList = []), 200);
} }
onContextMenuChat(event: MouseEvent, roomInfo: RoomInfo) { onContextMenuChat(event: MouseEvent, roomInfo: RoomInfo) {
@ -180,27 +208,6 @@ export class ChatComponent implements OnInit, OnDestroy {
); );
} }
getRoomList() {
if (this.isSearch && this.searchWord.trim().length > 0) {
return this.roomList.filter(room => {
if (room.roomName.indexOf(this.searchWord) >= 0) {
return true;
}
if (
this.getRoomUserList(room).filter(user =>
user.seq !== this.loginRes.userSeq
? user.name.indexOf(this.searchWord) >= 0
: false
).length > 0
) {
return true;
}
return false;
});
}
return this.roomList;
}
getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] { getRoomUserList(roomInfo: RoomInfo): (RoomUserInfo | UserInfoShort)[] {
if (!!this.roomUserList && 0 < this.roomUserList.length) { if (!!this.roomUserList && 0 < this.roomUserList.length) {
const i = this.roomUserList.findIndex( const i = this.roomUserList.findIndex(

View File

@ -23,8 +23,7 @@
> >
<ucap-profile-user-list-item <ucap-profile-user-list-item
*cdkVirtualFor=" *cdkVirtualFor="
let userInfo of selectedDepartmentUserInfoList$ | async; let userInfo of selectedDepartmentUserInfoList$ | async
templateCacheSize: 20
" "
[userInfo]="userInfo" [userInfo]="userInfo"
[checkable]="true" [checkable]="true"
@ -36,6 +35,16 @@
Loading... Loading...
</ucap-profile-user-list-item> </ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
<!-- <ucap-profile-user-list-item
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item> -->
</div> </div>
</div> </div>
<div *ngIf="!isUserSelect" class="btn-box"> <div *ngIf="!isUserSelect" class="btn-box">