From 23ae0555e5a95e3b8215b3542b3cf8792a823a03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Wed, 2 Dec 2020 14:14:49 +0100
Subject: [PATCH] BETTERZON-33: Styles and redirect upon click on product

---
 .../src/app/product-list/product-list.component.css  |  6 ++++++
 .../src/app/product-list/product-list.component.html |  2 +-
 .../src/app/product-list/product-list.component.ts   | 12 +++++++++---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/app/product-list/product-list.component.css b/Frontend/src/app/product-list/product-list.component.css
index e69de29..6ac9a30 100644
--- a/Frontend/src/app/product-list/product-list.component.css
+++ b/Frontend/src/app/product-list/product-list.component.css
@@ -0,0 +1,6 @@
+.productItem {
+    border-style: solid;
+    border-color: dimgrey;
+    border-radius: .5em;
+    padding: .25em;
+}
diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/product-list/product-list.component.html
index c8ee494..88971c8 100644
--- a/Frontend/src/app/product-list/product-list.component.html
+++ b/Frontend/src/app/product-list/product-list.component.html
@@ -1,4 +1,4 @@
 <meta charset="UTF-8">
-<p *ngFor="let product of products">
+<p class="productItem"  *ngFor="let product of products" (click)="clickedProduct(product)">
     {{product.name}}
 </p>
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts
index 0b5733e..a6c10ee 100644
--- a/Frontend/src/app/product-list/product-list.component.ts
+++ b/Frontend/src/app/product-list/product-list.component.ts
@@ -1,8 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import axios, {AxiosInterceptorManager, AxiosRequestConfig, AxiosResponse} from 'axios';
-import process from 'process';
 import {ApiService} from '../api.service';
 import {Product} from '../models/product';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-product-list',
@@ -12,7 +11,10 @@ import {Product} from '../models/product';
 export class ProductListComponent implements OnInit {
     products: Product[];
 
-    constructor(private apiService: ApiService) {
+    constructor(
+        private apiService: ApiService,
+        private router: Router
+    ) {
     }
 
     ngOnInit(): void {
@@ -23,4 +25,8 @@ export class ProductListComponent implements OnInit {
         this.apiService.getProducts().subscribe(products => this.products = products);
     }
 
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/helloworld/' + product.product_id)]);
+    }
+
 }