feat(httpResource): implementa exemplo de uso do HttpResource

Author: Danilo Otavio Lima Salve

src/app/core/components/home/shared/helpers/menu.constants.ts

@@ -120,6 +120,12 @@ export const MENU_ITEMS: PoMenuItem[] = [
         shortLabel: 'Disney',
         icon: 'an an-castle-turret'
       },
+      {
+        label: 'Dragon Ball | HttpResource',
+        link: 'sample/resources-api/dbz',
+        shortLabel: 'DBZ',
+        icon: 'an an-fire-simple'
+      },
       {
         label: 'Rick & Morty - Personagens | Resource',
         link: 'sample/resources-api/rick-and-morty',

src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-list.component.html

@@ -1 +1,49 @@
-<p>dragon-ball-list works!</p>
+<po-page-default p-title="Dragon Ball | Lista de Personagens" p-subtitle="Exemplo de uso da API httpResource ">
+  @let dbzCharacter = dbzCharactersResource.value();
+  @let error = dbzCharactersResource.error();
+  @let hasValue = dbzCharactersResource.hasValue();
+  @let isLoading = dbzCharactersResource.isLoading();
+
+  <div class="po-row">
+    <app-type-list-button
+      class="po-xl-1 po-lg-2 po-md-6 po-sm-12 po-mt-1"
+      (changeTypeView)="onChangeTypeView($event)"
+    />
+    <app-search
+      class="po-offset-lg-6 po-offset-xl-8 po-xl-3 po-lg-4 po-offset-lg-6 po-md-6 po-sm-12 po-mb-1"
+      (changeInValue)="onChangeFilter($event)"
+    />
+  </div>
+
+  @if (hasValue && allDbzCharacters().length > 0) {
+    @if (dbzCharacter) {
+      <div class="po-row">
+        <po-container class="po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-1">
+          @if (isTableView()) {
+            <app-dragon-ball-table [items]="allDbzCharacters()" [isLoading]="isLoading" />
+          } @else {
+            <app-dragon-ball-cards [items]="allDbzCharacters()" [isLoading]="isLoading" />
+          }
+        </po-container>
+      </div>
+    }
+  } @else {
+    <po-container class="po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-1">
+      <p class="po-font-text-bold">Nenhum personagem foi encontrado</p>
+    </po-container>
+  }
+
+  @let hasNextPage = hasValue && dbzCharacter?.meta?.currentPage! < dbzCharacter?.meta?.totalPages!;
+
+  <po-container class="footer po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-4">
+    <app-show-more-button (clickShowMore)="onShowMore()" [isLoading]="isLoading" [isDisabled]="!hasNextPage" />
+  </po-container>
+
+  @if (error) {
+    <po-container class="po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-1">
+      <p class="po-font-text-bold">Ops, ocorreu erro ao tentar listar os Personagens :(</p>
+    </po-container>
+  }
+
+  <po-loading-overlay [hidden]="!isLoading" p-text="Carregando personagens" />
+</po-page-default>

src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-list.component.ts

@@ -1,8 +1,62 @@
-import { Component } from '@angular/core';
+import { Component, effect, inject, signal } from '@angular/core';
+import { PoContainerModule, PoPageModule, PoLoadingModule } from '@po-ui/ng-components';
+
+import { DragonBallService } from '../shared/services/dragon-ball.service';
+import { DragonBallCardsComponent } from './dragon-ball-cards/dragon-ball-cards.component';
+import { DragonBallTableComponent } from './dragon-ball-table/dragon-ball-table.component';
+import { SearchComponent } from '../../../../shared/components/search/search.component';
+import { ShowMoreButtonComponent } from '../../../../shared/components/show-more-button/show-more-button.component';
+import { TypeListButtonComponent } from '../../../../shared/components/type-list-button/type-list-button.component';
+import { Character } from '../shared/interfaces/character';
 
 @Component({
   selector: 'app-dragon-ball-list',
-  imports: [],
+  imports: [
+    PoContainerModule,
+    PoPageModule,
+    PoLoadingModule,
+    SearchComponent,
+    TypeListButtonComponent,
+    ShowMoreButtonComponent,
+    DragonBallCardsComponent,
+    DragonBallTableComponent
+  ],
   templateUrl: './dragon-ball-list.component.html'
 })
-export class DragonBallListComponent {}
+export class DragonBallListComponent {
+  private readonly page = signal<number>(1);
+  private readonly dragonBallService = inject(DragonBallService);
+
+  protected readonly isTableView = signal(true);
+  protected readonly dbzCharactersResource = this.dragonBallService.getCharacters;
+  protected readonly allDbzCharacters = signal<Character[]>([]);
+
+  constructor() {
+    effect(() => {
+      const resource = this.dbzCharactersResource;
+      const data = resource.value();
+
+      if (Array.isArray(data)) {
+        this.allDbzCharacters.set(data);
+      } else {
+        if (data) {
+          this.allDbzCharacters.update(prev => [...prev, ...data.items]);
+        }
+      }
+    });
+  }
+  onShowMore(): void {
+    this.page.update(p => p + 1);
+    this.dragonBallService.setPage(this.page());
+  }
+
+  onChangeFilter(name: string): void {
+    this.page.set(1);
+    this.allDbzCharacters.set([]);
+    this.dragonBallService.setName(name);
+  }
+
+  onChangeTypeView(isTableView: boolean): void {
+    this.isTableView.set(isTableView);
+  }
+}

src/app/pages/resources-api/dragon-ball/shared/services/dragon-ball.service.ts

@@ -1,8 +1,35 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
+import { httpResource } from '@angular/common/http';
+import { ListCharacters } from '../interfaces/character';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DragonBallService {
   private readonly apiUrl = 'https://dragonball-api.com/api/characters';
+  private readonly limit = signal<number>(10);
+  private readonly name = signal<string>('');
+  private readonly page = signal<number>(1);
+
+  /**
+   * Obtem uma lista de personagens do Dragon Ball com páginação
+   */
+  readonly getCharacters = httpResource<ListCharacters>(() => ({
+    url: this.apiUrl,
+    method: 'GET',
+    params: { page: this.page(), limit: this.limit(), name: this.name() }
+  }));
+
+  setLimit(limit: number): void {
+    this.limit.set(limit);
+  }
+
+  setName(name: string): void {
+    this.page.set(1);
+    this.name.set(name);
+  }
+
+  setPage(page: number): void {
+    this.page.set(page);
+  }
 }

src/app/pages/resources-api/resources-api.routes.ts

@@ -15,5 +15,10 @@ export const RESOURCES_API_ROUTES: Routes = [
     path: 'disney',
     title: 'Disney | Personagens',
     loadChildren: () => import('./disney/disney.routes').then(r => r.DISNEY_ROUTES)
+  },
+  {
+    path: 'dbz',
+    title: 'DBZ | Personagens',
+    loadChildren: () => import('./dragon-ball/dragon-ball.routes').then(r => r.DBZ_ROUTES)
   }
 ];

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/character-card/character-card.component.html

@@ -3,7 +3,7 @@
     <div class="po-row">
       <div class="po-md-5 po-lg-5">
         @let image = item().image || 'assets/img/not-found-image.jpg';
-        <po-image [p-src]="image" p-loading="lazy" p-alt="Imagem do personagem da Disney" [p-height]="200" />
+        <po-image [p-src]="image" p-loading="lazy" p-alt="Imagem do personagem do Rick & Morty" [p-height]="200" />
       </div>
       <div class="po-md-7 po-lg-7">
         <p class="po-font-subtitle po-xl-12 po-lg-12 po-md-12 po-sm-12">{{ item().name }}</p>

src/app/pages/resources-api/rick-and-morty/characters-list/characters-list.component.html

@@ -33,7 +33,7 @@
     </po-container>
   }
 
-  <po-container class="po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-4">
+  <po-container class="footer po-xl-12 po-lg-12 po-md-12 po-sm-12 po-mb-4">
     <app-show-more-button (clickShowMore)="onShowMore()" [isLoading]="isLoading" [isDisabled]="!hasNextPage()" />
   </po-container>