Delete CRUD

Author: maxime-urbanski

src/app/components/common/delete/delete.component.html

@@ -0,0 +1,5 @@
+<button
+  (click)="delete()"
+  class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700">
+  Delete
+</button>

src/app/components/common/delete/delete.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, Output} from '@angular/core';
+import {HeroService} from "../../../service/hero.service";
+import {Location} from "@angular/common";
+
+@Component({
+  selector: 'app-delete',
+  standalone: true,
+  imports: [],
+  templateUrl: './delete.component.html',
+})
+export class DeleteComponent {
+  @Input() id: string = '';
+
+  constructor(
+    private heroService: HeroService,
+    private location: Location
+  ) {
+  }
+
+  delete() {
+    console.log('delete component id',this.id)
+    this.heroService.delete(this.id).subscribe(() => this.location.back())
+  }
+}

src/app/components/common/table/table.component.html

@@ -10,43 +10,51 @@
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let item of items?.items">
-    <td>{{ item['id'] }}</td>
-    <td>{{ item['name'] }}</td>
-    <td class="w-8">
-      <a [routerLink]="[item['id']]" class="text-cyan-500">
-        Show
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-6 h-6"
-        >
-          <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
-          <path
-            fill-rule="evenodd"
-            d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </a>
-    </td>
-    <td class="w-8">
-      <a [routerLink]="['edit', item['id']]" class="text-cyan-500">
-        Edit
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-6 h-6"
-        >
-          <path
-            d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"/>
-          <path
-            d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"/>
-        </svg>
-      </a>
-    </td>
-  </tr>
+    @for (item of items?.items; track item) {
+      <tr>
+        <td>{{ item['id'] }}</td>
+        <td>{{ item['name'] }}</td>
+        <td class="w-8">
+          <a [routerLink]="[item['@id']]" class="text-cyan-500">
+            Show
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-6 h-6"
+            >
+              <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
+              <path
+                fill-rule="evenodd"
+                d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </a>
+        </td>
+        <td class="w-8">
+          <a [routerLink]="['edit', item['id']]" class="text-cyan-500">
+            Edit
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-6 h-6"
+            >
+              <path
+                d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"/>
+              <path
+                d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"/>
+            </svg>
+          </a>
+        </td>
+      </tr>
+    } @empty {
+      <tr>
+        <td colspan="2" class="text-center italic p-6">
+          Pas de données.
+        </td>
+      </tr>
+    }
   </tbody>
 </table>

src/app/components/common/table/table.component.ts

@@ -7,7 +7,6 @@ import {List} from "../../../interface/list.model";
   selector: 'app-table',
   standalone: true,
   imports: [
-    NgForOf,
     RouterLink
   ],
   templateUrl: './table.component.html',

src/app/components/foo/list/list.component.ts

@@ -29,10 +29,13 @@ export class ListComponent implements OnInit {
 
   ngOnInit() {
     this.heroService
-      .getHeroes()
+      .getHeroes('/heroes')
       .subscribe(
         (items) =>
-          this.store.dispatch(HeroesActions.getHeroes({items: items['hydra:member']}))
+          this.store.dispatch(HeroesActions.getHeroes({
+            items: items['hydra:member'],
+            isLoading: false
+          }))
       )
   }
 }

src/app/components/foo/show/show.component.html

@@ -8,13 +8,10 @@
       </a>
       <div>
         <a [routerLink]="['/heroes/edit', (item|async)?.id]"
-          class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
+           class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
           Edit
         </a>
-        <button
-          class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700">
-          Delete
-        </button>
+        <app-delete [id]="(item|async)?.['@id']!"></app-delete>
       </div>
     </div>
 
@@ -33,7 +30,7 @@ <h1 class="text-3xl my-4">Show {{ (item|async)?.["@id"] }}</h1>
         </tr>
         </thead>
         <tbody>
-        <tr *ngIf="(item | async)"class="border-b">
+        <tr *ngIf="(item | async)" class="border-b">
           <th
             class="text-sm font-medium px-6 py-4 text-left capitalize"
             scope="row"

src/app/components/foo/show/show.component.ts

@@ -1,38 +1,40 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, RouterLink} from "@angular/router";
+import {ActivatedRoute, Router, RouterLink} from "@angular/router";
 import {CommonModule, NgIf} from "@angular/common";
 import {Store} from "@ngrx/store";
 import {HeroService} from "../../../service/hero.service";
 import {Show} from "../../../interface/show.model";
 import {selectorShowItem, selectorShowLoading} from "../../../store/selector/show.selectors";
 import {HeroesActions} from "../../../store/action/heroes.actions";
