From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 20 Feb 2022 16:11:50 +0100 Subject: chore!: restructure repo I separated public files from the config/dev files. It improves repo readability. I also moved dotenv helper to public/inc directory and extract the Matomo tracker in the same directory. --- .../apps/recipes/src/app/app-routing.module.ts | 19 +++ .../apps/recipes/src/app/app.component.html | 10 ++ .../apps/recipes/src/app/app.component.scss | 0 .../apps/recipes/src/app/app.component.spec.ts | 33 +++++ .../apps/recipes/src/app/app.component.ts | 12 ++ .../apps/recipes/src/app/app.module.ts | 40 ++++++ .../page-not-found/page-not-found.component.html | 7 ++ .../page-not-found/page-not-found.component.scss | 0 .../page-not-found.component.spec.ts | 24 ++++ .../page-not-found/page-not-found.component.ts | 11 ++ .../app/components/recipe/recipe.component.html | 111 ++++++++++++++++ .../app/components/recipe/recipe.component.scss | 54 ++++++++ .../app/components/recipe/recipe.component.spec.ts | 24 ++++ .../src/app/components/recipe/recipe.component.ts | 140 +++++++++++++++++++++ .../recipes-list/recipes-list.component.html | 39 ++++++ .../recipes-list/recipes-list.component.scss | 0 .../recipes-list/recipes-list.component.spec.ts | 24 ++++ .../recipes-list/recipes-list.component.ts | 43 +++++++ .../search-results/search-results.component.html | 61 +++++++++ .../search-results/search-results.component.scss | 0 .../search-results.component.spec.ts | 24 ++++ .../search-results/search-results.component.ts | 44 +++++++ .../app/components/search/search.component.html | 30 +++++ .../app/components/search/search.component.scss | 49 ++++++++ .../app/components/search/search.component.spec.ts | 24 ++++ .../src/app/components/search/search.component.ts | 29 +++++ .../app/components/toolbar/toolbar.component.html | 18 +++ .../app/components/toolbar/toolbar.component.scss | 68 ++++++++++ .../components/toolbar/toolbar.component.spec.ts | 24 ++++ .../app/components/toolbar/toolbar.component.ts | 65 ++++++++++ .../shared/directives/textarea.directive.spec.ts | 8 ++ .../app/shared/directives/textarea.directive.ts | 49 ++++++++ .../src/app/shared/pipes/format-comma.pipe.spec.ts | 8 ++ .../src/app/shared/pipes/format-comma.pipe.ts | 18 +++ .../src/app/shared/pipes/slugify.pipe.spec.ts | 8 ++ .../recipes/src/app/shared/pipes/slugify.pipe.ts | 19 +++ .../apps/recipes/src/app/shared/recipes.ts | 49 ++++++++ .../shared/services/local-storage.service.spec.ts | 16 +++ .../app/shared/services/local-storage.service.ts | 39 ++++++ .../app/shared/services/recipes.service.spec.ts | 16 +++ .../src/app/shared/services/recipes.service.ts | 46 +++++++ .../src/app/shared/services/search.service.spec.ts | 16 +++ .../src/app/shared/services/search.service.ts | 39 ++++++ .../recipes/src/app/shared/utilities/slugify.ts | 20 +++ 44 files changed, 1378 insertions(+) create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app-routing.module.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/app.module.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.html create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/recipes.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.spec.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.ts create mode 100644 public/projects/angular-small-apps/apps/recipes/src/app/shared/utilities/slugify.ts (limited to 'public/projects/angular-small-apps/apps/recipes/src/app') diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app-routing.module.ts b/public/projects/angular-small-apps/apps/recipes/src/app/app-routing.module.ts new file mode 100644 index 0000000..74b4b9d --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/app-routing.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; +import { RecipeComponent } from './components/recipe/recipe.component'; +import { RecipesListComponent } from './components/recipes-list/recipes-list.component'; +import { SearchResultsComponent } from './components/search-results/search-results.component'; + +const routes: Routes = [ + { path: '', component: RecipesListComponent }, + { path: 'recipe/:slug', component: RecipeComponent }, + { path: 'search', component: SearchResultsComponent }, + { path: '**', component: PageNotFoundComponent }, +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.html new file mode 100644 index 0000000..b5cbafb --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.html @@ -0,0 +1,10 @@ +
+

{{ title }}

+
+
+
+ +
+ diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.spec.ts new file mode 100644 index 0000000..736e498 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.spec.ts @@ -0,0 +1,33 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'recipes'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('recipes'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain( + 'recipes app is running!' + ); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.ts new file mode 100644 index 0000000..b25ec74 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/app.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], +}) +export class AppComponent { + title = 'Food Recipes'; + + constructor() {} +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/app.module.ts b/public/projects/angular-small-apps/apps/recipes/src/app/app.module.ts new file mode 100644 index 0000000..60286a9 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/app.module.ts @@ -0,0 +1,40 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule } from '@angular/common/http'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { RecipesListComponent } from './components/recipes-list/recipes-list.component'; +import { FormatCommaPipe } from './shared/pipes/format-comma.pipe'; +import { RecipeComponent } from './components/recipe/recipe.component'; +import { SearchComponent } from './components/search/search.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { SearchResultsComponent } from './components/search-results/search-results.component'; +import { SlugifyPipe } from './shared/pipes/slugify.pipe'; +import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; +import { ToolbarComponent } from './components/toolbar/toolbar.component'; +import { TextareaDirective } from './shared/directives/textarea.directive'; + +@NgModule({ + declarations: [ + AppComponent, + RecipesListComponent, + FormatCommaPipe, + RecipeComponent, + SearchComponent, + SearchResultsComponent, + SlugifyPipe, + PageNotFoundComponent, + ToolbarComponent, + TextareaDirective, + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + ReactiveFormsModule, + ], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..8be0976 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.html @@ -0,0 +1,7 @@ +
+

