added product-item-details

src/app/components/navbar/navbar.component.html

@@ -1,5 +1,5 @@
-<mat-toolbar color="primary">
-    <span>Shelf</span>
+<mat-toolbar color="primary" class="navbar">
+    <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">
         <mat-icon>shopping_cart</mat-icon>

src/app/components/navbar/navbar.component.scss

@@ -1,3 +1,14 @@
+.navbar {
+    position: fixed;
+    z-index: 10;
+}
+
 .nav-spacer {
     flex: 1 1 auto;
+}
+
+
+a {
+    text-decoration: none;
+    color: #fff;
 }

src/app/components/product-item-details/product-item-details.component.html

@@ -0,0 +1,30 @@
+<app-navbar></app-navbar>
+<div class="details-container">
+    <div class="details-img">
+        <img src={{product.url}} class="card-img">
+    </div>
+    <div class="details-info">
+        <label class="info-tilte">{{product.name}}</label>
+        <label class="info-price">{{product.price}} $</label>
+        <label class="info-description">{{product.description}}</label>
+        <mat-form-field appearance="fill" class="details-quantity">
+            <mat-label>Quantity</mat-label>
+            <mat-select>
+              <mat-option value="option1">1</mat-option>
+              <mat-option value="option2">2</mat-option>
+              <mat-option value="option3">3</mat-option>
+              <mat-option value="option3">4</mat-option>
+              <mat-option value="option3">5</mat-option>
+              <mat-option value="option3">6</mat-option>
+              <mat-option value="option3">7</mat-option>
+              <mat-option value="option3">8</mat-option>
+              <mat-option value="option3">9</mat-option>
+              <mat-option value="option3">10</mat-option>
+            </mat-select>
+          </mat-form-field> 
+        <div class="details-buttons">
+            <button mat-raised-button color="primary" routerLink="/" class="back-button">Back</button>
+            <button mat-raised-button color="primary">Add to cart</button>
+        </div>
+    </div>
+</div>

src/app/components/product-item-details/product-item-details.component.scss

@@ -0,0 +1,82 @@
+.details-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 10%;
+    
+}
+
+.details-img {
+    width: 25%;
+    padding-right: 5%;
+    height:50vh;
+    overflow: hidden;
+}
+
+.details-info {
+    display: flex;
+    flex-direction: column;
+    padding: 2%;
+    padding-top: 2%;
+    width: 30%;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-tilte {
+    font-size: 4vh;
+    padding-bottom: 2%;
+}
+
+.info-price {
+    font-size: 2.5vh;
+}
+
+.info-description {
+    padding-top: 10%;
+}
+
+.details-quantity {
+    width: 30%;
+    padding-top: 5%;
+    flex-grow: 1;
+}
+
+.back-button {
+    margin-right: 5%;
+}
+
+img {
+    border-radius: 10px;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    width: 100%;
+    height: auto;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+
+  @media screen and (max-width:800px) {
+        .details-img > img {
+        min-width:650px;
+        top: 0;
+        left: 50%;
+        transform: translatex(-50%);
+        }
+    }
+  
+  .select-input {
+    width: 108px; 
+    margin-bottom: 8px;
+  }
+  
+  .detail-item {
+    margin-left: 128px;
+    margin-right: 128px;
+  }
+  
+  .back-link {
+    margin-top: 8px;
+  }

src/app/components/product-item-details/product-item-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductItemDetailsComponent } from './product-item-details.component';
+
+describe('ProductItemDetailsComponent', () => {
+  let component: ProductItemDetailsComponent;
+  let fixture: ComponentFixture<ProductItemDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductItemDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductItemDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/product-item-details/product-item-details.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Product } from '../../models/product';
+import { ActivatedRoute } from "@angular/router"
+import { HttpService } from 'src/app/services/http.service';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-product-item-details',
+  templateUrl: './product-item-details.component.html',
+  styleUrls: ['./product-item-details.component.scss']
+})
+export class ProductItemDetailsComponent implements OnInit {
+  disableSelect = new FormControl(false);
+  product: Product = 
+    {
+      id: 1,
+      name: "",
+      price: 0,
+      url: "",
+      description: ""
+    }
+  productId: number = 0
+
+  constructor(private httpService: HttpService, private route: ActivatedRoute ) { 
+  }
+
+  ngOnInit(): void {
+    this.productId = parseInt(this.route.snapshot.paramMap.get('id') as string, 10);
+
+    this.httpService.getProducts().subscribe((res: Product[]) => {
+      this.product = res.filter(item => item.id === this.productId)[0];
+    })
+
+  }
+
+}

src/app/components/product-item/product-item.component.html

@@ -1,7 +1,7 @@
 <div class="product-card">
     <div class="card-content">
         <div class="card-img-container">
-            <img src={{product.url}} class="card-img">
+            <img src={{product.url}} class="card-img" alt="{{product.name}}">
         </div>
         <div class="card-details-container">
             <div class="card-info">
@@ -10,7 +10,7 @@
                 <span>{{product.price}} $</span>
             </div>
             <div class="card-buttons">
-                <button mat-raised-button color="primary">Details</button>
+                <button mat-raised-button color="primary" routerLink="/product/{{product.id}}">Details</button>
                 <button mat-raised-button color="primary">Add to cart</button>
             </div>
         </div>

src/app/components/product-item/product-item.component.scss

@@ -17,7 +17,6 @@
     .card-img {
         max-width: 100%;
         height: auto;
-        background-color: red;
     }
 }
 
@@ -34,6 +33,7 @@
     justify-content: center;
     align-items: center;
     height: 80%;
+    flex-grow: 1;
 }
 
 .card-buttons {

src/app/components/product-item/product-item.component.ts

@@ -8,13 +8,13 @@ import { Product } from 'src/app/models/product';
 })
 export class ProductItemComponent implements OnInit {
 @Input() product: Product = 
-    {
-      id: 1,
-      name: "",
-      price: 0,
-      url: "",
-      description: ""
-    } 
+  {
+    id: 1,
+    name: "",
+    price: 0,
+    url: "",
+    description: ""
+  } 
   constructor() { }
 
   ngOnInit(): void {