[frontend] Implement delete and edit hood

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>

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(

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>

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

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

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

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,