From acdc9a4e92588190e2dc430feaea1e786b949610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20M=C3=BCller?= Date: Wed, 9 Dec 2020 11:00:49 +0100 Subject: [PATCH] BETTERZON-42: Functionality and design of various components for the search product UC --- Frontend/src/app/app.module.ts | 8 +++- Frontend/src/app/app.routing.ts | 4 +- .../components/header/header.component.css | 42 +++++++++++++++++++ .../components/header/header.component.html | 15 ++++++- .../app/components/header/header.component.ts | 32 ++++++++++---- .../newest-prices-list.component.css | 7 ++++ .../newest-prices-list.component.html | 4 +- .../product-details.component.css | 10 +++-- .../product-details.component.html | 1 - .../product-list/product-list.component.html | 4 +- .../product-list/product-list.component.ts | 36 +++++++++++++--- .../landingpage/landingpage.component.css | 5 +++ .../landingpage/landingpage.component.html | 4 +- .../page-not-found-page.component.css | 0 .../page-not-found-page.component.html | 2 + .../page-not-found-page.component.spec.ts | 25 +++++++++++ .../page-not-found-page.component.ts | 15 +++++++ .../product-detail-page.component.css | 3 ++ .../product-detail-page.component.html | 5 ++- .../product-search-page.component.css | 5 +++ .../product-search-page.component.html | 5 ++- Frontend/src/app/services/api.service.ts | 11 ++++- Frontend/src/assets/images/Betterzon.svg | 1 + Frontend/src/styles.css | 4 ++ 24 files changed, 219 insertions(+), 29 deletions(-) create mode 100644 Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.css create mode 100644 Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html create mode 100644 Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts create mode 100644 Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts create mode 100644 Frontend/src/assets/images/Betterzon.svg diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index fd204c0..01415bc 100644 --- a/Frontend/src/app/app.module.ts +++ b/Frontend/src/app/app.module.ts @@ -13,6 +13,8 @@ import {NgApexchartsModule} from 'ng-apexcharts'; import { ProductSearchPageComponent } from './pages/product-search-page/product-search-page.component'; import { HeaderComponent } from './components/header/header.component'; import { NewestPricesListComponent } from './components/newest-prices-list/newest-prices-list.component'; +import {FormsModule} from '@angular/forms'; +import { PageNotFoundPageComponent } from './pages/page-not-found-page/page-not-found-page.component'; @NgModule({ declarations: [ @@ -24,13 +26,15 @@ import { NewestPricesListComponent } from './components/newest-prices-list/newes ProductDetailsComponent, ProductSearchPageComponent, HeaderComponent, - NewestPricesListComponent + NewestPricesListComponent, + PageNotFoundPageComponent ], imports: [ BrowserModule, AppRouting, HttpClientModule, - NgApexchartsModule + NgApexchartsModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/Frontend/src/app/app.routing.ts b/Frontend/src/app/app.routing.ts index e76c894..efb2a36 100644 --- a/Frontend/src/app/app.routing.ts +++ b/Frontend/src/app/app.routing.ts @@ -6,11 +6,13 @@ import {ProductListComponent} from './components/product-list/product-list.compo import {LandingpageComponent} from './pages/landingpage/landingpage.component'; import {ProductDetailPageComponent} from './pages/product-detail-page/product-detail-page.component'; import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component'; +import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component'; const routes: Routes = [ {path: '', component: LandingpageComponent}, {path: 'search', component: ProductSearchPageComponent}, - {path: 'product/:id', component: ProductDetailPageComponent} + {path: 'product/:id', component: ProductDetailPageComponent}, + {path: '**', component: PageNotFoundPageComponent} ]; @NgModule({ diff --git a/Frontend/src/app/components/header/header.component.css b/Frontend/src/app/components/header/header.component.css index e69de29..e3147c8 100644 --- a/Frontend/src/app/components/header/header.component.css +++ b/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; +} diff --git a/Frontend/src/app/components/header/header.component.html b/Frontend/src/app/components/header/header.component.html index 4f5a95d..38bc6fa 100644 --- a/Frontend/src/app/components/header/header.component.html +++ b/Frontend/src/app/components/header/header.component.html @@ -1 +1,14 @@ -

header works!

+ +
+
+ +
+ +
+
+ Profile +
+
+
diff --git a/Frontend/src/app/components/header/header.component.ts b/Frontend/src/app/components/header/header.component.ts index a093fe7..3a1d6a4 100644 --- a/Frontend/src/app/components/header/header.component.ts +++ b/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)); + } } diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css index e69de29..0eacd0e 100644 --- a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css +++ b/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; +} diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html index 780c261..c62745c 100644 --- a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html +++ b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html @@ -1 +1,3 @@ -

newest-prices-list works!

