TT-41 save technologies as part of project

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.44.2",
+  "version": "1.44.3",
   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",

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],
@@ -62,6 +62,7 @@ describe('ProjectListComponent', () => {
     getCustomerProjectsSelectorMock = store.overrideSelector(getCustomerProjects, state);
     allCustomerProjectsSelectorMock = store.overrideSelector(getProjects, state.projects);
     component.projectsSubscription = new Subscription();
+    spyOn(component, 'getProjectTypeName').and.callFake((typeId: string) => 'BK');
   });
 
   afterEach(() => {
@@ -124,6 +125,7 @@ describe('ProjectListComponent', () => {
       name: 'aaa',
       description: 'xxx',
       project_type_id: '1234',
+      technologies: ['python', 'angular'],
       status: 'activate',
       key: 'activate',
       _status: false,
@@ -143,6 +145,7 @@ describe('ProjectListComponent', () => {
       name: 'aaa',
       description: 'xxx',
       project_type_id: '1234',
+      technologies: ['python', 'angular'],
       status: 'inactive',
       key: 'inactive',
       _status: true,
@@ -155,21 +158,6 @@ describe('ProjectListComponent', () => {
     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',
@@ -186,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/customer-management/components/projects/components/project-list/project-list.component.ts

@@ -51,13 +51,6 @@ 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;
@@ -76,6 +69,12 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   }
 
   getProjectTypeName(typeId: string) {
+    const projectsTypes$ = this.projectTypeStore.pipe(select(allProjectTypes));
+    this.projectTypesSubscription = projectsTypes$.subscribe((projectsType) => {
+      this.projectsTypes = projectsType.map((type: ProjectType) => {
+        return type;
+      });
+    });
     const typeProject = this.projectsTypes.find(
       (prop) => prop.id === typeId
     );

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;