favoris avec coeur rempli

This commit is contained in:
Thomas Cardon 2022-03-03 14:46:09 +01:00
parent ea3e2ad2ae
commit c70e3bab94
9 changed files with 95 additions and 31 deletions

View File

@ -23,6 +23,7 @@ import { AddRestauComponent } from './admin-component/add-restau/add-restau.comp
import { UpdateDelRestauComponent } from './admin-component/update-del-restau/update-del-restau.component'; import { UpdateDelRestauComponent } from './admin-component/update-del-restau/update-del-restau.component';
import { HeaderLogoComponent } from './header/components/header-logo/header-logo.component'; import { HeaderLogoComponent } from './header/components/header-logo/header-logo.component';
import { AuthInterceptor } from './services/auth.interceptor'; import { AuthInterceptor } from './services/auth.interceptor';
import { FavorisUserComponent } from './pages/favoris-user/favoris-user.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -44,7 +45,8 @@ import { AuthInterceptor } from './services/auth.interceptor';
AdminPageComponent, AdminPageComponent,
AddRestauComponent, AddRestauComponent,
UpdateDelRestauComponent, UpdateDelRestauComponent,
HeaderLogoComponent HeaderLogoComponent,
FavorisUserComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -3,7 +3,7 @@
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap"> <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
<div class="rond position-absolute"> <div class="rond position-absolute">
<app-icon class="heart" <app-icon class="heart"
[iconName]="isLiked ? 'heart-fill' : 'heart'" [iconName]="restaurant.restauLike ? 'heart-fill' : 'heart'"
[iconColor]="'#e35d6a'" [iconColor]="'#e35d6a'"
(click)="onClickLike()"></app-icon></div> (click)="onClickLike()"></app-icon></div>
<div class="card-body rounded-bottom"> <div class="card-body rounded-bottom">

View File

@ -29,11 +29,13 @@ export class CardRestoComponent implements OnInit {
this.restaurant.latitude, this.restaurant.latitude,
this.restaurant.longitude) this.restaurant.longitude)
); );
} }
onClickLike() { onClickLike() {
console.log('click'); console.log('click');
this.isLiked = !this.isLiked; //this.isLiked = !this.isLiked;
this.clickLike.emit(this.isLiked); this.clickLike.emit(this.isLiked);
} }

View File

@ -1,8 +1,5 @@
<h2 class="titre ">Mes favoris :</h2> <app-template-page [title]="'Favoris :'">
<div class="separation"></div> <div *ngFor="let pref of restaurantData">
<div class="parent d-flex justify-content-center align-items-center"> <app-card-resto [restaurant]= "pref"></app-card-resto>
<div class="card">
<h3>Mon top</h3>
</div> </div>
</app-template-page>
</div>

View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { forkJoin } from 'rxjs';
import { ApiBackService } from 'src/app/services/api-back.service'; import { ApiBackService } from 'src/app/services/api-back.service';
import { TokenService } from 'src/app/services/token.service'; import { TokenService } from 'src/app/services/token.service';
@ -9,24 +10,41 @@ import { TokenService } from 'src/app/services/token.service';
}) })
export class FavorisUserComponent implements OnInit { export class FavorisUserComponent implements OnInit {
personneConnectee : any;
constructor(private apiBackService : ApiBackService,private tokenService : TokenService) { personneConnectee : any;
restaurantData : any[];
public listRestaurants : any;
public listPref : any;
public restaurantPref : any;
constructor(private apiBackService : ApiBackService, private tokenService : TokenService) {
this.restaurantData = []
} }
ngOnInit(): void { ngOnInit(): void {
this.apiBackService.getPersonneById(this.tokenService.getCurrentUserId()).subscribe( this.apiBackService.getPersonneById(this.tokenService.getCurrentUserId()).subscribe(
resp =>{ user =>{
console.log(resp);
this.listPref = user.preference;
this.personneConnectee = resp; console.log(this.listPref);
for (let i = 0; i < this.listPref.length; i++) {
this.restaurantData.push(this.listPref[i]['preferencePK']['restau']);
}
this.restaurantData.forEach((restau: any) => {
//console.log(restau);
restau.restauLike = true;
});
} }
); );
console.log(this.personneConnectee);
} }
} }

