Merge pull request #152 from ioet/90_Manage_customer_project_types

fix: #90 Manage customer project types

Author: enriquezrene

.gitignore

@@ -41,7 +41,7 @@ yarn-error.log
 testem.log
 /typings
 .keys.json
-**keys.ts
+keys.ts
 src/environments/keys.ts
 
 # System Files

package-lock.json

@@ -34,6 +34,7 @@ import { LoginComponent } from './modules/login/login.component';
 import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
 import { ProjectEffects } from './modules/project-management/store/project.effects';
 import { TechnologyEffects } from './modules/shared/store/technology.effects';
+import { ProjectTypeEffects } from './modules/customer-management/components/projects-type/store/project-type.effects';
 import { reducers, metaReducers } from './reducers';
 import { environment } from '../environments/environment';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
@@ -102,7 +103,7 @@ import { InjectTokenInterceptor } from './modules/shared/interceptors/inject.tok
           maxAge: 15, // Retains last 15 states
         })
       : [],
-    EffectsModule.forRoot([ProjectEffects, ActivityEffects, CustomerEffects, TechnologyEffects]),
+    EffectsModule.forRoot([ProjectEffects, ActivityEffects, CustomerEffects, TechnologyEffects, ProjectTypeEffects]),
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,

src/app/app.module.ts

@@ -52,7 +52,10 @@
       <app-create-project></app-create-project>
     </div>
     <div class="tab-pane fade mt-3" id="projectsType" role="tabpanel" aria-labelledby="projects-type-tab">
-      <app-create-project-type></app-create-project-type>
+      <div class="container">
+        <app-create-project-type></app-create-project-type>
+        <app-project-type-list></app-project-type-list>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,13 +1,35 @@
-<div class="container">
-  <form style="width: 600px;">
+
+  <form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
     <div class="form-group">
-      <input type="text" class="form-control form-control-sm" id="" aria-describedby="" placeholder="Name" />
-      <textarea class="form-control form-control-sm mt-2" id="descriptionTextArea" rows="3"
-        placeholder="Description"></textarea>
-      <button type="submit" class="btn btn-sm btn-primary">Save</button>
-      <button type="submit" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">Cancel</button>
+      <input
+        type="text"
+        class="form-control form-control-sm"
+        id="name"
+        formControlName="name"
+        aria-describedby=""
+        [class.is-invalid]="name.invalid && name.touched"
+        required
+        placeholder="Name"
+      />
+      <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+        Name is required.
+      </div>
+      <textarea
+        class="form-control form-control-sm mt-2"
+        id="descriptionTextArea"
+        rows="3"
+        placeholder="Description"
+        formControlName="description"
+      ></textarea>
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group mr-2" role="group">
+          <button type="submit" class="btn btn-sm btn-primary mb-2 ml-2 mt-2" [disabled]="!projectTypeForm.valid">Save</button>
+        </div>
+        <div class="btn-group mr-2" role="group">
+           <button class="btn btn-sm btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!projectTypeToEdit" (click)="cancelButton()">Cancel</button>
+        </div>
+      </div>
     </div>
   </form>
   <hr />
-  <app-project-type-list></app-project-type-list>
-</div>
+

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

@@ -1,24 +1,146 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
 import { CreateProjectTypeComponent } from './create-project-type.component';
