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

Author: jeffqev

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

@@ -2,16 +2,17 @@
   <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 class="col-4 text-center">Project ID</th>
+        <th class="col-4 text-center">Project</th>
+        <th class="col-2 text-center">Options</th>
+        <th 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>
@@ -25,6 +26,18 @@
             <i class="fa fa-trash-alt fa-xs"></i>
           </button>
         </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" [ngClass]="project.btnIcon" ></i>
+            {{project.btnName}}
+          </button>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -37,7 +50,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.ts

@@ -6,6 +6,8 @@ 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';
+import { UnarchiveProject } from '../store/project.actions';
 
 @Component({
   selector: 'app-project-list',
@@ -16,7 +18,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 +29,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 +69,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 UnarchiveProject(item.id));
+    }
+  }
+
+  setActive(status: any): string {
+    return status === 'inactive' ? 'inactive' : 'active';
+  }
 }

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.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.UpdateProjectSuccess(projectData);
+        }),
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.UpdateProjectFail(error));
+        })
+      )
+    )
+  );
 }

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

@@ -20,7 +20,6 @@ export const initialState = {
 export const projectReducer = (state: ProjectState = initialState, action: ProjectActions) => {
   const projects = [...state.customerProjects];
   switch (action.type) {
-
     case ProjectActionTypes.LOAD_PROJECTS: {
       return {
         ...state,
@@ -139,25 +138,27 @@ export const projectReducer = (state: ProjectState = initialState, action: Proje
       return {
         ...state,
         isLoading: true,
-        message: 'Loading delete project',
+        message: 'Loading archive project',
       };
     }
 
     case ProjectActionTypes.DELETE_PROJECT_SUCCESS: {
-      const newProjects = state.customerProjects.filter((project) => project.id !== action.projectId);
+      const index = projects.findIndex((project) => project.id === action.projectId);
+      const archived = { ...projects[index], ...{ status: 'inactive' } };
+      projects[index] = archived;
       return {
         ...state,
-        customerProjects: newProjects,
+        customerProjects: projects,
         isLoading: false,
-        message: 'Project removed successfully!',
+        message: 'Project archived successfully!',
       };
     }
 
     case ProjectActionTypes.DELETE_PROJECT_FAIL: {
       return {
         customerProjects: [],
         isLoading: false,
-        message: 'Something went wrong deleting the project!',
+        message: 'Something went wrong archiving the project!',
         projectToEdit: undefined,
       };
     }
@@ -168,6 +169,34 @@ export const projectReducer = (state: ProjectState = initialState, action: Proje
       };
     }
 
+    case ProjectActionTypes.UNARCHIVE_PROJECT: {
+      return {
+        ...state,
+        isLoading: true,
+        message: 'Loading unarchive project',
+      };
+    }
+
+    case ProjectActionTypes.UNARCHIVE_PROJECT_SUCCESS: {
+      const index = projects.findIndex((project) => project.id === action.payload.id);
+      projects[index] = { ...projects[index], ...action.payload };
+      return {
+        ...state,
+        customerProjects: projects,
+        isLoading: false,
+        message: 'Data unarchived successfully!',
+        projectToEdit: undefined,
+      };
+    }
+
+    case ProjectActionTypes.UNARCHIVE_PROJECT_FAIL: {
+      return {
+        isLoading: false,
+        message: 'Something went wrong unarchiving projects!',
+        projectToEdit: undefined,
+      };
+    }
+
     default:
       return state;
   }

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

@@ -5,7 +5,9 @@ const getProjectState = createFeatureSelector<ProjectState>('projects');
 
 export const getCustomerProjects = createSelector(getProjectState, (state: ProjectState) => state);
 
-export const getProjects = createSelector(getProjectState, (state: ProjectState) => state?.projects);
+export const getProjects = createSelector(getProjectState, (state: ProjectState) =>
+  state?.projects.filter((item) => item.status !== 'inactive')
+);
 
 export const getProjectToEdit = createSelector(getProjectState, (state: ProjectState) => state?.projectToEdit);
 

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

@@ -6,4 +6,20 @@ export interface Project {
   description?: string;
   project_type_id?: string;
   search_field?: string;
+  status?: any;
+}
+
+export interface ProjectUI {
+  id?: string;
+  customer_id?: string;
+  customer_name?: string;
+  name?: string;
+  description?: string;
+  project_type_id?: string;
+  search_field?: string;
+  status?: any;
+  key?: string;
+  btnColor?: string;
+  btnIcon?: string;
+  btnName?: string;
 }