From 6d8b0b5003c99bb4f607f25c902af726e52b3c3c Mon Sep 17 00:00:00 2001
From: Sandro Castillo <blosomsam@gmail.com>
Date: Thu, 18 Mar 2021 16:32:27 -0500
Subject: [PATCH] feat: TT-26 Warn of unsaved changes on customer pag

---
 .../create-customer/create-customer.html      |  2 ++
 .../create-customer/create-customer.spec.ts   | 19 +++++++++++++
 .../create-customer/create-customer.ts        |  8 ++++++
 .../customer-list.component.html              | 18 +++++++++++-
 .../customer-list.component.spec.ts           | 28 ++++++++++++++++++-
 .../customer-list/customer-list.component.ts  | 20 +++++++++++--
 ...anagement-customer-projects.component.html |  5 ++--
 ...gement-customer-projects.component.spec.ts |  9 ++++++
 .../management-customer-projects.component.ts |  6 ++++
 .../create-project-type.component.html        | 20 ++++++++++---
 .../create-project-type.component.spec.ts     | 20 +++++++++++++
 .../create-project-type.component.ts          | 11 +++++++-
 .../create-project.component.html             |  2 ++
 .../create-project.component.spec.ts          | 20 +++++++++++++
 .../create-project.component.ts               |  9 +++++-
 .../pages/customer.component.html             |  3 +-
 .../pages/customer.component.spec.ts          |  9 ++++++
 .../pages/customer.component.ts               |  7 +++++
 18 files changed, 203 insertions(+), 13 deletions(-)

diff --git a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html
index 8279155e5..33b40f522 100644
--- a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html
+++ b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html
@@ -8,6 +8,7 @@
         formControlName="name"
         placeholder="Customer name"
         [class.is-invalid]="customerForm.invalid && customerForm.touched"
+        (input)="onSearchChanges($event.target.value)"
         required
       />
       <span
@@ -23,6 +24,7 @@
         rows="3"
         formControlName="description"
         placeholder="Customer description"
+        (input)="onSearchChanges($event.target.value)"
       ></textarea>
     </div>
       <button type="submit" class="btn btn-primary" [disabled]="!customerForm.valid">Save</button>
diff --git a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts
index df28e9d44..8d531eecb 100644
--- a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts
@@ -140,4 +140,23 @@ describe('CreateCustomerComponent', () => {
     expect(component.changeValueAreTabsActives.emit).toHaveBeenCalledWith(component.areTabsActive);
   });
 
+  it('if detect changes in customer information, it should emit a true', () => {
+    component.haveChanges = true;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('changes text');
+
+    expect(component.haveChanges).toBe(true);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(component.haveChanges);
+  });
+
+  it('if not detect changes in customer information, it should emit a false', () => {
+    component.haveChanges = false;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('');
+
+    expect(component.haveChanges).toBe(false);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(component.haveChanges);
+  });
 });
diff --git a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts
index 9cb14ae8d..6243824c9 100644
--- a/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts
@@ -23,6 +23,8 @@ import { LoadCustomerProjects, CleanCustomerProjects } from '../../../projects/c
 export class CreateCustomerComponent implements OnInit, OnDestroy {
   customerForm: FormGroup;
   @Input() areTabsActive: boolean;
+  @Input() haveChanges: boolean;
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
   @Output() closeCustomerComponent = new EventEmitter<boolean>();
   customerToEdit: Customer;
@@ -68,6 +70,7 @@ 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.isHaveChanges.emit(this.haveChanges = false);
       this.customerForm.setValue({
         name: customerData.name,
         description: customerData.description,
@@ -94,4 +97,9 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ResetCustomerToEdit());
     this.closeCustomerComponent.emit(false);
   }
+
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
+  }
 }
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
index 09b7a0b76..62db0a46f 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
@@ -20,12 +20,15 @@
         <td class="col-3 text-break">{{ customer.name }}</td>
         <td class="col-4 text-center">
           <button
+            data-toggle="modal"
             (click)="editCustomer(customer.id)"
             type="button"
+            data-target="#editModal"
             class="btn btn-sm btn-primary"
           >
-            <i class="fa fa-pencil fa-xs"></i>
+            <i class="fa fa-pen fa-xs"></i>
           </button>
+
           <button
             data-toggle="modal"
             data-target="#deleteModal"
@@ -53,3 +56,16 @@
   (closeModalEvent)="deleteCustomer()"
 >
 </app-dialog>
