fix: TT-141 Have the data persistent in the modal (#639)

* fix: TT-141 Have the data persistent in the modal

* feat: TT-141 Create test to validate the isEdit flag of the DetailsFields component

* 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

* fix: TT-141 Delete test lines and add in the test the method of edited an entry

Author: VanessaIniguez

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

@@ -147,7 +147,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         technology: '',
       });
     } else {
-      this.cleanForm();
+        this.cleanForm();
     }
   }
 

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,20 @@ describe('TimeEntriesComponent', () => {
       expect(entryData.customer_name).toContain('ioet Inc.');
     });
   }));
+
+  it('Should the entry be null if the flag is true', () => {
+    component.wasEditingExistingTimeEntry = true;
+    const idEntry = '1';
+    component.editEntry(idEntry);
+    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,24 +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;
-
   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 ||
@@ -55,41 +52,38 @@ 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;
+    }
     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.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];
@@ -98,11 +92,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);
@@ -121,8 +113,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.doSave(event);
     }
   }
-
   projectSelected(event: ProjectSelectedEvent): void {
+    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()) {
@@ -140,7 +132,6 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       }
     });
   }
-
   doSave(event: SaveEntryEvent) {
     if (this.entryId) {
       event.entry.id = this.entryId;
@@ -152,30 +143,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;
   }
-}
+}