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

  1. 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
  1. 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

  1. 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

  1. 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]
  1. 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 ] }];
  1. 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));
  1. 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">
        </i> &nbsp; {{'TIMESHEET.TIMESHEET_VIEW' | translate}}</a>
  1. 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.


setPermissions() {
        let perms = ["CHANGE_TIMESHEET_STATUS"]
  1. 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.

{{'TIMESHEET.SUBMIT' | translate}}

(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'