+
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="editModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Edit Customer'"
+  [body]="message"
+  (closeModalEvent)="closeModal()"
+  >
+</app-dialog>
\ No newline at end of file
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
index ce7548086..11d91d506 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts
@@ -58,13 +58,27 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
-  it('onClick edit, dispatch SetCustomerToEdit and enable customer form', () => {
+
+  it('Onclick Edit, if there are changes, the modal must be presented ', () => {
+    component.haveChanges = true;
+    const expectMessage = 'Do you have changes in a client, do you want to discard them?';
+
+    component.editCustomer('1');
+
+    expect(component.message).toEqual(expectMessage);
+    expect(component.showModal).toBeTrue();
+  });
+
+  it('onClick edit, if there are not have changes dispatch SetCustomerToEdit, enable customer form and hidden modal', () => {
+    component.haveChanges = false;
+
     spyOn(store, 'dispatch');
 
     component.editCustomer('1');
 
     expect(store.dispatch).toHaveBeenCalledWith(new SetCustomerToEdit('1'));
     expect(component.showCustomerForm).toBeTruthy();
+    expect(component.showModal).toBeFalse();
   });
 
   it('onClick edit, dispatch clean Forms in project and project type', () => {
@@ -76,6 +90,18 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectTypeToEdit());
   });
 
+  it('when you click close modal, you should close the modal, discard the current changes and load a new client for edit', () => {
+    spyOn(component.changeValueShowCustomerForm, 'emit');
+    spyOn(store, 'dispatch');
+
+    component.editCustomer('1');
+    component.closeModal();
+
+    expect(component.showModal).toBeFalse();
+    expect(component.changeValueShowCustomerForm.emit).toHaveBeenCalledWith(true);
+    expect(store.dispatch).toHaveBeenCalledWith(new SetCustomerToEdit('1'));
+  });
+
   it('onClick delete, dispatch DeleteCustomer', () => {
     spyOn(store, 'dispatch');
     component.idToDelete = '1';
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
index e5c9785ed..2698b409f 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
@@ -20,6 +20,7 @@ import { ResetProjectTypeToEdit } from '../../../projects-type/store';
 })
 export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() showCustomerForm: boolean;
+  @Input() haveChanges: boolean;
   @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
   @Input()
   customers: Customer[] = [];
@@ -31,6 +32,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   changeCustomerSubscription: Subscription;
   showModal = false;
   idToDelete: string;
+  idToEdit: string;
   message: string;
   isLoading$: Observable<boolean>;
 
@@ -77,10 +79,25 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   editCustomer(customerId: string) {
+    this.idToEdit = customerId;
+    if (this.haveChanges === true) {
+      this.message = 'Do you have changes in a client, do you want to discard them?';
+      this.showModal = true;
+    } else {
+      this.showCustomerForm = true;
+      this.showModal = false;
+      this.changeValueShowCustomerForm.emit(this.showCustomerForm);
+      this.resetProjectFieldsToEdit();
+      this.store.dispatch(new SetCustomerToEdit(customerId));
+    }
+  }
+
+  closeModal() {
     this.showCustomerForm = true;
+    this.showModal = false;
     this.changeValueShowCustomerForm.emit(this.showCustomerForm);
-    this.store.dispatch(new SetCustomerToEdit(customerId));
     this.resetProjectFieldsToEdit();
+    this.store.dispatch(new SetCustomerToEdit(this.idToEdit));
   }
 
   private resetProjectFieldsToEdit() {
@@ -109,5 +126,4 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.message = `Are you sure you want to delete ${item.name}?`;
     this.showModal = true;
   }
-
 }
diff --git a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.html b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.html
index d80e31e81..362c961d2 100644
--- a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.html
+++ b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.html
@@ -55,6 +55,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       <app-create-customer
         [areTabsActive]="areTabsActive"
         (changeValueAreTabsActives)="activeTabs($event)"
+        (isHaveChanges)="getChanges($event)"
         (closeCustomerComponent)="closeCustomer($event)"
       ></app-create-customer>
     </div>
@@ -66,7 +67,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       aria-labelledby="projects-type-tab"
     >
       <div class="container">
-        <app-create-project-type></app-create-project-type>
+        <app-create-project-type (isHaveChanges)="getChanges($event)"></app-create-project-type>
         <app-project-type-list></app-project-type-list>
       </div>
     </div>
@@ -78,7 +79,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       aria-labelledby="projects-tab"
     >
       <div class="container mb-1">
-        <app-create-project></app-create-project>
+        <app-create-project (isHaveChanges)="getChanges($event)"></app-create-project>
         <app-project-list></app-project-list>
       </div>
     </div>
