Added Employee detail component, Request component integtration with …

…Employee and request service

src/main/java/com/sba6/srm/controller/RequestController.java

@@ -98,5 +98,11 @@ public ResponseEntity createRequest(@RequestBody Request newRequest){
 		return new ResponseEntity(HttpStatus.OK);
 	}
 
+	//5. Get employee details GET/api/emp/{empId}
+	@RequestMapping(value="/api/emp/{empId}", method = RequestMethod.GET)
+	public Employee getEmployee(@PathVariable Long empId){
+		return employeeService.getEmployee(empId);
+	}
+
 
 }

src/main/java/com/sba6/srm/service/EmployeeService.java

@@ -19,5 +19,6 @@ public class EmployeeService {
 	public Employee getEmployee(Long id){
 		return employeeRepository.findAll().stream().filter(e -> e.getId().equals(id)).findFirst().get();
 	}
+
 
 }

src/main/java/com/sba6/srm/service/RequestService.java

@@ -15,8 +15,6 @@ public class RequestService {
 
 	@Autowired
 	private RequestRepository requestRepository;
-	@Autowired
-	private EmployeeService employeeService;
 
 	public void addRequest(Request request){
 		requestRepository.save(request);

src/main/web-app/src/app/base-view/base-view.component.html

@@ -1,6 +1,3 @@
-<p>
-  base-view works!
-</p>
 <app-employee-detail></app-employee-detail>
 <mat-divider></mat-divider>
 <nav mat-tab-nav-bar color="primary" backgroundColor="primary">

src/main/web-app/src/app/employee-detail/employee-detail.component.css

@@ -0,0 +1,8 @@
+.employee-card {
+  max-width: 200px;
+}
+
+.employee-header-image {
+  background-image: url('../../assets/images/employeeImage.png');
+  background-size: cover;
+}

src/main/web-app/src/app/employee-detail/employee-detail.component.html

@@ -1,3 +1,13 @@
-<p>
-  employee-detail works!
-</p>
+<mat-card class="employee-card">
+  <mat-card-header>
+    <div mat-card-avatar class="employee-header-image"></div>
+    <mat-card-title>{{employee.firstName +' '+ employee.lastName}}</mat-card-title>
+    <mat-card-subtitle>{{employee.designation}}</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src='../../assets/images/employeeImage.png' alt="Batman" height="200px" width="50px">
+  <mat-card-content>
+    <p><b>Name : </b>{{employee.firstName +' '+ employee.lastName}}</p>
+    <p><b>Designation : </b>{{employee.designation}}</p>
+    <p><b>Department : </b>{{employee.department}}</p>
+  </mat-card-content>
+</mat-card>

src/main/web-app/src/app/employee-detail/employee-detail.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { EmployeeService } from '../services/employee.service';
+import { Employee } from '../models/employee';
+import { MatCard } from '@angular/material';
 
 @Component({
   selector: 'app-employee-detail',
@@ -7,9 +10,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EmployeeDetailComponent implements OnInit {
 
-  constructor() { }
+  employee: Employee;
+
+  constructor(public employeeService: EmployeeService) { }
 
   ngOnInit() {
+    this.employeeService.getEmployee(1003).subscribe(result => {
+      this.employee = result;
+      console.log(this.employee);
+    });
   }
 
 }

src/main/web-app/src/app/manager-dashboard/manager-dashboard.component.ts

@@ -1,44 +1,41 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
-import {MatDialog} from '@angular/material';
-
-import{GenericDialogComponent} from '../generic-dialog/generic-dialog.component';
-import{DisplayDataDialogComponent} from '../display-data-dialog/display-data-dialog.component';
-
+import { MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import { MatDialog} from '@angular/material';
+import { GenericDialogComponent} from '../generic-dialog/generic-dialog.component';
+import { DisplayDataDialogComponent} from '../display-data-dialog/display-data-dialog.component';
 import { RequestService } from '../services/request.service';
 import { RequestData } from '../models/request-data';
 import { requestStatusMap } from '../constants';
+
 @Component({
   selector: 'app-manager-dashboard',
   templateUrl: './manager-dashboard.component.html',
   styleUrls: ['./manager-dashboard.component.css']
 })
+
 export class ManagerDashboardComponent implements OnInit {
-  reqData : RequestData[];
-  comment:string;
-  displayedColumns: string[] = ['id', 'reqDesc', 'empId', 'status','action'];
+  reqData: RequestData[];
+  comment: string;
+  displayedColumns: string[] = ['id', 'reqDesc', 'empId', 'status', 'action'];
   dataSource: MatTableDataSource<RequestData>;
-  requestStatusMap=requestStatusMap;
-  
+  requestStatusMap= requestStatusMap;
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(public dialog: MatDialog, public requestService: RequestService) {
-    
+
   }
 
   ngOnInit() {
-    this.requestService.getRequests(1001).subscribe(result=> {
+    this.requestService.getRequests(1001).subscribe(result => {
       this.reqData=result
       console.log(this.reqData);
     // Assign the data to the data source for the table to render
       this.dataSource = new MatTableDataSource(this.reqData);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
     });
-
-
   }
 
   applyFilter(filterValue: string) {
@@ -49,8 +46,8 @@ export class ManagerDashboardComponent implements OnInit {
     }
   }
 
-  onSubmit(request:RequestData,action:string){
-    const dialogRef = this.dialog.open(GenericDialogComponent,{
+  onSubmit(request: RequestData, action: string) {
+    const dialogRef = this.dialog.open(GenericDialogComponent, {
       height: '250px',
       width: '600px',
     });
@@ -59,33 +56,31 @@ export class ManagerDashboardComponent implements OnInit {
       });
 
     dialogRef.afterClosed().subscribe((result) => {
-        dialogRef.componentInstance.onAdd.unsubscribe(); 
-        if(result){
-
-        request.requestStatus=action;
-        request.comment=this.comment;
-        console.log(request);
-        this.requestService.updateRequest(request).subscribe();
-
+        dialogRef.componentInstance.onAdd.unsubscribe();
+        if (result) {
+          request.requestStatus = action;
+          request.comment = this.comment;
+          console.log(request);
+          this.requestService.updateRequest(request).subscribe();
         }
     });
   }
 
-  onAccept(request:RequestData){
-    this.onSubmit(request,requestStatusMap.get('APPROVED'));
+  onAccept(request: RequestData) {
+    this.onSubmit(request, requestStatusMap.get('APPROVED'));
   }
 
-  onReject(request:RequestData){
-    this.onSubmit(request,requestStatusMap.get('REJECTED'));
+  onReject(request: RequestData) {
+    this.onSubmit(request, requestStatusMap.get('REJECTED'));
   }
 
-  onMeet(request:RequestData){
-    this.onSubmit(request,requestStatusMap.get('PENDING'));
+  onMeet(request: RequestData) {
+    this.onSubmit(request, requestStatusMap.get('PENDING'));
   }
 
-  viewReqDescription(row:RequestData){
-    const dialogRef = this.dialog.open(DisplayDataDialogComponent,{
-      data:{value:row.requestDescription}
+  viewReqDescription(row: RequestData) {
+    const dialogRef = this.dialog.open(DisplayDataDialogComponent, {
+      data: {value: row.requestDescription}
     });
   }
 

src/main/web-app/src/app/material.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import{MatDividerModule,MatTableModule,MatFormFieldModule,MatIconModule,MatDialogModule,
     MatSortModule,MatPaginatorModule,MatSelectModule,MatOptionModule,MatTooltipModule,
-    MatButtonModule,MatInputModule,MatTabsModule } from '@angular/material';
+    MatButtonModule,MatInputModule,MatTabsModule, MatCardModule } from '@angular/material';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
   @NgModule({
@@ -19,7 +19,8 @@ import{MatDividerModule,MatTableModule,MatFormFieldModule,MatIconModule,MatDialo
       MatIconModule,
       MatDialogModule,
       MatInputModule,
-      MatTabsModule
+      MatTabsModule,
+      MatCardModule
     ],
     exports:[BrowserAnimationsModule,
         MatDividerModule,
@@ -34,7 +35,8 @@ import{MatDividerModule,MatTableModule,MatFormFieldModule,MatIconModule,MatDialo
         MatIconModule,
         MatDialogModule,
         MatInputModule,
-        MatTabsModule
+        MatTabsModule,
+        MatCardModule
       ]
   })
 export class MaterialModules{

src/main/web-app/src/app/models/employee.ts

@@ -1,13 +1,13 @@
 import {RequestData} from './request-data';
 import {LoginDetail} from './login-detail';
 export class Employee{
-   id:number;
-   firstName:string;
-   lastName:string;
-   mgrId:number;
-   designation:string;
-   department:string;
-   img:Blob;
-   loginDetail:LoginDetail;
-   request:RequestData[];
+   id: number;
+   firstName: string;
+   lastName: string;
+   mgrId: number;
+   designation: string;
+   department: string;
+   img: Blob;
+   loginDetail: LoginDetail;
+   request: RequestData[];
 }

src/main/web-app/src/app/request/request.component.html

@@ -24,7 +24,7 @@
     <ng-container matColumnDef="action">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
       <td mat-cell *matCellDef="let row" class="manager-icons" >
-        <button  mat-icon-button color="primary" (click)="onCancel(row)">
+        <button  mat-icon-button color="primary" (click)="onCancel(row)" [disabled]="!(row.requestStatus === 'OPEN' || row.requestStatus === 'PENDING')">
           <mat-icon >cancel</mat-icon>
         </button>
       </td>

src/main/web-app/src/app/request/request.component.ts

@@ -12,45 +12,47 @@ import { RequestService } from '../services/request.service';
 
 
 
-
 @Component({
   selector: 'app-request',
   templateUrl: './request.component.html',
   styleUrls: ['./request.component.css']
 })
+
 export class RequestComponent implements OnInit {
-  
-  myEmpId:number;
+
+  myEmpId: number;
   disableAddRequest: boolean; //true if there is any request which is not inactivated
   comment: string;
   displayedColumns: string[] = ['reqDesc', 'status', 'action'];
   dataSource: MatTableDataSource<RequestData>;
 
-  /** Constants used to fill up our data base. */
   reqData: RequestData[] = [];
 
 
   @ViewChild(MatSort) sort: MatSort;
 
 
   constructor(public dialog: MatDialog, public requestService: RequestService) {
-    this.myEmpId = 1004;    
+    this.myEmpId = 1004;
   }
 
 
   ngOnInit() {
-    this.requestService.getRequestsForEmployee(this.myEmpId).subscribe(result => {
-      if (result) {
-        this.reqData.push(result);
-        if (this.reqData.length > 0) {
-          this.disableAddRequest = true;
-        }
-        this.dataSource = new MatTableDataSource(this.reqData);
-        this.dataSource.sort = this.sort;
-      }
-    });
+    this.getRequests();
   }
 
+  getRequests() {
+    this.requestService.getRequestsForEmployee(this.myEmpId).subscribe(result => {
+          if (result) {
+            this.reqData.push(result);
+            if (this.reqData.length > 0) {
+              this.disableAddRequest = true;
+            }
+            this.dataSource = new MatTableDataSource(this.filterRequestData(this.reqData));
+            this.dataSource.sort = this.sort;
+          }
+        });
+  }
 
 
   onCancel(request: RequestData) {
@@ -61,7 +63,8 @@ export class RequestComponent implements OnInit {
     dialogRef.afterClosed().subscribe((result) => {
         dialogRef.componentInstance.onAdd.unsubscribe();
         if (result) {
-          request.requestStatus = "inactivated";
+          request.requestStatus = 'INACTIVATED';
+          this.requestService.updateRequest(request).subscribe();
           this.dataSource.data = this.filterRequestData(this.reqData);
           this.disableAddRequest = false;
         }
@@ -87,32 +90,20 @@ export class RequestComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe((result) => {
       dialogRef.componentInstance.onAdd.unsubscribe();
-      console.log(result);
       if (result) {
-        console.log(this.comment);
         this.requestService.addRequest(this.myEmpId, this.comment).subscribe(
-          response => console.log(response),
+          response => {console.log(response);},
           err => console.log(err)
         );
         this.disableAddRequest = true;
-        console.log(2);
-        //this.dataSource.data = this.filterRequestData(this.reqData);
-        console.log(3);
+        this.getRequests();
+        this.dataSource.data = this.filterRequestData(this.reqData);
       }
     });
   }
 
   filterRequestData(reqData: RequestData[]): RequestData[] {
-    console.log(reqData);
-    console.log(4);
-    if(reqData.length === 0){
-      console.log(5);
-      return null;
-    }
-    else{
-       console.log(6);
-      return reqData.filter(request => request.requestStatus !== 'inactivated'); //i changed it to !== from !=
-    }
+      return reqData.filter(request => request.requestStatus !== 'INACTIVATED'); 
   }
 
 }

src/main/web-app/src/app/services/employee.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EmployeeService } from './employee.service';
+
+describe('EmployeeService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: EmployeeService = TestBed.get(EmployeeService);
+    expect(service).toBeTruthy();
+  });
+});