Merge pull request #114 from FelipeMarques06/buscaSugestoes

Construção da busca na página de sugestão de livros
FelipeMarques06 · Feb 2, 2022 · 3b5611c · 3b5611c
2 parents 01847db + 7c33237
commit 3b5611c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 25 deletions.
diff --git a/src/app/servicosInterface/sugestoes.service.ts b/src/app/servicosInterface/sugestoes.service.ts
@@ -1,7 +1,7 @@
 import { Sugestoes } from './../modelosInterface/sugestoes';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { delay, first, tap } from 'rxjs';
+import { delay, first, map, tap } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -20,4 +20,13 @@ export class SugestoesService {
       tap(apiSugestoes => console.log(apiSugestoes))
     )
   }
+
+  pesquisar(titulo: string){
+    return this.listaSug.get<Sugestoes[]>(this.uriAPI)
+    .pipe(
+      first(),
+      delay(200),
+      map(res => res.filter(i => (i.titulo.toLowerCase()).startsWith(titulo.toLowerCase()))),
+    )
+  }
 }
diff --git a/src/app/sugestoes/sugestoes.component.html b/src/app/sugestoes/sugestoes.component.html
@@ -1,24 +1,52 @@
-<div class="grid-container" *ngIf="cards$ | async as card; else loading">
-  <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1"> SUGESTÕES DE LIVROS</h1>
+<div>
+  <div>
+    <div class="grid-container">
+      <mat-form-field appearance="fill" style="width: 100%; text-align: center;" >
+        <mat-label>Busque uma sugestão de livro</mat-label>
+        <input matInput #searchInput />
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
     </div>
-  </mat-toolbar>
-  <mat-grid-list cols="2" rowHeight="180px">
-    <mat-grid-tile *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
-      <mat-card class="dashboard-card">
-        <mat-card-header>
-          <!-- <div mat-card-avatar class="example-header-image"></div> -->
-          <mat-card-title>{{card.titulo}}</mat-card-title>
-          <mat-card-subtitle>{{card.subtitulo}}</mat-card-subtitle>
-          <img mat-card-image class="imgcard" [src]="card.img" [alt]="card.titulo">
-        </mat-card-header>
-        <mat-card-content class="dashboard-card-content">
-          <div>{{card.conteudo}}</div>
-        </mat-card-content>
-      </mat-card>
-    </mat-grid-tile>
-  </mat-grid-list>
+    <div class="grid-container" *ngIf="result$ | async as busca">
+      <mat-grid-list cols="2" rowHeight="180px">
+        <mat-grid-tile *ngFor="let busca of result$ | async" [colspan]="busca.cols" [rowspan]="busca.rows">
+          <mat-card class="dashboard-card">
+            <mat-card-header>
+              <mat-card-title>{{busca.titulo}}</mat-card-title>
+              <mat-card-subtitle>{{busca.subtitulo}}</mat-card-subtitle>
+              <img mat-card-image class="imgcard" [src]="busca.img" [alt]="busca.titulo">
+            </mat-card-header>
+            <mat-card-content class="dashboard-card-content">
+              <div>{{busca.conteudo}}</div>
+            </mat-card-content>
+          </mat-card>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </div>
+  </div>
+
+  <div class="grid-container" *ngIf="cards$ | async as card; else loading">
+    <mat-toolbar color="accent">
+      <div class="titulo">
+        <h1 class="mat-h1"> SUGESTÕES DE LIVROS</h1>
+      </div>
+    </mat-toolbar>
+    <mat-grid-list cols="2" rowHeight="180px">
+      <mat-grid-tile *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
+        <mat-card class="dashboard-card">
+          <mat-card-header>
+            <!-- <div mat-card-avatar class="example-header-image"></div> -->
+            <mat-card-title>{{card.titulo}}</mat-card-title>
+            <mat-card-subtitle>{{card.subtitulo}}</mat-card-subtitle>
+            <img mat-card-image class="imgcard" [src]="card.img" [alt]="card.titulo">
+          </mat-card-header>
+          <mat-card-content class="dashboard-card-content">
+            <div>{{card.conteudo}}</div>
+          </mat-card-content>
+        </mat-card>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
 </div>
 <ng-template #loading>
   <div class="loading-spinner">

diff --git a/src/app/sugestoes/sugestoes.component.ts b/src/app/sugestoes/sugestoes.component.ts
@@ -1,9 +1,10 @@
+import { Sugestoes } from './../modelosInterface/sugestoes';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Component } from '@angular/core';
-import { catchError, Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { catchError, fromEvent, Observable, of } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+
 
-import { Sugestoes } from '../modelosInterface/sugestoes';
 import { SugestoesService } from '../servicosInterface/sugestoes.service';
 
 @Component({
@@ -14,6 +15,9 @@ import { SugestoesService } from '../servicosInterface/sugestoes.service';
 export class SugestoesComponent {
 
   cards$: Observable <Sugestoes[]>;
+  result$?: Observable<Sugestoes[]>
+  value!: string;
+
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
       if (matches) {
@@ -34,4 +38,24 @@ export class SugestoesComponent {
       })
     );
   }
+
+  @ViewChild('searchInput') searchInput!: ElementRef
+
+  ngAfterViewInit(): void {
+    fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
+      filter(Boolean),
+      debounceTime(400),
+      distinctUntilChanged(),
+      tap(() => {
+        const query = this.searchInput.nativeElement.value
+        // console.log(query)
+        if(query) {
+          this.result$ = this.sugestoesService.pesquisar(query)
+          console.log(this.result$)
+        } else {
+          this.result$ = undefined
+        }
+      })
+    ).subscribe()
+  }
 }