fix: TT-23 Clear form when adding an entry (Time Entries) (#660)

* fix: TT-23 Clear form when adding an entry (Time Entries)

* fix: TT-23 rename function

Author: LEON12699

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

@@ -141,7 +141,8 @@
         (technologyAdded)="onTechnologiesUpdated($event)"
         (technologyRemoved)="onTechnologiesUpdated($event)"
         [selectedTechnologies]="selectedTechnologies"
-      >
+        #technologies
+        >
       </app-technologies>
 
       <div class="form-group text-left">

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

@@ -169,6 +169,25 @@ describe('DetailsFieldsComponent', () => {
     });
   });
 
+  it('on cleanFieldsForm the project_id and project_name should be kept', () => {
+    const entryFormValueExpected = {
+      ...formValues,
+      activity_id: '',
+      uri: '',
+      start_date: formatDate(new Date(), DATE_FORMAT, 'en'),
+      end_date: formatDate(new Date(), DATE_FORMAT, 'en'),
+      start_hour: '00:00',
+      end_hour: '00:00',
+      description: '',
+      technology: '',
+    };
+
+    component.entryForm.setValue(formValues);
+    component.cleanFieldsForm();
+
+    expect(component.entryForm.value).toEqual(entryFormValueExpected);
+  });
+
   it('should emit ngOnChange without data', () => {
     component.entryToEdit = null;
     component.ngOnChanges();

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

@@ -19,6 +19,7 @@ import { SaveEntryEvent } from './save-entry-event';
 import { ProjectSelectedEvent } from './project-selected-event';
 import { get } from 'lodash';
 import { DATE_FORMAT } from 'src/environments/environment';
+import { TechnologiesComponent } from '../technologies/technologies.component';
 
 type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
 @Component({
@@ -33,6 +34,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   @Output() saveEntry = new EventEmitter<SaveEntryEvent>();
   @Output() projectSelected = new EventEmitter<ProjectSelectedEvent>();
   @ViewChild('closeModal') closeModal: ElementRef;
+  @ViewChild('technologies', { static: true }) technologies: TechnologiesComponent;
   entryForm: FormGroup;
   selectedTechnologies: string[] = [];
   isLoading = false;
@@ -151,11 +153,14 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     }
   }
 
-  cleanForm() {
+  cleanForm(skipProject: boolean = false): void {
     this.selectedTechnologies = [];
-    this.entryForm.setValue({
-      project_name: '',
-      project_id: '',
+    this.technologies.query = '';
+    const projectNameField = this.project_name.value;
+    const projectName = get(projectNameField, 'search_field', projectNameField);
+    this.entryForm.reset({
+      project_name: skipProject ? projectName : '',
+      project_id: skipProject ? this.project_id.value : '',
       activity_id: '',
       description: '',
       start_date: formatDate(new Date(), DATE_FORMAT, 'en'),
@@ -167,6 +172,10 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     });
   }
 
+  cleanFieldsForm(): void {
+    this.cleanForm(true);
+  }
+
   onTechnologiesUpdated($event: string[]) {
     this.selectedTechnologies = $event;
   }

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

@@ -64,13 +64,17 @@
     <div class="modal-content" cdkDrag (cdkDragEnded)="resetDraggablePosition($event)">
       <div class="modal-header" cdkDragHandle>
         <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
+        <button type="button" class="btn" (click)="detailsFields.cleanFieldsForm()">
+          <i class="fa fa-undo" aria-hidden="true"></i>
+        </button>
       </div>
       <div class="modal-body">
         <app-details-fields
           [entryToEdit]="entry"
           (saveEntry)="saveEntry($event)"
           (projectSelected)="projectSelected($event)"
           [canMarkEntryAsWIP]='canMarkEntryAsWIP'
+          #detailsFields
         >
         </app-details-fields>
       </div>