From 9b6516fd06da1aa876af1ac9712b10ef39ca52be Mon Sep 17 00:00:00 2001
From: Diego Tinitana <datinitanao@gmail.com>
Date: Thu, 21 May 2020 12:14:35 -0500
Subject: [PATCH] fix: #256 Display_Customer_name_during_their_edition

---
 .../create-customer/create-customer.ts        |  3 ++
 .../customer-list.component.spec.ts           | 47 +++++++++----------
 ...anagement-customer-projects.component.html |  2 +
 ...anagement-customer-projects.component.scss |  5 ++
 ...gement-customer-projects.component.spec.ts | 16 +++++++
 .../management-customer-projects.component.ts |  7 ++-
 .../pages/customer.component.ts               |  1 +
 7 files changed, 55 insertions(+), 26 deletions(-)

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 c85f4f184..66df0d864 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
@@ -24,6 +24,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   @Input() areTabsActive: boolean;
   @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
   @Output() closeCustomerComponent = new EventEmitter<boolean>();
+  @Output() sendActivityName = new EventEmitter<string>();
   customerToEdit: Customer;
   editSubscription: Subscription;
 
@@ -59,6 +60,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     } else {
       this.store.dispatch(new CreateCustomer(customerData));
     }
+    this.sendActivityName.emit(customerData.name);
     this.areTabsActive = true;
     this.changeValueAreTabsActives.emit(this.areTabsActive);
   }
@@ -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.sendActivityName.emit(customerData.name);
       this.customerForm.setValue({
         name: customerData.name,
         description: customerData.description,
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 673a7502e..038a50c8b 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
@@ -1,17 +1,17 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MockStore, provideMockStore} from '@ngrx/store/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
-import {NgxPaginationModule} from 'ngx-pagination';
-import {CustomerListComponent} from './customer-list.component';
+import { NgxPaginationModule } from 'ngx-pagination';
+import { CustomerListComponent } from './customer-list.component';
 import {
   CustomerManagementActionTypes,
   CustomerState,
   DeleteCustomer,
   LoadCustomers,
-  SetCustomerToEdit
+  SetCustomerToEdit,
 } from 'src/app/modules/customer-management/store';
-import {DataTablesModule} from 'angular-datatables';
-import {ActionsSubject} from '@ngrx/store';
+import { DataTablesModule } from 'angular-datatables';
+import { ActionsSubject } from '@ngrx/store';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
@@ -20,22 +20,18 @@ describe('CustomerTableListComponent', () => {
   const actionSub: ActionsSubject = new ActionsSubject();
 
   const state = {
-    data: [{tenant_id: 'id', name: 'name', description: 'description'}],
+    data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
     isLoading: false,
     message: '',
     customerIdToEdit: '',
-    customerId: ''
+    customerId: '',
   };
 
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NgxPaginationModule, DataTablesModule],
       declarations: [CustomerListComponent],
-      providers: [
-        provideMockStore({initialState: state}),
-        {provide: ActionsSubject, useValue: actionSub}
-      ],
+      providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
     }).compileComponents();
   }));
 
@@ -46,7 +42,6 @@ describe('CustomerTableListComponent', () => {
     store = TestBed.inject(MockStore);
     store.setState(state);
     fixture.detectChanges();
-
   });
 
   it('component should be created', () => {
@@ -79,40 +74,42 @@ describe('CustomerTableListComponent', () => {
   });
 
   const params = [
-    {actionName: 'delete', actionType: CustomerManagementActionTypes.DELETE_CUSTOMER_SUCCESS},
-    {actionName: 'update', actionType: CustomerManagementActionTypes.UPDATE_CUSTOMER_SUCCESS},
-    {actionName: 'create', actionType: CustomerManagementActionTypes.CREATE_CUSTOMER_SUCCESS}
+    { actionName: 'delete', actionType: CustomerManagementActionTypes.DELETE_CUSTOMER_SUCCESS },
+    { actionName: 'update', actionType: CustomerManagementActionTypes.UPDATE_CUSTOMER_SUCCESS },
+    { actionName: 'create', actionType: CustomerManagementActionTypes.CREATE_CUSTOMER_SUCCESS },
   ];
 
-  params.map(param =>
+  params.map((param) =>
     it(`on success ${param.actionName} customer, the load all customer action should be triggered`, () => {
       const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
       const action = {
-        type: param.actionType
+        type: param.actionType,
       };
       spyOn(store, 'dispatch');
 
       actionSubject.next(action);
 
       expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
-    }));
+    })
+  );
 
