fix: TT-203 Customers Page: review the actions to ResetProjectToEdit … (#659)

* fix: TT-203 Customers Page: review the actions to ResetProjectToEdit and ResetProjectTypeToEdit

* fix: TT-203 add blank lines and change test name

Author: LEON12699

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -12,8 +12,8 @@ import {
 } from 'src/app/modules/customer-management/store';
 import { DataTablesModule } from 'angular-datatables';
 import { ActionsSubject } from '@ngrx/store';
-import { ResetProjectToEdit } from '../../../projects/components/store/project.actions';
-import { ResetProjectTypeToEdit } from '../../../projects-type/store';
+import { ResetProjectToEdit, SetProjectToEdit } from '../../../projects/components/store/project.actions';
+import { ResetProjectTypeToEdit, SetProjectTypeToEdit } from '../../../projects-type/store';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
@@ -58,7 +58,6 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
-
   it('Onclick Edit, if there are changes, the modal must be presented ', () => {
     component.hasChange = true;
     const expectMessage = 'Do you have changes in a client, do you want to discard them?';
@@ -86,6 +85,8 @@ describe('CustomerTableListComponent', () => {
 
     component.editCustomer('1');
 
+    expect(store.dispatch).toHaveBeenCalledWith(new SetProjectToEdit(null));
+    expect(store.dispatch).toHaveBeenCalledWith(new SetProjectTypeToEdit(null));
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectToEdit());
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectTypeToEdit());
   });

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -11,8 +11,9 @@ import {
   LoadCustomers,
   SetCustomerToEdit,
 } from './../../../../store/customer-management.actions';
-import { ResetProjectToEdit } from '../../../projects/components/store/project.actions';
-import { ResetProjectTypeToEdit } from '../../../projects-type/store';
+import { ResetProjectToEdit, SetProjectToEdit } from '../../../projects/components/store/project.actions';
+import { ResetProjectTypeToEdit, SetProjectTypeToEdit } from '../../../projects-type/store';
+
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
@@ -101,6 +102,8 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private resetProjectFieldsToEdit() {
+    this.store.dispatch(new SetProjectTypeToEdit(null));
+    this.store.dispatch(new SetProjectToEdit(null));
     this.store.dispatch(new ResetProjectToEdit());
     this.store.dispatch(new ResetProjectTypeToEdit());
   }

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts

@@ -1,7 +1,7 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-
+import { ReactiveFormsModule } from '@angular/forms';
 import { CreateProjectTypeComponent } from './create-project-type.component';
 import {
   ProjectTypeState,
@@ -40,6 +40,7 @@ describe('InputProjectTypeComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
       declarations: [CreateProjectTypeComponent],
       providers: [FormBuilder, provideMockStore({ initialState: state })],
     }).compileComponents();
@@ -121,6 +122,15 @@ describe('InputProjectTypeComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new CreateProjectType(projectTypeData));
   });
 
+  it('should reset projectTypeForm if projectTypeIdToEdit is null', () => {
+
+    spyOn(component.projectTypeForm, 'reset');
+
+    store.overrideSelector(projectTypeIdToEdit, null);
+    store.refreshState();
+    expect(component.projectTypeForm.reset).toHaveBeenCalled();
+  });
+
   it('should get name using projectTypeForm', () => {
     spyOn(component.projectTypeForm, 'get');
     // tslint:disable-next-line:no-unused-expression

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.ts

@@ -3,7 +3,7 @@ import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
 import { ProjectType } from '../../../../../shared/models';
-import { ProjectTypeState } from '../../store';
+import { projectTypeIdToEdit, ProjectTypeState } from '../../store';
 import { CreateProjectType, ResetProjectTypeToEdit, UpdateProjectType, getProjectTypeById } from '../../store';
 import { getCustomerId } from 'src/app/modules/customer-management/store/customer-management.selectors';
 import { Subscription } from 'rxjs';
@@ -20,6 +20,7 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
   projectTypeToEdit: ProjectType;
   customerId: string;
   getCustomerIdSubscription: Subscription;
+  projectTypeIdToEditSubscription: Subscription;
 
   constructor(private formBuilder: FormBuilder, private store: Store<ProjectTypeState>) {
     this.projectTypeForm = this.formBuilder.group({
@@ -29,6 +30,13 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    const projectTypeIdToEdit$ = this.store.pipe(select(projectTypeIdToEdit));
+    this.projectTypeIdToEditSubscription = projectTypeIdToEdit$.subscribe((projectTypeId: string) => {
+      if (projectTypeId === null) {
+        this.projectTypeForm.reset();
+      }
+    });
+
     const projectType$ = this.store.pipe(select(getProjectTypeById));
     projectType$.subscribe((projectType) => {
       this.projectTypeToEdit = projectType;
@@ -79,6 +87,7 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.getCustomerIdSubscription.unsubscribe();
+    this.projectTypeIdToEditSubscription.unsubscribe();
   }
 
   onInputChangeProjectType(searchValue: string): void {

src/app/modules/customer-management/components/projects-type/store/project-type.selectors.ts

@@ -5,11 +5,11 @@ import { ProjectTypeState } from './project-type.reducers';
 const getProjectTypeState = createFeatureSelector<ProjectTypeState>('projectType');
 
 export const allProjectTypes = createSelector(getProjectTypeState, (state: ProjectTypeState) => {
-  return state.data;
+  return state?.data;
 });
 
 export const projectTypeIdToEdit = createSelector(getProjectTypeState, (state: ProjectTypeState) => {
-  return state.projectTypeIdToEdit;
+  return state?.projectTypeIdToEdit;
 });
 
 export const getProjectTypeById = createSelector(