Skip to content

Commit 7729a04

Browse files
rohitazadrohitazad
committed
Product list add, API NG, Prodict Details Page created
1 parent 6971add commit 7729a04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1155
-101
lines changed

‎package-lock.json

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"@angular/platform-browser-dynamic": "^5.0.0",
2323
"@angular/router": "^5.0.0",
2424
"bootstrap": "^3.3.7",
25+
"angular-in-memory-web-api": "~0.2.1",
2526
"core-js": "^2.4.1",
27+
"font-awesome": "^4.7.0",
2628
"ngx-bootstrap": "^2.0.0-rc.0",
2729
"rxjs": "^5.5.2",
2830
"zone.js": "^0.8.14"

‎src/app/app.component.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313

1414

1515

16-
<app-footer></app-footer>
16+
1717
</div>
18+
<app-footer></app-footer>
1819

1920

2021

‎src/app/app.module.ts

+27-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
4+
import { TooltipModule } from 'ngx-bootstrap/tooltip';
45

5-
import {ReactiveFormsModule } from '@angular/forms';
6-
6+
import {ReactiveFormsModule, FormsModule } from '@angular/forms';
7+
import { HttpModule } from '@angular/http';
78
import {RouterModule} from '@angular/router';
89

910
import { AppComponent } from './app.component';
1011
import { FooterComponent } from './share/footer/footer.component';
1112
import { NavComponent } from './share/nav/nav.component';
1213
import { HomeComponent } from './ram/home/home.component';
13-
import { ProductComponent } from './ram/product/product.component';
1414
import { ContactComponent } from './ram/contact/contact.component';
1515
import { PageNotFoundComponent } from './ram/page-not-found/page-not-found.component';
1616
import { SignUpFormComponent } from './ram/sign-up-form/sign-up-form.component';
1717
import { RegisterClientComponent } from './ram/register-client/register-client.component';
18+
import { ProductListComponent } from './ram/product/product-list/product-list.component';
19+
import { ProductDetailsComponent } from './ram/product/product-details/product-details.component';
20+
import { ProductAddEditComponent } from './ram/product/product-add-edit/product-add-edit.component';
21+
22+
23+
// Imports for loading & configuring the in-memory web api
24+
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
25+
import { ProductDataInMemory } from '../app/ram/product/product-data-in-memory';
26+
27+
import { ProductServiceService } from './ram/product/product-service.service';
1828

1929

2030

@@ -24,27 +34,36 @@ import { RegisterClientComponent } from './ram/register-client/register-client.c
2434
FooterComponent,
2535
NavComponent,
2636
HomeComponent,
27-
ProductComponent,
2837
ContactComponent,
2938
PageNotFoundComponent,
3039
SignUpFormComponent,
31-
RegisterClientComponent
40+
RegisterClientComponent,
41+
ProductListComponent,
42+
ProductDetailsComponent,
43+
ProductAddEditComponent
3244
],
3345
imports: [
3446
BrowserModule,
3547
BsDropdownModule.forRoot(),
48+
HttpModule,
49+
InMemoryWebApiModule.forRoot(ProductDataInMemory),
3650
RouterModule.forRoot([
3751
{ path: 'home', component: HomeComponent },
38-
{ path: 'product', component: ProductComponent },
52+
{ path: 'product', component: ProductListComponent },
53+
{ path: 'product/:id', component: ProductDetailsComponent },
3954
{ path: 'sign-up', component: SignUpFormComponent },
4055
{ path: 'client-register', component: RegisterClientComponent },
4156
{ path: 'contact', component: ContactComponent },
4257
{ path: '', redirectTo: 'home', pathMatch: 'full' },
4358
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full' },
4459
]),
45-
ReactiveFormsModule
60+
ReactiveFormsModule,
61+
TooltipModule.forRoot(),
62+
FormsModule
63+
],
64+
providers: [
65+
ProductServiceService
4666
],
47-
providers: [],
4867
bootstrap: [AppComponent]
4968
})
5069
export class AppModule { }

