Replace FormGroup with FormBuilder to make long listing forms short

Author: pavankjadda

src/main/java/com/pj/keycloak/util/UserInfoUtil.java

@@ -18,14 +18,24 @@ public class UserInfoUtil
 
     public String getPreferredUsername(HttpServletRequest httpServletRequest)
     {
-        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-        KeycloakPrincipal keycloakPrincipal= (KeycloakPrincipal) authentication.getPrincipal();
-        AccessToken accessToken=keycloakPrincipal.getKeycloakSecurityContext().getToken();
+        AccessToken accessToken=getAccessToken();
         /*
 
                 KeycloakAuthenticationToken keycloakAuthenticationToken= (KeycloakAuthenticationToken) httpServletRequest.getUserPrincipal();
                 logger.info("Subject: {}",keycloakAuthenticationToken.getAccount().getKeycloakSecurityContext().getToken().getSubject());
         */
         return accessToken.getPreferredUsername();
     }
+    public String getUserGuid()
+    {
+        return getAccessToken().getSubject();
+    }
+
+
+    private AccessToken getAccessToken()
+    {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        KeycloakPrincipal keycloakPrincipal= (KeycloakPrincipal) authentication.getPrincipal();
+        return keycloakPrincipal.getKeycloakSecurityContext().getToken();
+    }
 }

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

@@ -44,6 +44,7 @@ public Optional<Employee> findById(@PathVariable Long id)
     @PostMapping(path = "/update")
     public Employee update(@RequestBody Employee employee)
     {
+        employee.setUserGuid(userInfoUtil.getUserGuid());
         return employeeService.updateProfile(employee);
     }
 

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

@@ -19,7 +19,7 @@
     </thead>
     <tbody *ngFor="let employee of employees">
     <tr>
-      <td> <a routerLink="/employee/{{employee.id}}">{{employee.id}}</a></td>
+      <td> <a routerLink="/employee/{{employee.id}}"  [queryParams]="{editMode: false}">{{employee.id}}</a></td>
       <td>{{employee.employeeId}}</td>
       <td>{{employee.firstName}}</td>
       <td>{{employee.lastName}}</td>
@@ -38,7 +38,6 @@
   <div class="container container-fluid">
     <h5>
       <button (click)="createEmployee()" class="btn btn-primary"> Create</button>
-      <button (click)="updateEmployee()" class="btn btn-primary" style="margin-left: 20px"> Update</button>
     </h5>
   </div>
 

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

@@ -41,21 +41,6 @@ export class EmployeeListComponent implements OnInit
     );
   }
 
-  updateEmployee()
-  {
-    this.ngxSpinnerService.show();
-    this.employeeService.updateEmployee('http://localhost:8081/api/v1/employee/update/1001').subscribe(
-      data=>
-      {
-        this.employees=data;
-        this.ngxSpinnerService.hide();
-      },
-      error1 =>
-      {
-        this.ngxSpinnerService.hide();
-      }
-    );
-  }
 
   logout()
   {
@@ -104,6 +89,7 @@ export class EmployeeListComponent implements OnInit
 
   editEmployee(id: number)
   {
-    
+    this.router.navigate(["/employee/" + id, { editMode: true }
+    ]);
   }
 }

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

@@ -9,13 +9,13 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="id">Id</label>
         <div class="col-sm-10">
-          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="id" id="id" [readOnly]="!editMode" type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="id" id="id" readonly type="text">
         </div>
       </div>
       <div class="form-group row">
         <label class="col-sm-2 col-form-label" for="employeeId">employeeId</label>
         <div class="col-sm-10">
-          <input class="form-control-plaintext" formControlName="employeeId" id="employeeId" readonly type="text">
+          <input [ngClass]="(editMode==true)?'form-control':'form-control-plaintext'" formControlName="employeeId" id="employeeId" readonly type="text">
         </div>
       </div>
 

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from "@angular/core";
-import {FormControl, FormGroup} from "@angular/forms";
+import {FormBuilder} from "@angular/forms";
 import {ActivatedRoute, Router} from "@angular/router";
 import {NgxSpinnerService} from "ngx-spinner";
 import {Employee} from "src/app/employee-list/employee";
@@ -13,34 +13,36 @@ import {EmployeeService} from "src/app/employee-list/employee.service";
 export class EmployeeViewComponent implements OnInit
 {
   employee: Employee;
-  editMode: boolean;
+  editMode: boolean=false;
 
-  employeeForm = new FormGroup({
-    id: new FormControl({value: '', disabled: true}),
-    employeeId: new FormControl({value: '', disabled: true}),
-    firstName: new FormControl(''),
-    lastName: new FormControl(''),
-    email: new FormControl(''),
-    phone: new FormControl(''),
-    salary: new FormControl(''),
-    location: new FormControl(''),
+  employeeForm = this.formBuilder.group({
+    id: [{disabled: true}],
+    employeeId: [{ disabled: true}],
+    firstName: [''],
+    lastName: [''],
+    email: [''],
+    phone: [''],
+    salary: [''],
+    location: [''],
   });
 
+
   constructor(private employeeService:EmployeeService,
+              private formBuilder:FormBuilder,
               private activatedRoute:ActivatedRoute,
               private router:Router,
               private ngxSpinnerService:NgxSpinnerService)
   { }
 
   ngOnInit()
   {
-    this.editMode=false;
     this.getEmployeeDetails();
   }
 
   private getEmployeeDetails()
   {
     let id=this.activatedRoute.snapshot.params.id;
+
     this.ngxSpinnerService.show();
     this.employeeService.getEmployeeById('http://localhost:8081/api/v1/employee/find/'+id).subscribe(
       data=>
@@ -58,6 +60,7 @@ export class EmployeeViewComponent implements OnInit
             location: data.location,
           });
         this.ngxSpinnerService.hide();
+        this.activatedRoute.snapshot.params.editMode=='true'?this.editMode=true:this.editMode=false;
       },
       error1 =>
       {
@@ -75,7 +78,7 @@ export class EmployeeViewComponent implements OnInit
   {
     this.ngxSpinnerService.show();
 
-    console.error(this.employeeForm.value);
+    console.info(this.employeeForm.value);
     let employee=this.employeeForm.value;
 
     this.employeeService.updateEmployee('http://localhost:8081/api/v1/employee/update', employee).subscribe(