From 61e915eca091ecb3dd0f389f2bc9f926b34ca15b Mon Sep 17 00:00:00 2001 From: dorian Date: Mon, 24 Jun 2024 12:41:10 +0200 Subject: [PATCH 1/2] Adding good front and pagination --- .idea/workspace.xml | 106 +++++++++-- .../component/accueil/accueil.component.html | 31 +++- .../component/accueil/accueil.component.ts | 9 +- .../recipe-list/recipe-list.component.html | 166 ++++++++++-------- .../recipe-list/recipe-list.component.ts | 34 +++- 5 files changed, 245 insertions(+), 101 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 377f6bc..c7beb9b 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,32 +1,70 @@ + + - + + + + + + + + + + + + - - + { + "associatedIndex": 7 +} + + + + - { + "keyToString": { + "ASKED_ADD_EXTERNAL_FILES": "true", + "RunOnceActivity.ShowReadmeOnStart": "true", + "git-widget-placeholder": "master", + "last_opened_file_path": "/home/dorian/Documents/but3/Angular/Daidokoro", + "node.js.detected.package.eslint": "true", + "node.js.detected.package.tslint": "true", + "node.js.selected.package.eslint": "(autodetect)", + "node.js.selected.package.tslint": "(autodetect)", + "nodejs_package_manager_path": "npm", + "settings.editor.selected.configurable": "preferences.lookFeel", + "ts.external.directory.path": "/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib", + "vue.rearranger.settings.migration": "true" } -}]]> +} + + + + + + @@ -37,13 +75,47 @@ - - 1718625373590 + + 1718535175328 + + + + + + + + + + \ No newline at end of file diff --git a/daidokoro/src/app/component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html index 86d5105..4f11807 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -31,20 +31,36 @@ display: flex; gap: 20px; } - .recipe-container { + .recipe-container, .form-container { background-color: #bab6b6; color: black; padding: 20px; - margin-top: 0; + flex: 1; + } + .recipe-container { + display: flex; + flex-direction: column; } .recipe-container h2 { font-size: 3em; margin-bottom: 10px; } + .form-container { + display: none; + flex-direction: column; + } + .show-form .form-container { + display: flex; + } + .show-form .recipe-container, .show-form .form-container { + flex: 1; + } + .button-container { + margin-top: 20px; + } -
Accueil Recettes @@ -52,12 +68,15 @@ Contact
-
+

Liste Recettes

- +
+ +
+
-
+
diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts index 4d1f7d3..5d2b432 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.ts +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -3,20 +3,27 @@ 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"; @Component({ selector: 'app-accueil', standalone: true, imports: [ RecipeListComponent, - RecipeFormComponent + RecipeFormComponent, + NgIf ], templateUrl: './accueil.component.html' }) export class AccueilComponent { + isFormVisible: boolean = false; constructor(private recipeService: RecipeService){} onRecipeSubmitted(recipe : Recipe){ this.recipeService.addRecipe(recipe); } + + toggleForm() { + this.isFormVisible = !this.isFormVisible; + } } diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html index c1cf7cb..2809b44 100644 --- a/daidokoro/src/app/component/recipe-list/recipe-list.component.html +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html @@ -1,77 +1,95 @@ - - - - -
- Recette 1 -
-

{{recipe.$name}}

-

{{recipe.$description}}

é - + + +
+
+ Recette 1 +
+

{{recipe.$name}}

+

{{recipe.$description}}

+ +
- + diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.ts b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts index b0e1d60..f09e231 100644 --- a/daidokoro/src/app/component/recipe-list/recipe-list.component.ts +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import { RecipeService } from '../../service/recipe.service'; import { Recipe } from '../../model/recipe.model'; -import {NgOptimizedImage} from "@angular/common"; +import {NgClass, NgOptimizedImage} from "@angular/common"; import {NgFor} from "@angular/common"; @Component({ @@ -9,16 +9,44 @@ import {NgFor} from "@angular/common"; templateUrl: './recipe-list.component.html', imports: [ NgOptimizedImage, - NgFor + NgFor, + NgClass ], standalone: true }) export class RecipeListComponent implements OnInit { recipes: Recipe[] = []; + @Input() isFormVisible!: boolean; + + currentPage: number = 0; + pageSize: number = 4; + totalPages: any = 0; constructor(private recipeService: RecipeService) {} ngOnInit(): void { this.recipes = this.recipeService.getRecipes(); + this.totalPages = Math.ceil(this.recipes.length / this.pageSize); + } + + get paginatedRecipes(): any[] { + const startIndex = this.currentPage * this.pageSize; + return this.recipes.slice(startIndex, startIndex + this.pageSize); + } + + changePage(index: number): void { + this.currentPage = index; + } + + previousPage(): void { + if (this.currentPage > 0) { + this.currentPage--; + } + } + + nextPage(): void { + if (this.currentPage < this.totalPages - 1) { + this.currentPage++; + } } } From 370b3467b2aecdd4af2c8137c0d5bc81c5b05f85 Mon Sep 17 00:00:00 2001 From: dorian Date: Mon, 24 Jun 2024 12:42:06 +0200 Subject: [PATCH 2/2] Adding new gitignore for workspace --- daidokoro/.gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/daidokoro/.gitignore b/daidokoro/.gitignore index cc7b141..bf82add 100644 --- a/daidokoro/.gitignore +++ b/daidokoro/.gitignore @@ -1,5 +1,5 @@ # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. - +.idea/workspace.xml # Compiled output /dist /tmp