‎src/app/ram/contact/contact.component.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.list-group .list-group-item span{
2+
display: inline-block;
3+
vertical-align: top;
4+
width: 200px;
5+
font-weight: bold;
6+
}
7+
.contactSocialIcon{
8+
list-style-type: none;
9+
margin: 0;
10+
padding: 0;
11+
display: inline-block;
12+
vertical-align: top;
13+
}
14+
.contactSocialIcon >li{
15+
list-style-type: none;
16+
margin: 0;
17+
padding: 0;
18+
display: inline-block;
19+
vertical-align: top;
20+
width:50px;
21+
text-align: center;
22+
}
23+
.contactSocialIcon >li + li{
24+
margin-left:10px;
25+
}
26+
.contactSocialIcon >li > a{
27+
display:inline-block;
28+
vertical-align: top;
29+
-webkit-border-top-right-radius: 500px;
30+
-webkit-border-bottom-right-radius: 500px;
31+
-webkit-border-bottom-left-radius: 500px;
32+
-webkit-border-top-left-radius: 500px;
33+
-moz-border-radius-topright: 500px;
34+
-moz-border-radius-bottomright: 500px;
35+
-moz-border-radius-bottomleft: 500px;
36+
-moz-border-radius-topleft: 500px;
37+
border-top-right-radius: 500px;
38+
border-bottom-right-radius: 500px;
39+
border-bottom-left-radius: 500px;
40+
border-top-left-radius: 500px;
41+
-moz-background-clip: padding-box;
42+
-webkit-background-clip: padding-box;
43+
background-clip: padding-box;
44+
-webkit-transition: all 0.2s ease;
45+
-moz-transition: all 0.2s ease;
46+
-o-transition: all 0.2s ease;
47+
transition: all 0.2s ease;
48+
width: 50px;
49+
height: 50px;
50+
color: #6b15a1;
51+
border: 2px solid #6b15a1;
52+
text-align: center;
53+
position: relative;
54+
display: inline-block;
55+
}
56+
.contactSocialIcon >li a:hover {
57+
color: #3583ed;
58+
border: 2px solid #272425;
59+
border-color: #3583ed;
60+
moz-transform: rotate(-360deg);
61+
-webkit-transform: rotate(-360deg);
62+
-ms--transform: rotate(-360deg);
63+
transform: rotate(-360deg);
64+
-webkit-transition: all .4s;
65+
-moz-transition: all .4s;
66+
-o-transition: all .4s;
67+
-ms-transition: all .4s;
68+
transition: all .4s;
69+
border-width: 2px;
70+
}
71+
.contactSocialIcon >li > a >span{
72+
width:auto;
73+
display: inline-block;
74+
vertical-align: top;
75+
font-size: 25px;
76+
line-height: 50px;
77+
}
78+
79+
80+
81+
@media screen
82+
and (min-width: 200px)
83+
and (max-width: 650px) {
84+
85+
86+
.list-group .list-group-item span{
87+
display: block;
88+
}
89+
90+
.contactSocialIcon >li {
91+
margin-left:10px;
92+
margin-top: 10px;
93+
}
94+
}

‎src/app/ram/contact/contact.component.html

+39-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
1-
<p>
2-
contact works!
3-
</p>
1+
<div class="">
2+
<div class='panel panel-primary'>
3+
<div class='panel-heading'>
4+
{{pageTitle}}
5+
</div>
6+
<div class='panel-body'>
7+
<div class='row'>
8+
<div class="col-md-12">
9+
<ul class="list-group">
10+
<li class="list-group-item">
11+
<span>Address :- </span> Live in: Delhi, India
12+
</li>
13+
<li class="list-group-item">
14+
<span>Contact No :-</span> +91 (9953) 878727
15+
</li>
16+
<li class="list-group-item">
17+
<span>Email ID :-</span> ram9953878727@gmail.com
18+
</li>
19+
<li class="list-group-item">
20+
<span>Website :-</span> <a href="http://www.rohitazad.com/" target="_blank">http://www.rohitazad.com/</a>
21+
</li>
22+
<li class="list-group-item">
23+
<span>Social Contact :-</span>
24+
<ul class="contactSocialIcon">
25+
<li tooltip="Find Us on Google Plus"><a href="https://plus.google.com/111154228660835588284/posts" target="_blank"><span class="fa fa-google"></span></a></li>
26+
<li tooltip="Find Us on Facebook"><a href="https://www.facebook.com/IamRohitAzad" target="_blank"><span class="fa fa-facebook"></span></a></li>
27+
<li tooltip="Find Us on Twitter"><a target="_blank" href="https://twitter.com/iamrohitazad"><span class="fa fa-twitter"></span></a></li>
28+
<li tooltip="Find Us on Linkedin"><a target="_blank" href="http://in.linkedin.com/in/rohitazad"><span class="fa fa-linkedin"></span></a></li>
29+
<li tooltip="Find Us on StackOverflow"><a target="_blank" href="http://stackoverflow.com/users/1365428/rohit-azad"><span class="fa fa-stack-overflow"></span></a></li>
30+
<li tooltip="Find Us on GitHub"><a target="_blank" href="https://github.com/rohitazad"><span class="fa fa-github-square"></span></a></li>
31+
</ul>
32+
</li>
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
39+
</div>

