Merge pull request #112 from FelipeMarques06/buscaCriticas

Construção da busca na página de críticas literárias

src/app/criticas/critica-dialogo/critica-dialogo.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Resenha Crítica:</h1>
+<div mat-dialog-content *ngIf="resenhas$ | async as resenhas">
+    <p *ngFor="let resenha of resenhas">{{resenha.completo}}</p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close>Fechar</button>
+</div>
+

src/app/criticas/critica-dialogo/critica-dialogo.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CriticaDialogoComponent } from './critica-dialogo.component';
+
+describe('CriticaDialogoComponent', () => {
+  let component: CriticaDialogoComponent;
+  let fixture: ComponentFixture<CriticaDialogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CriticaDialogoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CriticaDialogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/criticas/critica-dialogo/critica-dialogo.component.ts

@@ -0,0 +1,26 @@
+import { Critica } from './../modelos/critica';
+import { Component, Inject, OnInit } from '@angular/core';
+import { CriticaDialogoService } from '../service/critica-dialogo.service';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'app-critica-dialogo',
+  templateUrl: './critica-dialogo.component.html',
+  styleUrls: ['./critica-dialogo.component.scss']
+})
+export class CriticaDialogoComponent {
+
+  resenhas$!: Observable<Critica[]>;
+
+  constructor(
+    private criticaDialogoService: CriticaDialogoService,
+
+    @Inject(MAT_DIALOG_DATA) public resenhas: Critica[]
+  ) {
+    this.resenhas$ = of (resenhas)
+  }
+}
+
+
+

src/app/criticas/critica/critica.component.html

@@ -1,27 +1,55 @@
-<div class="grid-container" *ngIf="criticas$ | async as critica; else loading">
-  <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1"> CRÍTICAS LITERÁRIAS</h1>
+<div>
+  <!-- Resultado de busca -->
+  <div>
+    <div class="grid-container">
+      <mat-form-field appearance="fill" style="width: 100%; text-align: center;" >
+        <mat-label>Busque uma crítica literária</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 critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">
-      <mat-card class="dashboard-card">
-        <mat-card-title-group>
-          <mat-card-title>{{critica.titulo}}</mat-card-title>
-          <mat-card-subtitle>{{critica.subtitulo}}</mat-card-subtitle>
-          <img mat-card-image class="imgcard" [src]="critica.img" [alt]="critica.titulo">
-        </mat-card-title-group>
-        <mat-card-content>
-          {{critica.resumo}}
-        </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-title-group>
+              <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" (click)="abrirCriticas(busca.completo)">
+            </mat-card-title-group>
+            <mat-card-content>
+              {{busca.resumo}}
+            </mat-card-content>
+          </mat-card>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </div>
+  </div>
+
+  <div class="grid-container" *ngIf="criticas$ | async as critica; else loading">
+    <mat-toolbar color="accent">
+      <div class="titulo">
+        <h1 class="mat-h1"> CRÍTICAS LITERÁRIAS</h1>
+      </div>
+    </mat-toolbar>
+    <mat-grid-list cols="2" rowHeight="180px">
+      <mat-grid-tile *ngFor="let critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">
+        <mat-card class="dashboard-card">
+          <mat-card-title-group>
+            <mat-card-title>{{critica.titulo}}</mat-card-title>
+            <mat-card-subtitle>{{critica.subtitulo}}</mat-card-subtitle>
+            <img mat-card-image class="imgcard" [src]="critica.img" [alt]="critica.titulo" (click)="abrirCriticas(critica.completo)">
+          </mat-card-title-group>
+          <mat-card-content>
+            {{critica.resumo}}
+          </mat-card-content>
+        </mat-card>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
 </div>
 <ng-template #loading>
   <div class="loading-spinner">
     <mat-spinner></mat-spinner>
   </div>
 </ng-template>
-

src/app/criticas/critica/critica.component.ts

@@ -1,8 +1,10 @@
 import { Critica } from './../modelos/critica';
