group menu is added

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

@@ -5,9 +5,39 @@
       [companyCode]="companyCode"
       (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
     ></ucap-organization-tenant-search>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="groupMenu"
+      aria-label="group menu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #groupMenu="matMenu" xPosition="after" yPosition="below">
+      <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
+        <mat-icon>group_add</mat-icon>
+        <span>새 그룹 추가</span>
+      </button>
+      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
+        <mat-icon>expand_more</mat-icon>
+        <span>그룹 전체 열기</span>
+      </button>
+      <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
+        <mat-icon>expand_less</mat-icon>
+        <span>그룹 전체 닫기</span>
+      </button>
+      <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
+        <mat-icon>save</mat-icon>
+        <span>그룹 저장하기</span>
+      </button>
+      <button mat-menu-item (click)="onClickGroupMenu('GROUP_RESTORE')">
+        <mat-icon>restore</mat-icon>
+        <span>그룹 가져오기</span>
+      </button>
+    </mat-menu>
   </div>
   <div>
     <ucap-group-expansion-panel
+      #groupExpansionPanel
       [groupBuddyList]="groupBuddyList$ | async"
       (selectBuddy)="onSelectBuddy($event)"
     >

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -14,6 +14,7 @@ import { NGXLogger } from 'ngx-logger';
 import { Company } from '@ucap-webmessenger/api-external';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -22,6 +23,9 @@ import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
   animations: ucapAnimations
 })
 export class GroupComponent implements OnInit {
+  @ViewChild('groupExpansionPanel', { static: true })
+  groupExpansionPanel: GroupExpansionPanelComponent;
+
   groupBuddyList$: Observable<
     { group: GroupDetailData; buddyList: UserInfo[] }[]
   >;
@@ -91,6 +95,27 @@ export class GroupComponent implements OnInit {
       );
   }
 
+  onClickGroupMenu(menuType: string) {
+    this.logger.debug('menuType', menuType);
+    switch (menuType) {
+      case 'GROUP_NEW':
+        break;
+      case 'GROUP_EXPAND_MORE':
+        this.groupExpansionPanel.expandMore();
+        break;
+      case 'GROUP_EXPAND_LESS':
+        this.groupExpansionPanel.expandLess();
+        break;
+      case 'GROUP_SAVE':
+        break;
+      case 'GROUP_RESTORE':
+        break;
+
+      default:
+        break;
+    }
+  }
+
   onSelectBuddy(buddy: UserInfo) {
     this.store.dispatch(ChatStore.selectedRoom({ roomSeq: buddy.seq }));
   }

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

@@ -1,4 +1,4 @@
-<mat-accordion>
+<mat-accordion #groupAccordion="matAccordion" [multi]="true">
   <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>

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

@@ -1,8 +1,16 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild
+} from '@angular/core';
 
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
+import { MatAccordion } from '@angular/material';
 
 @Component({
   selector: 'ucap-group-expansion-panel',
@@ -17,6 +25,8 @@ export class ExpansionPanelComponent implements OnInit {
   @Output()
   selectBuddy = new EventEmitter<UserInfo>();
 
+  @ViewChild('groupAccordion', { static: true }) groupAccordion: MatAccordion;
+
   constructor() {}
 
   ngOnInit() {}
@@ -24,4 +34,12 @@ export class ExpansionPanelComponent implements OnInit {
   onClickBuddy(buddy: UserInfo) {
     this.selectBuddy.emit(buddy);
   }
+
+  expandMore() {
+    this.groupAccordion.openAll();
+  }
+
+  expandLess() {
+    this.groupAccordion.closeAll();
+  }
 }