fix: #172 Create-time-entries-manually fix view

Author: DiegoTinitana

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div *ngIf="formType === 'entries'" class="input-group input-group-sm mb-3 flex-nowrap">
+  <div class="input-group input-group-sm mb-3 flex-nowrap">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -68,7 +68,9 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     const technologies$ = this.store.pipe(select(allTechnologies));
     technologies$.subscribe((response) => {
       this.isLoading = response.isLoading;
-      const filteredItems = response.technologyList.items.filter(item => !this.selectedTechnology.includes(item.name));
+      const filteredItems = response.technologyList.items.filter(
+        (item) => !this.selectedTechnology.includes(item.name)
+      );
       this.technology = { items: filteredItems };
     });
 
@@ -87,7 +89,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
 
   ngOnChanges(): void {
     if (this.entryToEdit) {
-      this.selectedTechnology = this.entryToEdit.technologies;
+      this.selectedTechnology = this.entryToEdit.technologies ? this.entryToEdit.technologies : [];
       this.project = this.listProjects.find((p) => p.id === this.entryToEdit.project_id);
       const activity = this.activities.find((a) => a.id === this.entryToEdit.activity_id);
       this.projectName = this.project.name;
@@ -145,6 +147,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       uri: this.entryForm.value.uri,
     };
     this.saveEntry.emit(entry);
+    this.ngOnChanges();
     this.closeModal.nativeElement.click();
   }
 }

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -11,8 +11,6 @@ import { ProjectListHoverComponent } from '../components';
 import { FilterProjectPipe } from '../../shared/pipes';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 
-import { ActionsSubject } from '@ngrx/store';
-
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;

src/app/modules/time-clock/store/entry.actions.spec.ts

@@ -46,8 +46,11 @@ describe('Actions for Entries', () => {
 
   it('UpdateActiveEntrySuccess type is EntryActionTypes.UDPATE_ACTIVE_ENTRY_SUCCESS', () => {
     const updateActiveEntrySuccess = new actions.UpdateActiveEntrySuccess({
-      project_id: '1',
-      description: 'It is good for learning',
+      id: '1',
+      start_date: new Date(),
+      end_date: new Date(),
+      activity: '',
+      technologies: ['abc', 'abc'],
     });
     expect(updateActiveEntrySuccess.type).toEqual(actions.EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS);
   });

src/app/modules/time-clock/store/entry.actions.ts

@@ -97,7 +97,7 @@ export class UpdateActiveEntry implements Action {
 export class UpdateActiveEntrySuccess implements Action {
   public readonly type = EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS;
 
-  constructor(public payload: NewEntry) {}
+  constructor(public payload: Entry) {}
 }
 
 export class UpdateActiveEntryFail implements Action {

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -11,6 +11,14 @@ describe('entryReducer', () => {
     technologies: ['angular', 'typescript'],
   };
 
+  const newEntry: Entry = {
+    id: '1',
+    start_date: new Date(),
+    end_date: new Date(),
+    activity: '',
+    technologies: ['abc', 'abc'],
+  };
+
   it('on Default, ', () => {
     const action = new actions.DefaultEntry();
     const state = entryReducer(initialState, action);
@@ -124,7 +132,7 @@ describe('entryReducer', () => {
       isLoading: false,
       message: '',
     };
-    const action = new actions.UpdateActiveEntrySuccess(entry);
+    const action = new actions.UpdateActiveEntrySuccess(newEntry);
     const state = entryReducer(currentState, action);
 
     expect(state.isLoading).toEqual(false);

src/app/modules/time-clock/store/entry.reducer.ts

@@ -72,7 +72,7 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       return {
         ...state,
         active: action.payload,
-        entryList: [...state.entryList, action.payload],
+        entryList: [action.payload, ...state.entryList],
         isLoading: false,
         message: 'You clocked-in successfully',
       };
@@ -120,11 +120,12 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
     }
 
     case EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS: {
-      const activeEntry = { ...state.active, ...action.payload };
-
+      const entryList = [...state.entryList];
+      const index = entryList.findIndex((entry) => entry.id === action.payload.id);
+      entryList[index] = action.payload;
       return {
         ...state,
-        active: activeEntry,
+        entryList,
         isLoading: false,
       };
     }

src/app/modules/time-entries/pages/time-entries.component.html

@@ -34,7 +34,7 @@
       >
         <td class="col-sm-3">{{ item.project_id }}</td>
         <td class="col-sm-3">{{ item.time }}</td>
-        <td class="col-sm-3">{{ item.date }}</td>
+        <td class="col-sm-3">{{ item.start_date | date:'dd/MM/yyyy' }}</td>
         <td class="col-sm-3 text-center">
           <button type="button" class="btn btn-sm btn-secondary"
             data-toggle="modal"

src/app/modules/time-entries/pages/time-entries.component.ts

@@ -16,7 +16,7 @@ export class TimeEntriesComponent implements OnInit {
   entryId: string;
   entry: Entry;
   entryToDelete: Entry;
-  dataByMonth: Entry[];
+  dataByMonth = [];
   entryList: Entry[];
 
   constructor(private store: Store<EntryState>) {}
@@ -33,10 +33,9 @@ export class TimeEntriesComponent implements OnInit {
             const startDate = moment(entry.start_date, 'YYYY-MM-DD HH:mm:ss');
             const endDate = moment(entry.end_date, 'YYYY-MM-DD HH:mm:ss');
             const duration: any = moment.duration(endDate.diff(startDate));
-            time = `${duration._data.hours} hour and ${duration._data.minutes} minutes`;
+            time = `${duration._data.hours} hh : ${duration._data.minutes} mm`;
           }
-          const date = moment(entry.start_date).format('YYYY-MM-DD');
-          const item = { ...entry, time, date };
+          const item = { ...entry, time };
           return [...acc, item];
         }
         return [];