-  params.map(param =>
+  params.map((param) =>
     it(`on success ${param.actionName} customer, the customer form should be disabled`, () => {
       const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
       const action = {
-        type: param.actionType
+        type: param.actionType,
       };
       actionSubject.next(action);
 
       expect(component.showCustomerForm).toBe(false);
-    }));
+    })
+  );
 
   it('on success load customers, the customer list should be populated', () => {
     const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
     const action = {
       type: CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS,
-      payload: state.data
+      payload: state.data,
     };
 
     actionSubject.next(action);
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 f2ccd97be..452ea6dfe 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
@@ -1,4 +1,5 @@
 <div class="container border mb-4 mt-0">
+  <h3 class="title">{{customerName}}</h3>
   <ul class="nav nav-tabs mt-2" id="myTab" role="tablist">
     <li class="nav-item">
       <a
@@ -52,6 +53,7 @@
         [areTabsActive]="areTabsActive"
         (changeValueAreTabsActives)="activeTabs($event)"
         (closeCustomerComponent)="closeCustomer($event)"
+        (sendActivityName)="sendActivityName($event)"
       ></app-create-customer>
     </div>
     <div
diff --git a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
index 926138ba1..12b6dffea 100644
--- a/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
+++ b/src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.scss
@@ -6,3 +6,8 @@
 .nav-item > a:hover {
   opacity: 0.6;
 }
+
+.title {
+  text-align: center;
+  padding: 12px;
+}
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 d947c8396..3a730721d 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
@@ -1,14 +1,28 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ManagementCustomerProjectsComponent } from './management-customer-projects.component';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { CustomerState } from '../../store';
 
 describe('ManagmentCustomerProjectsComponent', () => {
   let component: ManagementCustomerProjectsComponent;
   let fixture: ComponentFixture<ManagementCustomerProjectsComponent>;
+  let store: MockStore<CustomerState>;
+
+  const state = {
+    data: [],
+    isLoading: false,
+    message: '',
+    customerIdToEdit: '',
+    customerId: '',
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ManagementCustomerProjectsComponent],
+      providers: [
+        provideMockStore({ initialState: state })
+      ],
     }).compileComponents();
   }));
 
@@ -16,6 +30,8 @@ describe('ManagmentCustomerProjectsComponent', () => {
     fixture = TestBed.createComponent(ManagementCustomerProjectsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
+    store.setState(state);
   });
 
   it('component should be created', () => {
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 b1fd07b4e..59bbcb3f7 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
@@ -9,6 +9,7 @@ export class ManagementCustomerProjectsComponent {
   @Output() closeCustemerForm = new EventEmitter<boolean>();
   areTabsActive: boolean;
   activeTab: string;
+  customerName: string;
   constructor() {}
 
   activeTabs($areTabsActive: boolean) {
@@ -25,5 +26,9 @@ export class ManagementCustomerProjectsComponent {
   showTab(activeTab: string) {
     this.activeTab = activeTab;
   }
-
+  sendActivityName(event) {
+    setTimeout(() => {
+      this.customerName = event;
+    }, 1);
+  }
 }
diff --git a/src/app/modules/customer-management/pages/customer.component.ts b/src/app/modules/customer-management/pages/customer.component.ts
index f70f9412c..d07e63597 100644
--- a/src/app/modules/customer-management/pages/customer.component.ts
+++ b/src/app/modules/customer-management/pages/customer.component.ts
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 })
 export class CustomerComponent {
   showCustomerForm = false;
+  activityName: string;
 
   activateCustomerForm() {
     this.showCustomerForm = true;