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

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

@@ -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 }));
           }
         }

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

@@ -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) {

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

@@ -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
 ];

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

@@ -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>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.spec.ts

@@ -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();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts

@@ -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
+    });
+  }
+}

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

@@ -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,

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

@@ -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"
   >

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

@@ -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()