Merge pull request #5 from Julian30520/romain

Romain

package.json

@@ -33,6 +33,7 @@
     "@types/node": "^12.11.1",
     "@types/underscore": "^1.11.4",
     "jasmine-core": "~3.10.0",
+    "json-server-auth": "^2.1.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",

src/app/app-routing.module.ts

@@ -1,14 +1,22 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CardPlanteComponent } from './components/card-plante/card-plante.component';
 import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
 import { PageDetailsComponent } from './pages/page-details/page-details.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 
+
+
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: PageAccueilComponent },
-  { path: 'details', component: PageDetailsComponent },
-  { path: '**', component: PageNotFoundComponent }
+  {
+    path: 'home', component: PageAccueilComponent },
+  { path: 'details/:productId', component: PageDetailsComponent},
+  {path : 'account',
+   loadChildren : () => import('./modules/account/account.module')
+   .then(m => m.AccountModule)
+  },
+{ path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -28,7 +28,9 @@ import { AvisBarComponent } from './components/avis-bar/avis-bar.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/card-plante/card-plante.component.html

@@ -1,15 +1,15 @@
 <div class="plant card mb-4" style="width: 14rem;">
-    <app-icon class="like" 
-            [iconName]="'heart'" 
-            [iconColor]="'#e35d6a'" 
+    <app-icon class="like"
+            [iconName]="'heart'"
+            [iconColor]="'#e35d6a'"
             (click)="onClickLike()"></app-icon>
-    <img src="{{plant.product_url_picture}}" class="card-img-top" alt="Image de {{ plant.product_name }}">
+    <img src="{{plant.product_url_picture}}" class="card-img-top" alt="Image de {{ plant.product_name }}" (click) = "onGetId(plant.product_id)">
     <div class="card-body">
-        <h6 class="card-title">{{ plant.product_name }}</h6>
+        <h6 class="card-title" (click) = "onGetId(plant.product_id)">{{ plant.product_name }}</h6>
         <div class="card-content">
             <app-avis-bar></app-avis-bar>
         </div>
-        
+
         <div class="d-flex flex-row align-items-end justify-content-between">
             <div class="card-content">
                 {{ plant.product_unitprice_ati }} €
@@ -17,4 +17,4 @@
             <a href="#" class="btn btn-success">Pour moi !</a>
         </div>
     </div>
-</div>
+</div>

src/app/components/card-plante/card-plante.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -9,14 +10,21 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class CardPlanteComponent implements OnInit {
   @Input() plant: any;
   @Output() clickLike = new EventEmitter();
-  constructor() { }
+  @Output() clickCardId = new EventEmitter();
+
+  constructor(private router : Router) {}
 
   ngOnInit(): void {
   }
-
   onClickLike() {
     console.log('click');
     this.clickLike.emit();
   }
-
+  onGetId(id : string){
+    this.clickCardId.emit(id);
+    this.router.navigateByUrl('/details/'+ id);
+  }
 }
+
+
+//http://localhost:3000/list_products?product_id=952438

src/app/components/nav-bar/nav-bar.component.html

@@ -1,12 +1,12 @@
 <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">🪴 La Belle Plante</a>
-        <button class="navbar-toggler" 
-            type="button" 
-            data-bs-toggle="collapse" 
+        <button class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
             data-bs-target="#navbarNavAltMarkup"
-            aria-controls="navbarNavAltMarkup" 
-            aria-expanded="false" 
+            aria-controls="navbarNavAltMarkup"
+            aria-expanded="false"
             aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -14,6 +14,7 @@
             <div class="navbar-nav">
                 <a routerLink="home" routerLinkActive="active-custom" class="nav-link">Accueil</a>
                 <a routerLink="details" routerLinkActive="active-custom" class="nav-link">Details</a>
+                <a routerLink="account/signin" routerLinkActive="active-custom" class="nav-link">Se connecter</a>
                 <a class="nav-link">Panier</a>
                 <a class="nav-link disabled">Plus d'option bientôt</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>

src/app/modules/account/account-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageSignupComponent } from './pages/page-signup/page-signup.component';
+
+const routes: Routes = [
+  {path : '', redirectTo:'signin', pathMatch: 'full'},
+  {path : "signin", component : PageSigninComponent},
+  {path : "signup", component : PageSignupComponent},
+  {path : "forgot-password", component : PageForgotPasswordComponent},
+  {path : "reset-password", component : PageResetPasswordComponent}
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountRoutingModule { }

src/app/modules/account/account.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AccountRoutingModule } from './account-routing.module';
+import { PageSignupComponent } from './pages/page-signup/page-signup.component';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+
+
+@NgModule({
+  declarations: [
+    PageSignupComponent,
+    PageSigninComponent,
+    PageForgotPasswordComponent,
+    PageResetPasswordComponent
+  ],
+  imports: [
+    CommonModule,
+    AccountRoutingModule
+  ]
+})
+export class AccountModule { }

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.html

