Employee - Submit Timesheet

The following image shows the Timesheet View for a specific time period and employee. From this view, an employee can submit a Timesheet for each time period.

Back-end Changes

com.fastcode.timesheetapp1.restcontrollers.extended.TimesheetControllerExtended.java

When the Timesheet is submitted, change it's status. Add the method updateTimesheetStatus. Also create two new permissions, SUBMIT_TIMESHEET and CHANGE_TIMESHEET_STATUS, to secure the method updateTimesheetStatus.

@RequestMapping(value = "/{id}/updateTimesheetStatus", method = RequestMethod.PUT, consumes = {"application/json"}, produces = {"application/json"})
    
public ResponseEntity<UpdateTimesheetOutput> updateTimesheetStatus(@PathVariable Long id, @RequestBody UpdateStatus input,HttpServletRequest request) throws Exception

Get and display the Timesheetdetails for an employee for a specific time period.

In the section Employee - Daily Timesheet we have already added the method findTimesheetByDate shown below.

@RequestMapping(value = "/getTimesheet", method = RequestMethod.GET, consumes = {"application/json"}, produces = {"application/json"})


public ResponseEntity<TimesheetOutput> findTimesheetByDate(@RequestParam("date") String date, @RequestParam("includeDetails") Boolean includeDetails, @RequestParam(value="userId", required=false) Long userId,HttpServletRequest request)

Front-end Changes

Create the TimesheetDetails angular-component.

Create the TimesheetDetails angular component under src\app\extended\timesheet-module.

(i) timesheet-details\timesheet-details.component.html
(ii) timesheet-details\timesheet-details.component.scss
(iii) timesheet-details\timesheet-details.component.ts

Add the component's entry in entities array in the timesheet.module.ts file that we created in the Employee - Daily Timesheet section.

import { TimesheetDetailsComponent } from 'src/app/extended/timesheet-module/timesheet-details/timesheet-details.component';

const entities = [TimesheetDetailsComponent]

Add the component's entry in the routes array in the timesheet.routing.ts file that we created in the Employee - Daily Timesheet section.

import { TimesheetDetailsComponent } from 'src/app/extended/timesheet-module/timesheet-details/timesheet-details.component';

const routes: Routes = [
{ path: "timesheet-details", component: TimesheetDetailsComponent , canActivate: [ AuthGuard ] }];

Add the following method in src/app/extended/entities/timesheet/timesheet.service.ts.

setTimesheetStatus(timesheetid:number, input) {
    return this.http.put(`${this.url}/${timesheetid}/updateTimesheetStatus`, input).pipe(catchError(this.handleError));
  }

Add a link in main-navbar:

The code should be added in src/app/extended/core/main-nav/main-nav.component.html inside tag.

<a mat-list-item class="sidenav-list-item" routerLink="timesheet-details" *ngIf="permissions['FILL_TIMESHEET']">
        <i class="material-icons">
          access_time
        </i> &nbsp; {{'TIMESHEET.TIMESHEET_VIEW' | translate}}</a>

Add a link in main-navbar TS file

Add CHANGE_TIMESHEET_STATUS permission in perm array in setPermission method in the file src/app/extended/core/main-nav/main-nav.component.ts.

Note: Remove TIMESHEETSTATUSENTITY_UPDATE.

setPermissions() {
        …….
        let perms = ["CHANGE_TIMESHEET_STATUS"]
}

Turn the Submit button on/off based on the status of the Timesheet.

(i) Add the following HTML code in src/app/extended/timesheet-module/timesheet/timesheet.component.html.

<button 
  *ngIf="!userid"
[disabled]="!editable"
(click)="changeTimeSheetStatus('Submitted')"
class="timesheetbutton"
mat-raised-button 
color="primary"
>
{{'TIMESHEET.SUBMIT' | translate}}
</button>

(ii) Make the following code changes in the file src/app/extended/timesheet-module/timesheet/timesheet.component.ts.

this.editable = 
      ( !this.userid && this.timesheet &&
        ( this.timesheet.timesheetstatusDescriptiveField === 'Open' ||
          this.timesheet.timesheetstatusDescriptiveField === 'Rejected'
        )
      ) ||
      (
        this.userid && this.timesheet && this.timesheet.timesheetstatusDescriptiveField === 'Submitted'
      );