Skip to content

Commit c3eae06

Browse files
rupeshtiwarirupeshtiwari
committed
fixed user edit and insert
1 parent b68572c commit c3eae06

13 files changed

+98
-85
lines changed

‎db.json

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -73,16 +73,12 @@
7373
],
7474
"users": [
7575
{
76-
"gender": "male",
7776
"title": "mr",
78-
"first": "ruben",
77+
"first": "Red",
7978
"last": "martinez",
8079
"email": "ruben.martinez@example.com",
81-
"dob": "1985-05-15T14:49:33Z",
82-
"phone": "904-222-343",
83-
"cell": "677-757-448",
84-
"id": 1,
85-
"picture": "https://randomuser.me/api/portraits/men/16.jpg"
80+
"picture": "",
81+
"id": 1
8682
},
8783
{
8884
"gender": "male",
@@ -93,8 +89,7 @@
9389
"dob": "1958-10-12T20:17:11Z",
9490
"phone": "63835413",
9591
"cell": "93710313",
96-
"id": 2,
97-
"picture": "https://randomuser.me/api/portraits/men/35.jpg"
92+
"id": 2
9893
},
9994
{
10095
"gender": "male",
@@ -105,8 +100,7 @@
105100
"dob": "1950-09-11T06:20:58Z",
106101
"phone": "920-471-059",
107102
"cell": "657-579-235",
108-
"id": 3,
109-
"picture": "https://randomuser.me/api/portraits/men/34.jpg"
103+
"id": 3
110104
},
111105
{
112106
"gender": "female",
@@ -117,8 +111,7 @@
117111
"dob": "1947-08-09T10:42:06Z",
118112
"phone": "(400)-085-0403",
119113
"cell": "(555)-123-9645",
120-
"id": 4,
121-
"picture": "https://randomuser.me/api/portraits/women/66.jpg"
114+
"id": 4
122115
},
123116
{
124117
"gender": "male",
@@ -129,8 +122,7 @@
129122
"dob": "1985-06-22T21:57:55Z",
130123
"phone": "07-7004-9778",
131124
"cell": "0415-007-777",
132-
"id": 5,
133-
"picture": "https://randomuser.me/api/portraits/men/43.jpg"
125+
"id": 5
134126
},
135127
{
136128
"gender": "female",
@@ -141,8 +133,7 @@
141133
"dob": "1990-11-09T19:15:18Z",
142134
"phone": "0749-1511645",
143135
"cell": "0171-4702989",
144-
"id": 6,
145-
"picture": "https://randomuser.me/api/portraits/women/22.jpg"
136+
"id": 6
146137
},
147138
{
148139
"gender": "female",
@@ -153,8 +144,7 @@
153144
"dob": "1996-12-24T00:48:12Z",
154145
"phone": "08-398-232",
155146
"cell": "043-552-34-76",
156-
"id": 7,
157-
"picture": "https://randomuser.me/api/portraits/women/6.jpg"
147+
"id": 7
158148
},
159149
{
160150
"gender": "male",
@@ -165,8 +155,7 @@
165155
"dob": "1946-12-21T21:51:57Z",
166156
"phone": "041-765-6371",
167157
"cell": "081-603-2783",
168-
"id": 8,
169-
"picture": "https://randomuser.me/api/portraits/men/19.jpg"
158+
"id": 8
170159
},
171160
{
172161
"gender": "male",
@@ -177,8 +166,7 @@
177166
"dob": "1965-06-18T13:46:42Z",
178167
"phone": "041-954-7366",
179168
"cell": "081-898-9652",
180-
"id": 9,
181-
"picture": "https://randomuser.me/api/portraits/men/28.jpg"
169+
"id": 9
182170
},
183171
{
184172
"gender": "female",
@@ -189,8 +177,15 @@
189177
"dob": "1945-06-07T06:29:17Z",
190178
"phone": "940-485-557",
191179
"cell": "668-088-019",
192-
"id": 10,
193-
"picture": "https://randomuser.me/api/portraits/women/64.jpg"
180+
"id": 10
181+
},
182+
{
183+
"title": "Mr",
184+
"first": "Green",
185+
"last": "Ward",
186+
"email": "green@gmail.com",
187+
"picture": "",
188+
"id": "jmrjqpd8"
194189
}
195190
]
196-
}
191+
}

