fix: #232 Cancel button should hide tabs

Author: DiegoTinitana

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

@@ -66,10 +66,12 @@ describe('CreateCustomerComponent', () => {
 
   it('should call resetCustomerForm', () => {
     spyOn(component.customerForm, 'reset');
+    spyOn(component.closeCustomerComponent, 'emit');
 
     component.resetCustomerForm();
 
     expect(component.customerForm.reset).toHaveBeenCalled();
+    expect(component.closeCustomerComponent.emit).toHaveBeenCalledWith(false);
   });
 
   it('onSubmit, dispatch CreateCustomer and LoadCustomers actions', () => {
@@ -84,12 +86,14 @@ describe('CreateCustomerComponent', () => {
   it('should call resetCustomerForm', () => {
     spyOn(component.customerForm, 'reset');
     spyOn(store, 'dispatch');
+    spyOn(component.closeCustomerComponent, 'emit');
 
     component.resetCustomerForm();
 
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new ResetCustomerToEdit());
     expect(component.customerForm.reset).toHaveBeenCalled();
+    expect(component.closeCustomerComponent.emit).toHaveBeenCalledWith(false);
   });
 
   it('should be enable tabs and show message Customer created successfully! ', () => {

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

@@ -24,6 +24,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   customerForm: FormGroup;
   @Input() areTabsActive: boolean;
   @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
+  @Output() closeCustomerComponent = new EventEmitter<boolean>();
   customerToEdit: Customer;
   editSubscription: Subscription;
 
@@ -88,5 +89,6 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   resetCustomerForm() {
     this.customerForm.reset();
     this.store.dispatch(new ResetCustomerToEdit());
+    this.closeCustomerComponent.emit(false);
   }
 }

src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.html

@@ -51,6 +51,7 @@
       <app-create-customer
         [areTabsActive]="areTabsActive"
         (changeValueAreTabsActives)="activeTabs($event)"
+        (closeCustomerComponent)="closeCustomer($event)"
       ></app-create-customer>
     </div>
     <div

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

@@ -48,4 +48,9 @@ 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);
+  });
 });

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

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-management-customer-projects',
   templateUrl: './management-customer-projects.component.html',
   styleUrls: ['./management-customer-projects.component.scss'],
 })
 export class ManagementCustomerProjectsComponent {
+  @Output() closeCustemerForm = new EventEmitter<boolean>();
   areTabsActive: boolean;
   activeTab: string;
   constructor() {}
@@ -17,6 +18,10 @@ export class ManagementCustomerProjectsComponent {
     }, 1);
   }
 
+  closeCustomer(event) {
+    this.closeCustemerForm.emit(event);
+  }
+
   showTab(activeTab: string) {
     this.activeTab = activeTab;
   }

src/app/modules/customer-management/pages/customer.component.html

@@ -10,7 +10,7 @@
   ></app-customer-list>
   <div class="row" *ngIf="showCustomerForm">
     <div class="col">
-      <app-management-customer-projects></app-management-customer-projects>
+      <app-management-customer-projects (closeCustemerForm)="closeCustomerForm($event)"></app-management-customer-projects>
     </div>
   </div>
 </div>

src/app/modules/customer-management/pages/customer.component.spec.ts

@@ -27,4 +27,8 @@ describe('CustomerComponent', () => {
     component.activateCustomerForm();
     expect(component.showCustomerForm).toBeTruthy();
   });
+  it('should call close customer function', () => {
+    component.closeCustomerForm(false);
+    expect(component.showCustomerForm).toBe(false);
+  });
 });

src/app/modules/customer-management/pages/customer.component.ts

@@ -6,10 +6,12 @@ import { Component } from '@angular/core';
   styleUrls: ['./customer.component.scss'],
 })
 export class CustomerComponent {
-
   showCustomerForm = false;
 
   activateCustomerForm() {
     this.showCustomerForm = true;
   }
+  closeCustomerForm(event) {
+    this.showCustomerForm = event;
+  }
 }