[frontend] Finish hood admin overview design

kibicara-frontend/src/app/dashboard/dashboard.module.ts

@@ -13,6 +13,7 @@ import { SharedModule } from '../shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { MarkdownModule } from 'ngx-markdown';
 import { HttpClient } from '@angular/common/http';
+import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog.component';
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { HttpClient } from '@angular/common/http';
     BoardComponent,
     TriggerComponent,
     BadwordsComponent,
+    NewHoodDialogComponent,
   ],
   imports: [
     DashboardRoutingModule,

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -24,7 +24,12 @@
         </mat-list-option>
       </a>
     </mat-selection-list>
-    <button mat-raised-button color="primary" class="add-hood-button">
+    <button
+      mat-raised-button
+      color="primary"
+      class="add-hood-button"
+      (click)="openNewHoodDialog()"
+    >
       New hood
     </button>
   </div>

kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { AdminService } from 'src/app/core/api';
+import { AdminService, BodyHood } from 'src/app/core/api';
 import { map } from 'rxjs/operators';
+import { Observer } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { NewHoodDialogComponent } from './new-hood-dialog/new-hood-dialog.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-hoods',
@@ -8,7 +12,16 @@ import { map } from 'rxjs/operators';
   styleUrls: ['./hoods.component.scss'],
 })
 export class HoodsComponent implements OnInit {
-  hoods$ = this.adminService.getHoodsAdmin().pipe(
+  hoods$;
+
+  constructor(
+    private readonly adminService: AdminService,
+    public dialog: MatDialog,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.hoods$ = this.adminService.getHoodsAdmin().pipe(
       map((hoods) => {
         const result = hoods.map((hood) => {
           return hood.hood;
@@ -16,8 +29,15 @@ export class HoodsComponent implements OnInit {
         return result;
       })
     );
-
-  constructor(private readonly adminService: AdminService) {}
-
-  ngOnInit(): void {}
+  }
+
+  openNewHoodDialog() {
+    const dialogRef = this.dialog.open(NewHoodDialogComponent);
+
+    dialogRef.afterClosed().subscribe((hood) => {
+      if (hood && hood.id) {
+        this.router.navigate(['/dashboard/hoods', hood.id]);
+      }
+    });
+  }
 }

kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html

@@ -0,0 +1,18 @@
+<h2 mat-dialog-title>Create new hood</h2>
+
+<mat-dialog-content class="mat-typography">
+  <form class="input" [formGroup]="hoodForm">
+    <mat-form-field>
+      <mat-label>New hood name</mat-label>
+      <input matInput formControlName="hoodName" />
+      <mat-error *ngIf="hoodForm.invalid">Name already taken</mat-error>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onCancel()">Cancel</button>
+  <button mat-button (click)="onSubmit()" cdkFocusInitial>
+    Create hood
+  </button>
+</mat-dialog-actions>

kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.spec.ts

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

kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { HoodsService } from 'src/app/core/api';
+import { first } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-new-hood-dialog',
+  templateUrl: './new-hood-dialog.component.html',
+  styleUrls: ['./new-hood-dialog.component.scss'],
+})
+export class NewHoodDialogComponent implements OnInit {
+  hoodForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<NewHoodDialogComponent>,
+    private hoodsService: HoodsService,
+    private formBuilder: FormBuilder
+  ) {}
+
+  ngOnInit(): void {
+    this.hoodForm = this.formBuilder.group({
+      hoodName: ['', Validators.required],
+    });
+  }
+
+  onCancel() {
+    this.dialogRef.close();
+  }
+
+  onSubmit() {
+    if (this.hoodForm.invalid) {
+      return;
+    }
+
+    this.hoodsService
+      .createHood({
+        name: this.hoodForm.controls.hoodName.value,
+        landingpage: '',
+      })
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.dialogRef.close(data);
+        },
+        (error) => {
+          this.hoodForm.controls['hoodName'].setErrors({ incorrect: true });
+        }
+      );
+  }
+}