‎src/app/api/address.api.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Injectable } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33
import { Observable } from 'rxjs';
4-
import { Employee } from '../models/employee';
54

65
@Injectable({ providedIn: 'root' })
76
export class AddressApi {

‎src/app/api/user.api.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Injectable } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33
import { Observable } from 'rxjs';
4-
import { Employee } from '../models/employee';
54

65
@Injectable({ providedIn: 'root' })
76
export class UserApi {
@@ -19,6 +18,11 @@ export class UserApi {
1918
}
2019

2120
saveUser(user: any) {
22-
return this.$http.post(this.url, user);
21+
if (user.id) {
22+
return this.$http.put(`${this.url}/${user.id}`, user);
23+
} else {
24+
user.id = new Date().getTime().toString(36);
25+
return this.$http.post(`${this.url}`, user);
26+
}
2327
}
2428
}

‎src/app/app.component.html

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,16 @@
11
<nav class="navbar navbar-default">
22
<div class="container-fluid">
3-
<!-- Brand and toggle get grouped for better mobile display -->
4-
<div class="navbar-header">
5-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
6-
aria-expanded="false">
7-
<span class="sr-only">Toggle navigation</span>
8-
<span class="icon-bar"></span>
9-
<span class="icon-bar"></span>
10-
<span class="icon-bar"></span>
11-
</button>
12-
</div>
133
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
144
<ul class="nav navbar-nav">
15-
<li class="active">
5+
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
166
<a [routerLink]="['/dashboard']">Dashboard</a>
177
</li>
18-
<li>
19-
<a>Profile</a>
20-
</li>
21-
</ul>
22-
<ul class="nav navbar-nav navbar-right">
23-
<li>
24-
<a>Logout</a>
8+
<li [class.active]="router.isActive('/user')" [routerLinkActive]="['active']" [routerLinkActiveOptions]=" {exact:false}">
9+
<a [routerLink]="['/user',1]"> Profile</a>
2510
</li>
2611
</ul>
2712
</div>
28-
<!-- /.navbar-collapse -->
2913
</div>
30-
<!-- /.container-fluid -->
3114
</nav>
3215
<div class="container">
3316
<router-outlet></router-outlet>

‎src/app/app.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { Component } from '@angular/core';
2+
import { Router } from '@angular/router';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.css']
78
})
89
export class AppComponent {
10+
constructor(public router: Router) {}
911
title = 'app';
1012
}

‎src/app/dashboard/dashboard.component.html

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="container">
2-
<form name="form" (ngSubmit)="$click.next()" #f="ngForm" novalidate>
2+
<form name="form" class="form-group" (ngSubmit)="$click.next()" #f="ngForm" novalidate>
33
<div class="row">
44
<div class="col-xs-6 col-md-4">
55
<div class="input-group">
@@ -13,16 +13,14 @@
1313
</div>
1414
</div>
1515
</form>
16-
<div class="card" *ngFor="let user of users$">
17-
<img class="card-img-top" src="{{user.picture}}" alt="Card image cap">
18-
<div class="card-body">
19-
<p class="card-text">
20-
<label>Name :<a [routerLink]="['/user',user.id]" routerLinkActive="router-link-active"> {{user.title}}
21-
{{user.first}} {{user.last}}</a>
22-
</label>
23-
</p>
24-
</div>
25-
16+
<div class="alert alert-warning">
17+
<a [routerLink]="['/user',0,'edit']" routerLinkActive="router-link-active"> <b>Click here to add new user</b> </a>
2618
</div>
19+
<ul class="list-group">
20+
<li class="list-group-item list-group-item-action" *ngFor="let user of users$">
21+
<a [routerLink]="['/user',user.id]" routerLinkActive="router-link-active"> {{user.title}}
22+
{{user.first}} {{user.last}}</a>
23+
</li>
24+
</ul>
2725

2826
</div>

