Merge pull request #14 from Mueller-Patrick/BETTERZON-33

Images and Style for Product List Component
This commit is contained in:
Patrick 2020-12-08 22:26:08 +01:00 committed by GitHub
commit 8d0469a907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 90 additions and 16 deletions

View File

@ -8,7 +8,7 @@ import {ProductDetailPageComponent} from './product-detail-page/product-detail-p
const routes: Routes = [ const routes: Routes = [
{path: '', component: LandingpageComponent}, {path: '', component: LandingpageComponent},
{path: 'product', component: ProductDetailPageComponent} {path: 'product/:id', component: ProductDetailPageComponent}
]; ];
@NgModule({ @NgModule({

View File

@ -1,2 +1,2 @@
<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list> <app-product-list numberOfProducts="20" [showProductPicture]="true"></app-product-list>
<app-footer></app-footer> <app-footer></app-footer>

View File

@ -1 +1,2 @@
<p>product-detail-page works!</p> <p>product-detail-page works! Product: {{productId}}</p>
<app-footer></app-footer>

View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({ @Component({
selector: 'app-product-detail-page', selector: 'app-product-detail-page',
@ -6,8 +7,13 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./product-detail-page.component.css'] styleUrls: ['./product-detail-page.component.css']
}) })
export class ProductDetailPageComponent implements OnInit { export class ProductDetailPageComponent implements OnInit {
productId: string;
constructor() { } constructor(
private router: Router
) {
this.productId = router.url.substr(9, router.url.length);
}
ngOnInit(): void { ngOnInit(): void {
} }

View File

@ -1,6 +1,55 @@
/* Div that contains each product */
.productItem { .productItem {
border-style: solid; border-style: solid;
border-color: dimgrey; border-color: dimgrey;
border-radius: .5em; border-radius: .5em;
padding: .25em; padding: .25em;
margin: auto;
margin-bottom: .5em;
max-width: 50em;
display: grid;
grid-template-columns: 10% 80% 10%;
grid-template-areas:
'image title price'
'image description price';
}
/* Image div */
.productImageContainer {
grid-area: image;
position: relative;
}
/* Product Image */
.productImage {
max-width: 50px;
max-height: 50px;
display:block;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Title div */
.productTitle {
grid-area: title;
}
/* Price div */
.productPrice {
grid-area: price;
text-align: center;
margin: auto;
}
/* Price text */
.productPrice * {
}
/* Description div */
.productDescription {
grid-area: description;
} }

View File

@ -1,7 +1,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<p class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)"> <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
{{product.name}} <div class="productImageContainer" *ngIf="showProductPicture===true">
</p> <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
<div *ngIf="showProductPicture"> </div>
Test <div class="productTitle">
<b>{{product.name}}</b>
</div>
<div class="productPrice">
5€
</div>
<div class="productDescription">
<div *ngIf="product.short_description.length > 300">
{{product.short_description.substring(0, 300) + "..."}}
</div>
<div *ngIf="product.short_description.length <= 300">
{{product.short_description}}
</div>
</div>
</div> </div>

View File

@ -12,6 +12,7 @@ export class ProductListComponent implements OnInit {
products: Product[]; products: Product[];
@Input() numberOfProducts: number; @Input() numberOfProducts: number;
@Input() showProductPicture: boolean; @Input() showProductPicture: boolean;
type: string;
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
@ -21,6 +22,7 @@ export class ProductListComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.getProducts(); this.getProducts();
console.log(this.showProductPicture);
if (!this.numberOfProducts) { if (!this.numberOfProducts) {
this.numberOfProducts = 10; this.numberOfProducts = 10;
@ -28,6 +30,9 @@ export class ProductListComponent implements OnInit {
if (!this.showProductPicture) { if (!this.showProductPicture) {
this.showProductPicture = false; this.showProductPicture = false;
} }
this.type = 'PLP';
console.log(this.showProductPicture);
} }
getProducts(): void { getProducts(): void {
@ -35,7 +40,7 @@ export class ProductListComponent implements OnInit {
} }
clickedProduct(product: Product): void { clickedProduct(product: Product): void {
this.router.navigate([('/helloworld/' + product.product_id)]); this.router.navigate([('/product/' + product.product_id)]);
} }
} }