Merge pull request 'formAdvanced' (#3) from formAdvanced into master

Reviewed-on: #3
10 months ago · 62b1b37320
parent 370b3467b2 e2cd09bb99
commit 62b1b37320
12 changed files with 191 additions and 23 deletions
--- a/daidokoro/src/app/app.routes.ts
+++ b/daidokoro/src/app/app.routes.ts
@ -1,3 +1,5 @@
 import { Routes } from '@angular/router';
+import {AuthGuard} from "./guard.guard";

-export const routes: Routes = [];
+export const routes: Routes = [
+];
--- a/daidokoro/src/app/component/accueil/accueil.component.html
+++ b/daidokoro/src/app/component/accueil/accueil.component.html
@ -62,10 +62,20 @@
 </head>
 <body>
 <div class="navbar">
-  <a href="#home">Accueil</a>
-  <a href="#recipes">Recettes</a>
-  <a href="#about">À Propos</a>
-  <a href="#contact">Contact</a>
+  <div *ngIf="isLogged()">
+    <a href="" (click)="onClickLogout($event)">Logout</a>
+  </div>
+  <div *ngIf="!isLogged()">
+    <a href="" (click)="onClickLogin($event)">Login</a>
+  </div>
+
+  <div *ngFor="let link of links">
+    <a routerLink="/{{link.$link}}" routerLinkActive="active" ariaCurrentWhenActive="page">{{link.$name}}</a>
+  </div>
+<!--  <a href="#home">Accueil</a>-->
+<!--  <a href="#recipes">Recettes</a>-->
+<!--  <a href="#about">À Propos</a>-->
+<!--  <a href="#contact">Contact</a>-->
 </div>

 <div class="content" [class.show-form]="isFormVisible">
--- a/daidokoro/src/app/component/accueil/accueil.component.ts
+++ b/daidokoro/src/app/component/accueil/accueil.component.ts
@ -3,21 +3,35 @@ import {RecipeListComponent} from "../recipe-list/recipe-list.component";
 import {RecipeFormComponent} from "../recipe-form/recipe-form.component";
 import {Recipe} from "../../model/recipe.model";
 import {RecipeService} from "../../service/recipe.service";
-import {NgIf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
+import {LinkService} from "../../service/link.service";
+import {Link} from "../../model/link.model";
+import {LoginService} from "../../service/login.service";
+import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router";
+import {CommonModule} from "@angular/common";
+
@Component({
  selector: 'app-accueil',
  standalone: true,
  imports: [
    RecipeListComponent,
    RecipeFormComponent,
-    NgIf
+    CommonModule,
+    NgForOf,
+    RouterLink,
+    RouterOutlet,
+    RouterLinkActive
  ],
  templateUrl: './accueil.component.html'
 })
 export class AccueilComponent {
  isFormVisible: boolean = false;
+  links: Link[] = this.linkService.getLinks()
+
+
+  constructor(private recipeService: RecipeService,private linkService: LinkService,private loginService: LoginService) {
+  }

-  constructor(private recipeService: RecipeService){}

  onRecipeSubmitted(recipe : Recipe){
    this.recipeService.addRecipe(recipe);
@ -26,4 +40,19 @@ export class AccueilComponent {
  toggleForm() {
    this.isFormVisible = !this.isFormVisible;
  }
+
+  onClickLogin(event: Event): void {
+    event.preventDefault(); // Prevent the default anchor behavior
+    this.loginService.login();
+  }
+
+  onClickLogout(event: Event): void {
+    event.preventDefault(); // Prevent the default anchor behavior
+    this.loginService.logout();
+  }
+
+  isLogged(): boolean {
+    return this.loginService.isLogged();
+  }
+
 }
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@ -2,12 +2,32 @@
  <label for="id">ID: </label>
  <input id="id" type="number" formControlName="id">

-  <label for="name">name: </label>
+  <label for="name">Name: </label>
  <input id="name" type="text" formControlName="name">

-  <label for="description">description: </label>
+  <label for="description">Description: </label>
  <input id="description" type="text" formControlName="description">

+  <div formArrayName="ingredients">
+    <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
+      <label for="ingredient-quantity">Quantity:</label>
+      <input id="ingredient-quantity" type="number" formControlName="quantity">
+
+      <label for="ingredient-unit">Unit:</label>
+      <select id="ingredient-unit" formControlName="unit">
+        <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
+      </select>
+
+      <label for="ingredient-name">Ingredient:</label>
+      <select id="ingredient-name" formControlName="ingredient">
+        <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
+      </select>
+
+      <button type="button" (click)="removeIngredient(i)">Remove</button>
+    </div>
+  </div>
+
+  <button type="button" (click)="addIngredient()">Add Ingredient</button>

  <p>Complete the form to enable the button.</p>
  <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
@ -1,24 +1,55 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {Recipe} from "../../model/recipe.model";
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-
+import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
+import { Ingredient } from '../../model/ingredient.model';
+import { Unity } from '../../model/unity';
+import { IngredientService } from '../../service/ingredient.service';
+import {NgFor} from "@angular/common";
@Component({
  selector: 'app-recipe-form',
  standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule,NgFor],
  templateUrl: './recipe-form.component.html',
  styleUrl: './recipe-form.component.css'
 })
 export class RecipeFormComponent {
  @Output() formSubmitted = new EventEmitter<Recipe>();
+  ingredientsList: Ingredient[] = [];
+  unity = Object.values(Unity);
+
+  constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
+
+  ngOnInit(): void {
+    this.ingredientService.getAll().subscribe(ingredients => {
+      this.ingredientsList = ingredients;
+    });
+  }

-  recipeForm = new FormGroup({
+  recipeForm: FormGroup = this.formBuilder.group({
    id: new FormControl('', { nonNullable: true }),
    name: new FormControl('', { nonNullable: true }),
    description: new FormControl('', { nonNullable: true }),
-
+    ingredients: this.formBuilder.array([])
  });

+  get ingredients():FormArray{
+    return this.recipeForm.get('ingredients') as FormArray;
+  }
+
+  newIngredient(): FormGroup{
+    return this.formBuilder.group({
+      quantity: new FormControl(0, { nonNullable: true }),
+      unit: new FormControl('', { nonNullable: true }),
+      ingredient: new FormControl('', { nonNullable: true })
+    });
+  }
+
+  addIngredient() {
+    this.ingredients.push(this.newIngredient());
+  }
+  removeIngredient(index: number) {
+    this.ingredients.removeAt(index);
+  }

  onSubmit() {
    if(this.recipeForm.valid){
@ -27,11 +58,18 @@ export class RecipeFormComponent {
        $name: this.recipeForm.value.name!,
        $description: this.recipeForm.value.description!,
        $createdAt: new Date(),
-        $ingredients: []
+        $ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({
+          quantity: ingredient.quantity,
+          unit: ingredient.unit,
+          ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
+        }))
      };
      this.formSubmitted.emit(recipe);
      this.recipeForm.reset()
+      this.ingredients.clear()
    }

  }
+
+
 }
--- a/daidokoro/src/app/data/link.stub.ts
+++ b/daidokoro/src/app/data/link.stub.ts
@ -1,6 +1,6 @@
 import {Link} from "../model/link.model";

 export var LINKS :Link[] = [
-  {$name:"Lien1",$link:"Lien1"},
-  {$name:"Lien2",$link:'Lien2'}
+  {$name:"Accueil",$link:""},
+  {$name:"Ingredients",$link:"/ingredients"}
  ]
--- a/daidokoro/src/app/guard.guard.ts
+++ b/daidokoro/src/app/guard.guard.ts
@ -0,0 +1,17 @@
+import {CanActivateFn, Router} from '@angular/router';
+import {LoginService} from "./service/login.service";
+import {inject} from "@angular/core";
+
+
+export const AuthGuard: CanActivateFn = (route, state) => {
+  const auth = inject(LoginService)
+  const router = inject(Router);
+
+  if(!auth.isLogged()){
+    router.navigateByUrl('/login');
+    auth.login();
+    return false;
+  }
+  auth.logout();
+  return true;
+};
--- a/daidokoro/src/app/service/ingredient.service.ts
+++ b/daidokoro/src/app/service/ingredient.service.ts
@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Ingredient} from "../model/ingredient.model";
 import {$INGREDIENTS} from "../data/ingredient.stub";
+import {Observable, of} from "rxjs";


@Injectable({
@ -8,9 +9,7 @@ import {$INGREDIENTS} from "../data/ingredient.stub";
 })
 export class IngredientService {

-  constructor() { }
-
-  getAll() : Ingredient[] {
-    return $INGREDIENTS;
+  getAll() : Observable<Ingredient[]> {
+    return of($INGREDIENTS);
  }
 }
--- a/daidokoro/src/app/service/login.service.ts
+++ b/daidokoro/src/app/service/login.service.ts
@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  login(): void {
+    localStorage.setItem('login', 'true');
+  }
+
+  logout(): void {
+    localStorage.setItem('login', 'false');
+  }
+
+  isLogged(): boolean {
+    const login = localStorage.getItem('login');
+    return login === 'true';
+  }
+}
--- a/daidokoro/src/test/service/app.component.spec.ts
+++ b/daidokoro/src/test/service/app.component.spec.ts
@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { AppComponent } from '../../app/app.component';

 describe('AppComponent', () => {
  beforeEach(async () => {
--- a/daidokoro/src/test/service/guard.guard.spec.ts
+++ b/daidokoro/src/test/service/guard.guard.spec.ts
@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { AuthGuard } from '../../app/guard.guard';
+
+describe('guardGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+      TestBed.runInInjectionContext(() => AuthGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
--- a/daidokoro/src/test/service/login.service.spec.ts
+++ b/daidokoro/src/test/service/login.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from '../../app/service/login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});