‎src/app/models/employee.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/app/models/user.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export interface User {
2+
id: number;
3+
title: string;
4+
first: string;
5+
last: string;
6+
email: string;
7+
dob?: string;
8+
phone?: string;
9+
cell?: string;
10+
gender?: string;
11+
}

‎src/app/save-user/save-user.component.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.btn-space {
2+
margin-right: 15px;
3+
}

‎src/app/save-user/save-user.component.html

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div class="container">
2-
32
<div class="card" [formGroup]="userForm$">
4-
<img class="card-img-top" src="{{userForm$.controls.picture.value}}" alt="Card image cap">
3+
54
<div class="card-body">
65

76
<div class="form-group">
@@ -22,10 +21,16 @@
2221
<input type="text" class="form-control" formControlName="email">
2322

2423
</div>
25-
<button type="submit" (click)="save()" class="btn btn-primary"> Save </button>
26-
27-
<button type="submit" [routerLink]="['/user',userForm$.controls.id.value]" class="btn btn-secondary"> Cancel
28-
</button>
24+
<div class="form-group row">
25+
<div class="col-md-1">
26+
<button type="submit" (click)="save()" class="btn btn-primary btn-success"> Save </button>
27+
</div>
28+
<div class="col-md-1">
29+
<button type="submit" [routerLink]="['/user',userForm$.controls.id.value]" class="btn btn-secondary btn-warning">
30+
Cancel
31+
</button>
32+
</div>
33+
</div>
2934
</div>
3035
</div>
3136
</div>

‎src/app/save-user/save-user.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import { Router } from '@angular/router';
55
import { FormControl, FormBuilder, Validators } from '@angular/forms';
66
import { FormGroup } from '@angular/forms';
77
import { ActivatedRoute } from '@angular/router';
8+
import { User } from '../models/user';
89

910
@Component({
1011
selector: 'app-save-user',
11-
templateUrl: './save-user.component.html'
12+
templateUrl: './save-user.component.html',
13+
styleUrls: ['./save-user.component.css']
1214
})
1315
export class SaveUserComponent implements OnInit {
1416
user$;
@@ -41,8 +43,8 @@ export class SaveUserComponent implements OnInit {
4143

4244
save() {
4345
const value = this.userForm$.value;
44-
this.userApi.saveUser(value).subscribe(s => {
45-
this.router.navigate(['../../dashboard']);
46+
this.userApi.saveUser(value).subscribe((s: User) => {
47+
this.router.navigate(['../../user', s.id]);
4648
});
4749
}
4850
}

‎src/app/user-detail/user-detail.component.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.btn-space {
2+
margin-right: 15px;
3+
}

‎src/app/user-detail/user-detail.component.html

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
<div class="container">
22

33
<div class="card" *ngIf="user$ | async; let user">
4-
<img class="card-img-top" src="{{user.picture}}" alt="Card image cap">
4+
55
<div class="card-body">
6-
<p class="card-text">
7-
<label>Name :</label> {{user.title}} {{user.first}} {{user.last}}
8-
<br>
9-
<label>Email Id:</label> {{user.email}}
10-
<br>
11-
<label>user Id:</label> {{user.id}}
12-
</p>
13-
<a class="btn btn-primary" [routerLink]="['/user', user.id,'edit']">Edit</a>
6+
<div class="form-group">
7+
<div class="form-group row">
8+
<label>Name :</label> {{user.title}} {{user.first}} {{user.last}}
9+
10+
</div>
11+
12+
<div class="form-group row">
13+
<label>Email Id:</label> {{user.email}} </div>
14+
<div class="form-group row">
15+
<label>user Id:</label> {{user.id}}</div>
16+
17+
<div class="form-group row">
18+
<div class="col-md-1">
19+
<button type="submit" [routerLink]="['/user', user.id,'edit']" class="btn btn-primary btn-success"> Edit
20+
</button>
21+
</div>
22+
<div class="col-md-1">
23+
<button type="submit" [routerLink]="['../../dashboard']" class=" btn btn-secondary btn-warning">
24+
Cancel
25+
</button>
26+
</div>
27+
</div>
28+
</div>
1429
</div>
1530
</div>
1631

0 commit comments

Comments
 (0)