src/app/app.routes.ts

@@ -7,7 +7,8 @@ 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: 'potd', loadComponent: ()=> import("./pages/potd/potd").then(m =>m.POTD)},
+    {path: 'search', loadComponent: ()=> import("./pages/search/search").then(m =>m.Search)},
     {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

src/app/pages/home/home.html

@@ -1 +0,0 @@
-<app-searchresults/>

src/app/pages/home/home.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { Searchresults } from "../search/searchresults/searchresults";
+import { Search } from "../search/search";
 
 @Component({
   selector: 'app-home',
-  imports: [Searchresults],
+  imports: [Search],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })

src/app/pages/search/search.css

@@ -0,0 +1,14 @@
+.searchcontainer {
+    width:80vw;  
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+      
+}
+
+.inputSearch {
+    margin-bottom: 1rem; 
+    display: flex;
+    flex-direction: row; 
+}

src/app/pages/search/search.html

@@ -0,0 +1,58 @@
+<div class="searchcontainer">
+  <form class="inputSearch" (ngSubmit)="onSubmit()">
+  <label class="input">
+    <svg
+      class="h-[1em] opacity-50"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <g
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="2.5"
+        fill="none"
+        stroke="currentColor"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.3-4.3"></path>
+      </g>
+    </svg>
+    <input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />
+    <kbd class="kbd kbd-sm">⌘</kbd>
+    <kbd class="kbd kbd-sm">K</kbd>    
+  </label>
+  <button class="btn">Submit</button>
+</form>
+
+@if(searchResults()!==null && searchResults()!.collection.items.length==0){
+  <div class="resultsContainer">
+    <p>No results for this search</p>
+  </div>
+}
+
+@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
+  <div class="resultsContainer">
+    <ul class="list bg-base-100 rounded-box shadow-md">
+  
+      <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>          
+              @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
+                <li class="list-row">
+                  <!-- 2 for small image -->
+                  <div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
+                  <div>
+                    <div>{{el.data[0].title}}</div>
+                    <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
+                    <p class="list-col-wrap text-xs">
+                    {{el.data[0].description}}
+                  </p>
+                  </div>                  
+                  <button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
+                    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+                  </button>
+                </li>                   
+              }                
+
+    </ul>    
+  </div>
+  }  
+</div>

src/app/pages/search/search.spec.ts

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

src/app/pages/search/search.ts

@@ -0,0 +1,40 @@
+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<NasaApi | null>(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)
+  }
+
+
+}

src/app/pages/search/searchform/searchform.html

@@ -1,5 +1,5 @@
 <div class="flex">
-<form class="inputSearch flex" (ngSubmit)="onSubmit($event)">
+<form class="inputSearch flex" (ngSubmit)="onSubmit()">
   <label class="input">
     <svg
       class="h-[1em] opacity-50"
@@ -19,6 +19,6 @@
     </svg>
     <input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />   
   </label>
-  <button type="submit" class="btn mx-2">Search</button>
+  <button class="btn mx-2">Search</button>
 </form>
 </div>

src/app/pages/search/searchform/searchform.ts

@@ -1,24 +1,23 @@
 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: [FormsModule],
+  imports: [],
   templateUrl: './searchform.html',
   styleUrl: './searchform.css',
 })
 export class Searchform {
   private readonly nasaApi = inject(NAPOD);
-  private readonly searchService = inject(Search);
+  private readonly router = inject(Router)
-  searchString = this.searchService.searchString;
+  searchResults = signal<NasaApi | null>(null)
+  searchString=signal('');
 
-  onSubmit(event: Event) {
+  onSubmit() {
-    event.preventDefault(); // <-- Empêche le rechargement
+    this.nasaApi.searchForVideos(this.searchString()).subscribe({
-    console.log("onSubmit appelé !"); // <-- Devrait s'afficher
+      next: (data)=>{this.searchResults.set(data);
-    this.nasaApi.searchForVideos(this.searchService.searchString()).subscribe({
-      next: (data)=>{this.searchService.searchResults.set(data);
         console.log(data.collection);
       },
       error: error =>{console.log(error);
@@ -26,9 +25,14 @@ export class Searchform {
     })   
   }
 
-  updateSearch(event: Event){
+  onClick(nasaId: string){
-    const target = event.target as HTMLInputElement;
+    this.router.navigate(['/video/'+nasaId])
-    this.searchService.searchString.set(target.value)
   }
-  
+
+  updateSearch(event: Event){
+    console.log(this.searchString());
+    const target = event.target as HTMLInputElement;
+    this.searchString.set(target.value)
+  }
+
 }

src/app/pages/search/searchresults/searchresults.html

@@ -28,4 +28,5 @@
 
     </ul>    
   </div>
-  }
+  }  
+</div>

src/app/pages/search/searchresults/searchresults.ts

@@ -1,6 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Search } from '../../../services/search';
 
 @Component({
   selector: 'app-searchresults',
@@ -9,14 +7,5 @@ import { Search } from '../../../services/search';
   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])
-  }
-  
 }

src/app/pages/video/video.html

@@ -5,13 +5,14 @@
 </div>
 }
 @if(!isLoading() && asset()){
-<div class="videocontainer w-full">
+<div class="videocontainer">
-  <video class="w-full" controls>
+  <video width="320" height="240" controls>
     <source src="{{asset()!.items[3].href}}" type="video/mp4">
     Your browser does not support the video tag.
   </video>
 </div>
 }
+
 @if(!isLoading() && !asset()){
   <p>Impossible de charger la vidéo.</p>
 }

src/app/services/search.spec.ts

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

src/app/services/search.ts

@@ -1,10 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-import { NasaApi } from '../interfaces/nasa-api';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class Search {
-  searchResults = signal<NasaApi | null>(null);
-  searchString = signal('');
-}