@@ -0,0 +1 @@
+<p>page-forgot-password works!</p>

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.spec.ts

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

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-forgot-password',
+  templateUrl: './page-forgot-password.component.html',
+  styleUrls: ['./page-forgot-password.component.scss']
+})
+export class PageForgotPasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/pages/page-reset-password/page-reset-password.component.html

@@ -0,0 +1 @@
+<p>page-reset-password works!</p>

src/app/modules/account/pages/page-reset-password/page-reset-password.component.spec.ts

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

src/app/modules/account/pages/page-reset-password/page-reset-password.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-reset-password',
+  templateUrl: './page-reset-password.component.html',
+  styleUrls: ['./page-reset-password.component.scss']
+})
+export class PageResetPasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/pages/page-signin/page-signin.component.html

@@ -0,0 +1 @@
+<p>page-signin works!</p>

src/app/modules/account/pages/page-signin/page-signin.component.spec.ts

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

src/app/modules/account/pages/page-signin/page-signin.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-signin',
+  templateUrl: './page-signin.component.html',
+  styleUrls: ['./page-signin.component.scss']
+})
+export class PageSigninComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/pages/page-signup/page-signup.component.html

@@ -0,0 +1 @@
+<p>page-signup works!</p>

src/app/modules/account/pages/page-signup/page-signup.component.spec.ts

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

src/app/modules/account/pages/page-signup/page-signup.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-signup',
+  templateUrl: './page-signup.component.html',
+  styleUrls: ['./page-signup.component.scss']
+})
+export class PageSignupComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/page-accueil/page-accueil.component.html

@@ -6,21 +6,18 @@
           placeholder="Recherche ta belle plante"
           aria-label="Input Recherche ta belle plante"
           (input)="onRecherchePlante($event)">
+        <div class="py-3">
+            Trier par :
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onAlphaTri()">Ordre Alpha</button>
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
+        </div>
 
-      <div class="py-3">
-          Trier par :
-          <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
-          <button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
-          <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
-      </div>
-
-      <div class="row">
-          <div class="col" *ngFor="let product of listData">
-              <app-card-plante [plant]="product"
-                          (clickLike)="onEventLike()">
-              </app-card-plante>
-          </div>
-      </div>
-  </div>
-</div>
-
+        <div class="row">
+            <div class="col" *ngFor="let product of listData">
+                <app-card-plante [plant]="product" (clickLike)="onEventLike()">
+                </app-card-plante>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/page-accueil/page-accueil.component.ts