Page not found

+

This usually happens when you didn't save a recipe from a search.

+ + ← Back to recipes + +
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000..d11a45e --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PageNotFoundComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..8c9e8b0 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/page-not-found/page-not-found.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './page-not-found.component.html', + styleUrls: ['./page-not-found.component.scss'], +}) +export class PageNotFoundComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.html new file mode 100644 index 0000000..9f875d9 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.html @@ -0,0 +1,111 @@ +
+
+ +

+ + + + + {{ recipe.strMeal }} +

+
+
Category:
+
+ + + {{ recipe.strCategory }} + + + + +
+
+
+
+
+

Preview

+ {{ recipe.strMeal }} preview + + + +
+
+

Ingredients

+
    +
  • + + + {{ ingredient }} + + + + +
    • +
+
+
+

Instructions

+ + + + + {{ + recipe.strInstructions + }} +
+
+ +
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss new file mode 100644 index 0000000..82294b8 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss @@ -0,0 +1,54 @@ +.recipe { + background: #fff; + border: 1px solid #d7d7d7; + border-radius: 5px; + box-shadow: 0 0 5px -3px #000000a5; + padding: clamp(4rem, 3vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 3vw, 4rem); + position: relative; + + &__body { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + gap: clamp(1rem, 3vw, 2rem); + margin: 1rem 0; + } + + &__thumb { + max-width: min(100vw - 4rem, 300px); + } + + &__instructions { + flex: 0 0 100%; + white-space: pre-line; + } + + &__footer { + margin: 2rem 0 0; + } + + &__field { + all: inherit; + width: 100%; + + &--textarea { + width: 100%; + min-height: 10rem; + } + + &--file { + display: none; + } + } + + &__label { + display: block; + cursor: pointer; + width: max-content; + margin: auto; + } +} + +.ingredients-list { + padding: 0 1rem; +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.spec.ts new file mode 100644 index 0000000..55a83e9 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeComponent } from './recipe.component'; + +describe('RecipeComponent', () => { + let component: RecipeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RecipeComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecipeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.ts new file mode 100644 index 0000000..070220f --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.ts @@ -0,0 +1,140 @@ +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Event, Router } from '@angular/router'; +import { Recipes } from 'src/app/shared/recipes'; +import { LocalStorageService } from 'src/app/shared/services/local-storage.service'; +import { RecipesService } from 'src/app/shared/services/recipes.service'; + +@Component({ + templateUrl: './recipe.component.html', + styleUrls: ['./recipe.component.scss'], + encapsulation: ViewEncapsulation.Emulated, +}) +export class RecipeComponent implements OnInit { + recipe: Partial = {}; + isEditable: boolean = false; + savedRecipes: Recipes[] = this.storage.get('recipes'); + preview: string = this.recipe.strMealThumb!; + + constructor( + private storage: LocalStorageService, + private route: ActivatedRoute, + private recipes: RecipesService, + private router: Router + ) {} + + ngOnInit(): void { + const slug = this.route.snapshot.paramMap.get('slug') || ''; + this.setRecipe(slug); + this.preview = this.recipe.strMealThumb!; + } + + setRecipe(slug: string): void { + const allRecipes = this.storage.get('recipes'); + const filteredRecipes = allRecipes.filter( + (meal: Recipes) => meal.slug === slug + ); + + if (filteredRecipes.length === 0) { + const recipeId = history.state?.id; + if (recipeId) { + this.recipes.getRecipeById(recipeId).subscribe((recipes: any) => { + this.recipe = recipes.meals[0]; + this.preview = this.recipe.strMealThumb!; + }); + } else { + this.router.navigateByUrl('/404'); + } + } else { + this.recipe = filteredRecipes[0] ? filteredRecipes[0] : {}; + } + } + + getIngredients(): string[] { + const ingredients = []; + + for (let i = 1; i <= 20; i++) { + const currentIngredient = `strIngredient${i}` as keyof Recipes; + let ingredient; + + if (this.recipe[currentIngredient]) { + const currentMeasure = `strMeasure${i}` as keyof Recipes; + + if (this.recipe[currentMeasure]) { + ingredient = `${this.recipe[currentMeasure]} ${this.recipe[currentIngredient]}`; + } else { + ingredient = `${this.recipe[currentIngredient]}`; + } + } + + if (ingredient) ingredients.push(ingredient); + } + + return ingredients; + } + + isContentEditable(value: boolean): void { + this.isEditable = value; + } + + updateRecipe(e: any) { + const recipeProperty = e.target.name as keyof Recipes; + + if (!recipeProperty) { + return; + } + + this.recipe[recipeProperty] = e.target.value; + + if (recipeProperty.startsWith('strIngredient')) { + const ingredientNumber = recipeProperty.replace('strIngredient', ''); + const measureProperty = `strMeasure${ingredientNumber}` as keyof Recipes; + this.recipe[measureProperty] = undefined; + } + + const updatedRecipes = this.savedRecipes.map((recipe: Recipes) => { + if (recipe.idMeal === this.recipe.idMeal) { + return { ...this.recipe }; + } + return recipe; + }); + this.storage.set('recipes', updatedRecipes); + } + + getPreview() { + return this.preview; + } + + getImage(img: any) { + var canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + + var ctx = canvas.getContext('2d')!; + ctx.drawImage(img, 0, 0); + + var dataURL = canvas.toDataURL('image/png'); + + return dataURL.replace(/^data:image\/(png|jpg);base64,/, ''); + } + + updatePreview(e: any) { + const newPreview = e.target.files[0]; + + if (FileReader && newPreview) { + const fileReader = new FileReader(); + fileReader.onload = (reader) => { + if (reader.target?.result) { + const updatedRecipes = this.savedRecipes.map((recipe: Recipes) => { + if (recipe.idMeal === this.recipe.idMeal) { + return { ...recipe, strMealThumb: reader.target?.result }; + } + return recipe; + }); + this.preview = reader.target?.result as string; + this.storage.set('recipes', updatedRecipes); + } + }; + fileReader.readAsDataURL(newPreview); + } + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.html new file mode 100644 index 0000000..463b4f3 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.html @@ -0,0 +1,39 @@ +
    +
  • +
    +
    + {{ recipe.strMeal }} picture +

    {{ recipe.strMeal }}

    +
    +
    + {{ + recipe.strInstructions.length > 120 + ? (recipe.strInstructions | slice: 0:120) + "…" + : recipe.strInstructions + }} +
    +
    +
    +
    +
    Category:
    +
    {{ recipe.strCategory }}
    +
    +
    +
    Tags:
    +
    + {{ recipe.strTags | formatComma }} +
    +
    +
    + + Read more + → + +
    +
    +
    • +
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.spec.ts new file mode 100644 index 0000000..d35b397 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipesListComponent } from './recipes-list.component'; + +describe('RecipesListComponent', () => { + let component: RecipesListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RecipesListComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecipesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.ts new file mode 100644 index 0000000..499b116 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { Recipes } from 'src/app/shared/recipes'; +import { LocalStorageService } from 'src/app/shared/services/local-storage.service'; +import { RecipesService } from 'src/app/shared/services/recipes.service'; +import { slugify } from 'src/app/shared/utilities/slugify'; + +@Component({ + templateUrl: './recipes-list.component.html', + styleUrls: ['./recipes-list.component.scss'], +}) +export class RecipesListComponent implements OnInit { + private _recipes = new BehaviorSubject([]); + public recipes = this._recipes.asObservable(); + + constructor( + private storage: LocalStorageService, + private recipesService: RecipesService + ) {} + + ngOnInit(): void { + if (this.storage.get('recipes')) { + this._recipes.next(this.storage.get('recipes')); + } else { + this.setRecipes(); + this.saveRecipes(); + } + } + + setRecipes(): any { + this.recipesService.getAllRecipes().subscribe((recipes: any) => { + const allRecipes: Recipes[] = recipes.meals; + const allRecipesWithSlug = allRecipes.map((recipe: Recipes) => { + return { ...recipe, slug: slugify(recipe.strMeal) }; + }); + this._recipes.next(allRecipesWithSlug); + }); + } + + saveRecipes(): void { + this.recipes.subscribe((recipes) => this.storage.set('recipes', recipes)); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html new file mode 100644 index 0000000..53b0d07 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html @@ -0,0 +1,61 @@ + + +
    +
  • +
    +
    + {{ recipe.strMeal }} picture +

    {{ recipe.strMeal }}

    +
    +
    + {{ + recipe.strInstructions.length > 120 + ? (recipe.strInstructions | slice: 0:120) + "…" + : recipe.strInstructions + }} +
    +
    +
    +
    +
    Category:
    +
    {{ recipe.strCategory }}
    +
    +
    +
    Tags:
    +
    + {{ recipe.strTags | formatComma }} +
    +
    +
    + + Read more + → + +
    +
    +
    • +
+ + ← Back to recipes + + + +
+
+ No recipe match your query: {{ query }}. +
+ + ← Back to your recipes + +
+ diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.spec.ts new file mode 100644 index 0000000..75ad455 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchResultsComponent } from './search-results.component'; + +describe('SearchResultsComponent', () => { + let component: SearchResultsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SearchResultsComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchResultsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.ts new file mode 100644 index 0000000..4a77732 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Recipes } from 'src/app/shared/recipes'; +import { SearchService } from 'src/app/shared/services/search.service'; + +@Component({ + templateUrl: './search-results.component.html', + styleUrls: ['./search-results.component.scss'], +}) +export class SearchResultsComponent implements OnInit { + recipes: Recipes[] = []; + query: string = ''; + by: string = ''; + + constructor( + private search: SearchService, + private router: Router, + private route: ActivatedRoute + ) { + this.getRecipes(); + this.route.params.subscribe((param) => { + this.query = param['query']; + this.by = param['by']; + }); + } + + ngOnInit(): void { + if (this.recipes.length === 0) { + const currentURL = this.router.url.replace('%20', ' '); + const byParam = currentURL.match(/(?:by=)(\w+)/i); + const queryParam = currentURL.match(/(?:query=)([a-zA-Z\s]*)/i); + this.query = (queryParam && queryParam[1]) || ''; + this.by = (byParam && byParam[1]) || ''; + + this.search.findResults(this.query, this.by); + } + } + + getRecipes(): void { + this.search.getResults().subscribe((recipes) => { + this.recipes = recipes; + }); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html new file mode 100644 index 0000000..8854d5d --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html @@ -0,0 +1,30 @@ +
+
+ Search a new recipe +
+ + +
+
+ + +
+ +
+
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss new file mode 100644 index 0000000..0b66d92 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss @@ -0,0 +1,49 @@ +.form { + background: #fff; + border: 1px solid #d7d7d7; + border-radius: 5px; + box-shadow: 0 0 5px -3px #000000a5; + padding: 0.5rem; + margin-bottom: 1rem; + + &__fieldset { + border: none; + display: flex; + flex-flow: row wrap; + align-items: flex-end; + gap: 0.5rem; + } + + &__legend { + font-size: 1.2rem; + font-weight: 600; + margin: 0 0 0.5rem; + padding: 0; + } + + &__item { + display: flex; + flex-flow: column wrap; + } + + &__label { + color: hsl(0, 0%, 25%); + font-size: 0.85rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + cursor: pointer; + margin-bottom: 0.2rem; + } + + &__input, + &__select { + background: #fff; + border: 2px solid #195881; + padding: 0.5rem; + } + + &__select { + cursor: pointer; + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts new file mode 100644 index 0000000..5e23163 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchComponent } from './search.component'; + +describe('SearchComponent', () => { + let component: SearchComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SearchComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts new file mode 100644 index 0000000..594a505 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts @@ -0,0 +1,29 @@ +import { Component } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { Router } from '@angular/router'; +import { SearchService } from 'src/app/shared/services/search.service'; + +@Component({ + selector: '.search', + templateUrl: './search.component.html', + styleUrls: ['./search.component.scss'], +}) +export class SearchComponent { + searchForm = this.formBuilder.group({ + by: 'name', + query: '', + }); + + constructor( + private search: SearchService, + private formBuilder: FormBuilder, + private router: Router + ) {} + + onSubmit(): void { + const by = this.searchForm.get('by')?.value; + const query = this.searchForm.get('query')?.value; + this.search.findResults(query, by); + this.router.navigate([`/search`, { by, query }]); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.html new file mode 100644 index 0000000..3da30ae --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.html @@ -0,0 +1,18 @@ +
+
+ + +
+ +
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss new file mode 100644 index 0000000..2a954af --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.scss @@ -0,0 +1,68 @@ +.toolbar { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + gap: 1rem; + padding: 1rem; + position: absolute; + top: 0; + right: 0; +} + +.toggle-edition { + --gap: 0.5rem; + --toggle-width: 3.5rem; + + display: flex; + align-items: center; + + &__label { + display: inline-flex; + gap: var(--gap); + position: relative; + cursor: pointer; + color: hsl(0, 0%, 30%); + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + + &::before { + order: 2; + content: ""; + display: block; + background: hsl(0, 0%, 80%); + border-radius: 2rem; + box-shadow: inset 0 0 2px 0 hsla(0, 0%, 0%, 0.5), + 0 0 0 2px hsla(0, 0%, 0%, 0.5); + width: var(--toggle-width); + padding: 0 0.6rem; + } + + &::after { + content: ""; + display: block; + width: calc(var(--toggle-width) / 2); + background: hsl(0, 85%, 41%); + border: 1px solid hsl(0, 0%, 31%); + border-radius: 50%; + box-shadow: 0 0 0 1px hsla(0, 0%, 36%, 0.5); + position: absolute; + right: calc((var(--toggle-width) + var(--gap)) / 2); + top: -1px; + bottom: -1px; + transition: all 0.3s ease-in-out 0s; + } + } + + &__checkbox { + opacity: 0; + + &:checked ~ { + .toggle-edition__label::after { + background: hsl(120, 76%, 31%); + right: -1px; + } + } + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.spec.ts new file mode 100644 index 0000000..31ca834 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolbarComponent } from './toolbar.component'; + +describe('ToolbarComponent', () => { + let component: ToolbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ToolbarComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts new file mode 100644 index 0000000..710b967 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts @@ -0,0 +1,65 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Router } from '@angular/router'; +import { LocalStorageService } from 'src/app/shared/services/local-storage.service'; +import { RecipesService } from 'src/app/shared/services/recipes.service'; +import { slugify } from 'src/app/shared/utilities/slugify'; + +@Component({ + selector: 'toolbar', + templateUrl: './toolbar.component.html', + styleUrls: ['./toolbar.component.scss'], +}) +export class ToolbarComponent { + @Output() isEditionMode = new EventEmitter(); + isEditionEnabled: boolean = false; + recipeId = history.state?.id; + savedRecipes: object[] = this.storage.get('recipes'); + toggleLabel: string = 'Edition disabled'; + + constructor( + private storage: LocalStorageService, + private recipes: RecipesService, + private router: Router + ) {} + + isSavedRecipe(): boolean { + let recipeIndex; + + if (this.recipeId) { + recipeIndex = this.savedRecipes.findIndex( + (recipe: any) => recipe.idMeal === this.recipeId + ); + } else { + const slug = this.router.url.replace('/recipe/', ''); + recipeIndex = this.savedRecipes.findIndex( + (recipe: any) => recipe.slug === slug + ); + } + + return recipeIndex === -1 ? false : true; + } + + shouldDisplaySave(): boolean { + return !this.isSavedRecipe(); + } + + saveRecipe(): void { + this.recipes.getRecipeById(this.recipeId).subscribe((recipe: any) => { + const currentRecipe = recipe.meals[0]; + const newRecipe = { + ...currentRecipe, + slug: slugify(currentRecipe.strMeal), + }; + this.savedRecipes.push(newRecipe); + this.storage.set('recipes', this.savedRecipes); + }); + } + + toggleEdition() { + this.isEditionEnabled = !this.isEditionEnabled; + this.toggleLabel = this.isEditionEnabled + ? 'Edition enabled' + : 'Edition disabled'; + this.isEditionMode.emit(this.isEditionEnabled); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts new file mode 100644 index 0000000..6f3c1e4 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts @@ -0,0 +1,8 @@ +import { TextareaDirective } from './textarea.directive'; + +describe('TextareaDirective', () => { + it('should create an instance', () => { + const directive = new TextareaDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts new file mode 100644 index 0000000..dbb1dc0 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts @@ -0,0 +1,49 @@ +import { + AfterViewInit, + Directive, + ElementRef, + HostListener, + Renderer2, +} from '@angular/core'; + +@Directive({ + selector: '[textareaResize]', +}) +export class TextareaDirective implements AfterViewInit { + textareaHeight: string = ''; + + constructor(public renderer: Renderer2, public element: ElementRef) {} + + ngAfterViewInit() { + this.resize(); + this.setTextareaHeight(); + } + + @HostListener('keyup', ['$event']) onKeyDown(e: KeyboardEvent) { + const isCut = e.ctrlKey && e.key === 'x'; + const isDelete = e.key === 'Delete'; + if (isCut || isDelete) { + this.resize('auto'); + } else { + this.resize(); + } + this.setTextareaHeight(); + } + + setTextareaHeight() { + this.renderer.setStyle( + this.element.nativeElement, + 'height', + this.textareaHeight + ); + } + + resize(initialHeight: any = null) { + const textarea = this.element.nativeElement; + this.textareaHeight = initialHeight ?? textarea.height; + + if (textarea.scrollHeight > textarea.clientHeight) { + this.textareaHeight = `${textarea.scrollHeight}px`; + } + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.spec.ts new file mode 100644 index 0000000..e8f923d --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.spec.ts @@ -0,0 +1,8 @@ +import { FormatCommaPipe } from './format-comma.pipe'; + +describe('FormatCommaPipe', () => { + it('create an instance', () => { + const pipe = new FormatCommaPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.ts new file mode 100644 index 0000000..761ae16 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/format-comma.pipe.ts @@ -0,0 +1,18 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +/* + * Add a space after a comma. + * Usage: + * text | formatComma + * Example: + * {{ foo,bar,baz | formatComma }} + * formats to: foo, bar, baz + */ +@Pipe({ + name: 'formatComma', +}) +export class FormatCommaPipe implements PipeTransform { + transform(text: string): string { + return text.replace(/,/g, ', '); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.spec.ts new file mode 100644 index 0000000..2048bc8 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.spec.ts @@ -0,0 +1,8 @@ +import { SlugifyPipe } from './slugify.pipe'; + +describe('SlugifyPipe', () => { + it('create an instance', () => { + const pipe = new SlugifyPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.ts new file mode 100644 index 0000000..1f44a03 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/pipes/slugify.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'slugify', +}) +export class SlugifyPipe implements PipeTransform { + transform(text: string): string { + return text + .toString() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + .toLowerCase() + .trim() + .replace(/\s+/g, '-') + .replace(/[^\w-]+/g, '-') + .replace(/--+/g, '-') + .replace(/^-|-$/g, ''); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/recipes.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/recipes.ts new file mode 100644 index 0000000..c2fed84 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/recipes.ts @@ -0,0 +1,49 @@ +export interface Recipes { + idMeal: number; + strMeal: string; + strCategory: string; + strInstructions: string; + strMealThumb: string; + strTags: string; + strIngredient1: string; + strIngredient2: string; + strIngredient3: string; + strIngredient4: string; + strIngredient5: string; + strIngredient6: string; + strIngredient7: string; + strIngredient8: string; + strIngredient9: string; + strIngredient10: string; + strIngredient11: string; + strIngredient12: string; + strIngredient13: string; + strIngredient14: string; + strIngredient15: string; + strIngredient16: string; + strIngredient17: string; + strIngredient18: string; + strIngredient19: string; + strIngredient20: string; + strMeasure1: string; + strMeasure2: string; + strMeasure3: string; + strMeasure4: string; + strMeasure5: string; + strMeasure6: string; + strMeasure7: string; + strMeasure8: string; + strMeasure9: string; + strMeasure10: string; + strMeasure11: string; + strMeasure12: string; + strMeasure13: string; + strMeasure14: string; + strMeasure15: string; + strMeasure16: string; + strMeasure17: string; + strMeasure18: string; + strMeasure19: string; + strMeasure20: string; + slug: string; +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.spec.ts new file mode 100644 index 0000000..ba1dbd4 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LocalStorageService } from './local-storage.service'; + +describe('LocalStorageService', () => { + let service: LocalStorageService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LocalStorageService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.ts new file mode 100644 index 0000000..82a72e7 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/local-storage.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class LocalStorageService { + constructor() {} + + get(key: string): any { + try { + const serialItem = localStorage.getItem(key); + if (serialItem) { + return JSON.parse(serialItem); + } else { + return undefined; + } + } catch (e) { + console.log(e); + return undefined; + } + } + + set(key: string, value: any) { + try { + const serialItem = JSON.stringify(value); + localStorage.setItem(key, serialItem); + } catch (e) { + console.log(e); + } + } + + remove(key: string) { + localStorage.removeItem(key); + } + + clear() { + localStorage.clear; + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.spec.ts new file mode 100644 index 0000000..e433b4e --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { RecipesService } from './recipes.service'; + +describe('RecipesService', () => { + let service: RecipesService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(RecipesService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.ts new file mode 100644 index 0000000..a82e019 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/recipes.service.ts @@ -0,0 +1,46 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Recipes } from '../recipes'; + +@Injectable({ + providedIn: 'root', +}) +export class RecipesService { + private allRecipesAPI = + 'https://www.themealdb.com/api/json/v1/1/search.php?f=a'; + private recipeByIdAPI = + 'https://www.themealdb.com/api/json/v1/1/lookup.php?i='; + private recipeByNameAPI = + 'https://www.themealdb.com/api/json/v1/1/search.php?s='; + private recipeByIngredientAPI = + 'https://www.themealdb.com/api/json/v1/1/filter.php?i='; + private recipeByCategoryAPI = + 'https://www.themealdb.com/api/json/v1/1/filter.php?c='; + + httpOptions = { + headers: new HttpHeaders({ 'Content-Type': 'application/json' }), + }; + + constructor(private http: HttpClient) {} + + getAllRecipes(): Observable { + return this.http.get(this.allRecipesAPI); + } + + getRecipeById(id: number): Observable { + return this.http.get(this.recipeByIdAPI + id); + } + + getRecipeByName(name: string): Observable { + return this.http.get(this.recipeByNameAPI + name); + } + + getRecipeByIngredient(ingredient: string): Observable { + return this.http.get(this.recipeByIngredientAPI + ingredient); + } + + getRecipeByCategory(category: string): Observable { + return this.http.get(this.recipeByCategoryAPI + category); + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.spec.ts new file mode 100644 index 0000000..23c42c7 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { SearchService } from './search.service'; + +describe('SearchService', () => { + let service: SearchService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(SearchService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.ts new file mode 100644 index 0000000..6c16efd --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/services/search.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { Recipes } from '../recipes'; +import { RecipesService } from './recipes.service'; + +@Injectable({ + providedIn: 'root', +}) +export class SearchService { + private results = new BehaviorSubject([]); + + constructor(private recipes: RecipesService) {} + + getResults() { + return this.results.asObservable(); + } + + findResults(query: string, by: string) { + switch (by) { + case 'name': + this.recipes + .getRecipeByName(query) + .subscribe((recipes: any) => this.results.next(recipes.meals)); + break; + case 'ingredient': + this.recipes + .getRecipeByIngredient(query) + .subscribe((recipes: any) => this.results.next(recipes.meals)); + break; + case 'category': + this.recipes + .getRecipeByCategory(query) + .subscribe((recipes: any) => this.results.next(recipes.meals)); + break; + default: + break; + } + } +} diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/utilities/slugify.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/utilities/slugify.ts new file mode 100644 index 0000000..15de941 --- /dev/null +++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/utilities/slugify.ts @@ -0,0 +1,20 @@ +/** + * Convert a text into a slug or id. + * https://gist.github.com/codeguy/6684588#gistcomment-3332719 + * + * @param {string} text Text to slugify. + */ +const slugify = (text: string) => { + return text + .toString() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + .toLowerCase() + .trim() + .replace(/\s+/g, '-') + .replace(/[^\w-]+/g, '-') + .replace(/--+/g, '-') + .replace(/^-|-$/g, ''); +}; + +export { slugify }; -- cgit v1.2.3