From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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.
---
 .../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 ++++++++++++++++
 4 files changed, 129 insertions(+)
 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

(limited to 'public/projects/angular-small-apps/apps/recipes/src/app/components/search-results')

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 @@
+<ng-container
+  *ngIf="recipes && recipes.length > 0; then recipesList; else notFound"
+></ng-container>
+<ng-template #recipesList>
+  <ul class="recipes-list">
+    <li *ngFor="let recipe of recipes" class="recipes-list__item">
+      <article class="card">
+        <header class="card__header">
+          <img
+            src="{{ recipe.strMealThumb }}"
+            alt="{{ recipe.strMeal }} picture"
+            class="card__thumb"
+          />
+          <h2 class="card__title">{{ recipe.strMeal }}</h2>
+        </header>
+        <div *ngIf="recipe.strInstructions" class="card__body">
+          {{
+            recipe.strInstructions.length > 120
+              ? (recipe.strInstructions | slice: 0:120) + "&hellip;"
+              : recipe.strInstructions
+          }}
+        </div>
+        <footer class="card__footer">
+          <dl class="meta">
+            <div class="meta__item" *ngIf="recipe.strCategory">
+              <dt class="meta__term">Category:</dt>
+              <dd class="meta__description">{{ recipe.strCategory }}</dd>
+            </div>
+            <div class="meta__item" *ngIf="recipe.strTags">
+              <dt class="meta__term">Tags:</dt>
+              <dd class="meta__description">
+                {{ recipe.strTags | formatComma }}
+              </dd>
+            </div>
+          </dl>
+          <a
+            [routerLink]="['/recipe/', recipe.strMeal | slugify]"
+            [state]="{ id: recipe.idMeal }"
+            class="btn"
+          >
+            Read more
+            <span class="btn__icon"> &rightarrow;</span>
+          </a>
+        </footer>
+      </article>
+    </li>
+  </ul>
+  <a routerLink="" class="btn">
+    <span class="btn__icon">&leftarrow; </span>Back to recipes
+  </a>
+</ng-template>
+<ng-template #notFound>
+  <div class="not-found">
+    <div class="not-found__result">
+      No recipe match your query: {{ query }}.
+    </div>
+    <a routerLink="" class="btn">
+      <span class="btn__icon">&leftarrow; </span>Back to your recipes
+    </a>
+  </div>
+</ng-template>
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<SearchResultsComponent>;
+
+  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;
+    });
+  }
+}
-- 
cgit v1.2.3