Lab 15 - Post, Put and Delete

Intro

In this lab we will implement post and put rest methods

1. POST a new user

1. Create a new method in the rest service to allow a new user to be added.

Click here to see the sample solution

  addUser(user: {firstname: string, surname: string}) : Observable<{id: number, firstname: string, surname: string}> {
    return this.httpClient.post<{id: number, firstname: string, surname: string}>(`${this.serverUrl}/api/user`, user);
  }

2. Call this method in the new user component. When the method is called a spinner should be showed. When the method returns, display a message indicating whether the user was added (and if so what their ID is) or if an error occurred.

Click here to see the sample solution

export class NewUserComponent {

  private restService = inject(RestService);

  firstname: string = '';
  surname: string = '';

  saving: boolean = false;
  message: string = '';

  onSubmit() {
    this.saving = true; 
    this.restService.addUser({ firstname: this.firstname, surname: this.surname }).subscribe({
      next: (response) => {
        this.message = 'User added successfully with id :' + response.id;
        this.saving = false;
      },
      error: (error) => {
        this.message = 'Error adding user: ' + error.message;
        this.saving = false;
      }
    });
  }

}

<h2>New User</h2>

@if(saving) {
    <app-spinner></app-spinner>
}


<form (submit)="onSubmit()">
    <label for="firstname">First name:</label>
    <input id="firstname" name="firstname" type="text" [(ngModel)]="firstname" required />

    <label for="surname">Surname:</label>
    <input id="surname" name="surname" type="text" [(ngModel)]="surname" required />

    <button type="submit">Add User</button> 
</form>

@if(message) {
<p>
    {{ message }}
</p>
}

3. PUT an updated building

1. Create a new method in the rest service to allow a building to be updated.

Click here to see the sample solution

  editBuilding(building : Building) : Observable<Building> {
    return this.httpClient.put<Building>(`${this.serverUrl}/api/building/${building.id}`, building);
  }

2. Call this method in the edit building component. When the method is called a spinner should be showed. When the method returns, display a message if an error occurred. If everything was ok, then reload the list of buildings to display on this screen

Click here to see the sample solution

import { Component, OnInit, signal, inject } from '@angular/core';
import { RestService } from '../rest.service';
import { Building } from '../data/Building';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { SpinnerComponent } from '../spinner/spinner.component';

@Component({
  selector: 'app-edit-building',
  standalone: true,
  imports: [ ReactiveFormsModule, SpinnerComponent],
  templateUrl: './edit-building.component.html',
  styleUrl: './edit-building.component.css'
})
export class EditBuildingComponent implements OnInit {

  buildings = signal<Building[]>([]);

  saving : boolean = false;
  message : string = "";

  private restService = inject(RestService);

  selectedBuildingId : number | null = null;

  editForm = new FormGroup({
    id: new FormControl('id'),
    name: new FormControl('name'),
  })

  ngOnInit(): void {
    this.restService.getBuildings().subscribe(data => {
      this.buildings.set(data);
    });
  }

  handleClick(id :number) {
    this.selectedBuildingId = id;
    this.editForm.patchValue({
      id: "" + id,
      name: this.buildings().find(b => b.id === id)?.name
    })
  }

  onSubmit() {
    this.saving = true;
    const buildingToUpdate : Building = {
      id: +(this.editForm.value.id || 0),
      name: this.editForm.value.name || ""
    }

    this.restService.editBuilding(buildingToUpdate).subscribe({
      next: (response) => {
        console.log(response);
        this.message = '';
        this.restService.getBuildings().subscribe(data => {
          this.buildings.set(data);
          this.saving = false;
        });
        
      },
      error: (error) => {
        this.message = 'Error updating building: ' + error.message;
        this.saving = false;
      }
    });
  }

}

<h2>Select the building to edit</h2>
<ul>
    @for(building of buildings(); track $index) {
    <li>
        {{ building.name }} <button (click)="handleClick(building.id)"  >edit</button>
    </li>
    }
</ul>

@if(selectedBuildingId) {
<form [formGroup]="editForm" (submit)="onSubmit()">
    
    <input type="hidden" id="id" name="id" formControlName="id" />

    <label>
        Name:
        <input id="name" name="name" formControlName="name"/>
    </label>
    
    <button>Save Changes</button>

</form>
}
@if(saving) {
    <app-spinner></app-spinner>
}