fix: TT-282 removed option empty and added method activateFocus

Author: kevinjlope

src/app/modules/time-clock/components/entry-fields/entry-fields.component.html

@@ -6,9 +6,9 @@
       class="form-control"
       formControlName="activity_id"
       [class.is-invalid]="activity_id.invalid && activity_id.touched"
+      #autofocus      
       required>
-      <option value="" selected="selected"></option>
-      <option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
+      <option *ngFor="let activity of activities" value="{{ activity.id }}" class = "id">{{ activity.name }}</option>
     </select>
   </div>
 

src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts

@@ -557,6 +557,37 @@ describe('EntryFieldsComponent', () => {
       expect(featureToggleGeneralService.isActivated).toHaveBeenCalled();
     });
   });
+
+  it('when a activity is not register in DB should show activatefocus in select activity', () => {
+    const activitiesMock  = [{
+      id: 'xyz',
+      name: 'test',
+      description : 'test1'
+    }];
+    const data = {
+      activity_id: 'xyz',
+      description: '',
+      start_date: moment().format(DATE_FORMAT_YEAR),
+      start_hour: moment().format('HH:mm'),
+      uri: ''
+    };
+    component.activities = activitiesMock;
+    component.entryForm.patchValue({
+      description: data.description,
+      uri: data.uri,
+      activity_id: data.activity_id,
+      start_date: data.start_date,
+      start_hour: data.start_hour,
+    });
+    component.ngOnInit();
+    component.activateFocus();
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      const autofocus = fixture.nativeElement.querySelector('select');
+      expect(autofocus).toHaveBeenCalled();
+    });
+  });
 });
 
 

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -2,7 +2,7 @@ import { FeatureToggleGeneralService } from './../../../shared/feature-toggles/f
 import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions';
 import { EntryActionTypes, LoadActiveEntry, UpdateCurrentOrLastEntry, UpdateEntry, UpdateEntryRunning } from './../../store/entry.actions';
 import { filter} from 'rxjs/operators';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Store, ActionsSubject, select } from '@ngrx/store';
 import { Activity, NewEntry } from '../../../shared/models';
@@ -19,6 +19,8 @@ import { DATE_FORMAT } from 'src/environments/environment';
 import { Subscription,  } from 'rxjs';
 import { FeatureToggle } from './../../../../../environments/enum';
 import { CookieService } from 'ngx-cookie-service';
+import { head } from 'lodash';
+import { __await } from 'tslib';
 
 type Merged = TechnologyState & ProjectState & ActivityState;
 
@@ -28,6 +30,9 @@ type Merged = TechnologyState & ProjectState & ActivityState;
   styleUrls: ['./entry-fields.component.scss'],
 })
 export class EntryFieldsComponent implements OnInit, OnDestroy {
+
+  @ViewChild('autofocus') autofocus!: ElementRef<HTMLSelectElement>;
+
   entryForm: FormGroup;
   selectedTechnologies: string[] = [];
   activities: Activity[] = [];
@@ -46,7 +51,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
     private actionsSubject$: ActionsSubject,
     private toastrService: ToastrService,
     private featureToggleGeneralService: FeatureToggleGeneralService,
-    private cookiesService: CookieService
+    private cookiesService: CookieService,
   ) {
     this.entryForm = this.formBuilder.group({
       description: '',
@@ -60,7 +65,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.store.dispatch(new LoadActivities());
     this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear()));
-    this.loadActivitiesSubscription = this.actionsSubject$
+    this.loadActivitiesSubscription =  this.actionsSubject$
       .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS))
       .subscribe((action) => {
         this.activities = action.payload.filter((item) => item.status !== 'inactive');
@@ -109,6 +114,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
           start_date: this.activeEntry.start_date,
           start_hour: formatDate(this.activeEntry.start_date, 'HH:mm', 'en'),
         };
+        this.activateFocus();
       });
   }
   get activity_id() {
@@ -117,6 +123,13 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
   get start_hour() {
     return this.entryForm.get('start_hour');
   }
+
+  activateFocus(){
+    if ((this.activities.length > 0) && (this.entryForm.value.activity_id === head(this.activities).id)){
+      this.autofocus.nativeElement.focus();
+    }
+  }
+
   setDataToUpdate(entryData: NewEntry) {
     if (entryData) {
       this.entryForm.patchValue({

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -17,6 +17,7 @@ import { getActiveTimeEntry } from './../../store/entry.selectors';
 import { Activity, } from '../../../shared/models';
 import { LoadActivities } from './../../../activities-management/store/activity-management.actions';
 import { allActivities } from 'src/app/modules/activities-management/store/activity-management.selectors';
+import { head } from 'lodash';
 
 @Component({
   selector: 'app-project-list-hover',
@@ -99,7 +100,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
       start_date: new Date().toISOString(),
       timezone_offset: new Date().getTimezoneOffset(),
       technologies: [],
-      activity_id: this.activities[0].id,
+      activity_id: head(this.activities).id,
     };
     this.store.dispatch(new entryActions.ClockIn(entry));
     this.projectsForm.setValue({ project_id: `${customerName} - ${name}` });