diff --git a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.spec.ts b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.spec.ts
index 697901557..90618e4ee 100644
--- a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.spec.ts
+++ b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.spec.ts
@@ -64,9 +64,18 @@ describe('ManagmentCustomerProjectsComponent', () => {
     component.showTab('projects');
     expect(component.activeTab).toEqual('projects');
   });
+
   it('should call close customer function', () => {
     spyOn(component.closeCustemerForm, 'emit');
     component.closeCustomer(false);
     expect(component.closeCustemerForm.emit).toHaveBeenCalledWith(false);
   });
+
+  it('with changes should emit a true ', () => {
+    spyOn(component.sendChanges, 'emit');
+
+    component.getChanges(true);
+
+    expect(component.sendChanges.emit).toHaveBeenCalledWith(true);
+  });
 });
diff --git a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts
index 83caacb26..97a08e05b 100644
--- a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts
+++ b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts
@@ -10,7 +10,9 @@ import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 })
 export class ManagementCustomerProjectsComponent implements OnInit {
   @Output() closeCustemerForm = new EventEmitter<boolean>();
+  @Output() sendChanges = new EventEmitter<boolean>();
   areTabsActive: boolean;
+  haveChanges: boolean;
   activeTab: string;
   customerName: string;
 
@@ -42,4 +44,8 @@ export class ManagementCustomerProjectsComponent implements OnInit {
     this.activeTab = activeTab;
   }
 
+  getChanges($haveChanges: boolean) {
+    this.haveChanges = $haveChanges;
+    this.sendChanges.emit($haveChanges);
+  }
 }
diff --git a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html
index 69ef61d4e..8cceaf004 100644
--- a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html
+++ b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html
@@ -1,14 +1,26 @@
 <form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
   <div class="form-group">
-    <input type="text" class="form-control form-control-sm" id="name" formControlName="name" aria-describedby=""
-      [class.is-invalid]="name.invalid && name.touched" required placeholder="Name" />
+    <input type="text"class="form-control form-control-sm"
+      id="name"
+      formControlName="name"
+      aria-describedby=""
+      [class.is-invalid]="name.invalid && name.touched"
+      required placeholder="Name"
+      (input)="onSearchChanges($event.target.value)"
+    />
     <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
       Name is required.
     </div>
   </div>
   <div class="form-group">
-    <textarea class="form-control form-control-sm mt-2" id="descriptionTextArea" rows="3" placeholder="Description"
-      formControlName="description"></textarea>
+    <textarea class="form-control
+      form-control-sm mt-2"
+      id="descriptionTextArea"
+      rows="3"
+      placeholder="Description"
+      formControlName="description"
+      (input)="onSearchChanges($event.target.value)"
+    ></textarea>
   </div>
   <button type="submit" class="btn btn-primary" [disabled]="!projectTypeForm.valid">
     Save
diff --git a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts
index 10aca04b2..a80841f26 100644
--- a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts
+++ b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts
@@ -166,4 +166,24 @@ describe('InputProjectTypeComponent', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectTypeToEdit());
   });
+
+  it('if detect changes in create project type , it should emit a true', () => {
+    component.haveChanges = true;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('name project');
+
+    expect(component.haveChanges).toBe(true);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(true);
+  });
+
+  it('if not detect changes in create project type, it should emit a false', () => {
+    component.haveChanges = false;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('');
+
+    expect(component.haveChanges).toBe(false);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.ts b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.ts
index 21b6b18c2..1120a45c1 100644
--- a/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.ts
+++ b/src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
@@ -14,6 +14,8 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./create-project-type.component.scss'],
 })
 export class CreateProjectTypeComponent implements OnInit, OnDestroy {
+  @Input() haveChanges: boolean;
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   projectTypeForm: FormGroup;
   projectTypeToEdit: ProjectType;
   customerId: string;
@@ -63,9 +65,11 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
         id: this.projectTypeToEdit.id,
       };
       this.store.dispatch(new UpdateProjectType(projectType));
+      this.isHaveChanges.emit(this.haveChanges = false);
     } else {
       this.store.dispatch(new CreateProjectType({ ...projectTypeData, customer_id: this.customerId }));
       this.projectTypeForm.get('description').setValue('');
+      this.isHaveChanges.emit(this.haveChanges = false);
     }
   }
 
@@ -76,4 +80,9 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.getCustomerIdSubscription.unsubscribe();
   }
+
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
+  }
 }
diff --git a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html
index 540926cb0..f0738ab33 100644
--- a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html
+++ b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html
@@ -6,6 +6,7 @@
       placeholder="Project name"
       formControlName="name"
       [class.is-invalid]="name.invalid && name.touched"
