Tt 218 dont allow deleting projects (#679)

* feat: TT-218-Dont-allow-deleting-projects

* test: TT-218-Dont-allow-deleting-projects

* feat: TT-218 remove delete button

* refactor: TT-218 sonarcloud

Author: jeffqev

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

@@ -2,27 +2,31 @@
   <table class="table table-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-4">Project ID</th>
-        <th class="col-5">Project</th>
-        <th class="col-3 text-center"></th>
+        <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>
       </tr>
     </thead>
     <tbody>
       <tr class="d-flex" *ngFor="let project of projects">
         <td class="col-sm-4">{{ project.id }}</td>
-        <td class="col-sm-5">{{ project.name }}</td>
-        <td class="col-sm-3 text-center">
+        <td class="col-sm-4">{{ project.name }}</td>
+        <td class="col-sm-2 text-center">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
-          <button
-            type="button"
-            data-toggle="modal"
-            data-target="#deleteModal"
-            class="btn btn-sm btn-danger ml-2"
-            (click)="openModal(project)"
+        </td>
+        <td class="col-sm-2 text-center">
+          <button 
+          class="btn btn-sm"
+          data-toggle="modal" 
+          data-target="#deleteModal"
+          [ngClass]="project.btnColor"
+          (click)="switchStatus(project)"
           >
-            <i class="fa fa-trash-alt fa-xs"></i>
+            <em class="fa" [ngClass]="project.btnIcon" ></em>
+            {{project.btnName}}
           </button>
         </td>
       </tr>
@@ -37,7 +41,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Delete Project'"
+  [title]="'Archive Project'"
   [body]="message"
   (closeModalEvent)="deleteProject()"
 >

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

@@ -9,6 +9,7 @@ import { ProjectState } from '../store/project.reducer';
 import { getCustomerProjects } from '../store/project.selectors';
 import { SetProjectToEdit, DeleteProject } from '../store/project.actions';
 import { FilterProjectPipe } from '../../../../../shared/pipes';
+import { ProjectUI } from 'src/app/modules/shared/models';
 
 describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
@@ -17,18 +18,34 @@ describe('ProjectListComponent', () => {
   let getCustomerProjectsSelectorMock;
   let allCustomerProjectsSelectorMock;
 
+  const project = { id: '123', name: 'aaa', description: 'xxx', project_type_id: '1234', status: 'inactive' };
+
   const state: ProjectState = {
-    projects: [],
-    customerProjects: [],
+    projects: [project],
+    customerProjects: [project],
     isLoading: false,
     message: '',
     projectToEdit: undefined,
   };
 
-  const project = { id: '123', name: 'aaa', description: 'xxx', project_type_id: '1234' };
-
-  beforeEach(
-    () => {
+  const btnProps = [
+    {
+      key: 'active',
+      _status: false,
+      btnColor: 'btn-danger',
+      btnIcon: 'fa-arrow-circle-down',
+      btnName: 'Archive',
+    },
+    {
+      key: 'inactive',
+      _status: true,
+      btnColor: 'btn-primary',
+      btnIcon: 'fa-arrow-circle-up',
+      btnName: 'Active',
+    },
+  ];
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [NgxPaginationModule],
       declarations: [ProjectListComponent, FilterProjectPipe],
@@ -58,7 +75,11 @@ describe('ProjectListComponent', () => {
   it('loads projects from state onInit', () => {
     component.ngOnInit();
 
-    expect(component.projects).toBe(state.customerProjects);
+    const StateWithBtnProperties = state.customerProjects.map((projectfilter: ProjectUI) => {
+      const addProps = btnProps.find((prop) => prop.key === component.setActive(projectfilter.status));
+      return { ...projectfilter, ...addProps };
+    });
+    expect(component.projects).toEqual(StateWithBtnProperties);
   });
 
   it('should destroy the subscriptions', () => {
@@ -96,4 +117,41 @@ describe('ProjectListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteProject(project.id));
   });
+
+  it('switchStatus should call openModal() on item.status = activate', () => {
+    const itemData = {
+      id: '123',
+      name: 'aaa',
+      description: 'xxx',
+      project_type_id: '1234',
+      status: 'activate',
+      key: 'activate',
+      _status: false,
+      btnColor: 'btn-danger',
+      btnIcon: 'fa-arrow-circle-down',
+      btnName: 'Archive',
+    };
+
+    spyOn(component, 'openModal');
+    component.switchStatus(itemData);
+    expect(component.openModal).toHaveBeenCalled();
+  });
+
+  it('switchStatus should set showModal false when item.status = inactive', () => {
+    const itemData = {
+      id: '123',
+      name: 'aaa',
+      description: 'xxx',
+      project_type_id: '1234',
+      status: 'inactive',
+      key: 'inactive',
+      _status: true,
+      btnColor: 'btn-primary',
+      btnIcon: 'fa-arrow-circle-up',
+      btnName: 'Active',
+    };
+
+    component.switchStatus(itemData);
+    expect(component.showModal).toBeFalse();
+  });
 });

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

@@ -2,10 +2,10 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { ITEMS_PER_PAGE } from 'src/environments/environment';
-import { Project } from 'src/app/modules/shared/models';
 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';
 
 @Component({
   selector: 'app-project-list',
@@ -16,7 +16,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   initPage3 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
   isLoading = false;
-  projects: Project[] = [];
+  projects: ProjectUI[] = [];
   filterProjects = '';
   showModal = false;
   idToDelete: string;
@@ -27,10 +27,30 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   constructor(private store: Store<ProjectState>) {}
 
   ngOnInit(): void {
+    const btnProps = [
+      {
+        key: 'active',
+        _status: false,
+        btnColor: 'btn-danger',
+        btnIcon: 'fa-arrow-circle-down',
+        btnName: 'Archive',
+      },
+      {
+        key: 'inactive',
+        _status: true,
+        btnColor: 'btn-primary',
+        btnIcon: 'fa-arrow-circle-up',
+        btnName: 'Active',
+      },
+    ];
+
     const projects$ = this.store.pipe(select(getCustomerProjects));
     this.projectsSubscription = projects$.subscribe((response) => {
       this.isLoading = response.isLoading;
-      this.projects = response.customerProjects;
+      this.projects = response.customerProjects.map((project: ProjectUI) => {
+        const addProps = btnProps.find((prop) => prop.key === this.setActive(project.status));
+        return { ...project, ...addProps };
+      });
     });
   }
 
@@ -47,9 +67,22 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     this.showModal = false;
   }
 
-  openModal(item: Project) {
+  openModal(item: ProjectUI) {
     this.idToDelete = item.id;
-    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.message = `Are you sure you want archive ${item.name}?`;
     this.showModal = true;
   }
+
+  switchStatus(item: ProjectUI): void {
+    if (item.key !== 'inactive') {
+      this.openModal(item);
+    } else {
+      this.showModal = false;
+      this.store.dispatch(new actions.UnarchiveProject(item.id));
+    }
+  }
+
+  setActive(status: any): string {
+    return status === 'inactive' ? 'inactive' : 'active';
+  }
 }

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

@@ -81,4 +81,22 @@ describe('Actions for Projects', () => {
     const deleteProjectFail = new actions.DeleteProjectFail('error');
     expect(deleteProjectFail.type).toEqual(actions.ProjectActionTypes.DELETE_PROJECT_FAIL);
   });
+
+  it('UnarchiveProject type is ProjectActionTypes.UNARCHIVE_PROJECT', () => {
+    const unarchiveProject = new actions.UnarchiveProject('id');
+    expect(unarchiveProject.type).toEqual(actions.ProjectActionTypes.UNARCHIVE_PROJECT);
+  });
+
+  it('UnarchiveProjectSuccess type is ProjectActionTypes.UNARCHIVE_PROJECT_SUCCESS', () => {
+    const unarchiveProjecttSuccess = new actions.UnarchiveProjectSuccess({
+      id: 'id_test',
+      status: 'active',
+    });
+    expect(unarchiveProjecttSuccess.type).toEqual(actions.ProjectActionTypes.UNARCHIVE_PROJECT_SUCCESS);
+  });
+
+  it('UnarchiveProjectProjectFail type is ProjectActionTypes.UNARCHIVE_PROJECT_FAIL', () => {
+    const unarchiveProjecttFail = new actions.UnarchiveProjectFail('error');
+    expect(unarchiveProjecttFail.type).toEqual(actions.ProjectActionTypes.UNARCHIVE_PROJECT_FAIL);
+  });
 });

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

@@ -1,5 +1,5 @@
 import { Action } from '@ngrx/store';
-import { Project } from '../../../../../shared/models';
+import { Project, Status } from '../../../../../shared/models';
 
 export enum ProjectActionTypes {
   LOAD_PROJECTS = '[Projects] LOAD_PROJECTS',
@@ -20,6 +20,9 @@ export enum ProjectActionTypes {
   DELETE_PROJECT_SUCCESS = '[Projects] DELETE_PROJECT_SUCESS',
   DELETE_PROJECT_FAIL = '[Projects] DELETE_PROJECT_FAIL',
   CLEAN_CUSTOMER_PROJECTS = '[Projects] CLEAN_CUSTOMER_PROJECTS',
+  UNARCHIVE_PROJECT = '[Projects] UNARCHIVE_PROJECT',
+  UNARCHIVE_PROJECT_SUCCESS = '[Projects] UNARCHIVE_PROJECT_SUCCESS',
+  UNARCHIVE_PROJECT_FAIL = '[Projects] UNARCHIVE_PROJECT_FAIL',
 }
 
 export class CleanCustomerProjects implements Action {
@@ -42,7 +45,6 @@ export class LoadProjectsFail implements Action {
   constructor(public error: string) {}
 }
 
-
 export class LoadCustomerProjects implements Action {
   public readonly type = ProjectActionTypes.LOAD_CUSTOMER_PROJECTS;
   constructor(public customerId: string) {}
@@ -122,6 +124,24 @@ export class DeleteProjectFail implements Action {
   constructor(public error: string) {}
 }
 
+export class UnarchiveProject implements Action {
+  public readonly type = ProjectActionTypes.UNARCHIVE_PROJECT;
+
+  constructor(public payload: string) {}
+}
+
+export class UnarchiveProjectSuccess implements Action {
+  public readonly type = ProjectActionTypes.UNARCHIVE_PROJECT_SUCCESS;
+
+  constructor(public payload: Status) {}
+}
+
+export class UnarchiveProjectFail implements Action {
+  public readonly type = ProjectActionTypes.UNARCHIVE_PROJECT_FAIL;
+
+  constructor(public error: string) {}
+}
+
 export type ProjectActions =
   | CleanCustomerProjects
   | LoadProjects
@@ -140,4 +160,7 @@ export type ProjectActions =
   | ResetProjectToEdit
   | DeleteProject
   | DeleteProjectSuccess
-  | DeleteProjectFail;
+  | DeleteProjectFail
+  | UnarchiveProject
+  | UnarchiveProjectSuccess
+  | UnarchiveProjectFail;

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

@@ -15,7 +15,7 @@ describe('ProjectEffects', () => {
   let effects: ProjectEffects;
   let service: ProjectService;
   let toastrService;
-  const project: Project = { id: 'id', name: 'name', description: 'descrition' };
+  const project: Project = { id: 'id', name: 'name', description: 'descrition', status: 'inactive' };
   const projects: Project[] = [];
 
   beforeEach(() => {
@@ -146,4 +146,27 @@ describe('ProjectEffects', () => {
       expect(action.type).toEqual(ProjectActionTypes.LOAD_CUSTOMER_PROJECTS_FAIL);
     });
   });
+
+  it('action type is UNARCHIVE_PROJECT_SUCCESS when service is executed sucessfully', async () => {
+    const projectId = 'projectId';
+    actions$ = of({ type: ProjectActionTypes.UNARCHIVE_PROJECT, projectId });
+    spyOn(toastrService, 'success');
+    spyOn(service, 'updateProject').and.returnValue(of(project));
+
+    effects.unarchiveProject$.subscribe((action) => {
+      expect(toastrService.success).toHaveBeenCalledWith(INFO_SAVED_SUCCESSFULLY);
+      expect(action.type).toEqual(ProjectActionTypes.UNARCHIVE_PROJECT_SUCCESS);
+    });
+  });
+
+  it('action type is UNARCHIVE_PROJECT_FAIL when service fail in execution', async () => {
+    actions$ = of({ type: ProjectActionTypes.UNARCHIVE_PROJECT, project });
+    spyOn(toastrService, 'error');
+    spyOn(service, 'updateProject').and.returnValue(throwError({ error: { message: 'fail!' } }));
+
+    effects.unarchiveProject$.subscribe((action) => {
+      expect(toastrService.error).toHaveBeenCalled();
+      expect(action.type).toEqual(ProjectActionTypes.UNARCHIVE_PROJECT_FAIL);
+    });
+  });
 });

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

@@ -7,6 +7,7 @@ import { ofType, Actions, Effect } from '@ngrx/effects';
 import { ProjectService } from '../services/project.service';
 import * as actions from './project.actions';
 import { ToastrService } from 'ngx-toastr';
+import { Status } from 'src/app/modules/shared/models';
 
 @Injectable()
 export class ProjectEffects {
@@ -101,4 +102,25 @@ export class ProjectEffects {
       )
     )
   );
+
+  @Effect()
+  unarchiveProject$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ProjectActionTypes.UNARCHIVE_PROJECT),
+    map((action: actions.UnarchiveProject) => ({
+      id: action.payload,
+      status: 'active',
+    })),
+    mergeMap((project: Status) =>
+      this.projectService.updateProject(project).pipe(
+        map((projectData) => {
+          this.toastrService.success(INFO_SAVED_SUCCESSFULLY);
+          return new actions.UnarchiveProjectSuccess(projectData);
+        }),
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.UnarchiveProjectFail(error));
+        })
+      )
+    )
+  );
 }