diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html index 80842c1a..00fb8550 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html @@ -15,6 +15,7 @@ (); + MainMenu = MainMenu; gnbMenuIndex$: Observable; @@ -42,4 +44,8 @@ export class MainContentsComponent implements OnInit { onCloseRightDrawer() { this.closeRightDrawer.emit(); } + + onClickConferenceCreate(userSeqs: number[]) { + this.createConference.emit(userSeqs); + } } 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 fd006ba5..407640fb 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 @@ -24,7 +24,7 @@ {{ 'common.searchResult' | translate }}({{ selectedDepartmentUserInfoList.length }} + >({{ departmentUserInfoList.length }} {{ 'common.units.persons' | translate }}) @@ -49,10 +49,14 @@
@@ -63,22 +67,60 @@ - Personal data + {{ 'organization.selectedUser' | translate }} + + ({{ selectedUserList.length }}) + {{ 'common.units.persons' | translate }} + - - Type your name and age - + - - First name - - - - - Age - - +
+ + + {{ userInfo.name }} + clear + + +
+
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss index f3dd3a47..f66adb06 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss @@ -103,3 +103,36 @@ width: 100%; } } + +.btn-box { + padding: 10px; + button { + width: 100%; + @include ellipsis(1); + span { + vertical-align: baseline; + } + } + ul { + display: flex; + flex-flow: row; + align-content: space-between; + margin-top: 4px; + li { + display: inline-flex; + align-items: center; + flex-grow: 1; + width: 33%; + margin-right: 4px; + &:last-child { + margin-right: 0; + } + button { + text-align: center; + width: 100%; + height: 100%; + padding: 0 6px; + } + } + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts index 0f267b9e..18b3f814 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts @@ -6,7 +6,11 @@ import { Output, EventEmitter } from '@angular/core'; -import { SelectedDept, UserInfoSS } from '@ucap-webmessenger/protocol-query'; +import { + SelectedDept, + UserInfoSS, + AuthResponse +} from '@ucap-webmessenger/protocol-query'; import { NGXLogger } from 'ngx-logger'; import { TranslateService } from '@ngx-translate/core'; import { DialogService } from '@ucap-webmessenger/ui'; @@ -25,8 +29,16 @@ import { WorkStatusType } from '@ucap-webmessenger/protocol-status'; import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; -import { KEY_VER_INFO } from '@app/types'; +import { KEY_VER_INFO, KEY_AUTH_INFO } from '@app/types'; import { Sort } from '@angular/material/sort'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { tap } from 'rxjs/operators'; +import { + SelectGroupDialogComponent, + SelectGroupDialogData, + SelectGroupDialogResult +} from '../../dialogs/group/select-group.dialog.component'; +import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; @Component({ selector: 'app-layout-messenger-organization', @@ -36,8 +48,13 @@ import { Sort } from '@angular/material/sort'; export class OrganizationComponent implements OnInit, OnDestroy { @Output() openProfile = new EventEmitter(); + @Output() + createConference = new EventEmitter(); + loginRes: LoginResponse; + loginResSubscription: Subscription; sessionVerinfo: VersionInfo2Response; + authInfo: AuthResponse; isSearch: boolean; isSearchSubscription: Subscription; @@ -47,7 +64,9 @@ export class OrganizationComponent implements OnInit, OnDestroy { departmentUserInfoListSubscription: Subscription; searchDepartmentUserInfoListSubscription: Subscription; - selectedDepartmentUserInfoList: UserInfoSS[] = []; + departmentUserInfoList: UserInfoSS[] = []; + + selectedUserList: UserInfoSS[] = []; // selected user in departmentUserList detail profileImageRoot: string; presence$: Observable; @@ -64,9 +83,19 @@ export class OrganizationComponent implements OnInit, OnDestroy { this.sessionVerinfo = this.sessionStorageService.get( KEY_VER_INFO ); + this.authInfo = this.sessionStorageService.get(KEY_AUTH_INFO); } ngOnInit() { + this.loginResSubscription = this.store + .pipe( + select(AppStore.AccountSelector.AuthenticationSelector.loginRes), + tap(loginRes => { + this.loginRes = loginRes; + }) + ) + .subscribe(); + this.isSearchSubscription = this.store .pipe(select(AppStore.MessengerSelector.QuerySelector.isSearch)) .subscribe(isSearch => { @@ -89,7 +118,7 @@ export class OrganizationComponent implements OnInit, OnDestroy { ) .subscribe(list => { if (!this.isSearch) { - this.selectedDepartmentUserInfoList = list; + this.departmentUserInfoList = list; } }); @@ -101,7 +130,7 @@ export class OrganizationComponent implements OnInit, OnDestroy { ) .subscribe(list => { if (!!this.isSearch) { - this.selectedDepartmentUserInfoList = list; + this.departmentUserInfoList = list; } }); @@ -113,6 +142,9 @@ export class OrganizationComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { + if (!!this.loginResSubscription) { + this.loginResSubscription.unsubscribe(); + } if (!!this.isSearchSubscription) { this.isSearchSubscription.unsubscribe(); } @@ -124,6 +156,97 @@ export class OrganizationComponent implements OnInit, OnDestroy { } } + /** Selected User Handling */ + onToggleAllUser(params: { isChecked: boolean; userInfos: UserInfoSS[] }) { + params.userInfos.forEach(userInfo => { + if (params.isChecked) { + if ( + this.selectedUserList.filter(user => user.seq === userInfo.seq) + .length === 0 + ) { + this.selectedUserList = [...this.selectedUserList, userInfo]; + } + } else { + this.selectedUserList = this.selectedUserList.filter( + user => user.seq !== userInfo.seq + ); + } + }); + } + onToggleUser(userInfo: UserInfoSS) { + if (userInfo.seq === this.loginRes.userSeq) { + return; + } + + if ( + this.selectedUserList.filter(user => user.seq === userInfo.seq).length === + 0 + ) { + this.selectedUserList = [...this.selectedUserList, userInfo]; + } else { + this.selectedUserList = this.selectedUserList.filter( + item => item.seq !== userInfo.seq + ); + } + this.changeDetectorRef.detectChanges(); + } + + /** Handling chipset for selectedUserList */ + /** 선택된 사용자 취소 */ + onClickDeleteUser(userInfo: UserInfoSS) { + this.selectedUserList = this.selectedUserList.filter( + item => item.seq !== userInfo.seq + ); + this.changeDetectorRef.detectChanges(); + } + + /** Handling Button */ + async onClickAddGroup() { + this.logger.debug('onClickAddGroup', this.selectedUserList); + + const result = await this.dialogService.open< + SelectGroupDialogComponent, + SelectGroupDialogData, + SelectGroupDialogResult + >(SelectGroupDialogComponent, { + width: '600px', + data: { + title: this.translateService.instant('group.selectTargetGroup') + } + }); + + if (!!result && !!result.choice && result.choice) { + if (!!result.group) { + const oldGroup: GroupDetailData = result.group; + const trgtUserSeq: number[] = []; + result.group.userSeqs.map(seq => trgtUserSeq.push(seq)); + this.selectedUserList + .filter(v => result.group.userSeqs.indexOf(v.seq) < 0) + .forEach(user => { + trgtUserSeq.push(user.seq); + }); + + this.store.dispatch( + SyncStore.updateGroupMember({ + oldGroup, + trgtUserSeq + }) + ); + } + } + } + onClickChatOpen() { + if (!!this.selectedUserList && this.selectedUserList.length > 0) { + const seq: number[] = []; + this.selectedUserList.map(user => seq.push(user.seq)); + this.store.dispatch(ChatStore.openRoom({ userSeqList: seq })); + } + } + onClickConference() { + const targetUserSeqs = this.selectedUserList.map(userInfo => userInfo.seq); + this.createConference.emit(targetUserSeqs); + } + onClickOpenProfile(userSeq: number) { this.openProfile.emit(userSeq); } diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html index f97fe8ce..2211dc32 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html @@ -29,6 +29,7 @@ [selectedChat]="this.selectedChat$ | async" (openProfile)="onClickOpenProfile($event)" (closeRightDrawer)="onCloseRightDrawer()" + (createConference)="conferenceCreate($event)" >