+import {
+  ProjectTypeState,
+  CreateProjectType,
+  UpdateProjectType,
+  projectTypeIdToEdit,
+  allProjectTypes,
+  ResetProjectTypeToEdit,
+} from '../../store';
+import { ProjectType } from '../../../../../shared/models/project-type.model';
 
 describe('InputProjectTypeComponent', () => {
   let component: CreateProjectTypeComponent;
   let fixture: ComponentFixture<CreateProjectTypeComponent>;
+  let store: MockStore<ProjectTypeState>;
+  let projectTypeIdToEditMock;
+  let allProjectTypesMock;
+  let getProjectTypeByIdMock;
+
+  const state = {
+    data: [{ id: '', name: '', description: '' }],
+    isLoading: false,
+    message: '',
+    projectTypeIdToEdit: '',
+  };
+
+  const projectType: ProjectType = {
+    id: '1',
+    name: 'Training',
+    description: 'It is good for learning',
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [CreateProjectTypeComponent],
+      providers: [FormBuilder, provideMockStore({ initialState: state })],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateProjectTypeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+
+    store = TestBed.inject(MockStore);
+    store.setState(state);
+  });
+
+  afterEach(() => {
+    fixture.destroy();
   });
 
   it('component should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should reset form onSubmit and dispatch UpdateProjectType action', () => {
+    const currentState = {
+      data: [{ id: '1', name: 'xxx', description: 'xxxx' }],
+      isLoading: false,
+      message: '',
+      projectTypeIdToEdit: '1',
+    };
+
+    projectTypeIdToEditMock = store.overrideSelector(projectTypeIdToEdit, currentState.projectTypeIdToEdit);
+    allProjectTypesMock = store.overrideSelector(allProjectTypes, currentState.data);
+    getProjectTypeByIdMock = store.overrideSelector(allProjectTypesMock, projectTypeIdToEditMock);
+
+    component.projectTypeToEdit = getProjectTypeByIdMock;
+
+    const projectTypeForm = {
+      name: 'Develop',
+      description: 'xxx',
+    };
+
+    const projectTypeUpdated = {
+      id: component.projectTypeToEdit.id,
+      name: 'Develop',
+      description: 'xxx',
+    };
+
+    spyOn(component.projectTypeForm, 'reset');
+    spyOn(store, 'dispatch');
+
+    component.onSubmit(projectTypeForm);
+
+    expect(component.projectTypeForm.reset).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledWith(new UpdateProjectType(projectTypeUpdated));
+  });
+
+  it('should reset form onSubmit and dispatch CreateProjectType action', () => {
+    component.projectTypeToEdit = undefined;
+
+    spyOn(component.projectTypeForm, 'reset');
+    spyOn(store, 'dispatch');
+
+    component.onSubmit(projectType);
+
+    expect(component.projectTypeForm.reset).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledWith(new CreateProjectType(projectType));
+  });
+
+  it('should get name using projectTypeForm', () => {
+    spyOn(component.projectTypeForm, 'get');
+    // tslint:disable-next-line:no-unused-expression
+    component.name;
+    expect(component.projectTypeForm.get).toHaveBeenCalledWith('name');
+  });
+
+  it('should get description using projectTypeForm', () => {
+    spyOn(component.projectTypeForm, 'get');
+
+    // tslint:disable-next-line:no-unused-expression
+    component.description;
+
+    expect(component.projectTypeForm.get).toHaveBeenCalledWith('description');
+  });
+
+  it('should set data in projectTypeForm', () => {
+    const projectTypeDataForm = {
+      name: 'Training',
+      description: 'It is good for learning',
+    };
+
+    spyOn(component.projectTypeForm, 'setValue');
+
+    component.setDataToUpdate(projectType);
+    expect(component.projectTypeForm.setValue).toHaveBeenCalledTimes(1);
+    expect(component.projectTypeForm.setValue).toHaveBeenCalledWith(projectTypeDataForm);
+  });
+
+  it('should dispatch a ResetProjectTypeToEdit action', () => {
+    spyOn(store, 'dispatch');
+
+    component.cancelButton();
+
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectTypeToEdit());
+  });
 });

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

@@ -1,10 +1,68 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } 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';
 
 @Component({
   selector: 'app-create-project-type',
   templateUrl: './create-project-type.component.html',
   styleUrls: ['./create-project-type.component.scss'],
 })
-export class CreateProjectTypeComponent {
-  constructor() {}
+export class CreateProjectTypeComponent implements OnInit {
+  projectTypeForm: FormGroup;
+  projectTypeToEdit: ProjectType;
+
+  constructor(private formBuilder: FormBuilder, private store: Store<ProjectTypeState>) {
+    this.projectTypeForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      description: [''],
+    });
+  }
+
+  ngOnInit(): void {
+    const projectType$ = this.store.pipe(select(getProjectTypeById));
+    projectType$.subscribe((projectType) => {
+      this.projectTypeToEdit = projectType;
+      this.setDataToUpdate(this.projectTypeToEdit);
+    });
+  }
+
+  get name() {
+    return this.projectTypeForm.get('name');
+  }
+
+  get description() {
+    return this.projectTypeForm.get('description');
+  }
+
+  setDataToUpdate(projectTypeData: ProjectType) {
+    if (projectTypeData) {
+      this.projectTypeForm.setValue({
+        name: projectTypeData.name,
+        description: projectTypeData.description,
+      });
+    }
+  }
+
+  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.projectTypeForm.get('description').setValue('');
+    }
+  }
+
+  cancelButton() {
+    this.store.dispatch(new ResetProjectTypeToEdit());
+  }
 }

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

@@ -9,13 +9,13 @@
     <tr
       class="d-flex"
       *ngFor="
-        let projectType of projectsType | paginate: { itemsPerPage: itemsPerPage, currentPage: initPage2, id: 'second' }
+        let projectType of projectTypes | paginate: { itemsPerPage: itemsPerPage, currentPage: initPage2, id: 'second' }
       "
     >
       <td class="col-sm-9">{{ projectType.name }}</td>
       <td class="col-sm-3 text-center">
-        <button type="button" class="btn btn-sm btn-secondary"><i class="fa fa-pencil fa-xs"></i></button>
-        <button type="button" class="btn btn-sm btn-danger ml-2"><i class="fas fa-trash-alt fa-xs"></i></button>
+        <button type="button" class="btn btn-sm btn-secondary"  (click)="updateProjectType(projectType.id)"><i class="fa fa-pencil fa-xs"></i></button>
+        <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProjectType(projectType.id)"><i class="fas fa-trash-alt fa-xs"></i></button>
       </td>
     </tr>
   </tbody>