fix: #154 Filter projects and project types by customer

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> {

src/app/modules/customer-management/components/projects-type/store/project-type.actions.ts

@@ -22,6 +22,7 @@ export enum ProjectTypeActionTypes {
 
 export class LoadProjectTypes implements Action {
   public readonly type = ProjectTypeActionTypes.LOAD_PROJECT_TYPES;
+  constructor(public customerId?: string) {}
 }
 
 export class LoadProjectTypesSuccess implements Action {

src/app/modules/customer-management/components/projects-type/store/project-type.effects.ts

@@ -15,8 +15,8 @@ export class ProjectTypeEffects {
   @Effect()
   getProjectTypes$: Observable<Action> = this.actions$.pipe(
     ofType(actions.ProjectTypeActionTypes.LOAD_PROJECT_TYPES),
-    mergeMap(() =>
-      this.projectTypeService.getProjectTypes().pipe(
+    mergeMap((customerId) =>
+      this.projectTypeService.getProjectTypes(customerId).pipe(
         map((projectTypes: ProjectType[]) => {
           return new actions.LoadProjectTypesSuccess(projectTypes);
         }),

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

@@ -156,30 +156,39 @@ describe('InputProjectComponent', () => {
 
     spyOn(component.projectForm, 'reset');
     spyOn(store, 'dispatch');
-
+    component.customerId = '';
     component.onSubmit(projectForm);
+    const projectData = {
+      ...projectForm,
+      customer_id: '',
+    };
 
     expect(component.projectForm.reset).toHaveBeenCalled();
     expect(store.dispatch).toHaveBeenCalledTimes(1);
-    expect(store.dispatch).toHaveBeenCalledWith(new CreateProject(projectForm));
+    expect(store.dispatch).toHaveBeenCalledWith(new CreateProject(projectData));
   });
 
   it('should reset form onSubmit and dispatch CreateProject action with null project_type_id', () => {
     const dataForm = {
       name: 'Test',
       description: 'xxx',
-      project_type_id: '',
+      project_type_id: null,
     };
     component.projectToEdit = undefined;
 
     spyOn(component.projectForm, 'reset');
     spyOn(store, 'dispatch');
+    component.customerId = '';
+    const projectData = {
+      ...dataForm,
+      customer_id: '',
+    };
 
     component.onSubmit(dataForm);
     expect(dataForm.project_type_id).toBe(null);
     expect(component.projectForm.reset).toHaveBeenCalled();
     expect(store.dispatch).toHaveBeenCalledTimes(1);
-    expect(store.dispatch).toHaveBeenCalledWith(new CreateProject(dataForm));
+    expect(store.dispatch).toHaveBeenCalledWith(new CreateProject(projectData));
   });
 
   it('should set data in projectForm', () => {

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

@@ -8,6 +8,7 @@ import { getProjectToEdit } from '../store/project.selectors';
 import { Project, ProjectType } from 'src/app/modules/shared/models';
 import { allProjectTypes, ProjectTypeState } from '../../../projects-type/store';
 import { Subscription } from 'rxjs';
+import { getCustomerId } from 'src/app/modules/customer-management/store/customer-management.selectors';
 
 @Component({
   selector: 'app-create-project',
@@ -18,9 +19,11 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
   projectForm;
   projectToEdit: Project;
   projectsTypes: ProjectType[] = [];
+  customerId: string;
 
   projectTypesSubscription: Subscription;
   projectToEditSubscription: Subscription;
+  getCustomerIdSubscription: Subscription;
   constructor(
     private formBuilder: FormBuilder,
     private store: Store<ProjectState>,
@@ -44,11 +47,16 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
     this.projectTypesSubscription = projectsTypes$.subscribe((projectsType) => {
       this.projectsTypes = projectsType;
     });
+    const getCustomerId$ = this.store.pipe(select(getCustomerId));
+    this.getCustomerIdSubscription = getCustomerId$.subscribe((customerId) => {
+      this.customerId = customerId;
+    });
   }
 
   ngOnDestroy() {
     this.projectToEditSubscription.unsubscribe();
     this.projectTypesSubscription.unsubscribe();
+    this.getCustomerIdSubscription.unsubscribe();
   }
 
   onSubmit(formData) {
@@ -60,7 +68,7 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
       const projectData = { id: this.projectToEdit.id, ...formData };
       this.store.dispatch(new actions.UpdateProject(projectData));
     } else {
-      this.store.dispatch(new actions.CreateProject(formData));
+      this.store.dispatch(new actions.CreateProject({ ...formData, customer_id: this.customerId }));
     }
     this.resetValuesForm();
   }

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

@@ -50,14 +50,6 @@ describe('ProjectListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onInit, LoadProjects action is dispatched', () => {
-    spyOn(store, 'dispatch');
-
-    component.ngOnInit();
-
-    expect(store.dispatch).toHaveBeenCalled();
-  });
-
   it('should destroy the subscriptions', () => {
     component.projectsSubscription = new Subscription();
     const subscription = spyOn(component.projectsSubscription, 'unsubscribe');

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

@@ -24,7 +24,6 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   constructor(private store: Store<ProjectState>) {}
 
   ngOnInit(): void {
-    this.store.dispatch(new actions.LoadProjects());
     const projects$ = this.store.pipe(select(allProjects));
     this.projectsSubscription = projects$.subscribe((response) => {
       this.isLoading = response.isLoading;