BETTERZON-25: Finishing prototype of UC

Frontend/src/app/pages/landingpage/landingpage.component.css

@@ -3,3 +3,48 @@
     margin-top: .5em;
     margin-bottom: .5em;
 }
+
+#productListsContainer {
+    display: grid;
+    grid-template-areas:
+    'search search'
+    'popularSearches bestDeals';
+    grid-template-columns: 50% 50%;
+}
+
+#searchContainer {
+    position: relative;
+    grid-area: search;
+    height: 10em;
+}
+
+#searchContainer input {
+    position: relative;
+    font-size: 1.5em;
+    padding: .25em;
+    display: block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin: auto;
+    -ms-transform: translateY(50%);
+    transform: translateY(2.5em);
+}
+
+#popularSearchesList {
+    grid-area: popularSearches;
+    padding: .5em;
+}
+
+#popularSearchesList h2 {
+    text-align: center;
+}
+
+#bestDealsList {
+    grid-area: bestDeals;
+    padding: .5em;
+}
+
+#bestDealsList h2 {
+    text-align: center;
+}

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,5 +1,18 @@
-<app-header></app-header>
+<app-header [showSearch]="false"></app-header>
 <div id="mainComponents">
-    <app-product-list numberOfProducts="20" [showProductPicture]="true"></app-product-list>
+    <div id="searchContainer">
+        <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
+    </div>
+    <div id="productListsContainer">
+        <div id="popularSearchesList">
+            <h2>Popular Searches</h2>
+            <app-product-list numberOfProducts="3" [showProductPicture]="true"
+                              type="popularSearches"></app-product-list>
+        </div>
+        <div id="bestDealsList">
+            <h2>Best Deals</h2>
+            <app-product-list numberOfProducts="3" [showProductPicture]="true" type="bestDeals"></app-product-list>
+        </div>
+    </div>
 </div>
 <app-footer></app-footer>

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -1,15 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-landingpage',
-  templateUrl: './landingpage.component.html',
-  styleUrls: ['./landingpage.component.css']
+    selector: 'app-landingpage',
+    templateUrl: './landingpage.component.html',
+    styleUrls: ['./landingpage.component.css']
 })
 export class LandingpageComponent implements OnInit {
+    searchInput: string;
 
-  constructor() { }
+    constructor(
+        private router: Router
+    ) {
+    }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
+
+    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/pages/product-detail-page/product-detail-page.component.html

@@ -1,6 +1,6 @@
-<app-header></app-header>
+<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-details [productId]="productId"></app-product-details>
-    <app-newest-prices-list></app-newest-prices-list>
+    <app-newest-prices-list [productId]="productId"></app-newest-prices-list>
 </div>
 <app-footer></app-footer>

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -1,4 +1,4 @@
-<app-header></app-header>
+<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
                       type="search"></app-product-list>