|
|
|
|
@ -1,30 +1,144 @@
|
|
|
|
|
import { NgIf } from '@angular/common';
|
|
|
|
|
import { Component, OnInit } from '@angular/core';
|
|
|
|
|
import { NavigationEnd, Router, RouterLink } from '@angular/router';
|
|
|
|
|
import { Component, input, OnInit } from '@angular/core';
|
|
|
|
|
import {
|
|
|
|
|
NavigationEnd,
|
|
|
|
|
ActivatedRoute,
|
|
|
|
|
Router,
|
|
|
|
|
RouterLink,
|
|
|
|
|
} from '@angular/router';
|
|
|
|
|
import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
|
|
|
|
|
import { LocalStorageService } from '../../services/localstorage.service';
|
|
|
|
|
import { Pin } from '../../model/Pin';
|
|
|
|
|
import { PinService } from '../../services/pin.service';
|
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
|
import { FormControl } from '@angular/forms';
|
|
|
|
|
import { FormGroup } from '@angular/forms';
|
|
|
|
|
import { FormBuilder } from '@angular/forms';
|
|
|
|
|
import { ReactiveFormsModule } from '@angular/forms';
|
|
|
|
|
import {
|
|
|
|
|
debounceTime,
|
|
|
|
|
distinctUntilChanged,
|
|
|
|
|
switchMap,
|
|
|
|
|
of,
|
|
|
|
|
catchError,
|
|
|
|
|
} from 'rxjs';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-navbar',
|
|
|
|
|
imports: [AddPinPopupComponent, NgIf, RouterLink],
|
|
|
|
|
imports: [
|
|
|
|
|
AddPinPopupComponent,
|
|
|
|
|
NgIf,
|
|
|
|
|
RouterLink,
|
|
|
|
|
CommonModule,
|
|
|
|
|
ReactiveFormsModule,
|
|
|
|
|
],
|
|
|
|
|
templateUrl: './navbar.component.html',
|
|
|
|
|
})
|
|
|
|
|
export class NavbarComponent implements OnInit {
|
|
|
|
|
isHome: boolean = false;
|
|
|
|
|
isModalOpen: boolean = false;
|
|
|
|
|
pins: Pin[] = [];
|
|
|
|
|
pinsFiltered: Pin[] = [];
|
|
|
|
|
inputFocus: Boolean = false;
|
|
|
|
|
searchForm: FormGroup;
|
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
|
private router: Router,
|
|
|
|
|
private localStorageService: LocalStorageService
|
|
|
|
|
) {}
|
|
|
|
|
private route: ActivatedRoute,
|
|
|
|
|
private localStorageService: LocalStorageService,
|
|
|
|
|
private pinService: PinService,
|
|
|
|
|
private fb: FormBuilder
|
|
|
|
|
) {
|
|
|
|
|
this.searchForm = this.fb.group({
|
|
|
|
|
searchControl: new FormControl(''),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
|
|
|
|
this.pins = this.pinService.getPins().subscribe((pins: Pin[]) => {
|
|
|
|
|
this.pins = pins;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.isHome = this.router.url === '/';
|
|
|
|
|
this.router.events.subscribe((event) => {
|
|
|
|
|
if (event instanceof NavigationEnd) {
|
|
|
|
|
this.isHome = event.url === '/';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Initialise la barre de recherche avec debounce et distinctUntilChanged
|
|
|
|
|
this.searchForm
|
|
|
|
|
.get('searchControl')
|
|
|
|
|
?.valueChanges.pipe(
|
|
|
|
|
debounceTime(300), // Attendre 300ms après la dernière frappe
|
|
|
|
|
distinctUntilChanged(), // Ignorer si la nouvelle valeur est la même que la précédente
|
|
|
|
|
switchMap((searchTerm) => {
|
|
|
|
|
console.log(
|
|
|
|
|
'Value change : ',
|
|
|
|
|
this.searchForm.get('searchControl')?.valueChanges
|
|
|
|
|
);
|
|
|
|
|
const trimmedQuery = searchTerm?.trim();
|
|
|
|
|
if (trimmedQuery && trimmedQuery.length > 1) {
|
|
|
|
|
return of(this.filterPins(trimmedQuery));
|
|
|
|
|
}
|
|
|
|
|
return of([]);
|
|
|
|
|
}),
|
|
|
|
|
catchError((error) => {
|
|
|
|
|
console.error(
|
|
|
|
|
'Erreur lors de la récupération des suggestions :',
|
|
|
|
|
error
|
|
|
|
|
);
|
|
|
|
|
return of([]);
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
.subscribe((filteredPins) => {
|
|
|
|
|
this.pinsFiltered = filteredPins;
|
|
|
|
|
console.log('Pins filtrés : ', this.pinsFiltered);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
filterPins(searchTerm: string): Pin[] {
|
|
|
|
|
const filteredPins: Pin[] = [];
|
|
|
|
|
|
|
|
|
|
console.log('Pins : ', this.pins);
|
|
|
|
|
|
|
|
|
|
if (this.pins.length === 0) {
|
|
|
|
|
this.pins = this.pinService.getPins();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.pins.forEach((pin: Pin) => {
|
|
|
|
|
if (
|
|
|
|
|
pin.title &&
|
|
|
|
|
pin.title.toLowerCase().includes(searchTerm.toLowerCase())
|
|
|
|
|
) {
|
|
|
|
|
console.log('Search term : ', searchTerm, ' / Pin trouvé : ', pin);
|
|
|
|
|
filteredPins.push(pin);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return filteredPins;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
clickSuggestion(pin: Pin): void {
|
|
|
|
|
this.searchForm.reset();
|
|
|
|
|
|
|
|
|
|
const queryParams = { pin: pin.id }; // Remplacer "id" par la bonne propriété si nécessaire
|
|
|
|
|
this.router.navigate([], {
|
|
|
|
|
relativeTo: this.route,
|
|
|
|
|
queryParams: queryParams,
|
|
|
|
|
queryParamsHandling: 'merge', // Conserve les autres paramètres de requête
|
|
|
|
|
});
|
|
|
|
|
console.log('Redirection avec ID :', pin.id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onFocus(): void {
|
|
|
|
|
this.inputFocus = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onBlur(): void {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.inputFocus = false;
|
|
|
|
|
}, 200); // Petit délai pour laisser l'utilisateur cliquer
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public logout() {
|
|
|
|
|
|
