diff --git a/kibicara-frontend/src/app/dashboard/dashboard.module.ts b/kibicara-frontend/src/app/dashboard/dashboard.module.ts index 9b5a30a..9432a6d 100644 --- a/kibicara-frontend/src/app/dashboard/dashboard.module.ts +++ b/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, diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html index d89283f..472769e 100644 --- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html +++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html @@ -24,7 +24,12 @@ - diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts index d56ea2d..8bd94fc 100644 --- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.ts +++ b/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,16 +12,32 @@ import { map } from 'rxjs/operators'; styleUrls: ['./hoods.component.scss'], }) export class HoodsComponent implements OnInit { - hoods$ = this.adminService.getHoodsAdmin().pipe( - map((hoods) => { - const result = hoods.map((hood) => { - return hood.hood; - }); - return result; - }) - ); + hoods$; - constructor(private readonly adminService: AdminService) {} + constructor( + private readonly adminService: AdminService, + public dialog: MatDialog, + private router: Router + ) {} - ngOnInit(): void {} + ngOnInit(): void { + this.hoods$ = this.adminService.getHoodsAdmin().pipe( + map((hoods) => { + const result = hoods.map((hood) => { + return hood.hood; + }); + return result; + }) + ); + } + + openNewHoodDialog() { + const dialogRef = this.dialog.open(NewHoodDialogComponent); + + dialogRef.afterClosed().subscribe((hood) => { + if (hood && hood.id) { + this.router.navigate(['/dashboard/hoods', hood.id]); + } + }); + } } diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html new file mode 100644 index 0000000..a162439 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html @@ -0,0 +1,18 @@ +

Create new hood

+ + +
+ + New hood name + + Name already taken + +
+
+ + + + + diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.scss b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.spec.ts b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.spec.ts new file mode 100644 index 0000000..b79f48f --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NewHoodDialogComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewHoodDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts new file mode 100644 index 0000000..62c1798 --- /dev/null +++ b/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, + 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 }); + } + ); + } +}