‎src/app/ram/contact/contact.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
66
styleUrls: ['./contact.component.css']
77
})
88
export class ContactComponent implements OnInit {
9-
9+
pageTitle:string = 'Contact Us';
1010
constructor() { }
1111

1212
ngOnInit() {

‎src/app/ram/home/home.component.html

+24-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1-
<p>
2-
home works!
3-
</p>
1+
2+
<div class="panel panel-primary">
3+
<div class="panel-heading">
4+
{{pageTitle}}
5+
</div>
6+
<div class="panel-body" >
7+
<div class="row" >
8+
<img src="http://rohitazad.com/ng4-products/assets/images/rohitazad.jpg"
9+
class="img-responsive center-block"
10+
style="max-height:450px;padding-bottom:30px"/>
11+
</div>
12+
<div class="row" >
13+
<div class="text-center">Developed by:</div>
14+
<h3 class="text-center">Rohit Azad Malik</h3>
15+
16+
<div class="text-center">
17+
<a href="https://www.facebook.com/rohitazadmalik/" target="_blank">#RohitAzadMalik</a>
18+
</div>
19+
<div class="text-center">
20+
<a target="_blank" href="http://www.rohitazad.com">www.rohitazad.com</a>
21+
</div>
22+
</div>
23+
</div>
24+
</div>

‎src/app/ram/home/home.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
66
styleUrls: ['./home.component.css']
77
})
88
export class HomeComponent implements OnInit {
9-
9+
public pageTitle:string = 'Welcome to My App';
1010
constructor() { }
1111

1212
ngOnInit() {

‎src/app/ram/page-not-found/page-not-found.component.html

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1-
<p>
2-
page-not-found works! page here
3-
</p>
1+
<div class='panel panel-primary'>
2+
<div class='panel-heading'>
3+
{{pageTitle}}
4+
</div>
5+
<div class='panel-body'>
6+
<div class="row">
7+
<div class="col-sm-12">
8+
<p>{{pageNotFound}}</p>
9+
</div>
10+
</div>
11+
</div>
12+
<div class='panel-footer'>
13+
<a class='btn btn-default' (click)='onBack()'>
14+
<i class='glyphicon glyphicon-chevron-left'></i> Back to Home
15+
</a>
16+
</div>
17+
</div>

‎src/app/ram/page-not-found/page-not-found.component.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
23

34
@Component({
45
selector: 'app-page-not-found',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
78
})
89
export class PageNotFoundComponent implements OnInit {
910

10-
constructor() { }
11+
pageTitle:string = '404 Not Found Error';
12+
pageNotFound:string = 'Page not found';
13+
constructor(private _router: Router) { }
1114

1215
ngOnInit() {
1316
}
1417

18+
onBack():void{
19+
this._router.navigate(['/home']);
20+
}
21+
1522
}
23+
24+
25+
26+

‎src/app/ram/product/product.component.css ‎src/app/ram/product/product-add-edit/product-add-edit.component.css

File renamed without changes.

‎src/app/ram/product/product-add-edit/product-add-edit.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<p>
2+
product-add-edit works!
3+
</p>

‎src/app/ram/product/product-add-edit/product-add-edit.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ProductAddEditComponent } from './product-add-edit.component';
4+
5+
describe('ProductAddEditComponent', () => {
6+
let component: ProductAddEditComponent;
7+
let fixture: ComponentFixture<ProductAddEditComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ProductAddEditComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ProductAddEditComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)