Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9411c22

Browse files
committed
Create product list
1 parent 67b03ab commit 9411c22

File tree

12 files changed

+167
-16
lines changed

12 files changed

+167
-16
lines changed

‎.netlify/functions/products.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app-routing.module.ts

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { NgModule } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
1+
import { NgModule } from '@angular/core'
2+
import { Routes, RouterModule } from '@angular/router'
3+
import { ProductListComponent } from './products/components/product-list/product-list.component'
34

4-
5-
const routes: Routes = [];
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: ProductListComponent,
9+
},
10+
]
611

712
@NgModule({
8-
imports: [RouterModule.forRoot(routes)],
9-
exports: [RouterModule]
13+
imports: [RouterModule.forRoot(routes)],
14+
exports: [RouterModule],
1015
})
11-
export class AppRoutingModule {}
16+
export class AppRoutingModule {}

‎src/app/app.component.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit } from '@angular/core'
22
import { HttpClient } from '@angular/common/http'
3+
import { ProductService } from './products/service/product.service'
34

45
@Component({
56
selector: 'app-root',
@@ -11,9 +12,5 @@ export class AppComponent implements OnInit {
1112

1213
constructor(private http: HttpClient) {}
1314

14-
ngOnInit() {
15-
this.http.get('http://localhost:9000/.netlify/functions/products').subscribe((response) => {
16-
console.log('response: ', response)
17-
})
18-
}
15+
ngOnInit() {}
1916
}

‎src/app/app.module.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { AppRoutingModule } from './app-routing.module'
55
import { AppComponent } from './app.component'
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
77

8-
import { HttpClientModule } from '@angular/common/http'
8+
import { HttpClientModule } from '@angular/common/http';
9+
import { ProductListComponent } from './products/components/product-list/product-list.component'
910
@NgModule({
10-
declarations: [AppComponent],
11+
declarations: [AppComponent,ProductListComponent],
1112
imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule],
1213
providers: [],
1314
bootstrap: [AppComponent],
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<ng-container *ngIf="products">
2+
<ul>
3+
<li *ngFor="let product of products">
4+
<img *ngIf="product.image" class="product__image" [src]="product.image" alt="" />
5+
<strong class="product__title">{{ product.name }}</strong>
6+
<p class="product__description">{{ product.description }}</p>
7+
</li>
8+
</ul>
9+
</ng-container>

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

Whitespace-only changes.
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ProductListComponent } from './product-list.component';
4+
5+
describe('ProductListComponent', () => {
6+
let component: ProductListComponent;
7+
let fixture: ComponentFixture<ProductListComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ProductListComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ProductListComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component, OnInit } from '@angular/core'
2+
import { ProductService } from '../../service/product.service'
3+
import { Product, ProductData } from '../../models/product'
4+
5+
@Component({
6+
selector: 'product-list',
7+
templateUrl: './product-list.component.html',
8+
styleUrls: ['./product-list.component.scss'],
9+
})
10+
export class ProductListComponent implements OnInit {
11+
products: ProductData[] = []
12+
13+
constructor(private product: ProductService) {}
14+
15+
ngOnInit(): void {
16+
this.product.getProducts().then((products) => {
17+
console.log('products: ', products)
18+
const cleanedData = products.map((productItem) => {
19+
const tempProduct = { ...productItem.data }
20+
21+
switch (tempProduct.name) {
22+
case 'Pizza':
23+
tempProduct.image =
24+
'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
25+
break
26+
case 'Beef Cheek':
27+
tempProduct.image =
28+
'https://images.unsplash.com/photo-1588168333986-5078d3ae3976?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
29+
break
30+
31+
case 'Cup':
32+
tempProduct.image =
33+
'https://images.unsplash.com/photo-1577937927133-66ef06acdf18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
34+
break
35+
36+
default:
37+
break
38+
}
39+
40+
return new ProductData(tempProduct)
41+
})
42+
this.products = cleanedData
43+
})
44+
}
45+
}

‎src/app/products/models/product.spec.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Product } from './product';
2+
3+
describe('Product', () => {
4+
it('should create an instance', () => {
5+
expect(new Product()).toBeTruthy();
6+
});
7+
});

‎src/app/products/models/product.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export class Product {
2+
ref: any = null
3+
ts: number = 0
4+
data: ProductData = null
5+
6+
constructor(data) {
7+
this.ref = data.ref
8+
this.ts = data.ts
9+
this.data = data.data
10+
}
11+
}
12+
13+
export class ProductData {
14+
name: string = ''
15+
description: string = ''
16+
price: number = 0
17+
quantity: number = 0
18+
storehouse: any = null
19+
backorderLimit: number = 0
20+
backordered = false
21+
image?: string = ''
22+
23+
constructor(data) {
24+
this.name = data.name
25+
this.description = data.description
26+
this.price = data.price
27+
this.quantity = data.quantity
28+
this.storehouse = data.storehouse
29+
this.backorderLimit = data.backorderLimit
30+
this.backordered = data.backordered
31+
this.image = data.image || ''
32+
}
33+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /