part 5.5

src/app/app.module.ts

@@ -17,6 +17,8 @@ import { HttpClientModule }    from '@angular/common/http';
 import { UserAddComponent } from './module/module-user/user-add/user-add.component';
 
 import { FormsModule } from '@angular/forms';
+import { UserDetailComponent } from './module/module-user/user-detail/user-detail.component';
+import { UserFormComponent } from './module/module-user/user-form/user-form.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +32,9 @@ import { FormsModule } from '@angular/forms';
     ModuleSettingComponent,
     ModuleReportComponent,
     UserListComponent,
-    UserAddComponent
+    UserAddComponent,
+    UserDetailComponent,
+    UserFormComponent
   ],
   imports: [
     BrowserModule,

src/app/dtcservice/user.service.ts

@@ -22,4 +22,8 @@ export class UserService {
     return this.http.post<User>(this.apihost+"/user",user,httpOptions);
   }
 
+  updateUser (user: User, id:number): Observable<any> {
+    return this.http.put(`${this.apihost}/user/${id}`, user, httpOptions);
+  }
+
 }

src/app/module/module-user/user-add/user-add.component.html

@@ -1,17 +1 @@
-<div class="pure-form pure-form-aligned">
-    <fieldset>
-        <div class="pure-control-group">
-            <label for="username">Username</label>
-            <input id="username" [(ngModel)]="user.username" placeholder="Username">
-        </div>
-        <div class="pure-control-group">
-            <label for="password">Password</label>
-            <input id="password" [(ngModel)]="user.password" type="password" placeholder="Password">
-        </div>
-        <div class="pure-control-group">
-            <label for="fullname">Fullname</label>
-            <input id="fullname" [(ngModel)]="user.fullname" placeholder="Fullname">
-        </div>
-        <button (click)="save()" class="pure-button pure-button-primary">Save</button>
-    </fieldset>
-</div>
+<app-user-form [user] = user></app-user-form>

src/app/module/module-user/user-add/user-add.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnInit,Input } from '@angular/core';
-import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 import { User } from '../../../dtcservice/user'
-import {UserService} from '../../../dtcservice/user.service';
 
 @Component({
   selector: 'app-user-add',
@@ -9,17 +7,12 @@ import {UserService} from '../../../dtcservice/user.service';
   styleUrls: ['./user-add.component.scss']
 })
 export class UserAddComponent implements OnInit {
-  @Input() user:User;
-  constructor(private location:Location,private userService:UserService) { }
+  user:User;
+  constructor() { }
 
   ngOnInit() {
     if(!this.user){
       this.user = {} as User;
     }
   }
-
-  save():void{
-      this.userService.addUser(this.user).subscribe(() => this.location.back());    
-  }
-
 }

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

@@ -0,0 +1 @@
+<p>user-detail works!</p>

src/app/module/module-user/user-detail/user-detail.component.spec.ts

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

src/app/module/module-user/user-detail/user-detail.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-detail',
+  templateUrl: './user-detail.component.html',
+  styleUrls: ['./user-detail.component.scss']
+})
+export class UserDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/module/module-user/user-form/user-form.component.html

@@ -0,0 +1,21 @@
+<div class="pure-form pure-form-aligned">
+    <fieldset>
+        <div *ngIf="user.id" class="pure-control-group">
+            <label for="username">User Id</label>
+            <input readonly id="username" [(ngModel)]="user.username" value="{{user.id}}">
+        </div>
+        <div class="pure-control-group">
+            <label for="username">Username</label>
+            <input id="username" [(ngModel)]="user.username" placeholder="Username">
+        </div>
+        <div class="pure-control-group">
+            <label for="password">Password</label>
+            <input id="password" [(ngModel)]="user.password" type="password" placeholder="Password">
+        </div>
+        <div class="pure-control-group">
+            <label for="fullname">Fullname</label>
+            <input id="fullname" [(ngModel)]="user.fullname" placeholder="Fullname">
+        </div>
+        <button (click)="back()"  class="pure-button pure-button-primary">Cancel</button>&nbsp;<button (click)="save()" class="pure-button pure-button-primary">Save</button>
+    </fieldset>
+</div>

src/app/module/module-user/user-form/user-form.component.spec.ts

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

src/app/module/module-user/user-form/user-form.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { Location } from '@angular/common';
+import {UserService} from '../../../dtcservice/user.service';
+import { User } from '../../../dtcservice/user'
+
+@Component({
+  selector: 'app-user-form',
+  templateUrl: './user-form.component.html',
+  styleUrls: ['./user-form.component.scss']
+})
+export class UserFormComponent implements OnInit {
+  @Input() user:User;
+  constructor(private location:Location,private userService:UserService) { }
+
+  ngOnInit() {
+  }
+
+  save():void{
+    if(!this.user.id){
+      this.userService.addUser(this.user).subscribe(() => this.back());
+    }else{
+      this.userService.updateUser(this.user,this.user.id).subscribe(() => this.back())
+    }
+  }
+
+  back():void {
+    this.location.back();
+  }
+
+}