+import {DeleteComponent} from "../../common/delete/delete.component";
 
 @Component({
   selector: 'app-show',
   standalone: true,
   imports: [
     CommonModule,
     RouterLink,
-    NgIf
+    NgIf,
+    DeleteComponent
   ],
   templateUrl: './show.component.html',
 })
 export class ShowComponent implements OnInit {
-  isLoading = this.store.select(selectorShowLoading)
-  item = this.store.select(selectorShowItem)
+  public isLoading = this.store.select(selectorShowLoading)
+  public item = this.store.select(selectorShowItem)
 
   constructor(
     private store: Store<{ show: Show }>,
     private heroService: HeroService,
-    private router: ActivatedRoute
+    private router: Router
   ) {
   }
 
   ngOnInit() {
-    const id = this.router.snapshot.paramMap.get('id')
+    const id = this.router.url
     this.heroService
       .getHero(id)
       .subscribe((item) =>
-        this.store.dispatch(HeroesActions.getHero({item})))
+        this.store.dispatch(HeroesActions.getHero({item, isLoading: false})))
   }
 }

src/app/interface/api.ts

@@ -1,9 +1,9 @@
 import {Hero} from "./hero.model";
 
 export interface Api {
-  "@context": String,
-  "@id": String,
-  "@type": String,
+  "@context": string,
+  "@id": string,
+  "@type": string,
 }
 
 export interface ApiList extends Api {
@@ -13,5 +13,5 @@ export interface ApiList extends Api {
 
 export interface ApiShow extends Api {
   id: Number,
-  name: String
+  name: string
 }

src/app/interface/hero.model.ts

@@ -2,5 +2,5 @@ import {Api} from "./api";
 
 export interface Hero extends Api {
   id: Number,
-  name: String
+  name: string
 }

src/app/interface/list.model.ts

@@ -3,5 +3,5 @@ import {Hero} from "./hero.model";
 export interface List {
   isLoading: Boolean | undefined | null,
   items?: Hero[],
-  error?: String,
+  error?: string,
 }

src/app/interface/show.model.ts

@@ -3,5 +3,5 @@ import {Hero} from "./hero.model";
 export interface Show {
   isLoading?: Boolean,
   item?: Hero,
-  error?: String,
+  error?: string,
 }

src/app/service/hero.service.ts

@@ -1,5 +1,5 @@
-import {HttpClient} from "@angular/common/http";
-import {Observable} from "rxjs";
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
+import {catchError, Observable, throwError} from "rxjs";
 import {Injectable} from "@angular/core";
 import {List} from "../interface/list.model";
 import {ApiList, ApiShow} from "../interface/api";
@@ -20,15 +20,42 @@ export class HeroService {
   ) {
   }
 
-  getHeroes(): Observable<ApiList> {
+  getHeroes(id: string): Observable<ApiList> {
     this.store.dispatch(HeroesActions.getHeroes({isLoading: true}))
     return this.http
-      .get<ApiList>(this.baseUrl + '/heroes')
+      .get<ApiList>(this.baseUrl + id)
+      .pipe(
+        catchError(
+          this.handleError
+        )
+      )
   }
 
-  getHero(id: string | null) {
+  getHero(id: string): Observable<ApiShow> {
     this.store.dispatch(HeroesActions.getHero({isLoading: true}))
     return this.http
-      .get<ApiShow>(this.baseUrl + `/heroes/${id}`)
+      .get<ApiShow>(this.baseUrl + id)
+      .pipe(
+        catchError(this.handleError)
+      )
+  }
+
+  delete(id: string) {
+    return this.http
+      .delete(this.baseUrl + id)
+      .pipe(
+        catchError(this.handleError)
+      )
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    if (error.status === 0) {
+      console.error('An error occurred:', error.error);
+    } else {
+      console.error(
+        `Backend returned code ${error.status}, body was:`);
+    }
+    // Return an observable with a user-facing error message.
+    return throwError(() => new Error(error.error));
   }
 }

src/app/store/action/heroes.actions.ts

@@ -4,8 +4,8 @@ import {Hero} from "../../interface/hero.model";
 export const HeroesActions = createActionGroup({
   source: 'Heroes',
   events: {
-    'Get Heroes': props<{ items?: Array<Hero>, isLoading?: Boolean, error?: String }>(),
-    'Get Hero': props<{ item?: Hero, isLoading?: Boolean, error?: String }>(),
+    'Get Heroes': props<{ items?: Array<Hero>, isLoading?: Boolean, error?: string }>(),
+    'Get Hero': props<{ item?: Hero, isLoading?: Boolean, error?: string }>(),
     'Put Hero': props<{ hero: Hero }>(),
     'Delete Hero': props<{ id: Number }>(),
   }