Strict done!!

overlord/src/app/employee-attendance/employee-attendance-item.ts

@@ -5,9 +5,14 @@ export class EmployeeAttendanceItem {
   attendanceType: AttendanceType;
   prints: string;
   hoursWorked: string;
-  fullDay?: boolean;
+  fullDay: boolean;
 
   public constructor(init?: Partial<EmployeeAttendanceItem>) {
+    this.date = '';
+    this.attendanceType = new AttendanceType();
+    this.prints = '';
+    this.hoursWorked = '';
+    this.fullDay = true;
     Object.assign(this, init);
   }
 }

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -26,11 +26,14 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
 export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
   @ViewChild('employeeElement', { static: true }) employeeElement?: ElementRef;
   public employeeAttendanceObservable = new BehaviorSubject<EmployeeAttendanceItem[]>([]);
-  dataSource: EmployeeAttendanceDataSource;
+  dataSource: EmployeeAttendanceDataSource = new EmployeeAttendanceDataSource(
+    this.employeeAttendanceObservable,
+  );
+
   form: FormGroup;
 
-  info: EmployeeAttendance;
-  attendanceTypes: AttendanceType[];
+  info: EmployeeAttendance = new EmployeeAttendance();
+  attendanceTypes: AttendanceType[] = [];
 
   displayedColumns = ['date', 'status', 'prints'];
 
@@ -52,7 +55,14 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
       employee: '',
       attendances: this.fb.array([]),
     });
-    this.listenToEmployeeValueChanges();
+    // Listen to Employee Value Changes
+    this.employees = (this.form.get('employee') as FormControl).valueChanges.pipe(
+      startWith(null),
+      map((x) => (x !== null && x.length >= 1 ? x : null)),
+      debounceTime(150),
+      distinctUntilChanged(),
+      switchMap((x) => (x === null ? observableOf([]) : this.employeeSer.autocomplete(x))),
+    );
   }
 
   ngOnInit() {
@@ -61,9 +71,13 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
       this.info = data.info;
       this.attendanceTypes = data.attendanceTypes;
-      this.form.get('startDate').setValue(moment(this.info.startDate, 'DD-MMM-YYYY').toDate());
-      this.form.get('finishDate').setValue(moment(this.info.finishDate, 'DD-MMM-YYYY').toDate());
-      this.form.get('employee').setValue(this.info.employee);
+      (this.form.get('startDate') as FormControl).setValue(
+        moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
+      );
+      (this.form.get('finishDate') as FormControl).setValue(
+        moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),
+      );
+      (this.form.get('employee') as FormControl).setValue(this.info.employee);
       this.form.setControl(
         'attendances',
         this.fb.array(
@@ -81,22 +95,12 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.employeeElement.nativeElement.focus();
+      if (this.employeeElement) this.employeeElement.nativeElement.focus();
     }, 0);
   }
 
-  listenToEmployeeValueChanges() {
-    this.employees = this.form.get('employee').valueChanges.pipe(
-      startWith(null),
-      map((x) => (x !== null && x.length >= 1 ? x : null)),
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.employeeSer.autocomplete(x))),
-    );
-  }
-
-  displayFn(employee?: Employee): string | undefined {
-    return employee ? employee.name : undefined;
+  displayFn(employee?: Employee): string {
+    return employee ? employee.name : '';
   }
 
   selected(event: MatAutocompleteSelectedEvent): void {

overlord/src/app/employee-attendance/employee-attendance.service.ts

@@ -18,7 +18,11 @@ const serviceName = 'EmployeeAttendanceService';
 export class EmployeeAttendanceService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
-  get(id: string, startDate: string, finishDate: string): Observable<EmployeeAttendance> {
+  get(
+    id: string | null,
+    startDate: string | null,
+    finishDate: string | null,
+  ): Observable<EmployeeAttendance> {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     const options = { params: new HttpParams() };
     if (startDate !== null) {

overlord/src/app/employee-attendance/employee-attendance.ts

@@ -9,6 +9,10 @@ export class EmployeeAttendance {
   body: EmployeeAttendanceItem[];
 
   public constructor(init?: Partial<EmployeeAttendance>) {
+    this.startDate = '';
+    this.finishDate = '';
+    this.employee = new Employee();
+    this.body = [];
     Object.assign(this, init);
   }
 }