Skip to content

Commit cfc4b5c

Browse files
valerisuleovalerisuleo
committed
index page fetch data and dispayed with reusable bootstrap card done: done
1 parent c08c4e1 commit cfc4b5c

31 files changed

+312
-31
lines changed

‎section_19-project/project/db/vegetables.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
const collection = [
22
{
33
title: 'Pizza Slice',
4-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/1950_01.jpg?raw=1',
4+
imageUrl: 'https://www.dropbox.com/s/0dymh0nkdhccz6j/119627_01.jpg?raw=1',
55
price: 0.69,
66
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
77
category: 'Bakery'
88
},
99
{
1010
title: 'Italian Style Panini Roll',
11-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/6742_01.jpg?raw=1',
11+
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/1950_01.jpg?raw=1',
1212
price: 0.25,
1313
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
1414
category: 'Bakery'
1515
},
1616
{
1717
title: 'French Baguette',
18-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/6817_01.jpg?raw=1',
18+
imageUrl: 'https://www.dropbox.com/s/kgpaae6jahstelz/6742_01.jpg?raw=1',
1919
price: 0.69,
2020
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
2121
category: 'Bakery'
2222
},
2323
{
2424
title: 'Maple and Pecan',
25-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/119627_01.jpg?raw=1',
25+
imageUrl: 'https://www.dropbox.com/s/8wqgzxumpz9e99w/6817_01.jpg?raw=1',
2626
price: 0.49,
2727
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
2828
category: 'Bakery'
2929
},
3030
{
3131
title: 'Double Chocolate Cookie',
32-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/121278_01.jpg?raw=1',
32+
imageUrl: 'https://www.dropbox.com/s/lqjddrhhehdwiow/5207811_01.jpg?raw=1',
3333
price: 0.39,
3434
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
3535
category: 'Bakery'
3636
},
3737
{
3838
title: 'All Butter Croisssant',
39-
imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/5207811_01.jpg?raw=1',
39+
imageUrl: 'https://www.dropbox.com/s/ojwtiirrdvo1mhs/121278_01.jpg?raw=1',
4040
price: 0.37,
4141
categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
4242
category: 'Bakery'

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
3-
import { HomeComponent } from './components/home/home.component';
3+
import { ProductsIndexComponent } from './components/products/products-index/products-index.component';
44

55

66
const routes: Routes = [
7-
{ path: 'home', component: HomeComponent },
8-
{ path: '**', component: HomeComponent }
7+
{ path: 'products', component: ProductsIndexComponent }
8+
// { path: '**', component: PathNotFoundComponent }
99
];
1010

1111
@NgModule({

‎section_19-project/project/src/app/app.component.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
<router-outlet></router-outlet>
1+
<bootstrap-navbar></bootstrap-navbar>
2+
<main class="container">
3+
<router-outlet></router-outlet>
4+
</main>

‎section_19-project/project/src/app/app.module.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,26 @@ import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
99
import { AngularFirestoreModule } from '@angular/fire/firestore';
1010
import { environment } from '../environments/environment';
1111
import { DataService } from './services/data.service';
12-
import { HomeComponent } from './components/home/home.component';
12+
import { ProductsIndexComponent } from './components/products/products-index/products-index.component';
13+
import { ProductsShowComponent } from './components/products/products-show/products-show.component';
14+
import { BootstrapFormComponent } from './reusable-components/bootstrap-form/bootstrap-form.component';
15+
import { BootstrapInputComponent } from './reusable-components/bootstrap-input/bootstrap-input.component';
16+
import { BootstrapSelectComponent } from './reusable-components/bootstrap-select/bootstrap-select.component';
17+
import { BootstrapListComponent } from './reusable-components/bootstrap-list/bootstrap-list.component';
18+
import { BootstrapCardComponent } from './reusable-components/bootstrap-card/bootstrap-card.component';
19+
import { BootstrapNavbarComponent } from './components/bootstrap-navbar/bootstrap-navbar.component';
1320

1421
@NgModule({
1522
declarations: [
1623
AppComponent,
17-
HomeComponent
24+
ProductsIndexComponent,
25+
ProductsShowComponent,
26+
BootstrapFormComponent,
27+
BootstrapInputComponent,
28+
BootstrapSelectComponent,
29+
BootstrapListComponent,
30+
BootstrapCardComponent,
31+
BootstrapNavbarComponent,
1832
],
1933
imports: [
2034
BrowserModule,

‎section_19-project/project/src/app/components/bootstrap-navbar/bootstrap-navbar.component.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
<p>bootstrap-navbar works!</p>
1+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2+
<a class="navbar-brand" [routerLink]="['/products']" >Leaf</a>
3+
<div class="navbar-collapse" id="navbarNavAltMarkup">
4+
<div class="navbar-nav">
5+
<a class="nav-item nav-link" href="#">Trolley</a>
6+
<a class="nav-item nav-link" href="#">Counter</a>
7+
</div>
8+
</div>
9+
</nav>

‎section_19-project/project/src/app/components/bootstrap-navbar/bootstrap-navbar.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: 'app-bootstrap-navbar',
5-
templateUrl: './bootstrap-navbar.component.html',
6-
styleUrls: ['./bootstrap-navbar.component.scss']
4+
selector: 'bootstrap-navbar',
5+
templateUrl: './bootstrap-navbar.component.html',
6+
styleUrls: ['./bootstrap-navbar.component.scss']
77
})
88
export class BootstrapNavbarComponent implements OnInit {
99

10-
constructor() { }
11-
12-
ngOnInit(): void {
13-
}
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
1414

1515
}

‎section_19-project/project/src/app/components/products/interfaces.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export interface IProduct {
2+
title: string;
3+
imageUrl: string;
4+
price: number;
5+
categories?: string[];
6+
category: string;
7+
id?: string;
8+
}

‎section_19-project/project/src/app/components/products/products-index/products-index.component.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
<p>products-index works!</p>
1+
<div class="row mt-5">
2+
<div class="col-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quae illo, ipsa asperiores iure a! Et molestiae, atque cum at corrupti esse, perferendis tempore eaque officia qui laborum libero quisquam!</div>
3+
<div class="col-10">
4+
<div class="card-group">
5+
<bootstrap-card *ngFor="let item of products">
6+
<img class="selector-header card-img-top" src={{item.imageUrl}} alt="">
7+
<ng-container class="selector-body">
8+
<div class="card-body">
9+
<h5 class="card-title">
10+
{{item.title}}
11+
</h5>
12+
<p class="card-text">
13+
${{item.price}}
14+
</p>
15+
<a href="#" class="btn btn-primary">Go somewhere</a>
16+
</div>
17+
</ng-container>
18+
</bootstrap-card>
19+
</div>
20+
</div>
21+
</div>

‎section_19-project/project/src/app/components/products/products-index/products-index.component.ts‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, OnDestroy } from '@angular/core';
2+
import { DataService } from '../../../services/data.service';
3+
import { IProduct } from '../interfaces';
4+
import { Subscription } from 'rxjs';
25

36
@Component({
4-
selector: 'app-products-index',
5-
templateUrl: './products-index.component.html',
6-
styleUrls: ['./products-index.component.scss']
7+
selector: 'products-index',
8+
templateUrl: './products-index.component.html',
9+
styleUrls: ['./products-index.component.scss']
710
})
8-
export class ProductsIndexComponent implements OnInit {
11+
export class ProductsIndexComponent implements OnInit, OnDestroy {
912

10-
constructor() { }
13+
products: IProduct[] = [];
14+
subscription: Subscription;
1115

12-
ngOnInit(): void {
13-
}
16+
constructor(private service: DataService) { }
17+
18+
getCollection() {
19+
this.subscription = this.service.getAll('vegetables')
20+
.subscribe((response: any) => {
21+
console.log(response);
22+
23+
this.products = response;
24+
});
25+
}
26+
27+
ngOnInit(): void {
28+
this.getCollection();
29+
}
30+
31+
ngOnDestroy() {
32+
this.subscription.unsubscribe();
33+
}
1434

1535
}

‎section_19-project/project/src/app/reusable-components/bootstrap-card/bootstrap-card.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="card m-1" style="width: 18rem;">
2+
<ng-content select=".selector-header"></ng-content>
3+
<ng-content select=".selector-body"></ng-content>
4+
</div>

0 commit comments

Comments
 (0)