Andrei Kotov show heroes, add hero, delete hero

.gitignore

@@ -229,3 +229,9 @@ _Pvt_Extensions
 
 # FAKE - F# Make
 .fake/
+
+# Rider
+.idea/
+
+# Angular
+.angular/

ClientApp/src/app/add-hero/add-hero.component.css

@@ -0,0 +1,9 @@
+form {
+  padding-top: 1rem;
+}
+
+label {
+  display: block;
+  margin: .5em 0;
+  font-weight: bold;
+}

ClientApp/src/app/add-hero/add-hero.component.html

@@ -0,0 +1,55 @@
+<form [formGroup]="heroForm" (ngSubmit)="onSubmit()">
+  <div class="row">
+    <div class="col mb-2">
+      <label for="name">Name: </label>
+      <input id="name" type="text" formControlName="name" required [class.is-invalid]="errors.name || (name.invalid && (name.dirty || name.touched))">
+      <div *ngIf="errors.name || (name.invalid && (name.dirty || name.touched))" class="invalid-feedback">
+        <div *ngIf="name.errors?.['required']">
+          This field is required.
+        </div>
+        <div *ngIf="name.errors?.['maxlength']">
+          This field must have at most 100 characters.
+        </div>
+        <div *ngIf="errors.name">
+          {{errors.name}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col mb-2">
+      <label for="alias">Alias: </label>
+      <input id="alias" type="text" formControlName="alias" required [class.is-invalid]="errors.alias || (alias.invalid && (alias.dirty || alias.touched))">
+      <div *ngIf="errors.alias || (alias.invalid && (alias.dirty || alias.touched))" class="invalid-feedback">
+        <div *ngIf="alias.errors?.['required']">
+          This field is required.
+        </div>
+        <div *ngIf="alias.errors?.['maxlength']">
+          This field must have at most 50 characters.
+        </div>
+        <div *ngIf="errors.alias">
+          {{errors.alias}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col mb-2">
+      <label for="brand">Brand: </label>
+      <input id="brand" type="text" formControlName="brand" required [class.is-invalid]="errors.brand || (brand.invalid && (brand.dirty || brand.touched))">
+      <div *ngIf="errors.brand || (brand.invalid && (brand.dirty || brand.touched))" class="invalid-feedback">
+        <div *ngIf="brand.errors?.['required']">
+          This field is required.
+        </div>
+        <div *ngIf="brand.errors?.['maxlength']">
+          This field must have at most 100 characters.
+        </div>
+        <div *ngIf="errors.brand">
+          {{errors.brand}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <p>Complete the form to enable button.</p>
+  <button type="submit" [disabled]="!heroForm.valid">Submit</button>
+</form>

ClientApp/src/app/add-hero/add-hero.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {FormBuilder, Validators} from "@angular/forms";
+import {HeroesService} from "../heroes/heroes.service";
+import {AddHero} from "./add-hero";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-hero-component',
+  templateUrl: './add-hero.component.html',
+  styleUrls: ['./add-hero.component.css']
+})
+export class AddHeroComponent {
+  errors: any = [];
+
+  heroForm = this.formBuilder.group({
+    name: ['', [Validators.required, Validators.maxLength(100)]],
+    alias: ['', [Validators.required, Validators.maxLength(50)]],
+    brand: ['', [Validators.required, Validators.maxLength(100)]],
+  });
+  constructor(private formBuilder: FormBuilder,
+              private service: HeroesService,
+              private router: Router) {}
+
+  onSubmit() {
+    const hero = this.heroForm.value as AddHero;
+    this.service.create(hero).subscribe({
+        next: _ => this.router.navigate(['/']),
+        error: error => {
+          this.errors = error;
+        }
+      })
+  }
+
+  get name() {
+    return this.heroForm.get('name')!;
+  }
+
+  get alias() {
+    return this.heroForm.get('alias')!;
+  }
+
+  get brand() {
+    return this.heroForm.get('brand')!;
+  }
+}

ClientApp/src/app/add-hero/add-hero.ts

@@ -0,0 +1,5 @@
+export interface AddHero {
+  name: string;
+  alias: string;
+  brand: string;
+}

ClientApp/src/app/app.module.ts

@@ -1,33 +1,36 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './nav-menu/nav-menu.component';
-import { HomeComponent } from './home/home.component';
-import { CounterComponent } from './counter/counter.component';
-import { FetchDataComponent } from './fetch-data/fetch-data.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { AddHeroComponent } from './add-hero/add-hero.component';
+import { HeroesService } from "./heroes/heroes.service";
+import {JsonPipe, NgFor} from "@angular/common";
 
 @NgModule({
-  declarations: [	
+  declarations: [
     AppComponent,
     NavMenuComponent,
-    HomeComponent,
-    CounterComponent,
-    FetchDataComponent,
+    HeroesComponent,
+    AddHeroComponent
    ],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+    BrowserModule.withServerTransition({ appId: 'ng-cli-uni8ersal' }),
     HttpClientModule,
+    ReactiveFormsModule,
     FormsModule,
+    JsonPipe,
+    NgFor,
     RouterModule.forRoot([
-      { path: '', component: HomeComponent, pathMatch: 'full' },
-      { path: 'test', component: FetchDataComponent },
+      { path: '', component: HeroesComponent, pathMatch: 'full' },
+      { path: 'add-hero', component: AddHeroComponent, pathMatch: 'full' }
     ])
   ],
-  providers: [],
+  providers: [HeroesService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ClientApp/src/app/heroes/hero.ts

@@ -0,0 +1,7 @@
+export interface Hero {
+  Id: number;
+  Name: string;
+  Alias?: string;
+  BrandId: number;
+  BrandName: string;
+}

ClientApp/src/app/heroes/heroes.component.html

@@ -0,0 +1,26 @@
+<h1>Heroes</h1>
+
+<p *ngIf="!heroes"><em>Loading...</em></p>
+
+<table class="table table-hover" *ngIf="heroes">
+  <thead>
+    <tr>
+      <th>Id</th>
+      <th>Name</th>
+      <th>Alias</th>
+      <th>Brand</th>
+      <th>Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let hero of heroes">
+      <td>{{ hero.Id }}</td>
+      <td>{{ hero.Name }}</td>
+      <td>{{ hero.Alias }}</td>
+      <td>{{ hero.BrandName }}</td>
+      <td>
+        <button type="button" class="btn btn-danger" (click)="delete(hero)">Delete</button>
+      </td>
+    </tr>
+  </tbody>
+</table>

ClientApp/src/app/heroes/heroes.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import {HeroesService} from "./heroes.service";
+import {Hero} from "./hero";
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  providers:  [ HeroesService ],
+})
+export class HeroesComponent {
+  public heroes: Hero[] = [];
+
+  constructor(
+    private service: HeroesService) {
+  }
+
+  ngOnInit() {
+    this.load();
+  }
+
+  load() {
+    this.service.get().subscribe((heroes: Hero[]) => {
+      this.heroes = heroes;
+    });
+  }
+  delete(hero: Hero){
+    if(confirm(`Are you sure to delete ${hero.Name}?`)) {
+      this.service.delete(hero.Id).subscribe(_ => this.load());
+    }
+  }
+}