Merge pull request #290 from ioet/256_Display_Customer_name_during_their_edition

256 display customer name during their edition

Author: enriquezrene

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

@@ -3,7 +3,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
 import { Subscription } from 'rxjs';
-import { getCustomerById } from './../../../../store/customer-management.selectors';
+import { getCustomerUnderEdition } from './../../../../store/customer-management.selectors';
 import { Customer } from 'src/app/modules/shared/models';
 import {
   CustomerState,
@@ -24,7 +24,6 @@ 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;
 
@@ -38,7 +37,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.areTabsActive = true;
     this.changeValueAreTabsActives.emit(this.areTabsActive);
-    const customers$ = this.store.pipe(select(getCustomerById));
+    const customers$ = this.store.pipe(select(getCustomerUnderEdition));
     this.editSubscription = customers$.subscribe((customer) => {
       this.customerToEdit = customer;
       this.setDataToUpdate(this.customerToEdit);
@@ -60,7 +59,6 @@ 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);
   }
@@ -70,11 +68,12 @@ 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,
       });
+    } else {
+      this.customerForm.reset();
     }
   }
 

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

@@ -81,7 +81,7 @@ describe('CustomerTableListComponent', () => {
 
   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 actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
       const action = {
         type: param.actionType,
       };
@@ -95,7 +95,7 @@ describe('CustomerTableListComponent', () => {
 
   params.map((param) =>
     it(`on success ${param.actionName} customer, the customer form should be disabled`, () => {
-      const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+      const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
       const action = {
         type: param.actionType,
       };
@@ -106,7 +106,7 @@ describe('CustomerTableListComponent', () => {
   );
 
   it('on success load customers, the customer list should be populated', () => {
-    const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
     const action = {
       type: CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS,
       payload: state.data,

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

@@ -31,8 +31,7 @@ export class CustomerListComponent implements OnInit, OnDestroy {
   loadCustomersSubscription: Subscription;
   changeCustomerSubscription: Subscription;
 
-  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) {
-  }
+  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
 
   ngOnInit(): void {
     this.dtOptions = {

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

@@ -56,7 +56,6 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
         [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.ts

@@ -1,16 +1,31 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { getCustomerUnderEdition } from './../../store/customer-management.selectors';
+import { Customer } from 'src/app/modules/shared/models';
+import { Store, select } from '@ngrx/store';
+import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-management-customer-projects',
   templateUrl: './management-customer-projects.component.html',
   styleUrls: ['./management-customer-projects.component.scss'],
 })
-export class ManagementCustomerProjectsComponent {
+export class ManagementCustomerProjectsComponent implements OnInit {
   @Output() closeCustemerForm = new EventEmitter<boolean>();
   areTabsActive: boolean;
   activeTab: string;
   customerName: string;
-  constructor() {}
+
+  constructor(private store: Store<Customer>) { }
+
+  ngOnInit(): void {
+    const customers$ = this.store.pipe(select(getCustomerUnderEdition));
+    customers$.subscribe((customer) => {
+      if (customer) {
+        this.customerName = customer.name;
+      } else {
+        this.customerName = undefined;
+      }
+    });
+  }
 
   activeTabs($areTabsActive: boolean) {
     setTimeout(() => {
@@ -26,9 +41,5 @@ export class ManagementCustomerProjectsComponent {
   showTab(activeTab: string) {
     this.activeTab = activeTab;
   }
-  sendActivityName(event) {
-    setTimeout(() => {
-      this.customerName = event;
-    }, 1);
-  }
+
 }

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

@@ -1,27 +1,41 @@
+import { SetCustomerToEdit } from 'src/app/modules/customer-management/store';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { Customer } from 'src/app/modules/shared/models';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CustomerComponent } from './customer.component';
 
 describe('CustomerComponent', () => {
   let component: CustomerComponent;
   let fixture: ComponentFixture<CustomerComponent>;
+  let store: MockStore<Customer>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [CustomerComponent],
+      providers: [provideMockStore({ initialState: {} })],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CustomerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
   });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
 
+  it('dispatches an action on activateCustomerForm', () => {
+    spyOn(store, 'dispatch');
+
+    component.activateCustomerForm();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetCustomerToEdit(null));
+  });
+
   it('should change te value of var when method is called', () => {
     component.showCustomerForm = false;
     component.activateCustomerForm();

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

@@ -1,3 +1,6 @@
+import { Store } from '@ngrx/store';
+import { Customer } from 'src/app/modules/shared/models';
+import { SetCustomerToEdit } from 'src/app/modules/customer-management/store';
 import { Component } from '@angular/core';
 
 @Component({
@@ -9,7 +12,10 @@ export class CustomerComponent {
   showCustomerForm = false;
   activityName: string;
 
+  constructor(private store: Store<Customer>) { }
+
   activateCustomerForm() {
+    this.store.dispatch(new SetCustomerToEdit(null));
     this.showCustomerForm = true;
   }
   closeCustomerForm(event) {

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

@@ -27,7 +27,7 @@ export const getCustomerId = createSelector(getCustomerState, (state: CustomerSt
   }
 });
 
-export const getCustomerById = createSelector(allCustomers, customerIdtoEdit, (customers, customerIdToEdit) => {
+export const getCustomerUnderEdition = createSelector(allCustomers, customerIdtoEdit, (customers, customerIdToEdit) => {
   if (customers) {
     return customers.find((customer) => {
       return customer.id === customerIdToEdit;

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -43,7 +43,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   showlist: boolean;
   errorDate: boolean;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private renderer: Renderer2) {
+  constructor(private formBuilder: FormBuilder, private store: Store<Merged>) {
     this.entryForm = this.formBuilder.group({
       project_id: '',
       activity_id: '',