diff --git a/src/app/criticas/critica-dialogo/critica-dialogo.component.html b/src/app/criticas/critica-dialogo/critica-dialogo.component.html new file mode 100644 index 00000000..961e8d91 --- /dev/null +++ b/src/app/criticas/critica-dialogo/critica-dialogo.component.html @@ -0,0 +1,8 @@ +

Resenha Crítica:

+
+

{{resenha.completo}}

+
+
+ +
+ diff --git a/src/app/criticas/critica-dialogo/critica-dialogo.component.scss b/src/app/criticas/critica-dialogo/critica-dialogo.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/criticas/critica-dialogo/critica-dialogo.component.spec.ts b/src/app/criticas/critica-dialogo/critica-dialogo.component.spec.ts new file mode 100644 index 00000000..80586a03 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CriticaDialogoComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CriticaDialogoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/criticas/critica-dialogo/critica-dialogo.component.ts b/src/app/criticas/critica-dialogo/critica-dialogo.component.ts new file mode 100644 index 00000000..b9557e4f --- /dev/null +++ b/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; + + constructor( + private criticaDialogoService: CriticaDialogoService, + + @Inject(MAT_DIALOG_DATA) public resenhas: Critica[] + ) { + this.resenhas$ = of (resenhas) + } +} + + + diff --git a/src/app/criticas/critica/critica.component.html b/src/app/criticas/critica/critica.component.html index 58e15f3d..c97381d0 100644 --- a/src/app/criticas/critica/critica.component.html +++ b/src/app/criticas/critica/critica.component.html @@ -1,27 +1,55 @@ -
- -
-

CRÍTICAS LITERÁRIAS

+
+ +
+
+ + Busque uma crítica literária + + search +
- - - - - - {{critica.titulo}} - {{critica.subtitulo}} - - - - {{critica.resumo}} - - - - +
+ + + + + {{busca.titulo}} + {{busca.subtitulo}} + + + + {{busca.resumo}} + + + + +
+
+ +
+ +
+

CRÍTICAS LITERÁRIAS

+
+ + + + + + {{critica.titulo}} + {{critica.subtitulo}} + + + + {{critica.resumo}} + + + + +
- diff --git a/src/app/criticas/critica/critica.component.ts b/src/app/criticas/critica/critica.component.ts index d23186db..8bf30389 100644 --- a/src/app/criticas/critica/critica.component.ts +++ b/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; + result$?: Observable + 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 + }) + } } diff --git a/src/app/criticas/criticas-routing.module.ts b/src/app/criticas/criticas-routing.module.ts index 3688772f..9215a372 100644 --- a/src/app/criticas/criticas-routing.module.ts +++ b/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 }, ]; diff --git a/src/app/criticas/service/critica-dialogo.service.spec.ts b/src/app/criticas/service/critica-dialogo.service.spec.ts new file mode 100644 index 00000000..fc157856 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/criticas/service/critica-dialogo.service.ts b/src/app/criticas/service/critica-dialogo.service.ts new file mode 100644 index 00000000..c89b11a9 --- /dev/null +++ b/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(this.uriApi) + .pipe( + first(), + tap(apiCriticas => console.log(apiCriticas)) + ) + } +} diff --git a/src/app/criticas/service/critica.service.ts b/src/app/criticas/service/critica.service.ts index a8fed518..f32ca6e9 100644 --- a/src/app/criticas/service/critica.service.ts +++ b/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(this.uriApi) + .pipe( + first(), + delay(200), + map(res => res.filter(i => (i.titulo.toLowerCase()).startsWith(titulo.toLowerCase()))), + ) + } } diff --git a/src/assets/menuNavegador.json b/src/assets/menuNavegador.json index 3bf22d58..a53055b8 100644 --- a/src/assets/menuNavegador.json +++ b/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} ]