@@ -13,7 +13,9 @@ import { contains, includes } from 'underscore';
 })
 export class PageAccueilComponent implements OnInit {
   public listData: any[];
-  public listDataGlobal: any[];
+  public listPricePlant : any[];
+  public clickCounter : any;
+  public listDataGlobal : any[];
   public listDataFilter: any[];
   public listCategoriesFilter: string[];
   public dataFilterCategory : any;
@@ -29,9 +31,11 @@ export class PageAccueilComponent implements OnInit {
 
   constructor(private plantouneService: PlantouneService) {
     this.listData = [];
-    this.listDataGlobal = [];
-    this.listDataFilter = [];
     this.listCategoriesFilter = [];
+    this.listPricePlant = [];
+    this.listDataGlobal = [];
+    this.clickCounter = 0;
+    this.listDataFilter = [];
 
     this.rangeNumber = [];
     this.stateNumber = 0;
@@ -51,7 +55,6 @@ export class PageAccueilComponent implements OnInit {
     *   this.plantouneService = plantouneService; }
     */
 
-
   ngOnInit(): void {
 
     this.plantouneService.getData().subscribe(
@@ -82,18 +85,26 @@ export class PageAccueilComponent implements OnInit {
         this.listCategoriesFilter = listUniqJsCategories;
         this.listData = [...listPlant];
         this.listData.length = 9;
-
+        this.listDataGlobal = [...listPlant]
+        
         console.log(this.listData);
       }
     )
   }
 
   onEventLike() {
-    this.plantouneService.plantLiked$.next('')
+    this.plantouneService.plantLiked$.next('');
   }
 
 onRecherchePlante(choix: any) {
 
+this.clickCounter ++
+console.log(this.clickCounter)
+  if (this.clickCounter %2) {
+    this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
+    }else{
+    this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price));
+    }
     const search = choix.target.value 
     console.log(search);
     this.listData = this.listDataGlobal.filter((plant) => {

src/app/pages/page-details/page-details.component.html

@@ -1 +1,31 @@
-<p>page-details works!</p>
+<div class="d-flex justify-content-center" *ngIf="detailsPlant">
+    <div class="d-flex align-items-center flex-column">
+        <img src="{{detailsPlant.product_url_picture}}" class="col-sm-5" style="width: 30rem;"
+            alt="Image de {{ detailsPlant.product_name }}">
+            <div class="card-content">
+                <app-avis-bar></app-avis-bar>
+            </div>
+        </div>
+        <div class="d-flex align-items-start flex-column mt-4 ">
+            <h4 style=" color: green;">{{detailsPlant.product_breadcrumb_label}}</h4>
+            <h2 class="card-title" style="font-size: 30px;">{{ detailsPlant.product_name }}</h2>
+            <div>
+            </div>
+            
+            <div class="card-content">
+            </div>
+            <div style="border-style: solid; border-color: green; margin: auto; text-align: left; margin-right: 20%;padding: 2%;">
+                <p>
+                    Plante appréciant la chaleur et un bon réseau wifi,
+                    interconnectée avec son propriétaire et détestant les chats.
+                    Beaucoup de café et un peu d’eau. Ne pas sortir en extérieur, sauf en terrasse. Floraison totale au
+                    mois de juin.
+                </p>
+            </div>
+            <a href="#" class="card-content" class="btn btn-success">Je l'ajoute à mon panier : {{  detailsPlant.product_unitprice_ati }} €</a>
+            
+            <div>Quantité restante : {{detailsPlant.product_qty}}</div>
+            <a href="#" class="btn btn-success" style="margin-left: 75%" >Voir mon panier</a>
+        </div>
+    
+</div>

src/app/pages/page-details/page-details.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PlantouneService } from 'src/app/services/plantoune.service';
+
 
 @Component({
   selector: 'app-page-details',
@@ -7,9 +10,39 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageDetailsComponent implements OnInit {
 
-  constructor() { }
+  detailsPlant: any;
+  public listData: any[];
 
-  ngOnInit(): void {
+  constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
+
+    this.listData = [];
   }
 
+  ngOnInit(): void {
+
+    this.plantouneService.getData().subscribe(
+      (listPlant: any[]) => {
+        console.log(listPlant);
+
+        this.listData = listPlant;
+
+
+        //ajoute le ProductId à l'url
+        const routeParams = this.route.snapshot.paramMap;
+        const productIdFromRoute = Number(routeParams.get('productId'));
+
+        // Faire appel au service et récuperer et executer la requete http  et lui fournir le productId
+        this.plantouneService.getPlantById(productIdFromRoute).subscribe
+          (plant => {
+            this.detailsPlant = plant[0];
+            console.log(this.detailsPlant);
+          })
+
+
+      })
+  }
+
+  test(id: any) {
+    console.log(id);
+  }
 }

src/app/services/plantoune.service.ts

@@ -11,6 +11,11 @@ export class PlantouneService {
   constructor(private httpClient: HttpClient) { }
 
   getData(): Observable<any[]> {
+    
     return this.httpClient.get<any[]>('http://localhost:3000/list_products');
   }
+  
+  getPlantById(id : any): Observable<any[]> {
+    return this.httpClient.get<any[]>('http://localhost:3000/list_products?product_id=' + id);
+  }
 }