From 84e506e367f7ac34554eac07bb77029a4b39a179 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 4 Sep 2020 20:56:07 +0200
Subject: [PATCH] [frontend] Implement delete and edit hood

---
 .../app/dashboard/board/board.component.html  |  6 ++
 .../board/hoodpage/hoodpage.component.ts      |  6 +-
 .../board/settings/settings.component.html    | 25 ++++++
 .../board/settings/settings.component.scss    | 25 ++++++
 .../board/settings/settings.component.spec.ts | 24 ++++++
 .../board/settings/settings.component.ts      | 77 +++++++++++++++++++
 .../src/app/dashboard/dashboard.module.ts     |  2 +
 7 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
 create mode 100644 kibicara-frontend/src/app/dashboard/board/settings/settings.component.scss
 create mode 100644 kibicara-frontend/src/app/dashboard/board/settings/settings.component.spec.ts
 create mode 100644 kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts

diff --git a/kibicara-frontend/src/app/dashboard/board/board.component.html b/kibicara-frontend/src/app/dashboard/board/board.component.html
index 7311f5c..e08cc38 100644
--- a/kibicara-frontend/src/app/dashboard/board/board.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/board.component.html
@@ -18,5 +18,11 @@
     <mat-tab label="Hoodpage">
       <app-hoodpage [hoodId]="hoodId"></app-hoodpage>
     </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>settings</mat-icon>
+      </ng-template>
+      <app-settings [hoodId]="hoodId"></app-settings>
+    </mat-tab>
   </mat-tab-group>
 </div>
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.ts b/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.ts
index b86b827..cfcd81e 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.ts
@@ -13,12 +13,12 @@ export class HoodpageComponent implements OnInit {
   submit = false;
   hood: BodyHood;
 
-  constructor(private hoodService: HoodsService) {}
+  constructor(private hoodsService: HoodsService) {}
 
   markdown = `# TODO Hoodpage`;
 
   ngOnInit(): void {
-    this.hoodService.getHood(this.hoodId).subscribe((hood) => {
+    this.hoodsService.getHood(this.hoodId).subscribe((hood) => {
       if (hood) {
         this.hood = hood;
         if (hood.landingpage && hood.landingpage !== '') {
@@ -31,7 +31,7 @@ export class HoodpageComponent implements OnInit {
   onSubmit() {
     this.submit = true;
     this.hood.landingpage = this.markdown;
-    this.hoodService
+    this.hoodsService
       .updateHood(this.hoodId, this.hood)
       .pipe(first())
       .subscribe(
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
new file mode 100644
index 0000000..58babe8
--- /dev/null
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.html
@@ -0,0 +1,25 @@
+<div class="container">
+  <mat-card>
+    <form [formGroup]="form" class="form">
+      <mat-form-field>
+        <mat-label>Update hood name</mat-label>
+        <input matInput formControlName="name" />
+      </mat-form-field>
+      <button mat-raised-button color="primary" (click)="onUpdate()">
+        Update hood name
+      </button>
+    </form>
+  </mat-card>
+
+  <mat-card>
+    <div class="delete">
+      <mat-card-title>Danger zone</mat-card-title>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <button mat-raised-button color="warn" (click)="onDelete()">
+          Delete hood
+        </button>
+      </mat-card-content>
+    </div>
+  </mat-card>
+</div>
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.scss b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.scss
new file mode 100644
index 0000000..5c87854
--- /dev/null
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.scss
@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  align-items: stretch;
+  justify-items: stretch;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+  margin: 1%;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.delete {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
+  justify-items: center;
+}
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.spec.ts b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.spec.ts
new file mode 100644
index 0000000..007e156
--- /dev/null
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SettingsComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts
new file mode 100644
index 0000000..25af2d3
--- /dev/null
+++ b/kibicara-frontend/src/app/dashboard/board/settings/settings.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { HoodsService } from 'src/app/core/api';
+import { MatDialog } from '@angular/material/dialog';
+import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
+import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { first } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss'],
+})
+export class SettingsComponent implements OnInit {
+  @Input() hoodId;
+  form: FormGroup;
+  hood;
+
+  constructor(
+    private hoodsService: HoodsService,
+    private dialog: MatDialog,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.hoodsService.getHood(this.hoodId).subscribe((hood) => {
+      if (hood) {
+        this.hood = hood;
+      }
+    });
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+    });
+  }
+
+  onDelete() {
+    const dialogRef = this.dialog.open(YesNoDialogComponent, {
+      data: {
+        title: 'Warning',
+        content: 'This will also delete all of your platform connections.',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.hoodsService.deleteHood(this.hoodId).subscribe(() => {
+          this.router.navigate(['/dashboard']);
+        });
+      }
+    });
+  }
+
+  onUpdate() {
+    if (this.form.invalid) {
+      return;
+    }
+
+    this.hood.name = this.form.controls.name.value;
+    this.hoodsService
+      .updateHood(this.hoodId, this.hood)
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.form.reset();
+          location.reload();
+        },
+        (error) => {
+          this.snackBar.open('Update failed. Try again!', 'Close', {
+            duration: 2000,
+          });
+        }
+      );
+  }
+}
diff --git a/kibicara-frontend/src/app/dashboard/dashboard.module.ts b/kibicara-frontend/src/app/dashboard/dashboard.module.ts
index 620fd7e..1d70c15 100644
--- a/kibicara-frontend/src/app/dashboard/dashboard.module.ts
+++ b/kibicara-frontend/src/app/dashboard/dashboard.module.ts
@@ -13,6 +13,7 @@ import { MarkdownModule } from 'ngx-markdown';
 import { HttpClient } from '@angular/common/http';
 import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog.component';
 import { PlatformsModule } from '../platforms/platforms.module';
+import { SettingsComponent } from './board/settings/settings.component';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { PlatformsModule } from '../platforms/platforms.module';
     TriggerComponent,
     BadwordsComponent,
     NewHoodDialogComponent,
+    SettingsComponent,
   ],
   imports: [
     DashboardRoutingModule,