Add Edit and Update to Employee View component

Author: pavankjadda

src/main/java/com/pj/keycloak/service/EmployeeService.java

@@ -11,7 +11,7 @@ public interface EmployeeService
 
     Optional<Employee> findById(Long id);
 
-    void updateProfile(Employee employee);
+    Employee updateProfile(Employee employee);
 
     void saveAndFlush(Employee employee);
 

src/main/java/com/pj/keycloak/service/EmployeeServiceImpl.java

@@ -30,15 +30,9 @@ public Optional<Employee> findById(Long id)
     }
 
     @Override
-    public void updateProfile(Employee employee)
+    public Employee updateProfile(Employee employee)
     {
-        employee.setFirstName("John2");
-        employee.setLastName("Doe2");
-        employee.setPhone("54541151515");
-        employee.setEmail("[email protected]");
-        employee.setLocation("Fairfax");
-
-        employeeRepository.saveAndFlush(employee);
+        return employeeRepository.saveAndFlush(employee);
     }
 
     @Override

src/main/java/com/pj/keycloak/web/EmployeeController.java

@@ -41,11 +41,10 @@ public Optional<Employee> findById(@PathVariable Long id)
         return employeeService.findById(id);
     }
 
-    @GetMapping(path = "/update/{id}")
-    public List<Employee> update(@PathVariable Long id)
+    @PostMapping(path = "/update")
+    public Employee update(@RequestBody Employee employee)
     {
-        employeeService.updateProfile(findById(id).get());
-        return employeeService.findAll();
+        return employeeService.updateProfile(employee);
     }
 
     @PostMapping(path = "/create")

src/main/webapp/spring-data-ui/src/app/app.component.html

@@ -11,6 +11,9 @@ <h2>
 </div>
 
 <router-outlet></router-outlet>
+
+
+<br/> <br/>
 <div class="container container-fluid">
   <h5><a [routerLink]="['/logout']">Logout</a></h5>
 </div>

src/main/webapp/spring-data-ui/src/app/employee-list/employee.service.ts

@@ -18,9 +18,10 @@ export class EmployeeService {
   {
     return this.httpClient.get<Employee>(url);
   }
-  updateEmployee(url: string)
+
+  updateEmployee(url: string, employee: Employee)
   {
-    return this.httpClient.get<Employee[]>(url);
+    return this.httpClient.post<Employee>(url,employee);
   }
 
   createEmployee(url: string, employee: Employee)

src/main/webapp/spring-data-ui/src/app/employee-view/employee-view.component.html

@@ -9,7 +9,7 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="id">Id</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="id" id="id" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="id" id="id" [readOnly]="!editMode" type="text">
         </div>
       </div>
       <div class="form-group row">
@@ -22,42 +22,42 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="firstName">firstName</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="firstName" id="firstName" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="firstName" id="firstName" [readOnly]="!editMode" type="text">
         </div>
       </div>
 
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="lastName">lastName</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="lastName" id="lastName" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="lastName" id="lastName"  [readOnly]="!editMode"  type="text">
         </div>
       </div>
 
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="email">Email</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" id="email" formControlName="email"  readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" id="email" formControlName="email"   [readOnly]="!editMode"  type="text">
         </div>
       </div>
 
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="phone">phone</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" id="phone" formControlName="phone"  readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" id="phone" formControlName="phone"   [readOnly]="!editMode"  type="text">
         </div>
       </div>
 
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="salary">salary</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="salary"  id="salary" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="salary"  id="salary"  [readOnly]="!editMode"  type="text">
         </div>
       </div>
 
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="location">location</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="location"  id="location" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="location"  id="location"  [readOnly]="!editMode"  type="text">
         </div>
       </div>
 
@@ -66,7 +66,10 @@
 
   <div class="container container-fluid">
     <h5>
-      <button [routerLink]="['/']" class="btn btn-primary">Back</button>
+      <button (click)="updateEmployee()" *ngIf="editMode" class="btn btn-primary" style="margin-right: 10px">Update</button>
+      <button (click)="cancelUpdate()" *ngIf="editMode" class="btn btn-outline-danger" style="margin-right: 10px">Cancel</button>
+      <button (click)="editEmployee()" *ngIf="!editMode" class="btn btn-primary" style="margin-right: 10px">Edit</button>
+      <button routerLink="/employee/list" *ngIf="!editMode"class="btn btn-primary">Back</button>
     </h5>
   </div>
 </div>

src/main/webapp/spring-data-ui/src/app/employee-view/employee-view.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from "@angular/core";
 import {FormControl, FormGroup} from "@angular/forms";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {NgxSpinnerService} from "ngx-spinner";
 import {Employee} from "src/app/employee-list/employee";
 import {EmployeeService} from "src/app/employee-list/employee.service";
@@ -13,9 +13,11 @@ import {EmployeeService} from "src/app/employee-list/employee.service";
 export class EmployeeViewComponent implements OnInit
 {
   employee: Employee;
+  editMode: boolean;
+
   employeeForm = new FormGroup({
     id: new FormControl({value: '', disabled: true}),
-    employeeId: new FormControl(''),
+    employeeId: new FormControl({value: '', disabled: true}),
     firstName: new FormControl(''),
     lastName: new FormControl(''),
     email: new FormControl(''),
@@ -26,15 +28,16 @@ export class EmployeeViewComponent implements OnInit
 
   constructor(private employeeService:EmployeeService,
               private activatedRoute:ActivatedRoute,
+              private router:Router,
               private ngxSpinnerService:NgxSpinnerService)
   { }
 
   ngOnInit()
   {
+    this.editMode=false;
     this.getEmployeeDetails();
   }
 
-
   private getEmployeeDetails()
   {
     let id=this.activatedRoute.snapshot.params.id;
@@ -62,4 +65,48 @@ export class EmployeeViewComponent implements OnInit
       }
     );
   }
+
+  editEmployee()
+  {
+    this.editMode=true;
+  }
+
+  updateEmployee()
+  {
+    this.ngxSpinnerService.show();
+
+    console.error(this.employeeForm.value);
+    let employee=this.employeeForm.value;
+
+    this.employeeService.updateEmployee('http://localhost:8081/api/v1/employee/update', employee).subscribe(
+      data=>
+      {
+        this.employee=data;
+        this.employeeForm.patchValue(
+          {
+            id: data.id,
+            employeeId: data.employeeId,
+            firstName: data.firstName,
+            lastName: data.lastName,
+            email: data.email,
+            phone: data.phone,
+            salary: data.salary,
+            location: data.location,
+          });
+        this.editMode=false;
+
+        this.ngxSpinnerService.hide();
+      },
+      error1 =>
+      {
+        this.ngxSpinnerService.hide();
+      }
+    );
+
+  }
+
+  cancelUpdate()
+  {
+    this.editMode=false;
+  }
 }