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=""
formControlName="searchInput"
[matAutocomplete]="auto"
(keydown.enter)="onKeyDownEnter(inputSearch.value)"
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
/>
<mat-autocomplete #auto="matAutocomplete">
<mat-option
@ -26,16 +26,51 @@
matSuffix
mat-icon-button
aria-label="Clear"
(click)="inputSearch.value = ''; searchWord = ''; isSearch = false"
(click)="inputSearch.value = ''; onClickSearchCancel()"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</form>
</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
*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"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"

View File

@ -12,7 +12,7 @@ import {
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as RoomStore from '@app/store/messenger/room';
import { tap, debounceTime } from 'rxjs/operators';
import { tap, debounceTime, delay } from 'rxjs/operators';
import {
RoomUserDetailData,
RoomUserData
@ -45,7 +45,7 @@ export class ChatComponent implements OnInit, OnDestroy {
roomSubscription: Subscription;
isSearch = false;
searchWord = '';
searchRoomList: RoomInfo[] = [];
fgSearch: FormGroup;
recommendedWordList: string[];
filteredRecommendedWordList: string[];
@ -69,7 +69,7 @@ export class ChatComponent implements OnInit, OnDestroy {
this.fgSearch
.get('searchInput')
.valueChanges.pipe(debounceTime(300))
.valueChanges.pipe(debounceTime(100))
.subscribe(value => {
if (value !== null && value.length > 0) {
this.filteredRecommendedWordList = this.recommendedWordList.filter(
@ -96,6 +96,7 @@ export class ChatComponent implements OnInit, OnDestroy {
.pipe(
tap(([room, roomUser, roomUserShort]) => {
this.roomList = room;
this.searchRoomList = room;
this.roomUserList = roomUser;
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) {
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) {
@ -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)[] {
if (!!this.roomUserList && 0 < this.roomUserList.length) {
const i = this.roomUserList.findIndex(

View File

@ -23,8 +23,7 @@
>
<ucap-profile-user-list-item
*cdkVirtualFor="
let userInfo of selectedDepartmentUserInfoList$ | async;
templateCacheSize: 20
let userInfo of selectedDepartmentUserInfoList$ | async
"
[userInfo]="userInfo"
[checkable]="true"
@ -36,6 +35,16 @@
Loading...
</ucap-profile-user-list-item>
</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 *ngIf="!isUserSelect" class="btn-box">