Merge 2ed3335 into 94ce9d5

Author: kevinjlope

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

@@ -2,18 +2,20 @@
   <table class="table table-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th scope="col" class="col-4 text-center">Project ID</th>
+        <th scope="col" class="col-3 text-center">Project ID</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-2 text-center">Technologies</th>
+        <th scope="col" class="col-2 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-3">{{ project.id }}</td>
         <td class="col-sm-3">{{ project.name }}</td>
-        <td class="col-sm-3">{{ getProjectTypeName(project.project_type_id) }}</td>
+        <td class="col-sm-2">{{ project.technologies ? project.technologies.toString() : ""}}</td>
+        <td class="col-sm-2">{{ 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>

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

@@ -1,5 +1,5 @@
 @import '../../../../../../../styles/colors.scss';
 
 .project-list {
-  max-height: 300px; overflow: auto; display:inline-block; width: 100%;
+  height: 300%; overflow: auto; display:inline-block; width: 100%;
 }

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

@@ -18,7 +18,7 @@ describe('ProjectListComponent', () => {
   let getCustomerProjectsSelectorMock;
   let allCustomerProjectsSelectorMock;
 
-  const project = { id: '123', name: 'aaa', description: 'xxx', project_type_id: '1234', status: 'inactive' };
+  const project = { id: '123', name: 'aaa', description: 'xxx', project_type_id: '1234', technologies: ['python', 'angular'], status: 'inactive' };
 
   const state: ProjectState = {
     projects: [project],
@@ -125,6 +125,7 @@ describe('ProjectListComponent', () => {
       name: 'aaa',
       description: 'xxx',
       project_type_id: '1234',
+      technologies: ['python', 'angular'],
       status: 'activate',
       key: 'activate',
       _status: false,
@@ -144,6 +145,7 @@ describe('ProjectListComponent', () => {
       name: 'aaa',
       description: 'xxx',
       project_type_id: '1234',
+      technologies: ['python', 'angular'],
       status: 'inactive',
       key: 'inactive',
       _status: true,
@@ -172,10 +174,10 @@ describe('ProjectListComponent', () => {
       expect(tableRows.length).toBe(2);
 
       const headerRow = tableRows[0];
-      expect(headerRow.cells[2].innerHTML).toBe('Project Type');
+      expect(headerRow.cells[3].innerHTML).toBe('Project Type');
 
       const dataRow = tableRows[1];
-      expect(dataRow.cells[2].innerHTML).toBe('BK');
+      expect(dataRow.cells[3].innerHTML).toBe('BK');
 
       done();
     });

src/app/modules/shared/models/project.model.ts

@@ -6,6 +6,7 @@ export interface Project {
   description?: string;
   project_type_id?: string;
   search_field?: string;
+  technologies?: string[];
   status?: any;
 }
 
@@ -17,6 +18,7 @@ export interface ProjectUI {
   description?: string;
   project_type_id?: string;
   search_field?: string;
+  technologies?: string[];
   status?: any;
   key?: string;
   btnColor?: string;