Merge pull request #194 from ioet/154_Filter_projects_and_project_types_by_customer

fix: #154 Filter projects and project types by customer

Author: enriquezrene

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActionsSubject } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { ActivityManagementActionTypes } from '../store';

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

@@ -4,7 +4,7 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
 import { CreateCustomerComponent } from './create-customer';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
-import { LoadCustomers, ResetCustomerToEdit, UpdateCustomer } from './../../../../store/customer-management.actions';
+import { ResetCustomerToEdit, UpdateCustomer } from './../../../../store/customer-management.actions';
 import { Customer } from 'src/app/modules/shared/models';
 
 describe('CreateCustomerComponent', () => {
@@ -17,6 +17,7 @@ describe('CreateCustomerComponent', () => {
     isLoading: false,
     message: '',
     customerIdToEdit: '',
+    customerId: '',
   };
 
   const customerData: Customer = {
@@ -69,9 +70,8 @@ describe('CreateCustomerComponent', () => {
 
     component.onSubmit(customerData);
 
-    expect(store.dispatch).toHaveBeenCalledTimes(2);
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new CreateCustomer(customerData));
-    expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
   it('should call resetCustomerForm', () => {

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

@@ -8,10 +8,11 @@ import { Customer } from 'src/app/modules/shared/models';
 import {
   CustomerState,
   CreateCustomer,
-  LoadCustomers,
   UpdateCustomer,
   ResetCustomerToEdit,
 } from 'src/app/modules/customer-management/store';
+import { LoadProjectTypes } from '../../../projects-type/store';
+import { LoadProjects } from '../../../projects/components/store/project.actions';
 
 @Component({
   selector: 'app-create-customer',
@@ -64,7 +65,6 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.customerForm.reset();
     } else {
       this.store.dispatch(new CreateCustomer(customerData));
-      this.store.dispatch(new LoadCustomers());
     }
     this.showAlert = true;
     setTimeout(() => (this.showAlert = false), 3000);
@@ -85,6 +85,8 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
 
   setDataToUpdate(customerData: Customer) {
     if (customerData) {
+      this.store.dispatch(new LoadProjectTypes(customerData.id));
+      this.store.dispatch(new LoadProjects(customerData.id));
       this.changeValueAreTabsActives.emit(true);
       this.customerForm.setValue({
         name: customerData.name,

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

@@ -17,6 +17,7 @@ describe('CustomerTableListComponent', () => {
     isLoading: false,
     message: '',
     customerIdToEdit: '',
+    customerId: ''
   };
 
   beforeEach(async(() => {

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

@@ -12,13 +12,15 @@ import {
   ResetProjectTypeToEdit,
   getProjectTypeById,
 } from '../../store';
+import { getCustomerId } from 'src/app/modules/customer-management/store/customer-management.selectors';
 import { ProjectType } from '../../../../../shared/models/project-type.model';
 
 describe('InputProjectTypeComponent', () => {
   let component: CreateProjectTypeComponent;
   let fixture: ComponentFixture<CreateProjectTypeComponent>;
   let store: MockStore<ProjectTypeState>;
   let projectTypeIdToEditMock;
+  let getCustomerIdMock;
   let allProjectTypesMock;
   let getProjectTypeByIdMock;
   let getProjectTypeByIdSelectorMock;
@@ -68,12 +70,13 @@ describe('InputProjectTypeComponent', () => {
 
   it('should reset form onSubmit and dispatch UpdateProjectType action', () => {
     const currentState = {
-      data: [{ id: '1', name: 'xxx', description: 'xxxx' }],
+      data: [{ id: '1', name: 'xxx', description: 'xxxx', customerId: component.customerId }],
       isLoading: false,
       message: '',
       projectTypeIdToEdit: '1',
     };
 
+    getCustomerIdMock = store.overrideSelector(getCustomerId, 'xyz');
     projectTypeIdToEditMock = store.overrideSelector(projectTypeIdToEdit, currentState.projectTypeIdToEdit);
     allProjectTypesMock = store.overrideSelector(allProjectTypes, currentState.data);
     getProjectTypeByIdMock = store.overrideSelector(allProjectTypesMock, projectTypeIdToEditMock);
@@ -106,12 +109,16 @@ describe('InputProjectTypeComponent', () => {
 
     spyOn(component.projectTypeForm, 'reset');
     spyOn(store, 'dispatch');
-
+    component.customerId = '';
     component.onSubmit(projectType);
+    const projectTypeData = {
+      ...projectType,
+      customer_id: '',
+    };
 
     expect(component.projectTypeForm.reset).toHaveBeenCalled();
     expect(store.dispatch).toHaveBeenCalledTimes(1);
-    expect(store.dispatch).toHaveBeenCalledWith(new CreateProjectType(projectType));
+    expect(store.dispatch).toHaveBeenCalledWith(new CreateProjectType(projectTypeData));
   });
 
   it('should get name using projectTypeForm', () => {

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

@@ -1,19 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
 import { ProjectType } from '../../../../../shared/models';
 import { ProjectTypeState } from '../../store';
 import { CreateProjectType, ResetProjectTypeToEdit, UpdateProjectType, getProjectTypeById } from '../../store';
+import { getCustomerId } from 'src/app/modules/customer-management/store/customer-management.selectors';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-create-project-type',
   templateUrl: './create-project-type.component.html',
   styleUrls: ['./create-project-type.component.scss'],
 })
-export class CreateProjectTypeComponent implements OnInit {
+export class CreateProjectTypeComponent implements OnInit, OnDestroy {
   projectTypeForm: FormGroup;
   projectTypeToEdit: ProjectType;
+  customerId: string;
+  getCustomerIdSubscription: Subscription;
 
   constructor(private formBuilder: FormBuilder, private store: Store<ProjectTypeState>) {
     this.projectTypeForm = this.formBuilder.group({
@@ -28,12 +32,15 @@ export class CreateProjectTypeComponent implements OnInit {
       this.projectTypeToEdit = projectType;
       this.setDataToUpdate(this.projectTypeToEdit);
     });
+    const getCustomerId$ = this.store.pipe(select(getCustomerId));
+    this.getCustomerIdSubscription = getCustomerId$.subscribe((customerId) => {
+      this.customerId = customerId;
+    });
   }
 
   get name() {
     return this.projectTypeForm.get('name');
   }
-
   get description() {
     return this.projectTypeForm.get('description');
   }
@@ -49,20 +56,23 @@ export class CreateProjectTypeComponent implements OnInit {
 
   onSubmit(projectTypeData) {
     this.projectTypeForm.reset();
-
     if (this.projectTypeToEdit) {
       const projectType = {
         ...projectTypeData,
         id: this.projectTypeToEdit.id,
       };
       this.store.dispatch(new UpdateProjectType(projectType));
     } else {
-      this.store.dispatch(new CreateProjectType(projectTypeData));
+      this.store.dispatch(new CreateProjectType({ ...projectTypeData, customer_id: this.customerId }));
       this.projectTypeForm.get('description').setValue('');
     }
   }
 
   cancelButton() {
     this.store.dispatch(new ResetProjectTypeToEdit());
   }
+
+  ngOnDestroy(): void {
+    this.getCustomerIdSubscription.unsubscribe();
+  }
 }

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

@@ -45,13 +45,6 @@ describe('ProjectTypeTableListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onInit, LoadProjecttypes action is dispatched', () => {
-    spyOn(store, 'dispatch');
-
-    component.ngOnInit();
-    expect(store.dispatch).toHaveBeenCalled();
-  });
-
   it('onInit, projectTypes field is populated with data from store', () => {
     component.ngOnInit();
     expect(component.projectTypes).toBe(state.data);

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ITEMS_PER_PAGE } from 'src/environments/environment';
 import { Store, select } from '@ngrx/store';
 
-import { LoadProjectTypes, DeleteProjectType, SetProjectTypeToEdit, allProjectTypes } from '../../store';
+import { DeleteProjectType, SetProjectTypeToEdit, allProjectTypes } from '../../store';
 import { ProjectTypeState } from '../../store';
 import { ProjectType } from '../../../../../shared/models';
 
@@ -20,7 +20,6 @@ export class ProjectTypeListComponent implements OnInit {
   constructor(private store: Store<ProjectTypeState>) {}
 
   ngOnInit(): void {
-    this.store.dispatch(new LoadProjectTypes());
     const projectTypes$ = this.store.pipe(select(allProjectTypes));
     projectTypes$.subscribe((response) => {
       this.projectTypes = response;

src/app/modules/customer-management/components/projects-type/services/project-type.service.spec.ts

@@ -33,11 +33,11 @@ describe('Activity Service', () => {
 
   it('projectTypes are read using GET from baseUrl', () => {
     const projectTypesFoundSize = projectTypes.length;
-    service.baseUrl = 'foo';
-    service.getProjectTypes().subscribe((projecttypesInResponse) => {
+    service.baseUrl = '/project-types';
+    service.getProjectTypes({ customerId: 'xyz' }).subscribe((projecttypesInResponse) => {
       expect(projecttypesInResponse.length).toBe(projectTypesFoundSize);
     });
-    const getProjectTypesRequest = httpMock.expectOne(service.baseUrl);
+    const getProjectTypesRequest = httpMock.expectOne(`${service.baseUrl}?customer_id=xyz`);
     expect(getProjectTypesRequest.request.method).toBe('GET');
     getProjectTypesRequest.flush(projectTypes);
   });
@@ -58,7 +58,9 @@ describe('Activity Service', () => {
   it('ProjectTypes are delete using DELETE from baseUrl', () => {
     const url = `${service.baseUrl}/1`;
     service.deleteProjectType(projectTypes[0].id).subscribe((projectTypesInResponse) => {
-      expect(projectTypesInResponse.filter((activity) => activity.id !== projectTypes[0].id)).toEqual([projectTypes[1]]);
+      expect(projectTypesInResponse.filter((activity) => activity.id !== projectTypes[0].id)).toEqual([
+        projectTypes[1],
+      ]);
     });
     const getProjectTypesRequest = httpMock.expectOne(url);
     expect(getProjectTypesRequest.request.method).toBe('DELETE');

src/app/modules/customer-management/components/projects-type/services/project-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 import { environment } from '../../../../../../environments/environment';
@@ -13,8 +13,9 @@ export class ProjectTypeService {
 
   constructor(private http: HttpClient) {}
 
-  getProjectTypes(): Observable<ProjectType[]> {
-    return this.http.get<ProjectType[]>(this.baseUrl);
+  getProjectTypes(customerId: any): Observable<ProjectType[]> {
+    const params = new HttpParams().set('customer_id', customerId.customerId);
+    return this.http.get<ProjectType[]>(this.baseUrl, { params });
   }
 
   createProjectType(projectTypeData): Observable<any> {