+
+ PriceList +
diff --git a/Frontend/src/app/components/product-details/product-details.component.css b/Frontend/src/app/components/product-details/product-details.component.css index 7f1ac6b..55239cd 100644 --- a/Frontend/src/app/components/product-details/product-details.component.css +++ b/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; } diff --git a/Frontend/src/app/components/product-details/product-details.component.html b/Frontend/src/app/components/product-details/product-details.component.html index 3e268b8..f4c7667 100644 --- a/Frontend/src/app/components/product-details/product-details.component.html +++ b/Frontend/src/app/components/product-details/product-details.component.html @@ -1,4 +1,3 @@ -
diff --git a/Frontend/src/app/components/product-list/product-list.component.html b/Frontend/src/app/components/product-list/product-list.component.html index c35c5b1..6f9a8e5 100644 --- a/Frontend/src/app/components/product-list/product-list.component.html +++ b/Frontend/src/app/components/product-list/product-list.component.html @@ -1,4 +1,6 @@ - +
+ No Products found! +
diff --git a/Frontend/src/app/components/product-list/product-list.component.ts b/Frontend/src/app/components/product-list/product-list.component.ts index b7a87cb..94bab8a 100644 --- a/Frontend/src/app/components/product-list/product-list.component.ts +++ b/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)]); } diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.css b/Frontend/src/app/pages/landingpage/landingpage.component.css index e69de29..653b875 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.css +++ b/Frontend/src/app/pages/landingpage/landingpage.component.css @@ -0,0 +1,5 @@ +#mainComponents { + margin: 5em; + margin-top: .5em; + margin-bottom: .5em; +} diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.html b/Frontend/src/app/pages/landingpage/landingpage.component.html index 810a156..e724bd0 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.html +++ b/Frontend/src/app/pages/landingpage/landingpage.component.html @@ -1,3 +1,5 @@ - +
+ +
diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.css b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html new file mode 100644 index 0000000..8e032b3 --- /dev/null +++ b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html @@ -0,0 +1,2 @@ +

404

+

Page not found!

diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts new file mode 100644 index 0000000..67193bb --- /dev/null +++ b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundPageComponent } from './page-not-found-page.component'; + +describe('PageNotFoundPageComponent', () => { + let component: PageNotFoundPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageNotFoundPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts new file mode 100644 index 0000000..9de002b --- /dev/null +++ b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-page-not-found-page', + templateUrl: './page-not-found-page.component.html', + styleUrls: ['./page-not-found-page.component.css'] +}) +export class PageNotFoundPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css index e69de29..e4095ed 100644 --- a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css +++ b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css @@ -0,0 +1,3 @@ +#mainComponents { + padding: 5em; +} diff --git a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html index 1b9ce73..e919a51 100644 --- a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html +++ b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html @@ -1,3 +1,6 @@ - +
+ + +
diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.css b/Frontend/src/app/pages/product-search-page/product-search-page.component.css index e69de29..653b875 100644 --- a/Frontend/src/app/pages/product-search-page/product-search-page.component.css +++ b/Frontend/src/app/pages/product-search-page/product-search-page.component.css @@ -0,0 +1,5 @@ +#mainComponents { + margin: 5em; + margin-top: .5em; + margin-bottom: .5em; +} diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.html b/Frontend/src/app/pages/product-search-page/product-search-page.component.html index 810a156..6bd08c7 100644 --- a/Frontend/src/app/pages/product-search-page/product-search-page.component.html +++ b/Frontend/src/app/pages/product-search-page/product-search-page.component.html @@ -1,3 +1,6 @@ - +
+ +
diff --git a/Frontend/src/app/services/api.service.ts b/Frontend/src/app/services/api.service.ts index bb54404..c53ff9e 100644 --- a/Frontend/src/app/services/api.service.ts +++ b/Frontend/src/app/services/api.service.ts @@ -19,17 +19,24 @@ export class ApiService { getProduct(id): Observable { try { const prod = this.http.get((this.apiUrl + '/products/' + id)); - console.log(prod); return prod; } catch (exception) { process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); } } + getProductsByQuery(query): Observable { + try { + const prods = this.http.get((this.apiUrl + '/products/search/' + query)); + return prods; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + getProducts(): Observable { try { const prods = this.http.get((this.apiUrl + '/products')); - console.log(prods); return prods; } catch (exception) { process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); diff --git a/Frontend/src/assets/images/Betterzon.svg b/Frontend/src/assets/images/Betterzon.svg new file mode 100644 index 0000000..406b3fa --- /dev/null +++ b/Frontend/src/assets/images/Betterzon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Frontend/src/styles.css b/Frontend/src/styles.css index 90d4ee0..e6cbeed 100644 --- a/Frontend/src/styles.css +++ b/Frontend/src/styles.css @@ -1 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +body { + margin: 0; + font-family: sans-serif; +}