+      (input)="onSearchChanges($event.target.value)"
     />
     <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
       Project name is required.
@@ -16,6 +17,7 @@
     rows="3"
     formControlName="description"
     placeholder="Description"
+    (input)="onSearchChanges($event.target.value)"
   ></textarea>
   <div class="form-group">
     <select class="custom-select custom-select-sm mt-2" formControlName="project_type_id">
diff --git a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.spec.ts b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.spec.ts
index d4789cc79..dd1899acc 100644
--- a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.spec.ts
+++ b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.spec.ts
@@ -246,4 +246,24 @@ describe('InputProjectComponent', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectToEdit());
   });
+
+  it('if detect changes in create project , it should emit a true', () => {
+    component.haveChanges = true;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('name project');
+
+    expect(component.haveChanges).toBe(true);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(true);
+  });
+
+  it('if not detect changes in create project, it should emit a false', () => {
+    component.haveChanges = false;
+    spyOn(component.isHaveChanges, 'emit');
+
+    component.onSearchChanges('');
+
+    expect(component.haveChanges).toBe(false);
+    expect(component.isHaveChanges.emit).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.ts b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.ts
index 57a07574b..8939ff450 100644
--- a/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.ts
+++ b/src/app/modules/customer-management/components/projects/components/create-project/create-project.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
@@ -16,6 +16,8 @@ import { getCustomerId } from 'src/app/modules/customer-management/store/custome
   styleUrls: ['./create-project.component.scss'],
 })
 export class CreateProjectComponent implements OnInit, OnDestroy {
+  @Input() haveChanges: boolean;
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   projectForm;
   projectToEdit: Project;
   projectsTypes: ProjectType[] = [];
@@ -107,4 +109,9 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
       project_type_id: null,
     });
   }
+
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
+  }
 }
diff --git a/src/app/modules/customer-management/pages/customer.component.html b/src/app/modules/customer-management/pages/customer.component.html
index a97e5d8aa..07b9c16f8 100644
--- a/src/app/modules/customer-management/pages/customer.component.html
+++ b/src/app/modules/customer-management/pages/customer.component.html
@@ -6,11 +6,12 @@
   </div>
   <app-customer-list
     [showCustomerForm]="showCustomerForm"
+    [haveChanges]="haveChanges"
     (changeValueShowCustomerForm)="showCustomerForm = $event"
   ></app-customer-list>
   <div class="row" *ngIf="showCustomerForm">
     <div class="col">
-      <app-management-customer-projects (closeCustemerForm)="closeCustomerForm($event)"></app-management-customer-projects>
+      <app-management-customer-projects (sendChanges)="getChangesInputs($event)" (closeCustemerForm)="closeCustomerForm($event)"></app-management-customer-projects>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/customer-management/pages/customer.component.spec.ts b/src/app/modules/customer-management/pages/customer.component.spec.ts
index 4e37ac34c..54a9d5923 100644
--- a/src/app/modules/customer-management/pages/customer.component.spec.ts
+++ b/src/app/modules/customer-management/pages/customer.component.spec.ts
@@ -39,10 +39,19 @@ describe('CustomerComponent', () => {
   it('should change te value of var when method is called', () => {
     component.showCustomerForm = false;
     component.activateCustomerForm();
+
     expect(component.showCustomerForm).toBeTruthy();
   });
+
   it('should call close customer function', () => {
     component.closeCustomerForm(false);
+
     expect(component.showCustomerForm).toBe(false);
   });
+
+  it('should call get changes inputs function', () => {
+    component.getChangesInputs(true);
+
+    expect(component.haveChanges).toBe(true);
+  });
 });
diff --git a/src/app/modules/customer-management/pages/customer.component.ts b/src/app/modules/customer-management/pages/customer.component.ts
index 10958f525..7aa54a4a2 100644
--- a/src/app/modules/customer-management/pages/customer.component.ts
+++ b/src/app/modules/customer-management/pages/customer.component.ts
@@ -10,6 +10,8 @@ import { Component } from '@angular/core';
 })
 export class CustomerComponent {
   showCustomerForm = false;
+  haveChanges = false;
+
   activityName: string;
 
   constructor(private store: Store<Customer>) { }
@@ -18,7 +20,12 @@ export class CustomerComponent {
     this.store.dispatch(new SetCustomerToEdit(null));
     this.showCustomerForm = true;
   }
+
   closeCustomerForm(event) {
     this.showCustomerForm = event;
   }
+
+  getChangesInputs(event) {
+    this.haveChanges = event;
+  }
 }