feat: TT-141 Create flag in the TimeEntries component to control whether it is a new entry or an existing one and persist the data in the form, create their respective tests

Author: VanessaIniguezG

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

@@ -171,7 +171,6 @@ describe('DetailsFieldsComponent', () => {
 
   it('should emit ngOnChange without data', () => {
     component.entryToEdit = null;
-    component.isEdit = true;
     component.ngOnChanges();
     expect(component.shouldRestartEntry).toBeFalse();
     expect(component.entryForm.value).toEqual(initialData);
@@ -193,7 +192,6 @@ describe('DetailsFieldsComponent', () => {
       technology: '',
     };
     component.entryToEdit = null;
-    component.isEdit = true;
     component.ngOnChanges();
     expect(component.entryForm.value).toEqual(formValue);
   });
@@ -445,20 +443,6 @@ describe('DetailsFieldsComponent', () => {
     expect(component.projectSelected.emit).toHaveBeenCalledWith(data);
   });
 
-  it('should clear the form fields', () => {
-    spyOn(component, 'cleanForm');
-    component.isEdit = true;
-    component.ngOnChanges();
-    expect(component.cleanForm).toHaveBeenCalled();
-  });
-
-  it('should persist entry form value', () => {
-    spyOn(component, 'cleanForm');
-    component.isEdit = false;
-    component.ngOnChanges();
-    expect(component.cleanForm).toHaveBeenCalledTimes(0);
-  });
-
   /*
    TODO As part of https://github.com/ioet/time-tracker-ui/issues/424 a new parameter was added to the details-field-component,
    and now these couple of tests are failing. A solution to this error might be generate a Test Wrapper Component. More details here:

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

@@ -30,7 +30,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   keyword = 'search_field';
   @Input() entryToEdit: Entry;
   @Input() canMarkEntryAsWIP: boolean;
-  @Input() isEdit: boolean;
   @Output() saveEntry = new EventEmitter<SaveEntryEvent>();
   @Output() projectSelected = new EventEmitter<ProjectSelectedEvent>();
   @ViewChild('closeModal') closeModal: ElementRef;
@@ -144,9 +143,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         technology: '',
       });
     } else {
-      if (this.isEdit) {
-          this.cleanForm();
-      }
+        this.cleanForm();
     }
   }
 

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

@@ -68,7 +68,6 @@ <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
       <div class="modal-body">
         <app-details-fields
           [entryToEdit]="entry"
-          [isEdit]="isEdit"
           (saveEntry)="saveEntry($event)"
           (projectSelected)="projectSelected($event)"
           [canMarkEntryAsWIP]='canMarkEntryAsWIP'

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

@@ -148,7 +148,6 @@ describe('TimeEntriesComponent', () => {
 
   it('when creating a new entry, then entryId should be null', () => {
     component.newEntry();
-    expect(component.entry).toBe(null);
     expect(component.entryId).toBe(null);
   });
 
@@ -427,4 +426,18 @@ describe('TimeEntriesComponent', () => {
       expect(entryData.customer_name).toContain('ioet Inc.');
     });
   }));
+
+  it('Should the entry be null if the flag is true', () => {
+    component.wasEditingExistingTimeEntry = true;
+    component.newEntry();
+    expect(component.entry).toBe(null);
+  });
+
+  it('Should the input persist the data if the flag is false', () => {
+    const newEntry = { start_date: new Date(), id: '1234', technologies: [], project_name: 'time-tracker' };
+    component.entry = newEntry;
+    component.wasEditingExistingTimeEntry = false;
+    component.newEntry();
+    expect(component.entry).toEqual(newEntry);
+  });
 });

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

@@ -25,25 +25,21 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   message: string;
   idToDelete: string;
   entriesSubscription: Subscription;
+  wasEditingExistingTimeEntry = false;
   canMarkEntryAsWIP = true;
   timeEntriesDataSource$: Observable<DataSource<Entry>>;
   selectedYearAsText: string;
   selectedMonth: number;
   selectedYear: number;
   selectedMonthAsText: string;
-  isEdit: boolean;
-
   constructor(private store: Store<EntryState>, private toastrService: ToastrService, private actionsSubject$: ActionsSubject) {
     this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
   }
-
   ngOnDestroy(): void {
     this.entriesSubscription.unsubscribe();
   }
-
   ngOnInit(): void {
     this.loadActiveEntry();
-
     this.entriesSubscription = this.actionsSubject$.pipe(
       filter((action: any) => (
         action.type === EntryActionTypes.CREATE_ENTRY_SUCCESS ||
@@ -56,42 +52,39 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
     });
   }
-
   newEntry() {
-    this.entry = null;
+    if (this.wasEditingExistingTimeEntry) {
+      this.entry = null;
+    }
+    console.log('Esta es', this.entry);
     this.entryId = null;
     this.store.pipe(select(getTimeEntriesDataSource)).subscribe(ds => {
       this.canMarkEntryAsWIP = !this.isThereAnEntryRunning(ds.data);
     });
   }
-
   private getEntryRunning(entries: Entry[]) {
     const runningEntry: Entry = entries.find(entry => entry.running === true);
     return runningEntry;
   }
-
   private isThereAnEntryRunning(entries: Entry[]) {
     return !!this.getEntryRunning(entries);
   }
-
   editEntry(entryId: string) {
     this.entryId = entryId;
-    this.isEdit = true;
     this.store.pipe(select(getTimeEntriesDataSource)).subscribe(ds => {
       this.entry = ds.data.find((entry) => entry.id === entryId);
       this.canMarkEntryAsWIP = this.isEntryRunningEqualsToEntryToEdit(this.getEntryRunning(ds.data), this.entry)
         || this.isTheEntryToEditTheLastOne(ds.data);
     });
+    this.wasEditingExistingTimeEntry = true;
   }
-
   private isEntryRunningEqualsToEntryToEdit(entryRunning: Entry, entryToEdit: Entry) {
     if (entryRunning && entryToEdit) {
       return entryRunning.id === entryToEdit.id;
     } else {
       return false;
     }
   }
-
   private isTheEntryToEditTheLastOne(entries: Entry[]) {
     if (entries && entries.length > 0) {
       const lastEntry = entries[0];
@@ -100,11 +93,9 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       return false;
     }
   }
-
   private isNewEntry() {
     return this.entryId === null;
   }
-
   saveEntry(event: SaveEntryEvent): void {
     if (this.activeTimeEntry) {
       const startDateAsLocalDate = new Date(event.entry.start_date);
@@ -123,27 +114,25 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.doSave(event);
     }
   }
-
   projectSelected(event: ProjectSelectedEvent): void {
-    this.isEdit = false;
+    this.wasEditingExistingTimeEntry = false;
     this.store.pipe(select(getTimeEntriesDataSource)).subscribe(ds => {
       const dataToUse = ds.data.find(item => item.project_id === event.projectId);
       if (dataToUse && this.isNewEntry()) {
         const startDate = new Date(new Date().setHours(0, 0, 0, 0));
         const entry = {
-          description : dataToUse.description ? dataToUse.description : '',
-          technologies : dataToUse.technologies ? dataToUse.technologies : [],
-          uri : dataToUse.uri ? dataToUse.uri : '',
-          activity_id : dataToUse.activity_id,
-          project_id : dataToUse.project_id,
-          start_date : startDate,
-          end_date : startDate
+          description: dataToUse.description ? dataToUse.description : '',
+          technologies: dataToUse.technologies ? dataToUse.technologies : [],
+          uri: dataToUse.uri ? dataToUse.uri : '',
+          activity_id: dataToUse.activity_id,
+          project_id: dataToUse.project_id,
+          start_date: startDate,
+          end_date: startDate
         };
         this.entry = entry;
       }
     });
   }
-
   doSave(event: SaveEntryEvent) {
     if (this.entryId) {
       event.entry.id = this.entryId;
@@ -155,30 +144,26 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.store.dispatch(new entryActions.CreateEntry(event.entry));
     }
   }
-
   loadActiveEntry() {
     this.store.dispatch(new entryActions.LoadActiveEntry());
     this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
       this.activeTimeEntry = activeTimeEntry;
     });
   }
-
   removeEntry() {
     this.store.dispatch(new entryActions.DeleteEntry(this.idToDelete));
     this.showModal = false;
   }
-
   dateSelected(event: { monthIndex: number; year: number }) {
     this.selectedYear = event.year;
     this.selectedYearAsText = event.year.toString();
     this.selectedMonth = event.monthIndex + 1;
     this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
     this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
   }
-
   openModal(item: any) {
     this.idToDelete = item.id;
     this.message = `Are you sure you want to delete ${item.activity_name}?`;
     this.showModal = true;
   }
-}
+}