Employee View component added

Author: pavankjadda

src/main/webapp/spring-data-ui/src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from "@angular/core";
 import {RouterModule, Routes} from "@angular/router";
+import {EmployeeViewComponent} from "src/app/employee-view/employee-view.component";
 import {EmployeeListComponent} from "./employee-list/employee-list.component";
 import {EmployeeProjectComponent} from "./employee-project/employee-project.component";
 import {LogoutComponent} from "./logout/logout.component";
@@ -9,6 +10,10 @@ const routes: Routes = [
     path: 'employee/list',
     component: EmployeeListComponent
   },
+  {
+    path: 'employee/:id',
+    component: EmployeeViewComponent
+  },
   {
     path: 'employee_project/list',
     component: EmployeeProjectComponent

src/main/webapp/spring-data-ui/src/app/app.module.ts

@@ -1,12 +1,14 @@
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {APP_INITIALIZER, NgModule} from "@angular/core";
+import {ReactiveFormsModule} from "@angular/forms";
 import {BrowserModule} from "@angular/platform-browser";
 import {NgxSpinnerModule} from "ngx-spinner";
 
 import {AppRoutingModule} from "./app-routing.module";
 import {AppComponent} from "./app.component";
 import {EmployeeListComponent} from "./employee-list/employee-list.component";
 import {EmployeeProjectComponent} from "./employee-project/employee-project.component";
+import {EmployeeViewComponent} from "./employee-view/employee-view.component";
 import {TokenInterceptor} from "./interceptors/token-interceptor";
 import {KeycloakService} from "./keycloak/keycloak.service";
 import {LogoutComponent} from "./logout/logout.component";
@@ -19,10 +21,12 @@ export function kcFactory(keycloakService: KeycloakService) {
     AppComponent,
     EmployeeListComponent,
     LogoutComponent,
-    EmployeeProjectComponent
+    EmployeeProjectComponent,
+    EmployeeViewComponent
   ],
   imports: [
     BrowserModule,
+    ReactiveFormsModule,
     AppRoutingModule,
     HttpClientModule,
     NgxSpinnerModule

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

@@ -14,20 +14,23 @@
       <th scope="col">Phone</th>
       <th scope="col">Salary</th>
       <th scope="col">Location</th>
-      <th scope="col">Action</th>
+      <th scope="col">Actions</th>
     </tr>
     </thead>
     <tbody *ngFor="let employee of employees">
     <tr>
-      <td>{{employee.id}}</td>
+      <td> <a routerLink="/employee/{{employee.id}}">{{employee.id}}</a></td>
       <td>{{employee.employeeId}}</td>
       <td>{{employee.firstName}}</td>
       <td>{{employee.lastName}}</td>
       <td>{{employee.email}}</td>
       <td>{{employee.phone}}</td>
       <td>${{employee.salary}}</td>
       <td>{{employee.location}}</td>
-      <td><button (click)="deleteEmployee(employee.id)" class="btn btn-danger">Delete</button></td>
+      <td>
+        <button (click)="editEmployee(employee.id)" class="btn btn-primary" style="margin-right: 10px">Edit</button>
+        <button (click)="deleteEmployee(employee.id)" class="btn btn-danger">Delete</button>
+      </td>
     </tr>
     </tbody>
   </table>

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

@@ -101,4 +101,9 @@ export class EmployeeListComponent implements OnInit
       }
     );
   }
+
+  editEmployee(id: number)
+  {
+    
+  }
 }

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

@@ -14,6 +14,10 @@ export class EmployeeService {
     return this.httpClient.get<Employee[]>(url);
   }
 
+  getEmployeeById(url:string)
+  {
+    return this.httpClient.get<Employee>(url);
+  }
   updateEmployee(url: string)
   {
     return this.httpClient.get<Employee[]>(url);

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

@@ -0,0 +1,72 @@
+<ngx-spinner bdColor="rgba(51,51,51,0.8)" color="#fff" size="medium" type="ball-scale-multiple">
+  <p style="font-size: 20px; color: white">Loading...</p>
+</ngx-spinner>
+
+<br/> <br/>
+<div class="container container-fluid">
+  <div>
+    <form [formGroup]="employeeForm">
+      <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">
+        </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">
+        </div>
+      </div>
+
+      <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">
+        </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">
+        </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">
+        </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">
+        </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">
+        </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">
+        </div>
+      </div>
+
+    </form>
+  </div>
+
+  <div class="container container-fluid">
+    <h5>
+      <button [routerLink]="['/']" class="btn btn-primary">Back</button>
+    </h5>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,65 @@
+import {Component, OnInit} from "@angular/core";
+import {FormControl, FormGroup} from "@angular/forms";
+import {ActivatedRoute} 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";
+
+@Component({
+  selector: 'app-employee-view',
+  templateUrl: './employee-view.component.html',
+  styleUrls: ['./employee-view.component.css']
+})
+export class EmployeeViewComponent implements OnInit
+{
+  employee: Employee;
+  employeeForm = new FormGroup({
+    id: new FormControl({value: '', disabled: true}),
+    employeeId: new FormControl(''),
+    firstName: new FormControl(''),
+    lastName: new FormControl(''),
+    email: new FormControl(''),
+    phone: new FormControl(''),
+    salary: new FormControl(''),
+    location: new FormControl(''),
+  });
+
+  constructor(private employeeService:EmployeeService,
+              private activatedRoute:ActivatedRoute,
+              private ngxSpinnerService:NgxSpinnerService)
+  { }
+
+  ngOnInit()
+  {
+    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=>
+      {
+        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.ngxSpinnerService.hide();
+      },
+      error1 =>
+      {
+        this.ngxSpinnerService.hide();
+      }
+    );
+  }
+}