Changed productModel

Change product model
Made product list with CSS grid

Author: devbyray

src/app/app.component.html

@@ -1,8 +1,8 @@
 <div class="toolbar" role="banner">
-	<span class="name">FaunaDB Webshop</span>
+	<h1 class="name">FaunaDB Webshop</h1>
+	<button [routerLink]="['/']" mat-flat-button>Home</button>
 </div>
 
 <div class="content" role="main">
-	<h1>Products</h1>
 	<router-outlet></router-outlet>
 </div>

src/app/app.component.scss

@@ -33,31 +33,31 @@ p {
 	top: 0;
 	left: 0;
 	right: 0;
-	height: 60px;
+	height: 120px;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: #1976d2;
-	color: white;
+	background-color: #b1d8ff;
+	color: #267fd8;
 	font-weight: 600;
-}
-
-.toolbar img {
-	margin: 0 16px;
-}
-
-.toolbar #twitter-logo {
-	height: 40px;
-	margin: 0 16px;
-}
+	padding: 0 1rem;
+	h1 {
+		font-size: 2rem;
+	}
+	h1,
+	button {
+		margin: 0.5rem;
+	}
 
-.toolbar #twitter-logo:hover {
-	opacity: 0.8;
+	button {
+		background-color: #267fd8;
+	}
 }
 
 .content {
 	display: flex;
-	margin: 82px auto 32px;
+	margin: 160px auto 32px;
 	padding: 0 16px;
 	max-width: 960px;
 	flex-direction: column;
@@ -67,7 +67,7 @@ p {
 a,
 a:visited,
 a:hover {
-	color: #1976d2;
+	color: #000;
 	text-decoration: none;
 }
 

src/app/app.module.ts

@@ -4,14 +4,15 @@ import { NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { MatButtonModule } from '@angular/material/button'
 
 import { HttpClientModule } from '@angular/common/http'
 import { ProductListComponent } from './products/components/product-list/product-list.component'
 import { MatGridListModule } from '@angular/material/grid-list'
 import { ProductItemComponent } from './products/components/product-item/product-item.component'
 @NgModule({
 	declarations: [AppComponent, ProductListComponent, ProductItemComponent, ProductItemComponent],
-	imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatGridListModule],
+	imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatGridListModule, MatButtonModule],
 	providers: [],
 	bootstrap: [AppComponent],
 })

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

@@ -1,14 +1,16 @@
-<mat-grid-list cols="2" rowHeight="400px" gutterSize="1rem">
+<div class="products__container">
 	<ng-container *ngFor="let product of products">
-		<mat-grid-tile>
-			<mat-grid-tile-header class="product__header">
-				<strong class="product__title">{{ product.name }}</strong>
-				<em class="product__price">{{ product.price | currency: 'EUR' }}</em>
-			</mat-grid-tile-header>
+		<section class="product__item">
 			<img *ngIf="product.image" class="product__image" [src]="product.image" alt="" />
-			<mat-grid-tile-footer>
-				<p class="product__description">{{ product.description }}</p>
-			</mat-grid-tile-footer>
-		</mat-grid-tile>
+			<a [routerLink]="['/product/' + product.id]">
+				<header class="product__header">
+					<strong class="product__title">{{ product.name }}</strong>
+					<em class="product__price">{{ product.price | currency: 'EUR' }}</em>
+				</header>
+				<footer>
+					<p class="product__description">{{ product.description }}</p>
+				</footer>
+			</a>
+		</section>
 	</ng-container>
-</mat-grid-list>
+</div>

src/app/products/components/product-list/product-list.component.scss

@@ -1,18 +1,39 @@
-mat-grid-list {
-	width: 1024px;
+:host {
+	width: 100%;
 }
-.mat-grid-tile .mat-grid-tile-header >,
-.mat-grid-tile .mat-grid-tile-footer > {
-	.product {
-		&__title {
-			font-size: 2rem;
-		}
-		&__description {
-			font-size: 1.3rem;
-		}
-		&__price {
-			margin-left: auto;
-			font-size: 1.6rem;
-		}
+
+$productSize: 400px;
+
+.products__container {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-auto-rows: $productSize;
+}
+.product {
+	&__item {
+		position: relative;
+		overflow: hidden;
+	}
+	&__title {
+		font-size: 2rem;
+	}
+	&__header,
+	&__footer {
+		height: 100px;
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+	&__description {
+		font-size: 1.3rem;
+	}
+	&__price {
+		margin-left: auto;
+		font-size: 1.6rem;
+	}
+	&__image {
+		height: $productSize;
+		width: 100%;
+		object-fit: cover;
+		position: absolute;
+		z-index: -1;
 	}
 }

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

@@ -13,31 +13,30 @@ export class ProductListComponent implements OnInit {
 	constructor(private product: ProductService) {}
 
 	ngOnInit(): void {
-		this.product.getProducts().then((products) => {
-			console.log('products: ', products)
-			const cleanedData = products.map((productItem) => {
-				const tempProduct = { ...productItem.data }
+		this.product.getProducts().then((products: Product[]) => {
+			const cleanedData = products.map((productItem: Product) => {
+				const tempProduct = { ...productItem }
 
-				switch (tempProduct.name) {
+				switch (tempProduct.data.name) {
 					case 'Pizza':
-						tempProduct.image =
+						tempProduct.data.image =
 							'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
 						break
 					case 'Beef Cheek':
-						tempProduct.image =
+						tempProduct.data.image =
 							'https://images.unsplash.com/photo-1588168333986-5078d3ae3976?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
 						break
 
 					case 'Cup':
-						tempProduct.image =
+						tempProduct.data.image =
 							'https://images.unsplash.com/photo-1577937927133-66ef06acdf18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
 						break
 
 					default:
 						break
 				}
 
-				return new ProductData(tempProduct)
+				return new Product(tempProduct).data
 			})
 			this.products = cleanedData
 		})

src/app/products/models/product.ts

@@ -4,9 +4,10 @@ export class Product {
 	data: ProductData = null
 
 	constructor(data) {
+		console.log('ref: ', data.ref['@ref'].id)
 		this.ref = data.ref
 		this.ts = data.ts
-		this.data = data.data
+		this.data = new ProductData(data.ref['@ref'].id, data.data)
 	}
 }
 
@@ -19,8 +20,11 @@ export class ProductData {
 	backorderLimit: number = 0
 	backordered = false
 	image?: string = ''
+	id: string = ''
 
-	constructor(data) {
+	constructor(id, data) {
+		console.log('id: ', typeof id)
+		this.id = id
 		this.name = data.name
 		this.description = data.description
 		this.price = data.price

src/styles.scss

@@ -1,4 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+	height: 100%;
+}
+body {
+	margin: 0;
+	font-family: Roboto, 'Helvetica Neue', sans-serif;
+}