fix: TT-290 added component dropdown in tables of customers, activities and projects and remove code smell

Author: kevinjlope

src/app/app.module.ts

@@ -84,6 +84,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
 import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
+import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -137,6 +138,7 @@ const maskConfig: Partial<IConfig> = {
     TechnologyReportComponent,
     TechnologyReportTableComponent,
     CalendarComponent,
+    DropdownComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -19,17 +19,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button
-            class="btn btn-sm btn--switch"
-            data-toggle="modal"
-            data-target="#deleteModal"
-            [ngClass]="activity.btnColor"
-            (click)="changeOperation(activity)">
-            <em class="fa" [ngClass]="[activity.btnIcon, activity.iconColor]"></em>
-            {{ activity.btnName }}
-            <em class="fa iconTwo" [ngClass]="activity.btnIconTwo"></em>
-            <span *ngIf="activity._status">&nbsp;</span>
-          </button>
+            <app-dropdown
+              [info] = "activity"
+              (updateInfo) = "changeOperation($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -43,7 +36,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Activity'"
+  [title]="'Inactive Activity'"
   [body]="message"
   (closeModalEvent)="deleteActivity()"
 >

src/app/modules/activities-management/components/activity-list/activity-list.component.scss

@@ -2,13 +2,6 @@
 
 .activity-list {
   overflow: auto;
-}
-.btn--switch{
-  font-size: 1rem;
-  border: 1px solid #c5c5c5;
-  border-radius: 20px;
+
 }
 
-.iconTwo{
-  color: #a1a1a1;
-}

src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -24,7 +24,7 @@ describe('ActivityListComponent', () => {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-down',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     },
@@ -33,7 +33,7 @@ describe('ActivityListComponent', () => {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     },
@@ -107,8 +107,8 @@ describe('ActivityListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new UnarchiveActivity('id'));
   });
 
-  it('openModal should set on true and display \"Are you sure you want to archive activity\"', () => {
-    const message = 'Are you sure you want to archive activity name?';
+  it('openModal should set on true and display \"Are you sure you want to inactive activity\"', () => {
+    const message = 'Are you sure you want to inactive activity name?';
     const itemData = {
       id: '1',
       name: 'name',
@@ -136,7 +136,9 @@ describe('ActivityListComponent', () => {
       _status: true,
       btnColor: 'btn-primary',
       btnIcon: 'fa-arrow-circle-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
+      iconColor: 'text-danger'
     };
 
     spyOn(component, 'unarchiveActivity');
@@ -154,7 +156,9 @@ describe('ActivityListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     spyOn(component, 'openModal');

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -30,15 +30,15 @@ export class ActivityListComponent implements OnInit {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo: 'fa-caret-down',
+      btnIconTwo: 'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     }, {
       key: 'inactive',
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     }];
@@ -74,7 +74,7 @@ export class ActivityListComponent implements OnInit {
   }
 
   openModal(item: Activity): void {
-    this.message = `Are you sure you want to archive activity ${item.name}?`;
+    this.message = `Are you sure you want to inactive activity ${item.name}?`;
     this.showModal = true;
   }
 

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

@@ -29,16 +29,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button 
-          class="btn btn-sm btn--switch"
-          data-toggle="modal" 
-          data-target="#deleteModal"
-          [ngClass]="customer.btnColor"
-          (click)="switchStatus(customer)">
-            <em class="fa" [ngClass]="[customer.btnIcon, customer.iconColor]" ></em>
-            {{customer.btnName}}
-            <em class="fa iconTwo" [ngClass]="customer.btnIconTwo"></em>
-          </button>
+          <app-dropdown
+              [info] = "customer"
+              (updateInfo) = "switchStatus($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -52,7 +46,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Delete Customer'"
+  [title]="'Inactive Customer'"
   [body]="message"
   (closeModalEvent)="deleteCustomer()"
 >

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

@@ -1,9 +0,0 @@
-.btn--switch {
-    font-size: 1rem;
-    border: 1px solid #c5c5c5;
-    border-radius: 20px;
-}
-
-.iconTwo {
-    color: #a1a1a1;
-}

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

@@ -36,7 +36,7 @@ describe('CustomerTableListComponent', () => {
       _status: false,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-down',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
       iconColor: 'text-success'
     },
@@ -45,7 +45,7 @@ describe('CustomerTableListComponent', () => {
       _status: true,
       btnColor: 'btn-white',
       btnIcon: 'fa-circle',
-      btnIconTwo:  'fa-caret-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Inactive',
       iconColor: 'text-danger'
     },
@@ -220,7 +220,7 @@ describe('CustomerTableListComponent', () => {
   });
 
   it('openModal should set on true and display "Are you sure you want to archive customer"', () => {
-    const message = 'Are you sure you want to archive name?';
+    const message = 'Are you sure you want to inactive name?';
     const itemData = {
       id: '1',
       name: 'name',
@@ -248,7 +248,9 @@ describe('CustomerTableListComponent', () => {
       _status: false,
       btnColor: 'btn-danger',
       btnIcon: 'fa-arrow-circle-down',
+      btnIconTwo:  'fa-caret-check',
       btnName: 'Archive',
+      iconColor: 'text-success'
     };
 
     spyOn(component, 'openModal');
@@ -266,7 +268,9 @@ describe('CustomerTableListComponent', () => {
       _status: true,
       btnColor: 'btn-primary',
       btnIcon: 'fa-arrow-circle-up',
+      btnIconTwo:  'fa-check',
       btnName: 'Active',
+      iconColor: 'text-danger'
     };
 
     component.switchStatus(itemData);

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

@@ -55,7 +55,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
         _status: false,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-down',
+        btnIconTwo:  'fa-check',
         btnName: 'Active',
         iconColor: 'text-success'
       },
@@ -64,7 +64,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
         _status: true,
         btnColor: 'btn-white',
         btnIcon: 'fa-circle',
-        btnIconTwo:  'fa-caret-up',
+        btnIconTwo:  'fa-check',
         btnName: 'Inactive',
         iconColor: 'text-danger'
       },
@@ -176,7 +176,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   openModal(item: Customer) {
     this.idToDelete = item.id;
-    this.message = `Are you sure you want to archive ${item.name}?`;
+    this.message = `Are you sure you want to inactive ${item.name}?`;
     this.showModal = true;
   }
 

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

@@ -20,18 +20,10 @@
           </button>
         </td>
         <td class="col-sm-2 text-center">
-          <button
-          class="btn btn-sm btn--switch"
-          data-toggle="modal"
-          data-target="#deleteModal"
-          [ngClass]="project.btnColor"
-          (click)="switchStatus(project)"
-          >
-          <em class="fa" [ngClass]="[project.btnIcon, project.iconColor]"></em>
-          {{project.btnName}}
-          <em class="fa iconTwo" [ngClass]="project.btnIconTwo"></em>
-
-          </button>
+          <app-dropdown
+            [info] = "project"
+            (updateInfo) = "switchStatus($event)"> 
+          </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -45,7 +37,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Project'"
+  [title]="'Inactive Project'"
   [body]="message"
   (closeModalEvent)="deleteProject()"
 >