-import { Component, OnInit } from '@angular/core';
-import { catchError, map, Observable, of } from 'rxjs';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { catchError, debounceTime, distinctUntilChanged, filter, fromEvent, map, Observable, of, tap } from 'rxjs';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CriticaService } from '../service/critica.service';
+import { CriticaDialogoComponent } from '../critica-dialogo/critica-dialogo.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-critica',
@@ -12,6 +14,9 @@ import { CriticaService } from '../service/critica.service';
 export class CriticaComponent {
 
   criticas$: Observable<Critica[]>;
+  result$?: Observable<Critica[]>
+  value!: string;
+
   criticas= this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
       if (matches) {
@@ -23,7 +28,8 @@ export class CriticaComponent {
 
   constructor(
     private breakpointObserver: BreakpointObserver,
-    private criticaService: CriticaService
+    private criticaService: CriticaService,
+    private telaCriticas: MatDialog
   ) {
     this.criticas$ = criticaService.listagemCriticas()
       .pipe(
@@ -32,4 +38,30 @@ export class CriticaComponent {
         })
       )
   }
+
+  @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.criticaService.pesquisar(query)
+          console.log(this.result$)
+        } else {
+          this.result$ = undefined
+        }
+      })
+    ).subscribe()
+  }
+
+  abrirCriticas(resenha: string){
+    this.telaCriticas.open(CriticaDialogoComponent,{
+      data: resenha
+    })
+  }
 }

src/app/criticas/criticas-routing.module.ts

@@ -1,10 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CriticaDialogoComponent } from './critica-dialogo/critica-dialogo.component';
 import { CriticaComponent } from './critica/critica.component';
 
 const routes: Routes = [
   {
-    path:'', component:CriticaComponent
+    path:'critica', component:CriticaComponent
+  },
+  {
+    path:'critica-dialogo', component:CriticaDialogoComponent
   },
 ];
 

src/app/criticas/service/critica-dialogo.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CriticaDialogoService } from './critica-dialogo.service';
+
+describe('CriticaDialogoService', () => {
+  let service: CriticaDialogoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CriticaDialogoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/criticas/service/critica-dialogo.service.ts

@@ -0,0 +1,22 @@
+import { Critica } from './../modelos/critica';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { first, tap } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CriticaDialogoService {
+
+  private readonly uriApi ="../../assets/critica.json"
+
+  constructor(private criticasDashboard: HttpClient) { }
+
+  listagemCriticas () {
+    return this.criticasDashboard.get<Critica[]>(this.uriApi)
+    .pipe(
+      first(),
+      tap(apiCriticas => console.log(apiCriticas))
+    )
+  }
+}

src/app/criticas/service/critica.service.ts

@@ -1,7 +1,7 @@
 import { Critica } from './../modelos/critica';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { first, tap } from 'rxjs';
+import { delay, first, map, tap } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -18,4 +18,13 @@ export class CriticaService {
       tap(apiCriticas => console.log(apiCriticas))
     )
   }
+
+  pesquisar(titulo: string){
+    return this.criticasDashboard.get<Critica[]>(this.uriApi)
+    .pipe(
+      first(),
+      delay(200),
+      map(res => res.filter(i => (i.titulo.toLowerCase()).startsWith(titulo.toLowerCase()))),
+    )
+  }
 }

src/assets/menuNavegador.json

@@ -4,5 +4,5 @@
   {"linkMenu": "/reportagem", "labelMenu":"Especial do Mês", "hab": true},
   {"linkMenu": "/duvidas", "labelMenu":"Dúvidas Frequentes", "hab": true},
   {"linkMenu": "/ajuda", "labelMenu":"Possíveis Erros", "hab": true},
-  {"linkMenu": "/criticas", "labelMenu":"Críticas Literárias", "hab": true}
+  {"linkMenu": "/criticas/critica", "labelMenu":"Críticas Literárias", "hab": true}
 ]