BETTERZON-42: Functionality and design of various components for the search product UC

Frontend/src/app/components/header/header.component.css

@@ -0,0 +1,42 @@
+.header {
+    width: auto;
+    background-color: dimgrey;
+    color: white;
+    text-align: center;
+    padding: .25em;
+}
+
+#headerContent {
+    display: flex;
+}
+
+.logo {
+    position: relative;
+    margin-left: 50%;
+}
+
+.searchBox {
+    position: relative;
+    margin: auto;
+    margin-left: 25%;
+}
+
+.searchBox input {
+    width: 100%;
+    padding: .25em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.profileIcon {
+    position: relative;
+    margin: auto;
+    margin-left: 10%;
+}
+
+.icon-3d {
+    padding: 10px;
+    color: #fff;
+}

Frontend/src/app/components/header/header.component.html

@@ -1 +1,14 @@
-<p>header works!</p>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<header class="header">
+    <div id="headerContent" class='wrap'>
+        <div class="logo">
+            <img src="assets/images/Betterzon.svg" alt="Betterzon Logo" width="50px" (click)="clickedLogo()">
+        </div>
+        <div class="searchBox">
+            <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
+        </div>
+        <div class="profileIcon">
+            Profile
+        </div>
+    </div>
+</header>

Frontend/src/app/components/header/header.component.ts

@@ -1,15 +1,33 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
+    searchInput: string;
 
-  constructor() { }
+    constructor(
+        private router: Router
+    ) {
+    }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
+
+    clickedLogo(): void {
+        this.router.navigate([('/')]);
+    }
+
+    startedSearch(): void {
+        this.redirectTo('/search', {queryParams: {q: this.searchInput}});
+    }
+
+    redirectTo(uri: string, queryParams: object): void {
+        this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
+            this.router.navigate([uri], queryParams));
+    }
 
 }

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css

@@ -0,0 +1,7 @@
+.priceList {
+    max-width: 50%;
+    margin: auto;
+    margin: auto;
+    align-content: center;
+    text-align: center;
+}

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html

@@ -1 +1,3 @@
-<p>newest-prices-list works!</p>
+<div class="priceList">
+    PriceList
+</div>

Frontend/src/app/components/product-details/product-details.component.css

@@ -4,11 +4,11 @@
     margin: auto;
     margin-bottom: .5em;
     display: grid;
-    grid-template-columns: 20% 50% 30%;
+    grid-template-columns: 20% 25% 25% 30%;
     grid-template-areas:
-    'image title priceChart'
-    'image description priceChart'
-    'image priceAlarm bestPrice';
+    'image title title priceChart'
+    'image description description priceChart'
+    'image priceAlarm bestPrice blank';
 }
 
 /* Image div */
@@ -54,6 +54,7 @@
     grid-area: priceAlarm;
     border-style: solid;
     border-color: dimgrey;
+    border-radius: 5px;
     padding: .25em;
     margin: auto;
 }
@@ -63,6 +64,7 @@
     grid-area: bestPrice;
     border-style: solid;
     border-color: dimgrey;
+    border-radius: 5px;
     padding: .25em;
     margin: auto;
 }

Frontend/src/app/components/product-details/product-details.component.html

@@ -1,4 +1,3 @@
-<meta charset="UTF-8">
 <div class="productItem">
     <div class="productImageContainer">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>

Frontend/src/app/components/product-list/product-list.component.html

@@ -1,4 +1,6 @@
-<meta charset="UTF-8">
+<div *ngIf="products.length==0">
+    No Products found!
+</div>
 <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
     <div class="productImageContainer" *ngIf="showProductPicture===true">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>

Frontend/src/app/components/product-list/product-list.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {ApiService} from '../../services/api.service';
 import {Product} from '../../models/product';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
     selector: 'app-product-list',
@@ -9,33 +9,57 @@ import {Router} from '@angular/router';
     styleUrls: ['./product-list.component.css']
 })
 export class ProductListComponent implements OnInit {
-    products: Product[];
+    products: Product[] = [];
     @Input() numberOfProducts: number;
     @Input() showProductPicture: boolean;
-    type: string;
+    @Input() searchQuery: string;
+    @Input() type: string;
 
     constructor(
         private apiService: ApiService,
-        private router: Router
+        private router: Router,
+        private route: ActivatedRoute
     ) {
     }
 
     ngOnInit(): void {
-        this.getProducts();
+        this.loadParams();
+    }
 
+    loadParams(): void {
         if (!this.numberOfProducts) {
             this.numberOfProducts = 10;
         }
         if (!this.showProductPicture) {
             this.showProductPicture = false;
         }
-        this.type = 'PLP';
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
     }
 
     getProducts(): void {
         this.apiService.getProducts().subscribe(products => this.products = products);
     }
 
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
     clickedProduct(product: Product): void {
         this.router.navigate([('/product/' + product.product_id)]);
     }