수정 :: 유저 선택 팝업 :: 새그룹추가 화면 구성.

This commit is contained in:
leejh 2019-10-18 13:02:43 +09:00
parent 36ea177786
commit 2f214e1ef2
5 changed files with 136 additions and 83 deletions

View File

@ -49,7 +49,6 @@ export class LeftSideComponent implements OnInit {
});
if (!!result && !!result.choice && result.choice) {
this.logger.debug(result.selectedUserList);
if (!!result.selectedUserList && result.selectedUserList.length > 0) {
const userSeqs: number[] = [];
result.selectedUserList.map(user => userSeqs.push(user.seq));

View File

@ -1,3 +1,9 @@
import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
import {
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
} from './../../dialogs/chat/create-chat.dialog.component';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Observable, combineLatest, Subscription } from 'rxjs';
@ -153,16 +159,29 @@ export class GroupComponent implements OnInit, OnDestroy {
case 'GROUP_NEW':
{
const result = await this.dialogService.open<
CreateGroupDialogComponent,
CreateGroupDialogData,
CreateGroupDialogResult
>(CreateGroupDialogComponent, {
width: '220px',
CreateChatDialogComponent,
CreateChatDialogData,
CreateChatDialogResult
>(CreateChatDialogComponent, {
width: '600px',
height: '500px',
data: {
title: 'Logout',
message: 'Logout ?'
type: UserSelectDialogType.NewGroup,
title: 'New Group'
}
});
if (!!result && !!result.choice && result.choice) {
this.logger.debug(result);
if (
!!result.selectedUserList &&
result.selectedUserList.length > 0
) {
// const userSeqs: number[] = [];
// result.selectedUserList.map(user => userSeqs.push(user.seq));
// this.store.dispatch(ChatStore.openRoom({ userSeqList: userSeqs }));
}
}
}
break;
case 'GROUP_EXPAND_MORE':

View File

@ -2,85 +2,101 @@
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
<mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header>
<mat-card-content
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div fxFlex class="container">
<mat-tab-group mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<mat-card-content>
<div *ngIf="data.type === UserSelectDialogType.NewGroup">
<form name="inputForm" [formGroup]="inputForm" novalidate>
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
<input
matInput
#input
maxlength="20"
placeholder="그룹이름"
formControlName="groupName"
/>
<mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
</mat-form-field>
</form>
</div>
<div
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div fxFlex class="container">
<mat-tab-group mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<ucap-organization-tenant-search
[companyList]="companyList$ | async"
[companyCode]="companyCode"
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
></ucap-organization-tenant-search>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[selectedUserList]="selectedUserList"
[checkable]="true"
(checkGroup)="onCheckGroup($event)"
>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
[userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo"
<ucap-organization-tenant-search
[companyList]="companyList$ | async"
[companyCode]="companyCode"
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
></ucap-organization-tenant-search>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
[checkable]="true"
(checkGroup)="onCheckGroup($event)"
>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
[userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
[checkable]="true"
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
[isUserSelect]="true"
(checkUser)="onCheckUser($event)"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
[isUserSelect]="true"
(checkUser)="onCheckUser($event)"
>
</app-layout-chat-left-sidenav-organization>
</mat-tab>
<mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ucap-room-list-item
*ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
>
</ucap-room-list-item>
</mat-tab>
</mat-tab-group>
</div>
<div fxFlex="150px">
<ul>
<li *ngFor="let userInfo of selectedUserList">
{{ userInfo.name }}
<button
mat-icon-button
aria-label="Delete user"
(click)="onClickDeleteUser(userInfo)"
>
<mat-icon>close</mat-icon>
</button>
<mat-icon></mat-icon>
</li>
</ul>
</app-layout-chat-left-sidenav-organization>
</mat-tab>
<mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ucap-room-list-item
*ngFor="let room of roomList"
[loginRes]="loginRes"
[roomInfo]="room"
[roomUserInfo]="getRoomUserList(room)"
[sessionVerinfo]="sessionVerinfo"
>
</ucap-room-list-item>
</mat-tab>
</mat-tab-group>
</div>
<div fxFlex="150px">
<ul>
<li *ngFor="let userInfo of selectedUserList">
{{ userInfo.name }}
<button
mat-icon-button
aria-label="Delete user"
(click)="onClickDeleteUser(userInfo)"
>
<mat-icon>close</mat-icon>
</button>
<mat-icon></mat-icon>
</li>
</ul>
</div>
</div>
</mat-card-content>
<mat-card-actions class="button-farm flex-row">

View File

@ -1,5 +1,6 @@
import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { NGXLogger } from 'ngx-logger';
import { Observable, combineLatest, Subscription } from 'rxjs';
@ -41,6 +42,7 @@ export interface CreateChatDialogData {
export interface CreateChatDialogResult {
choice: boolean;
selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
groupName?: string;
}
@Component({
@ -57,6 +59,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
@Inject(MAT_DIALOG_DATA) public data: CreateChatDialogData,
private store: Store<any>,
private sessionStorageService: SessionStorageService,
private formBuilder: FormBuilder,
private logger: NGXLogger
) {}
@ -83,6 +86,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
// 수집 데이터
selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
inputForm: FormGroup;
ngOnInit() {
const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
this.companyCode = loginInfo.companyCode;
@ -155,6 +160,10 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
})
)
.subscribe();
this.inputForm = this.formBuilder.group({
groupName: ['', [Validators.required]]
});
}
ngOnDestroy(): void {
@ -267,7 +276,11 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
onClickChoice(choice: boolean): void {
this.dialogRef.close({
choice,
selectedUserList: this.selectedUserList
selectedUserList: this.selectedUserList,
groupName:
this.data.type === UserSelectDialogType.NewGroup
? this.inputForm.get('groupName').value
: ''
});
}
}

View File

@ -13,6 +13,8 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { DragDropModule } from '@angular/cdk/drag-drop';
@ -25,12 +27,16 @@ import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
import { COMPONENTS } from './components';
import { DIALOGS } from './dialogs';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
DragDropModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatBadgeModule,
MatButtonModule,
MatCardModule,