fix: TT-29 Clean the form if the customer is removed (#662)

* fix: TT-29 Clean the form if the customer is removed

* fix: TT-29

* fix: TT-29 refactor function

Author: LEON12699

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -70,7 +70,6 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.store.dispatch(new LoadProjectTypes(customerData.id));
       this.store.dispatch(new LoadCustomerProjects(customerData.id));
       this.changeValueAreTabsActives.emit(true);
-      this.hasChangedEvent.emit(this.hasChange = false);
       this.customerForm.setValue({
         name: customerData.name,
         description: customerData.description,
@@ -81,6 +80,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.markTabsAsInactive();
       this.customerForm.reset();
     }
+    this.hasChangedEvent.emit((this.hasChange = false));
   }
 
   markTabsAsInactive() {

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

@@ -8,6 +8,7 @@ import {
   CustomerState,
   DeleteCustomer,
   LoadCustomers,
+  ResetCustomerToEdit,
   SetCustomerToEdit,
 } from 'src/app/modules/customer-management/store';
 import { DataTablesModule } from 'angular-datatables';
@@ -103,6 +104,17 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new SetCustomerToEdit('1'));
   });
 
+  it('when you click close modal, if the idToEdit is equal currentCustomerIdToEdit should dispatch ResetCustomerToEdit', () => {
+
+    spyOn(store, 'dispatch');
+
+    component.idToEdit = '1';
+    component.currentCustomerIdToEdit = '1';
+    component.closeModal();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new ResetCustomerToEdit());
+  });
+
   it('onClick delete, dispatch DeleteCustomer', () => {
     spyOn(store, 'dispatch');
     component.idToDelete = '1';
@@ -111,6 +123,17 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteCustomer('1'));
   });
 
+  it('onClick delete, if idToDelete is equal to currentCustomerIdToEdit should dispatch ResetCustomerToEdit', () => {
+
+    spyOn(store, 'dispatch');
+
+    component.idToDelete = '1';
+    component.currentCustomerIdToEdit = '1';
+    component.deleteCustomer();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new ResetCustomerToEdit());
+  });
+
   const params = [
     { actionName: 'delete', actionType: CustomerManagementActionTypes.DELETE_CUSTOMER_SUCCESS },
     { actionName: 'update', actionType: CustomerManagementActionTypes.UPDATE_CUSTOMER_SUCCESS },

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

@@ -3,12 +3,16 @@ import { ActionsSubject, select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { delay, filter } from 'rxjs/operators';
-import { getIsLoading } from 'src/app/modules/customer-management/store/customer-management.selectors';
+import {
+  customerIdtoEdit,
+  getIsLoading
+} from 'src/app/modules/customer-management/store/customer-management.selectors';
 import { Customer } from './../../../../../shared/models/customer.model';
 import {
   CustomerManagementActionTypes,
   DeleteCustomer,
   LoadCustomers,
+  ResetCustomerToEdit,
   SetCustomerToEdit,
 } from './../../../../store/customer-management.actions';
 import { ResetProjectToEdit, SetProjectToEdit } from '../../../projects/components/store/project.actions';
@@ -31,9 +35,11 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtElement: DataTableDirective;
   loadCustomersSubscription: Subscription;
   changeCustomerSubscription: Subscription;
+  customerIdToEditSubscription: Subscription;
   showModal = false;
   idToDelete: string;
   idToEdit: string;
+  currentCustomerIdToEdit: string;
   message: string;
   isLoading$: Observable<boolean>;
 
@@ -47,6 +53,12 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
       paging: false,
       responsive: true,
     };
+
+    const customerIdToEdit$ = this.store.pipe(select(customerIdtoEdit));
+    this.customerIdToEditSubscription = customerIdToEdit$.subscribe((customerId: string) => {
+      this.currentCustomerIdToEdit = customerId;
+    });
+
     this.loadCustomersSubscription = this.actionsSubject$
       .pipe(filter((action: any) => action.type === CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS))
       .subscribe((action) => {
@@ -76,6 +88,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   ngOnDestroy() {
     this.loadCustomersSubscription.unsubscribe();
     this.changeCustomerSubscription.unsubscribe();
+    this.customerIdToEditSubscription.unsubscribe();
     this.dtTrigger.unsubscribe();
   }
 
@@ -98,6 +111,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.showModal = false;
     this.changeValueShowCustomerForm.emit(this.showCustomerForm);
     this.resetProjectFieldsToEdit();
+    this.checkResetCustomerToEdit(this.idToEdit);
     this.store.dispatch(new SetCustomerToEdit(this.idToEdit));
   }
 
@@ -109,6 +123,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   deleteCustomer() {
+    if (this.checkResetCustomerToEdit(this.idToDelete)) {
+      this.resetProjectFieldsToEdit();
+    }
     this.store.dispatch(new DeleteCustomer(this.idToDelete));
     this.showModal = false;
   }
@@ -124,6 +141,14 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  private checkResetCustomerToEdit(id: string): boolean {
+    const isResetCustomerToEdit = this.currentCustomerIdToEdit === id;
+    if (isResetCustomerToEdit) {
+      this.store.dispatch(new ResetCustomerToEdit());
+    }
+    return isResetCustomerToEdit;
+  }
+
   openModal(item: Customer) {
     this.idToDelete = item.id;
     this.message = `Are you sure you want to delete ${item.name}?`;

src/app/modules/customer-management/store/customer-management.reducers.ts

@@ -53,6 +53,7 @@ export const customerManagementReducer = (state: CustomerState = initialState, a
         ...state,
         data: [...state.data, action.payload],
         customerId: action.payload.id,
+        customerIdToEdit: action.payload.id,
         isLoading: false,
         message: 'Customer created successfully!',
       };