ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

기능추가 :: 조직도 > 그룹에 추가 :: 그룹선택 팝업 및 그룹에 추가 하는 로직 구성.

Browse Source
This commit is contained in:
leejh 2019-10-23 13:18:38 +09:00
parent 914d62d48b
commit d7a6eb66ed
10 changed files with 275 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
View File

@ -373,7 +373,6 @@ export class GroupComponent implements OnInit, OnDestroy {
});
if (!!result && !!result.choice && result.choice) {
this.logger.debug('delete group', group);
this.store.dispatch(SyncStore.delGroup({ group }));
}
}

48
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
View File

@ -6,7 +6,7 @@ import {
EventEmitter,
Input
} from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
import { Observable, Subscription } from 'rxjs';
import {
DeptInfo,
@ -17,18 +17,24 @@ import {
UserInfoF,
UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
import * as AppStore from '@app/store';
import * as QueryStore from '@app/store/messenger/query';
import * as SyncStore from '@app/store/messenger/sync';
import * as ChatStore from '@app/store/messenger/chat';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { take, map, tap, delay } from 'rxjs/operators';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import {
SelectGroupDialogComponent,
SelectGroupDialogData,
SelectGroupDialogResult
} from '../../dialogs/group/select-group.dialog.component';
@Component({
selector: 'app-layout-chat-left-sidenav-organization',
@ -66,6 +72,7 @@ export class OrganizationComponent implements OnInit, OnDestroy {
private store: Store<any>,
private queryProtocolService: QueryProtocolService,
private sessionStorageService: SessionStorageService,
private dialogService: DialogService,
private logger: NGXLogger
) {}
@ -185,8 +192,43 @@ export class OrganizationComponent implements OnInit, OnDestroy {
onClickShowSelectedUserList() {
this.logger.debug('onClickShowSelectedUserList', this.selectedUserList);
}
onClickAddGroup() {
async onClickAddGroup() {
this.logger.debug('onClickAddGroup', this.selectedUserList);
const result = await this.dialogService.open<
SelectGroupDialogComponent,
SelectGroupDialogData,
SelectGroupDialogResult
>(SelectGroupDialogComponent, {
width: '600px',
height: '500px',
data: {
title: 'Group Select'
}
});
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
})
);
this.selectedUserList = [];
}
}
}
onClickChatOpen() {
if (!!this.selectedUserList && this.selectedUserList.length > 0) {

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/index.ts
View File

@ -1,11 +1,13 @@
import { CreateGroupDialogComponent } from './create-group.dialog.component';
import { DeleteGroupDialogComponent } from './delete-group.dialog.component';
import { SelectGroupDialogComponent } from './select-group.dialog.component';
import { EditGroupDialogComponent } from './edit-group.dialog.component';
import { EditGroupMemberDialogComponent } from './edit-group-member.dialog.component';
export const DIALOGS = [
CreateGroupDialogComponent,
DeleteGroupDialogComponent,
SelectGroupDialogComponent,
EditGroupDialogComponent,
EditGroupMemberDialogComponent
];

74
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html Normal file
View File

@ -0,0 +1,74 @@
<mat-card class="confirm-card">
<mat-card-header>
<mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div>
<button
mat-button
*ngIf="!isShowAddGroupField"
(click)="isShowAddGroupField = !isShowAddGroupField"
>
<mat-icon>add_circle_outline</mat-icon> 새 그룹 추가
</button>
<div *ngIf="isShowAddGroupField">
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
<input
matInput
#inputGroupName
type="text"
maxlength="20"
placeholder="그룹이름"
value=""
/>
<button
mat-button
matSuffix
mat-icon-button
aria-label="Clear"
(click)="inputGroupName.value = ''"
>
<mat-icon>close</mat-icon>
</button>
<mat-hint align="end"
>{{ inputGroupName.value?.length || 0 }}/20</mat-hint
>
</mat-form-field>
<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
<mat-icon>add</mat-icon>
</button>
<button mat-button (click)="onClickAddGroupCancel()">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
<mat-selection-list #groups>
<mat-list-option
*ngFor="let groupBuddy of groupBuddyList$ | async"
[value]="groupBuddy.group"
>
{{ groupBuddy.group.name }}
</mat-list-option>
</mat-selection-list>
<!-- <div>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[checkable]="true"
>
</ucap-group-expansion-panel>
</div> -->
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>

0
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss Normal file
View File

24
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SelectGroupDialogComponent } from './select-group.dialog.component';
describe('app::layouts::messenger::SelectGroupDialogComponent', () => {
let component: SelectGroupDialogComponent;
let fixture: ComponentFixture<SelectGroupDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [SelectGroupDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SelectGroupDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

124
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts Normal file
View File

@ -0,0 +1,124 @@
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import {
MatDialogRef,
MAT_DIALOG_DATA,
MatSelectionList,
MatSelectionListChange
} from '@angular/material';
import { Observable, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { map } from 'rxjs/operators';
import * as AppStore from '@app/store';
import * as SyncStore from '@app/store/messenger/sync';
import {
DialogService,
ConfirmDialogComponent,
ConfirmDialogData,
ConfirmDialogResult
} from '@ucap-webmessenger/ui';
import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
export interface SelectGroupDialogData {
title: string;
}
export interface SelectGroupDialogResult {
choice: boolean;
group?: GroupDetailData;
}
@Component({
selector: 'app-layout-messenger-select-group',
templateUrl: './select-group.dialog.component.html',
styleUrls: ['./select-group.dialog.component.scss']
})
export class SelectGroupDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<
SelectGroupDialogData,
SelectGroupDialogResult
>,
@Inject(MAT_DIALOG_DATA) public data: SelectGroupDialogData,
private store: Store<any>,
private dialogService: DialogService
) {}
@ViewChild('groups', { static: true }) groups: MatSelectionList;
groupBuddyList$: Observable<
{ group: GroupDetailData; buddyList: UserInfo[] }[]
>;
selectedGroup: GroupDetailData;
isShowAddGroupField = false;
ngOnInit(): void {
this.groups.selectionChange.subscribe((s: MatSelectionListChange) => {
this.groups.deselectAll();
s.option.selected = true;
this.selectedGroup = s.option.value as GroupDetailData;
});
this.groupBuddyList$ = combineLatest([
this.store.pipe(
select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2)
),
this.store.pipe(
select(AppStore.MessengerSelector.SyncSelector.selectAllGroup2)
)
]).pipe(
map(([buddyList, groupList]) => {
const groupBuddyList: {
group: GroupDetailData;
buddyList: UserInfo[];
}[] = [];
for (const group of groupList) {
groupBuddyList.push({
group,
buddyList: buddyList.filter(buddy => {
return group.userSeqs.indexOf(buddy.seq) > -1;
})
});
}
return groupBuddyList;
})
);
}
async onClickAddGroup(groupName: string) {
const result = await this.dialogService.open<
ConfirmDialogComponent,
ConfirmDialogData,
ConfirmDialogResult
>(ConfirmDialogComponent, {
width: '220px',
data: {
title: 'Add group',
html: `그룹(${groupName})을 추가하시겠습니까?`
}
});
if (!!result && !!result.choice && result.choice) {
if (groupName.trim().length > 0) {
this.store.dispatch(
SyncStore.createGroup({
groupName: groupName.trim()
})
);
this.onClickAddGroupCancel();
}
}
}
onClickAddGroupCancel() {
this.isShowAddGroupField = false;
}
onClickChoice(choice: boolean): void {
this.dialogRef.close({
choice,
group: this.selectedGroup
});
}
}

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
View File

@ -1,3 +1,4 @@
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@ -47,6 +48,7 @@ import { ReactiveFormsModule } from '@angular/forms';
MatDividerModule,
MatIconModule,
MatMenuModule,
MatListModule,
MatProgressBarModule,
MatTabsModule,
MatToolbarModule,

4
projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
View File

@ -1,6 +1,6 @@
<mat-accordion #groupAccordion="matAccordion" [multi]="true">
<mat-expansion-panel
*ngIf="!checkable"
*ngIf="!!myProfileInfo && !checkable"
[togglePosition]="'before'"
class="groupExpansionPanel"
>
@ -19,7 +19,7 @@
</mat-expansion-panel>
<mat-expansion-panel
*ngIf="favoritBuddyList.length > 0 && !checkable"
*ngIf="!!favoritBuddyList && favoritBuddyList.length > 0 && !checkable"
[togglePosition]="'before'"
class="groupExpansionPanel"
>

4
projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
View File

@ -31,9 +31,9 @@ export class ExpansionPanelComponent implements OnInit {
@Input()
groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }[];
@Input()
favoritBuddyList: UserInfo[];
favoritBuddyList?: UserInfo[];
@Input()
myProfileInfo: UserInfo;
myProfileInfo?: UserInfo;
@Input()
checkable = false;
@Input()