View File

@ -4,4 +4,5 @@ export interface User {
lastName: string; lastName: string;
email: string; email: string;
password?: string; password?: string;
preference ?: object;
} }

View File

@ -1,6 +1,6 @@
<app-template-page [title]="'Résultats :'"> <app-template-page [title]="'Résultats :'">
<div *ngFor="let restaurantData of listRestaurants"> <div *ngFor="let restaurantData of listRestaurants">
<app-card-resto [restaurant]= "restaurantData"></app-card-resto> <app-card-resto [restaurant]= "restaurantData" (clickLike)="onEventLike()"></app-card-resto>
</div> </div>
</app-template-page> </app-template-page>

View File

@ -1,5 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { forkJoin } from 'rxjs';
import { ApiBackService } from 'src/app/services/api-back.service'; import { ApiBackService } from 'src/app/services/api-back.service';
import { TokenService } from 'src/app/services/token.service';
import { Restaurant } from '../models/restaurant';
@Component({ @Component({
selector: 'app-resto-page', selector: 'app-resto-page',
@ -8,13 +11,20 @@ import { ApiBackService } from 'src/app/services/api-back.service';
}) })
export class RestoPageComponent implements OnInit { export class RestoPageComponent implements OnInit {
public listRestaurants : any[]; public listRestaurants : any;
public listPref : any;
public restaurantPref : any;
public beforeRoute ?: string ;
constructor(private apiBackService : ApiBackService) { constructor(private apiBackService : ApiBackService,
private tokenService : TokenService) {
this.listRestaurants = []; this.listRestaurants = [];
this.restaurantPref = [];
} }
ngOnInit(): void { ngOnInit(): void {
this.beforeRoute = this.apiBackService.routeParam;
// arrivée sur la restau-page depuis filtres ou home(catégories) : appel a une méthode différente du service // arrivée sur la restau-page depuis filtres ou home(catégories) : appel a une méthode différente du service
if(this.apiBackService.routeParam === "filtres"){ if(this.apiBackService.routeParam === "filtres"){
@ -26,17 +36,50 @@ export class RestoPageComponent implements OnInit {
}); });
}else{ // si on arrive sur l'url /restaurants directement = tous les restau affichés }else{ // si on arrive sur l'url /restaurants directement = tous les restau affichés
this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
this.listRestaurants = restaurants;
}) this.restauLiked();
} }
console.log(this.apiBackService);
} }
onEventLike(){
this.apiBackService.restoLiked$.next('');
console.log(this.apiBackService.restoLiked$);
}
restauLiked(){
forkJoin({
restaurants: this.apiBackService.getRestaurants(),
user: this.apiBackService.getPersonneById(this.tokenService.getCurrentUserId())
}).subscribe(({restaurants, user}) => {
this.listRestaurants = restaurants;
this.listPref = user.preference;
for (let i = 0; i < this.listPref.length; i++) {
this.restaurantPref.push(this.listPref[i]['preferencePK']['restau']);
}
const listRestauIdLike = this.restaurantPref.map((x: any) => x.id);
this.listRestaurants.forEach((restau: any) => {
if(listRestauIdLike.includes(restau.id))
//console.log(restau);
restau.restauLike = true;
});
}
);
}
} }

View File

@ -3,6 +3,7 @@ import { Observable, of, Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { Restaurant } from '../pages/models/restaurant'; import { Restaurant } from '../pages/models/restaurant';
import { User } from '../pages/models/user';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -71,6 +72,6 @@ export class ApiBackService {
} }
getPersonneById(id: any) { getPersonneById(id: any) {
return this.httpClient.get<any[]>(`${environment.apiUrl}/user/${id}`); return this.httpClient.get<User>(`${environment.apiUrl}/user/${id}`);
} }
} }