From 546bc6fc1008d8cb040e85e87c897d77f7dc4d0d Mon Sep 17 00:00:00 2001 From: maxime Date: Thu, 9 Apr 2026 11:56:47 +0200 Subject: [PATCH] KAN-5-feat-video-full-size (#1) Reviewed-on: https://git.maxime-jeannin.fr/Makusu/Nasa_video_search_engine/pulls/1 Co-authored-by: maxime Co-committed-by: maxime --- src/app/app.routes.ts | 3 +- src/app/pages/home/home.html | 1 + src/app/pages/home/home.ts | 4 +- src/app/pages/search/search.css | 14 ----- src/app/pages/search/search.html | 58 ------------------- src/app/pages/search/search.spec.ts | 23 -------- src/app/pages/search/search.ts | 40 ------------- .../pages/search/searchform/searchform.html | 4 +- src/app/pages/search/searchform/searchform.ts | 28 ++++----- .../search/searchresults/searchresults.html | 3 +- .../search/searchresults/searchresults.ts | 13 ++++- src/app/pages/video/video.html | 5 +- src/app/services/search.spec.ts | 16 +++++ src/app/services/search.ts | 10 ++++ 14 files changed, 59 insertions(+), 163 deletions(-) delete mode 100644 src/app/pages/search/search.css delete mode 100644 src/app/pages/search/search.html delete mode 100644 src/app/pages/search/search.spec.ts delete mode 100644 src/app/pages/search/search.ts create mode 100644 src/app/services/search.spec.ts create mode 100644 src/app/services/search.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index c838228..402608f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -7,8 +7,7 @@ export const routes: Routes = [ {path: 'login', loadComponent: ()=> import("./pages/login/login").then(m =>m.Login)}, {path: 'register', loadComponent: ()=> import("./pages/register/register").then(m =>m.Register)}, {path: 'login', loadComponent: ()=> import("./pages/login/login").then(m =>m.Login)}, - {path: 'potd', loadComponent: ()=> import("./pages/potd/potd").then(m =>m.POTD)}, - {path: 'search', loadComponent: ()=> import("./pages/search/search").then(m =>m.Search)}, + {path: 'potd', loadComponent: ()=> import("./pages/potd/potd").then(m =>m.POTD)}, {path: 'video/:id', loadComponent: ()=> import("./pages/video/video").then(m =>m.Video)}, {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin').then(m => m.Admin), data: { role: 'ADMIN' } }, //version si besoin de multiplier les routes admin diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home.html index e69de29..2729e9d 100644 --- a/src/app/pages/home/home.html +++ b/src/app/pages/home/home.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home.ts index 9a7d89d..0ed4f6b 100644 --- a/src/app/pages/home/home.ts +++ b/src/app/pages/home/home.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { Search } from "../search/search"; +import { Searchresults } from "../search/searchresults/searchresults"; @Component({ selector: 'app-home', - imports: [Search], + imports: [Searchresults], templateUrl: './home.html', styleUrl: './home.css' }) diff --git a/src/app/pages/search/search.css b/src/app/pages/search/search.css deleted file mode 100644 index 1f42268..0000000 --- a/src/app/pages/search/search.css +++ /dev/null @@ -1,14 +0,0 @@ -.searchcontainer { - width:80vw; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - -} - -.inputSearch { - margin-bottom: 1rem; - display: flex; - flex-direction: row; -} \ No newline at end of file diff --git a/src/app/pages/search/search.html b/src/app/pages/search/search.html deleted file mode 100644 index 0637513..0000000 --- a/src/app/pages/search/search.html +++ /dev/null @@ -1,58 +0,0 @@ -
-
- - -
- -@if(searchResults()!==null && searchResults()!.collection.items.length==0){ -
-

No results for this search

-
-} - -@if(searchResults()!==null && searchResults()!.collection.items.length!==0){ -
-
    - -
  • Results
    • - @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){ -
  • - -
    -
    -
    {{el.data[0].title}}
    -
    Photographer: {{el.data[0].photographer}}
    -

    - {{el.data[0].description}} -

    -
    - -
    • - } - -
-
- } -
diff --git a/src/app/pages/search/search.spec.ts b/src/app/pages/search/search.spec.ts deleted file mode 100644 index 1b71a5d..0000000 --- a/src/app/pages/search/search.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { Search } from './search'; - -describe('Search', () => { - let component: Search; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [Search] - }) - .compileComponents(); - - fixture = TestBed.createComponent(Search); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/search/search.ts b/src/app/pages/search/search.ts deleted file mode 100644 index 77f89a4..0000000 --- a/src/app/pages/search/search.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, inject, signal } from '@angular/core'; -import { NAPOD } from '../../services/napod'; -import { NasaApi } from '../../interfaces/nasa-api'; -import { FormsModule, NgModel } from '@angular/forms'; -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-search', - imports: [FormsModule], - templateUrl: './search.html', - styleUrl: './search.css' -}) -export class Search { - private readonly nasaApi = inject(NAPOD); - private readonly router = inject(Router) - searchResults = signal(null) - searchString=signal(''); - - onSubmit() { - this.nasaApi.searchForVideos(this.searchString()).subscribe({ - next: (data)=>{this.searchResults.set(data); - console.log(data.collection); - }, - error: error =>{console.log(error); - } - }) - } - - onClick(nasaId: string){ - this.router.navigate(['/video/'+nasaId]) - } - - updateSearch(event: Event){ - console.log(this.searchString()); - const target = event.target as HTMLInputElement; - this.searchString.set(target.value) - } - - -} diff --git a/src/app/pages/search/searchform/searchform.html b/src/app/pages/search/searchform/searchform.html index 422e005..020c943 100644 --- a/src/app/pages/search/searchform/searchform.html +++ b/src/app/pages/search/searchform/searchform.html @@ -1,5 +1,5 @@
-
+ - +
\ No newline at end of file diff --git a/src/app/pages/search/searchform/searchform.ts b/src/app/pages/search/searchform/searchform.ts index 126b7f2..3634e55 100644 --- a/src/app/pages/search/searchform/searchform.ts +++ b/src/app/pages/search/searchform/searchform.ts @@ -1,23 +1,24 @@ import { Component, inject, signal } from '@angular/core'; -import { Router } from '@angular/router'; -import { NasaApi } from '../../../interfaces/nasa-api'; import { NAPOD } from '../../../services/napod'; +import { Search } from '../../../services/search'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-searchform', - imports: [], + imports: [FormsModule], templateUrl: './searchform.html', styleUrl: './searchform.css', }) export class Searchform { private readonly nasaApi = inject(NAPOD); - private readonly router = inject(Router) - searchResults = signal(null) - searchString=signal(''); + private readonly searchService = inject(Search); + searchString = this.searchService.searchString; - onSubmit() { - this.nasaApi.searchForVideos(this.searchString()).subscribe({ - next: (data)=>{this.searchResults.set(data); + onSubmit(event: Event) { + event.preventDefault(); // <-- Empêche le rechargement + console.log("onSubmit appelé !"); // <-- Devrait s'afficher + this.nasaApi.searchForVideos(this.searchService.searchString()).subscribe({ + next: (data)=>{this.searchService.searchResults.set(data); console.log(data.collection); }, error: error =>{console.log(error); @@ -25,14 +26,9 @@ export class Searchform { }) } - onClick(nasaId: string){ - this.router.navigate(['/video/'+nasaId]) - } - updateSearch(event: Event){ - console.log(this.searchString()); const target = event.target as HTMLInputElement; - this.searchString.set(target.value) + this.searchService.searchString.set(target.value) } - + } diff --git a/src/app/pages/search/searchresults/searchresults.html b/src/app/pages/search/searchresults/searchresults.html index df5bcf5..a7992d8 100644 --- a/src/app/pages/search/searchresults/searchresults.html +++ b/src/app/pages/search/searchresults/searchresults.html @@ -28,5 +28,4 @@ - } - \ No newline at end of file + } \ No newline at end of file diff --git a/src/app/pages/search/searchresults/searchresults.ts b/src/app/pages/search/searchresults/searchresults.ts index f50ae11..67807d5 100644 --- a/src/app/pages/search/searchresults/searchresults.ts +++ b/src/app/pages/search/searchresults/searchresults.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; +import { Router } from '@angular/router'; +import { Search } from '../../../services/search'; @Component({ selector: 'app-searchresults', @@ -7,5 +9,14 @@ import { Component } from '@angular/core'; styleUrl: './searchresults.css', }) export class Searchresults { + private readonly router = inject(Router) + private readonly searchService = inject(Search); + searchResults = this.searchService.searchResults; + searchString = this.searchService.searchString; + + onClick(nasaId: string){ + this.router.navigate(['/video/'+nasaId]) + } + } diff --git a/src/app/pages/video/video.html b/src/app/pages/video/video.html index e560d91..74df181 100644 --- a/src/app/pages/video/video.html +++ b/src/app/pages/video/video.html @@ -5,14 +5,13 @@ } @if(!isLoading() && asset()){ -
-