Merge pull request ioet#287 from ioet/256_Display_Customer_name_during_their_edition

fix: ioet#256 Display_Customer_name_during_their_edition

Author: enriquezrene

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,

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);

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

@@ -1,3 +1,7 @@
+<hr/>
+<nav class="nav-box" *ngIf="customerName">
+  <h4 class="navbar-brand nav-title">{{customerName}}</h4>
+</nav>
 <div class="container border mb-4 mt-0">
   <ul class="nav nav-tabs mt-2" id="myTab" role="tablist">
     <li class="nav-item">
@@ -52,6 +56,7 @@
         [areTabsActive]="areTabsActive"
         (changeValueAreTabsActives)="activeTabs($event)"
         (closeCustomerComponent)="closeCustomer($event)"
+        (sendActivityName)="sendActivityName($event)"
       ></app-create-customer>
     </div>
     <div

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

@@ -1,8 +1,20 @@
 @import '../../../../../styles/colors.scss';
 
 .nav-active {
-  color: $secondary;
+  color: $primary;
 }
 .nav-item > a:hover {
   opacity: 0.6;
 }
+
+.nav-box {
+  background-color: $primary;
+  text-align: center;
+}
+
+.nav-title {
+  vertical-align: center;
+  color: white;
+  font-size: large;
+  font-weight: bold;
+}

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

@@ -1,21 +1,37 @@
 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();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ManagementCustomerProjectsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
+    store.setState(state);
   });
 
   it('component should be created', () => {

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);
+  }
 }

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;