fix: TT-24 Display project type in projects table (#685)

* fix: TT-24 Display project type in projects table

* fix: TT-24 Solving code smell problem and some fail test

* fix: TT-24 rename some variables

Author: lenshinoda

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

@@ -3,24 +3,26 @@
     <thead class="thead-blue">
       <tr class="d-flex">
         <th scope="col" class="col-4 text-center">Project ID</th>
-        <th scope="col" class="col-4 text-center">Project</th>
-        <th scope="col" class="col-2 text-center">Options</th>
-        <th scope="col" class="col-2 text-center">Visibility</th>
+        <th scope="col" class="col-3 text-center">Project</th>
+        <th scope="col" class="col-3 text-center">Project Type</th>
+        <th scope="col" class="col-1 text-center">Options</th>
+        <th scope="col" class="col-1 text-center">Visibility</th>
       </tr>
     </thead>
     <tbody>
       <tr class="d-flex" *ngFor="let project of projects">
         <td class="col-sm-4">{{ project.id }}</td>
-        <td class="col-sm-4">{{ project.name }}</td>
-        <td class="col-sm-2 text-center">
+        <td class="col-sm-3">{{ project.name }}</td>
+        <td class="col-sm-3">{{ getProjectTypeName(project.project_type_id) }}</td>
+        <td class="col-sm-1 text-center">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
         </td>
-        <td class="col-sm-2 text-center">
-          <button 
+        <td class="col-sm-1 text-center">
+          <button
           class="btn btn-sm"
-          data-toggle="modal" 
+          data-toggle="modal"
           data-target="#deleteModal"
           [ngClass]="project.btnColor"
           (click)="switchStatus(project)"

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

@@ -154,4 +154,44 @@ describe('ProjectListComponent', () => {
     component.switchStatus(itemData);
     expect(component.showModal).toBeFalse();
   });
+
+  it('getProjectType should be called to display it in projects table', () => {
+    const projectType = {
+      id: '1234',
+      name: 'BK',
+      description: 'test',
+    };
+    const id = '1234';
+
+    component.projectsTypes = [projectType];
+    component.ngOnInit();
+
+    const projectNameTest = component.getProjectTypeName(id);
+    expect(projectNameTest).toBe('BK');
+  });
+
+  it('projects table should display Project Type', (done) => {
+    const projectType = {
+      id: '1234',
+      name: 'BK',
+      description: 'test',
+    };
+
+    component.projectsTypes = [projectType];
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+
+      const tableRows = fixture.nativeElement.querySelectorAll('tr');
+      expect(tableRows.length).toBe(2);
+
+      const headerRow = tableRows[0];
+      expect(headerRow.cells[2].innerHTML).toBe('Project Type');
+
+      const dataRow = tableRows[1];
+      expect(dataRow.cells[2].innerHTML).toBe('BK');
+
+      done();
+    });
+  });
 });

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

@@ -6,6 +6,8 @@ import { ProjectState } from '../store/project.reducer';
 import { getCustomerProjects } from '../store/project.selectors';
 import * as actions from '../store/project.actions';
 import { ProjectUI } from '../../../../../shared/models/project.model';
+import { allProjectTypes, ProjectTypeState } from '../../../projects-type/store';
+import { ProjectType } from 'src/app/modules/shared/models';
 
 @Component({
   selector: 'app-project-list',
@@ -17,14 +19,19 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   itemsPerPage = ITEMS_PER_PAGE;
   isLoading = false;
   projects: ProjectUI[] = [];
+  projectsTypes: ProjectType[] = [];
   filterProjects = '';
   showModal = false;
   idToDelete: string;
   message: string;
 
   projectsSubscription: Subscription;
+  projectTypesSubscription: Subscription;
 
-  constructor(private store: Store<ProjectState>) {}
+  constructor(
+    private store: Store<ProjectState>,
+    private projectTypeStore: Store<ProjectTypeState>
+  ) {}
 
   ngOnInit(): void {
     const btnProps = [
@@ -44,6 +51,13 @@ export class ProjectListComponent implements OnInit, OnDestroy {
       },
     ];
 
+    const projectsTypes$ = this.projectTypeStore.pipe(select(allProjectTypes));
+    this.projectTypesSubscription = projectsTypes$.subscribe((projectsType) => {
+      this.projectsTypes = projectsType.map((type: ProjectType) => {
+        return type;
+      });
+    });
+
     const projects$ = this.store.pipe(select(getCustomerProjects));
     this.projectsSubscription = projects$.subscribe((response) => {
       this.isLoading = response.isLoading;
@@ -56,6 +70,16 @@ export class ProjectListComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.projectsSubscription.unsubscribe();
+    if (this.projectTypesSubscription){
+      this.projectTypesSubscription.unsubscribe();
+    }
+  }
+
+  getProjectTypeName(typeId: string) {
+    const typeProject = this.projectsTypes.find(
+      (prop) => prop.id === typeId
+    );
+    return typeProject !== undefined ? typeProject.name : '';
   }
 
   updateProject(project) {