Dialogs are added

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

@@ -142,7 +142,7 @@
     >
       그룹 멤버 변경
     </button>
-    <button mat-menu-item (click)="onClickGroupContextMenu('REMOVE', group)">
+    <button mat-menu-item (click)="onClickGroupContextMenu('DELETE', group)">
       그룹 삭제
     </button>
   </ng-template>

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

@@ -31,6 +31,22 @@ import {
 import { MatMenuTrigger } from '@angular/material';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import {
+  DeleteGroupDialogComponent,
+  DeleteGroupDialogData,
+  DeleteGroupDialogResult
+} from '@app/layouts/messenger/dialogs/delete-group.dialog.component';
+
+import {
+  EditGroupDialogComponent,
+  EditGroupDialogData,
+  EditGroupDialogResult
+} from '@app/layouts/messenger/dialogs/edit-group.dialog.component';
+import {
+  EditGroupMemberDialogComponent,
+  EditGroupMemberDialogData,
+  EditGroupMemberDialogResult
+} from '@app/layouts/messenger/dialogs/edit-group-member.dialog.component';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -229,7 +245,7 @@ export class GroupComponent implements OnInit, OnDestroy {
     this.profileContextMenuTrigger.openMenu();
   }
 
-  onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
+  async onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
     this.logger.debug(
       'onClickGroupContextMenu',
       'menuType',
@@ -246,10 +262,64 @@ export class GroupComponent implements OnInit, OnDestroy {
       case 'SEND_NOTE':
         break;
       case 'RENAME':
+        {
+          const result = await this.dialogService.open<
+            EditGroupDialogComponent,
+            EditGroupDialogData,
+            EditGroupDialogResult
+          >(EditGroupDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
       case 'EDIT_MEMBER':
+        {
+          const result = await this.dialogService.open<
+            EditGroupMemberDialogComponent,
+            EditGroupMemberDialogData,
+            EditGroupMemberDialogResult
+          >(EditGroupMemberDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
-      case 'REMOVE':
+      case 'DELETE':
+        {
+          const result = await this.dialogService.open<
+            DeleteGroupDialogComponent,
+            DeleteGroupDialogData,
+            DeleteGroupDialogResult
+          >(DeleteGroupDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
+        break;
+      case 'EDIT_MEMBER':
+        {
+          const result = await this.dialogService.open<
+            EditGroupMemberDialogComponent,
+            EditGroupMemberDialogData,
+            EditGroupMemberDialogResult
+          >(EditGroupMemberDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
       default:
         break;

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

@@ -1,5 +1,5 @@
 <mat-card class="confirm-card">
-  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+  <mat-card-header>
     <mat-card-title>새 그룹 추가</mat-card-title>
   </mat-card-header>
   <mat-card-content> </mat-card-content>

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

@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 삭제</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </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/delete-group.dialog.component.spec.ts

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

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

@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface DeleteGroupDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface DeleteGroupDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-delete-group',
+  templateUrl: './delete-group.dialog.component.html',
+  styleUrls: ['./delete-group.dialog.component.scss']
+})
+export class DeleteGroupDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      DeleteGroupDialogData,
+      DeleteGroupDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteGroupDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}

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

@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 맴버 수정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </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/edit-group-member.dialog.component.spec.ts

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

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

@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface EditGroupMemberDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface EditGroupMemberDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-edit-group-member',
+  templateUrl: './edit-group-member.dialog.component.html',
+  styleUrls: ['./edit-group-member.dialog.component.scss']
+})
+export class EditGroupMemberDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      EditGroupMemberDialogData,
+      EditGroupMemberDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: EditGroupMemberDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}

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

@@ -0,0 +1,18 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>그룹 이름 수정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content> </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/edit-group.dialog.component.spec.ts

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

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

@@ -0,0 +1,31 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface EditGroupDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface EditGroupDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-edit-group',
+  templateUrl: './edit-group.dialog.component.html',
+  styleUrls: ['./edit-group.dialog.component.scss']
+})
+export class EditGroupDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<EditGroupDialogData, EditGroupDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}

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

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